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

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

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

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

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

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

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

photo by ImagineCup

スポンサーリンク
レクタングル(大)広告

draw.io

draw.io

draw.io

WEB上で無制限に無料利用できるドローツールです。

チャート、フローチャート、マインドマップ、モックアップ、ネットワーク図、ソフトデザイン図、回路図、ワイヤーフレーム他など、大抵の図なら簡単に作成できてしまうツールです。

日本語にも対応していて、操作性も良いので、かなりおすすめです。

名称未設定ダイアグラム.xml - draw.io

出力方法も、PNG、JPG、GIF、SVG、PDF、HTML、XML、iframeで埋め込みなどと豊富です。(以下はPNG)

関連図

先日、ブログなどに載せる説明図の作成ツールをいろいろ紹介しました。 で、図説ドローツールとしては、CacooやGlif...

Cacoo(カクー)

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

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

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

Cacoo

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

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

2015-05-30_11h58_37

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

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

  1. オブジェクト(図)をドラッグ&ドロップで配置
  2. オブジェクト間を関係線でつなぐ

無料で使えますし、使えるフォントも豊富(PCに入っているフォントなら使えるっぽい)なので簡単な図を使って説明する画像作成するなら、おすすめです。

Cacooが作成できる図のサンプルはこちら。

サンプル

Chromeアプリもあります。

Cacoo – 図の作成 & リアルタイムコラボレーション – Chrome ウェブストア

Gliffy(グリフィー)

Online Diagram Software and Flow Chart Software - Gliffy

Online Diagram Software and Flow Chart Software – Gliffy

こちらもCacooと同様、手軽に図を作成できるドローツールです。無料で無制限に利用できます。

Gliffyの作業画面

Cacooよりも機能が絞られている分、使いやすいので、Gliffyの方がとっかかりやすいと思います。

こちらも基本的に、オブジェクト(図)を配置して、

オブジェクトを配置

線をつなぐだけで、図の骨格を作ることができます。

オブジェクト同士をつなぐ

以前、子テーマの説明記事で作成した図もこのツールで作成しました。子テーマの呼び出しの仕組み

Gliffyの1つ残念なところは、日本語フォントは選択できないということです。英数字のみなら、いくつかフォントの選択肢はあるのですが、日本語対応フォントは使用できず、マルチバイト文字はすべて「MSゴシック」になります。

Gliffy作成できる、図のサンプルは以下。

サンプル

Chromeアプリもあります。

Gliffy Diagrams – Chrome ウェブストア

※アプリは、ウェブ版と相互性のないオブジェクト(ステンシル)もあります。

Justinmind

Justinmind- Interactive wireframes for web and mobile

Justinmind: Interactive wireframes for web and mobile

こちらは、Windowsと、Mac上で動作するアプリケーションです。

Prottの無料版は、ワークシート1つだけという制限などがありますが、Justinmindは、クラウドツールよりも高機能なうえに、無料で無制限に利用できます。(要ユーザー登録)

英語ソフトですが、オブジェクト(図)を配置して、文字を挿入するだけで、感覚的にワイヤーフレームを作成することができます。

Justinmindの作業画面

シミュレートボタンを押せば、作成したワイヤーフレームをインタラクティブに動作させることも可能です。

シミュレートボタン

以下のような、アドセンスの配置例のような図を作るのには便利かもしれません。

ブログのワイヤーフレーム

オブジェクト(図)をD&Dで動かすと、ガイド線が表示されるので、「左の図に合わせて高さを合わせる」なんてことが簡単にできて便利です。

以下で、どのようなものがつくれるかを確認できます。

Design a wireframe to define web and mobile experiences

iPhotoDraw

iPhotoDraw

iPhotoDraw

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

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

2015-05-30_12h58_38

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

Simplicityのウィジェットの配置図

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

XMind

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

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

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

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

XMindの作業画面

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

XMindのマインドマップ例

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

Mind Map Library

Text 2 Mind Map

Text 2 Mind Map - Simple mind mapping online

Text 2 Mind Map

こちらもマインドマップ作成ツールです。

ただしこちらは、テキストを書くだけでマインドマップを作成できるので、最も手軽にマインドマップを作成できるのではないかと思います。

以下のような哺乳類の分類表も手軽に作ることができます。

2015-07-17_12h33_54

ソフトを使ってマインドマップを作ろうと思ったら、結構面倒です。 けれども、単にテキストを階層的に書くだけで、マインドマップを簡...

Screenpresso

Screenpresso- The Ultimate Screen Capture Tool for Windows

Screenpresso: The Ultimate Screen Capture Tool for Windows

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

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

Screenpressoの作業画面

暗転、吹き出し機能や

Screenpressoの暗転&吹き出し

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

Screenpressoの曲がる矢印機能

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

前回、Skitch以外の画像注釈ソフトをまとめてみました。 これに出てくるソフトは、ほとんどが、以前から使っていたり、...

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

VectorでのScreenpressoの配布は終了したようです。ですので、以下で紹介しているベクターでの購入方法は現在利用できません。...

Screen To Gif

ScreenToGif - Home

ScreenToGif – Home

デスクトップ動作などをGIFで録画したい時に最も使いやすいレコーダーだと思います。

日本語にも対応していて、細かな設定やGIFの品質なども調整することができます。

以下のような「言葉で説明するより目で見た方が早い動作」などを提示したい時に役立つと思います。

Twitterボタンが上下にパッカーンと開く

デスクトップ操作や動作などは、言葉で説明するよりも動画などで見た方が分かりやすいときがあります。 例えば、以下のような画像は「...

LICEcap

Cockos Incorporated LICEcap

Cockos Incorporated | LICEcap

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

Windows、OSXで利用できます。

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

LICEcapの録画方法

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

LICEcapでグラフィックをGIF保存

先日、デスクトップ操作のアニメーションを作りたくてLICEcapというフリーソフトを使ってみました。 僕はこのソフトを使うまで、パソコ...

JTrim

JTrim

JTrim

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

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

JTrimの作業画面

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

JTrimで注釈の挿入

Windowsの画像編集ソフトでJTrimというフリーソフトがあります。 もう2007年に更新が止まっている、ちょっと古いソフ...

FireAlpaca

フリー ペイントツール (Mac-Win 両対応) FireAlpaca [ ファイア アルパカ ]

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

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

FireAlpacaではめ込み画像を作成

今回は上の写真のようなはめ込み画像の簡単な作り方です。 上記のような画像はPhotoshopのような有料の画像編集ソフトを使え...

まとめ

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

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

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

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

『読み手に伝わりやすく!ブログに説明図を入れるときに便利な無料ツールまとめ』へのコメント

  1. 名前:田中 則行 投稿日:2015/06/17(水) 08:51:47 ID:2d8b92be5

    現在、fc2ブログを作成中で、記事に図表を入れる作業にチャレンジしていますが、大変苦戦しています。そんなところに、WEbサイト検索でわいひらさんのブログに到達しました。大変よく調べられているようで、感心しました。まだ、このブログにあるツールを試していませんが、私の場合、記事を「文章」+「図表」で仕上げるとき、図表はエクセルやビジオで作成したものを貼り付ける方法で行いたいと思っていますが、ご紹介されているツールでこの手順に合うのは、どれでしょうか?突然のメールで大変申し訳ありませんが、アドバイスをお願い致します。

  2. アバター画像 名前:わいひら 投稿日:2015/06/17(水) 22:02:17 ID:eb2f8489d

    個人的には、draw.ioが最も使いやすいかと思います。上記のコメントだけでは、どのようなものを作成されるのかはわかりませんが、一応図もう文章も入力できます。draw.ioで図だけを作成して、画像をエクスポートしてエクセルなどに貼り付けても良いかと思います。
    簡単な使い方な以下にもちょっと書いています。
    無料で説明図を作るならドローツール「draw.io」に敵うものはないかも