画像は情報量が多いです。
「百聞は一見にしかず」みたいなもので、下手に文字で説明するよりも、適切な画像を1つ挟んで補足説明をつけたほうが、文章も短くなって読者も読みやすく、わかりやすいです。
また、書き手も「長い文章でわかりやすく説明」するよりは「画像＋補足説明」の方が手軽で楽ができます。
ただ、説明画像（写真）を作るには多少手間はかかります。
けれどもそれを、できるだけ簡単にできるような、僕が使用している無料ツールをいろいろまとめてみました。
これらツールを適切に使うことにより、説明図、解説図、関連図、注釈画像、ワイヤーフレームを手軽につくれるかと思います。
photo by ImagineCup
目次
draw.io
WEB上で無制限に無料利用できるドローツールです。
チャート、フローチャート、マインドマップ、モックアップ、ネットワーク図、ソフトデザイン図、回路図、ワイヤーフレーム他など、大抵の図なら簡単に作成できてしまうツールです。
日本語にも対応していて、操作性も良いので、かなりおすすめです。
出力方法も、PNG、JPG、GIF、SVG、PDF、HTML、XML、iframeで埋め込みなどと豊富です。（以下はPNG）
Cacoo(カクー)
Cacoo – Web上でフローチャートやUMLなど様々な図を作成
クラウド上で、簡単にサイトマップやワイヤーフレーム、フローチャート、マインドマップ、UML、ネットワーク図などの図を作成できるドローツールです。
作業シート、25枚までなら無料で利用することができます。
例えば、「PDCAサイクル」みたいな、「初めて聞いた人が、よくわからない言葉」を図で説明する以下のような画像を手軽に作成することができます。
PDCAサイクル
Plan（計画）→ Do（実行）→ Check（評価）→ Act（改善）の 4 段階を繰り返すことによって、業務を継続的に改善する業務改善手法の一つ。
Cacooを使うには基本的に、以下の2手順だけ押さえておけば使うことができます。
- オブジェクト（図）をドラッグ＆ドロップで配置
- オブジェクト間を関係線でつなぐ
無料で使えますし、使えるフォントも豊富（PCに入っているフォントなら使えるっぽい）なので簡単な図を使って説明する画像作成するなら、おすすめです。
Cacooが作成できる図のサンプルはこちら。
Chromeアプリもあります。
Cacoo – 図の作成 & リアルタイムコラボレーション – Chrome ウェブストア
Gliffy（グリフィー）
Online Diagram Software and Flow Chart Software – Gliffy
こちらもCacooと同様、手軽に図を作成できるドローツールです。無料で無制限に利用できます。
Cacooよりも機能が絞られている分、使いやすいので、Gliffyの方がとっかかりやすいと思います。
こちらも基本的に、オブジェクト（図）を配置して、
線をつなぐだけで、図の骨格を作ることができます。
以前、子テーマの説明記事で作成した図もこのツールで作成しました。
Gliffyの1つ残念なところは、日本語フォントは選択できないということです。英数字のみなら、いくつかフォントの選択肢はあるのですが、日本語対応フォントは使用できず、マルチバイト文字はすべて「MSゴシック」になります。
Gliffy作成できる、図のサンプルは以下。
Chromeアプリもあります。
Gliffy Diagrams – Chrome ウェブストア
※アプリは、ウェブ版と相互性のないオブジェクト（ステンシル）もあります。
Justinmind
Justinmind: Interactive wireframes for web and mobile
こちらは、Windowsと、Mac上で動作するアプリケーションです。
Prottの無料版は、ワークシート1つだけという制限などがありますが、Justinmindは、クラウドツールよりも高機能なうえに、無料で無制限に利用できます。（要ユーザー登録）
英語ソフトですが、オブジェクト（図）を配置して、文字を挿入するだけで、感覚的にワイヤーフレームを作成することができます。
シミュレートボタンを押せば、作成したワイヤーフレームをインタラクティブに動作させることも可能です。
以下のような、アドセンスの配置例のような図を作るのには便利かもしれません。
オブジェクト（図）をD&Dで動かすと、ガイド線が表示されるので、「左の図に合わせて高さを合わせる」なんてことが簡単にできて便利です。
以下で、どのようなものがつくれるかを確認できます。
Design a wireframe to define web and mobile experiences
iPhotoDraw
難しい機能は不要で、お絵描き感覚で図を作成したいときは、iPhotoDrawがおすすめです。
基本的には、画像注釈ソフト的位置付けですが、オブジェクトが豊富で、しかもその中心に手軽に文字列を挿入できるので、説明図を手軽に作るのに適しています。
以前作った、「Simplicity投稿ページのウィジェット配置図」はこれで、10分ぐらいで作成しました。
あまり、クオリティーを求めないのなら、iPhotoDrawで十分すぎます。
XMind
Windows、Mac、Linuxで利用できるオープンソースのマインドマップ作成アプリです。
マインドマップを作成するツールは、7、8個いろいろ試してみました。その中でやはりXMindは、ローカルで動作するアプリなので、動作も速く、個人的には最も使いやすかったです。
自分の頭の中を整理するために図にしたためて、それをそのままブログに使ってしまうというのもいいかもしれません。
以下のライブラリには、これまでにユーザーがXMindで作成したマインドマップが、いろいろ掲載されていて、参考になります。
Text 2 Mind Map
こちらもマインドマップ作成ツールです。
ただしこちらは、テキストを書くだけでマインドマップを作成できるので、最も手軽にマインドマップを作成できるのではないかと思います。
以下のような哺乳類の分類表も手軽に作ることができます。
Screenpresso
Screenpresso: The Ultimate Screen Capture Tool for Windows
Windowsや、iOSで利用できる画像注釈アプリです。
画像注釈は、何か方法を説明するブログでは必要不可欠で、「Skitch（Windows版のサポート終了）」なども有名です。ただ、Screenpressoは、より機能が豊富で豊かな表現ができます。さらに、編集した画像もストックしておけるうえに、後から再編集（有料）も行うことができます。
暗転、吹き出し機能や
曲がる矢印などは、表現の幅が広がります。
また、操作動画も手軽に撮影することができるので、動きのある説明を作りたい時にも力を発揮します。
僕は、購入して利用しています。手直しをしたいときに、再編集機能がとても便利。
Screen To Gif
デスクトップ動作などをGIFで録画したい時に最も使いやすいレコーダーだと思います。
日本語にも対応していて、細かな設定やGIFの品質なども調整することができます。
以下のような「言葉で説明するより目で見た方が早い動作」などを提示したい時に役立つと思います。
LICEcap
動作や操作方法を動く形で説明したいけど動画を使うほど、大げさなものでもないというときは、GIFはアニメーションを手軽に録画できるLICEcapがおすすめです。
Windows、OSXで利用できます。
基本的に、枠で囲って録画（Record）ボタンを押すだけです。
以下のグラフィックの動きのような、文章では説明しづらいものを手軽に伝えることができます。
JTrim
Windows専用ですが、画像をトリミングするだけなら、これほど簡単なソフトは、そうないと思います。
とにかく、簡単な画像のレタッチなら動作も速く簡単です。
ちょっと工夫すれば、以下のような注釈も手軽に挿入することができます。
FireAlpaca
![フリー ペイントツール (Mac-Win 両対応) FireAlpaca [ ファイア アルパカ ]](https://nelog.jp/wp-content/uploads/2015/05/Mac-Win-FireAlpaca-.png "フリー ペイントツール (Mac-Win 両対応) FireAlpaca [ ファイア アルパカ ]")
ちょっと手書きで、画像に編集を加えたければ、無料であればFireAlpacaが、動作も軽快で、取っつきやすいと思います。
無料ツールなのに機能も豊富です。無料では、これまであまり見かけなかった、画像の自由変形などもでき、はめ込み画像も手軽に作成することができます。
まとめ
とりあえず、無料ツールでも、これだけそろえてあれば、大体の説明画像は作成することができると思います。
説明図の作成は、慣れないと確かに面倒です。ただ、ツールの使い方に慣れてしまうと、結構手軽に作成できてしまいます。
そうは言っても多少は時間はかかるかもしれませんが、説明図以上の、分かりやすい気の利いた文章を考えるよりは、全然楽だったりします。
「文章は未熟だけど読者になるべくわかりやすく伝えたい」とか「良い画像ソフトを買って説明図などを作りたいけど値段が高い」なんて場合は、いくつか試してみるといいかもしれません。
現在、fc2ブログを作成中で、記事に図表を入れる作業にチャレンジしていますが、大変苦戦しています。そんなところに、ＷＥｂサイト検索でわいひらさんのブログに到達しました。大変よく調べられているようで、感心しました。まだ、このブログにあるツールを試していませんが、私の場合、記事を「文章」＋「図表」で仕上げるとき、図表はエクセルやビジオで作成したものを貼り付ける方法で行いたいと思っていますが、ご紹介されているツールでこの手順に合うのは、どれでしょうか？突然のメールで大変申し訳ありませんが、アドバイスをお願い致します。