ナイチンゲールにはなれない!

看護師おかえりなさいのBLOG

キャプチャーに矢印・注釈を追加Chrome拡張機能で画像編集はおまかせ!

キャプチャーに矢印・注釈を追加Chrome拡張機能で画像編集はおまかせ!

Webサイトの投稿の際、現在開いているブラウザー上のページに説明文や簡単な矢印などを使って細く説明したい時はありませんか?

スクリーンショットを取り込む

私は今まで、ページのキャプチャーはWindowsの標準アプリSnipping Toolを使ってスクリーンショットキャプチャーを取り込んでいました。

Snipping Toolは、Windowsにプリインストールされているアプリであり、いつでも呼び出せて簡単に使えるので便利でした。

特に任意の範囲を囲んで、すぐ画像として保存できるのでそのスピーディーさはメリットの一つです。

しかしながら、さらに説明したい時に準備されている機能が赤ペンやマーカーといったものがあるのですが、マウスで囲んで使用するのでガクガクと非常に見にくい点がデメリットでもありました。

実際にこの投稿の編集中にSnipping Toolという箇所を赤ペン機能で囲んでみましたがご覧のとおりです。あまり美しくはありませんね。

キャプチャ

Awesome Screenshot: キャプチャーと注釈

今回から導入するChromeの拡張機能 Awesome Screenshot: キャプチャーと注釈 のインストールは、Chromeウェブストア で検索すると入手できます。

インストールされたものは、Chromeブラウザ機能の「その他のツール」➡「拡張機能」にて確認できます。

ブラウザーにインストールされれば、次のようなアイコンが追加されます。

キャプチャ

実は上のキャプチャーはSnipping Toolにて取り込みました。なぜかというとアイコンはブラウザー画面以外のエリアにありキャプチャーすることが出来なかったからです。

ブラウザー画面内であればかなり多機能な機能が使えそうです。

Awesome Screenshot: キャプチャーと注釈を使ってキャプチャーしたものへ注釈を作成してみました。

投稿の編集 ‹ アクセストリガー — WordPress

Snipping Toolより綺麗に赤ペンも引けますし手書き感は皆無ですね。

使い方としては、メニューはこのようにあります。

キャプチャ

Capture Visible Part of Pageは、ブラウザで現在表示させているエリアから選択します。つまり見えている部分のみキャプチャーされます。

Capture Selected Areaは、選択した部分です。任意の箇所を選んでキャプチャー可能です。

Capture Entire Pageは、ページ全体を選択範囲としてキャプチャーします。

上記のキャプチャーしたいエリアから一つ選択して確定させたら、その次に文字や矢印テキストを追加して編集するといった流れで作成していきます。

編集時にはこのようなツールが出てきます。

キャプチャツールの内容は以下の通りです

  • スクリーンショットの一部を切り取る
  • 四角で囲む
  • まるで囲む
  • 矢印
  • 棒線
  • 自由に線を書く
  • 太い線
  • 水で濡らしたようににじませるエフェクトをかける
  • テキスト
  • 注釈のカラーチェンジ

全ての編集が完了したら「完了」を押して終了です。

最後に保存して完成です。

クリップボードにコピーしておくこともできるようです。

いかがでしょうか、色いろ機能が多くて使いやすいかというと微妙ですが、読みやすい丁寧なページ作りは今後求められる方向になっていくと思うので、入れておいて損はなさそうです。

結局、手書き風の手作り感でいいページや解説には、Snipping Toolを使い詳細で丁寧な解説にはAwesome Screenshot: キャプチャーと注釈を使用するといった使い分けでもいいのかも知れませんね。


コメントフォーム

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Return Top