読み手に伝わりやすく！ブログに説明図を入れるときに便利な無料ツールまとめ

画像は情報量が多いです。

「百聞は一見にしかず」みたいなもので、下手に文字で説明するよりも、適切な画像を1つ挟んで補足説明をつけたほうが、文章も短くなって読者も読みやすく、わかりやすいです。

また、書き手も「長い文章でわかりやすく説明」するよりは「画像＋補足説明」の方が手軽で楽ができます。

ただ、説明画像（写真）を作るには多少手間はかかります。

けれどもそれを、できるだけ簡単にできるような、僕が使用している無料ツールをいろいろまとめてみました。

これらツールを適切に使うことにより、説明図、解説図、関連図、注釈画像、ワイヤーフレームを手軽につくれるかと思います。

photo by ImagineCup

Cacoo(カクー)

Cacoo – Web上でフローチャートやUMLなど様々な図を作成

クラウド上で、簡単にサイトマップやワイヤーフレーム、フローチャート、マインドマップ、UML、ネットワーク図などの図を作成できるドローツールです。

作業シート、25枚までなら無料で利用することができます。

例えば、「PDCAサイクル」みたいな、「初めて聞いた人が、よくわからない言葉」を図で説明する以下のような画像を手軽に作成することができます。

PDCAサイクル
Plan（計画）→ Do（実行）→ Check（評価）→ Act（改善）の 4 段階を繰り返すことによって、業務を継続的に改善する業務改善手法の一つ。

Cacooを使うには基本的に、以下の2手順だけ押さえておけば使うことができます。

1. オブジェクト（図）をドラッグ＆ドロップで配置
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

難しい機能は不要で、お絵描き感覚で図を作成したいときは、iPhotoDrawがおすすめです。

基本的には、画像注釈ソフト的位置付けですが、オブジェクトが豊富で、しかもその中心に手軽に文字列を挿入できるので、説明図を手軽に作るのに適しています。

以前作った、「Simplicity投稿ページのウィジェット配置図」はこれで、10分ぐらいで作成しました。

あまり、クオリティーを求めないのなら、iPhotoDrawで十分すぎます。

XMind

人気ランキング No.1のマインドマップソフト XMind

Windows、Mac、Linuxで利用できるオープンソースのマインドマップ作成アプリです。

マインドマップを作成するツールは、7、8個いろいろ試してみました。その中でやはりXMindは、ローカルで動作するアプリなので、動作も速く、個人的には最も使いやすかったです。

自分の頭の中を整理するために図にしたためて、それをそのままブログに使ってしまうというのもいいかもしれません。

以下のライブラリには、これまでにユーザーがXMindで作成したマインドマップが、いろいろ掲載されていて、参考になります。

Mind Map Library

Screenpresso

Screenpresso: The Ultimate Screen Capture Tool for Windows

Windowsや、iOSで利用できる画像注釈アプリです。

画像注釈外は、何か方法を説明するブログでは必要不可欠で、Skitchなども有名です。ただ、Screenpressoは、より機能が豊富で豊かな表現ができます。さらに、編集した画像もストックしておけるうえに、後から再編集（有料）も行うことができます。

暗転、吹き出し機能や

曲がる矢印などは、表現の幅が広がります。

また、操作動画も手軽に撮影することができるので、動きのある説明を作りたい時にも力を発揮します。

僕は、購入して利用しています。手直しをしたいときに、再編集機能がとても便利。

LICEcap

Cockos Incorporated | LICEcap

動作や操作方法を動く形で説明したいけど動画を使うほど、大げさなものでもないというときは、GIFはアニメーションを手軽に録画できるLICEcapがおすすめです。

Windows、OSXで利用できます。

基本的に、枠で囲って録画（Record）ボタンを押すだけです。

以下のグラフィックの動きのような、文章では説明しづらいものを手軽に伝えることができます。

JTrim

JTrim

Windows専用ですが、画像をトリミングするだけなら、これほど簡単なソフトは、そうないと思います。

とにかく、簡単な画像のレタッチなら動作も速く簡単です。

ちょっと工夫すれば、以下のような注釈も手軽に挿入することができます。

FireAlpaca

 

ちょっと手書きで、画像に編集を加えたければ、無料であればFireAlpacaが、動作も軽快で、取っつきやすいと思います。

無料ツールなのに機能も豊富です。無料では、これまであまり見かけなかった、画像の自由変形などもでき、はめ込み画像も手軽に作成することができます。

まとめ

とりあえず、無料ツールでも、これだけそろえてあれば、大体の説明画像は作成することができると思います。

説明図の作成は、慣れないと確かに面倒です。ただ、ツールの使い方に慣れてしまうと、結構手軽に作成できてしまいます。

そうは言っても多少は時間はかかるかもしれませんが、説明図以上の、分かりやすい気の利いた文章を考えるよりは、全然楽だったりします。

「文章は未熟だけど読者になるべくわかりやすく伝えたい」とか「良い画像ソフトを買って説明図などを作りたいけど値段が高い」なんて場合は、いくつか試してみるといいかもしれません。