ブログ記事をわかりやすくする！画像加工ツールの紹介と使いかたのコツ
画像を制するものは、ブログを制す
主に技術的な記事において、記事の内容がわかりやすいか、わかりづらいか大きく左右するのが画像です。
わかりやすい言葉遣いも大切ですが、画像や図表は何文字分もの情報量を一発で伝えることができる表現手法です。わかりやすさの面では、文章でいくら長々と事細かに説明しても、一枚の絵に負けてしまうこともあります。それほど画像や図表の威力は大きいのです。ぜひ効果的に使っていきたいですよね。
しかしながら、画像はただぺたぺた貼り付けておけば良いというわけではありません。内容を補足するために文字を足したり矢印を付けたりすることで、よりわかりやすいものにすることができます。とはいうものの、画像の加工って結構面倒です。
そこでわかりやすい画像を素早く作ることができる画像加工ツール・サービスをいくつかピックアップしました。使いかたのコツも一緒に紹介したいと思います！
Skitch - ブログに使える機能が盛り沢山な画像加工ツール
http://evernote.com/intl/jp/skitch/
まずは超便利ツールである「Skitch」です。主な機能は「画面キャプチャ」「文章・図形の挿入」「モザイク加工」などですかね。元々は有料ソフトでしたが Evernote が買収したことで無料ソフトに生まれ変わりました。
特徴は何と言っても「手軽さ！」ちょっとした説明を付け加えるだけならほんの一瞬で作業が終わります。「画像に説明を入れる」という機能に特化しているので操作も迷いません。もうこれはブロガー必携！のツールだと思います。
ということで、よく使う機能をちょっとご紹介します。
画面キャプチャ
Skitch には画面キャプチャ機能があるので、キャプチャ画像を撮ってそのまま編集という流れ作業で画像を作ることができます。Win ユーザーであれば PrintScreen、 Mac ユーザーであれば Cmd + Shift + 4 とかグラブとか使っても画面キャプチャが撮れますが、 Skitch を使ったほうがかなりスムーズに作業できます。
文字・図形の挿入
最高に便利な機能です。良い感じの文字や図形が挿入できます。良い感じというのがポイントです。文字や図形には白枠とドロップシャドウが自動で付いてくれるので、どんな画像の上に載せても目立ちます。塗りの色もデフォルトで見やすい色が揃っているので迷う必要もありません！
モザイク加工
ドラッグした矩形の中を良い感じにモザイク加工してくれる、地味に便利な機能です。技術記事のキャプチャを撮っていると IP や URL など公開してはいけないものがどうしても出てきてしまいます。そういうものは速攻でモザイク加工してしまいましょう！
Skitch (v1) - スポットライト画像を超簡単に作成できる Skitch 旧バージョン
http://evernote.com/intl/jp/skitch/
次に紹介するのもこれまた同じく Skitch です。しかも旧バージョン。何故旧バージョンを紹介するのかと言うと、 Skitch は旧バージョンにしかない機能がいくつかあるからです。旧バージョンは上記 URL のダウンロードサイトからダウンロードすることができます。Mac の場合はアプリケーションフォルダに入れる前にファイル名を変更しておく ( Skitch-01.app とかにする) と最新バージョンと共存させることができます。
スポットライト画像を作成するには
旧バージョンしかない機能中でもかなり有用なのが「塗りつぶし」機能です。これをうまく使うとスポットライトのような画像を簡単に作ることができます！ということで作りかたを紹介したいと思います。下図のような画像を作ってみたいと思います！
まずは適当な画像ファイルを開き、スポットライトで明るくしたい箇所を矩形(もしくは円形)で囲みます。
次にカラーピッカーから半透明の黒を選びます。
次に塗りつぶしツールを選びます。
先ほど描いた矩形(もしくは円形)の範囲外の好きなところをクリックします。 すると囲った外が暗くなり、スポットライトっぽくなります。画面のどこを指しているかすごくわかりやすくなりましたね！
Photoshop などを使わなくてもこんなに手軽に作れるのはかなり魅力的ですね！
Screen Capture - Web ページのキャプチャがサクッと撮れる Chrome プラグイン
https://chrome.google.com/webstore/detail/screen-capture-by-google/cpngackimfmofbokmjmljamhdncknpmg
Web ページのスクリーンショットを撮りたい場合は Google が提供している Chrome プラグインが便利です。
表示中のページだけではなく、Web ページ全体や Web ページの選択した一部のみもキャプチャを撮ることができます。
記事の内容によっては Web ページ全体を載せたい場合もあるので、Web ページ全体のキャプチャが撮れるのは良いですよね。キーボードショートカットも割り当てることができるので、素早くキャプチャを撮ることができます。
Pixir Express - コラージュ画像をサクサク作成できる Web アプリ
次に紹介するのはコラージュ画像やエフェクトのかかった画像をサクサク作成できる「Pixir Express」です。UI がとにかくシンプルなので超手軽にコラージュ画像を作ることができます。例えば「ひと通りの手順をひとつの画像にまとめたい」といったときに便利です。
上図は4枚の画像をコラージュしましたが、もっと多い枚数もコラージュできます。いろいろなレイアウトが用意されているのでいろいろな場面で活用できそうですね！
コラージュ画像を作成する機能だけではなく、画像エフェクトの機能もかなり充実しているのでめちゃめちゃ便利です。
機能が豊富な上に使いやすいのでいろいろな場面で活躍してくれること間違いなしです！
Photoshop Express Editor - Photoshop の Webアプリ
http://www.photoshop.com/tools/expresseditor?wf=editor
最後におまけでご紹介するのは Photoshop の Web アプリです。スケッチ調、色相変換、ピクセレート、着色、変形など Photoshop 的なエフェクトを簡単に付けることができます。テキストや吹き出しなどの装飾も付けることができます。動作も軽快です。ブログの解説画像の加工用というよりは、ブログの挿絵的な画像作りに使えると思います。文字だけのブログよりも少しだけ挿絵があるだけでもかなり見栄えが良くなりますし、ぜひ使ってみてはいかがでしょうか？
まとめ
私事ではありますが、クラスメソッドブログでブログを書き始めてから約2年が経ちました(正確には1年11ヶ月くらいです)。
ブログを始めるにあたって、ずっと心がけてきたことは「わかりやすく丁寧に書く」ということです。この心がけはブログ開始当初から現在まで守り続けています。たまにどうしてもわかりづらくなってしまうこともありますが…。
書く量 (記事数) を増やしても質は落としたくなかったんです。それは読んでも意味がわからない記事が Web 上に転がっていても、誰のためにもならないだろうというのが一番の理由です。特にコアな内容の記事の場合「せっかく情報を見つけたと思ったのに全然内容がわからなくて解決しない！」という事態になりかねません。私自身こういう経験が何度もありますし、誰もが経験していることだと思っています。
この記事によって、世の中にわかりやすい記事が１件でも増えたら嬉しいなぁーと思うのでした。
