ブログの図解の作り方と作図ツールを紹介【記事の質が上がる】

今回、この記事では、

ブログの記事の図解の作り方、ツールなどを紹介します。

この記事を読もうと思った人は、

「自分の作った記事に図解を入れて、読者の理解を深められたらいいなぁ」

「図解を入れて見栄えの良い記事にしたい」

など、様々だと思いますが、

ブログ初心者の人が、

このように読者目線で記事のことを考えることは、

とても良い傾向です。

みなさんも他のサイトを見て理解できると思いますが、

読みやすいサイト、理解しやすいサイトというものは、

適度に図解が使われています。

図解を作ることは決して難しいことではありませんが、

読者に理解を深めてもらう図解を作るためには

文章では足りない部分を補足する役割を図解で示す必要があります。

この記事を読んで実践することによって、

次のような効果を得ることができます。

図解はあなたが作るため、個性やセンスが出ます。

ユーザーに支持されることや他の記事と差別化を図る上でも、

図解作成の方法を身につけることは、

今後のブログ運営にとても効果があります。

図解作成ツールは豊富にある

他にも図解作成には、

数多くのツールやソフトがあります。

オンライン系やソフト系など様々ですが、

あなたのPC環境や用途に沿ったツール選びが良いでしょう。

作図ツールの用途は、図を作っていくことです。

あなたのブログ記事に図解を入れることで、

他のサイトにはない個性を示すことができる方法の一つが

図解というものです。

無料で使えるものはたくさんありますが、

有料タイプのトライアル的な存在のツールもあります。

無料で使ってみて、自分のブログで活かせることを

確認してから、必要となるならば有料を検討するのもいいでしょう。

数ある図解作成ツールやソフトを選ぶときのポイントを

次で紹介しています。

図解作成ツール、ソフトを選ぶポイント

図解作成ツールやソフトは数多くありますが、

よほどのこだわりがない限り、

最初は無料のツールやソフトを使うことをおすすめします。

最近の図解作成ツールやソフトは無料でも充分に

機能が高いので、まずは無料から試してみると良いでしょう。

図解作成ツールやソフトを選ぶポイントは次の通りです。

要するにコストをかけずにクオリティの高いツールやソフトを

選ぶということですね。

現在では、このような条件をクリアしているソフトはたくさんあります。

ツールやソフトというものは、

自分の要望に対して、

いかに機能を引き出すかがポイントです。

無料ツールやソフトでも機能がたくさんありますので、

ガンガン試しで使ってみて、

使い勝手なども含めてテストしてみましょう。

早速、ツールとソフトの紹介をしていきます。

簡単な設定で図解を作れる2つのツールを紹介

簡単な登録作業で、無料、高機能である

おすすめ図解作成ツール2点です。

使いはじめるまでの作業と実際の図解の作り方も

合わせて紹介します。

draw.io

Eメールやパスワードなどの登録不要のオンライン作画ツールです。

このブログでも使用しています。

www.draw.io

draw.ioにアクセスすると、このような画面が出てきます。

この画面ですでに自分で作画したファイルを

保存する場所を選ぶことができます。

作画ツールなどの手間をかけて作成したものを

保存するという作業は、結構気にかかるものです。

先に保存先を示してくれるところは好感がもてます。

グーグルドライブ、ドロップボックスなどの

クラウドストレージにも対応、

もちろん自分自身の端末（パソコン）にも保存することができます。

保存先を後で決めたい人は、後で決めるをクリックしてください。

保存先を選ぶとすぐに作図を作る画面に移ります。

この方眼のマス目が上下左右の位置合わせに役立ちます。

図形を選んでドラッグすると、

方眼のマス目ごとにドラッグが進んでいくのが、

地味に便利です。

作図画面はとてもシンプルで感覚的に作業できます。

作図の基本である図形は左側に用意されています。

基本的な図形から、矢印、表、フローチャート、マインドマップなど、

豊富に用意されているので、組み合わせて使ってみたり、

色々試してみましょう。

ブログの記事で役立ちそうな、

このような表も用意されています。

保存のときも、pngファイル、XMLファイル、HTMLファイルなど、

様々な形式で保存できます。

左側で図形を選んだら、

図形そのもので青点をドラッグ・アンド・ドロップで、

図形の拡大縮小、画面右側で装飾系、テキスト挿入などができます。

図解を作るうえでの基本作業である

図形選択→装飾という作業が感覚的にできます。

左から右に作業していくという感じですね。

便利な機能のひとつとして、

図形を選択して次の画面のような表示をしている場合、

マウスカーソルを青い矢印に当ててみます。

「緑の丸いプラスアイコンをクリックすると、

次のような画面になります。

次の図形が選べる画面になり、

複数の図形が表示されます。

このように簡単に図形からのチャート線で、

図形と図形を結ぶ作業ができます。

こんな関連図なんかも簡単に作ることができます。

保存も簡単です。

「ファイル」→「名前を付けて保存・・・」でOKです。

ブログの記事で使うファイル形式としては、

pngファイルかHTMLファイルになりますが、

編集可能なpngファイルで保存できるため、

前に作った図解や図解の作り置きなどに重宝します。

以前作った図解などのデータを呼び出すときも、

次のような画面が表示されるので、

データを呼び出しやすくなっています。

draw.ioは機能性に加えて、操作性、データ管理など、

使う側の意図や要望に応えていることを感じるソフトですね。

Cacoo（カクー）

Cacoo

Cacooは無料で使用できますが、

有料プランに比べての機能制限や

アカウント登録があります。

ビジネスイメージが強い印象ですが、

白を基調としてシンプルで好印象です。

Cacooを使えるようにするには、

アカウント登録が必要ですので、

まずは登録画面に向かいます。

上画面中央の「無料トライアル」は、

チーム向けの無料トライアルですので、

個人ブロガーなどの個人利用者は別になりますので、

間違えないようにしてください。

画面をスクロールしていくと、画面の一番下に

「プラン」という項目がありますので、

「プロ」をクリックします。

「プロ」をクリックして画面が表示されたら、

さらに下にスクロールしていくと下記のような表が出てきます。

こちらで、「無料ではじめる」をクリックします。

アカウント作成画面が出てきます。

必要事項を入力します。

「お名前」、「メールアドレス」、「パスワード」、

「お知らせメールの受け取りの可否」などですね。

登録を済ますとすぐに使うことができます。

上図が基本画面です。

ホント、シンプルな画面ですね。

赤枠のところから図形を作っていきます。

Cacooは図形を選択したら、そこからすぐに装飾できます。

各図形に装飾が必要な場合など、

早い作業ができそうですね。

線の太さ、装飾、テキスト挿入などができるので、

この画面でおおよその作業はできてしまいます。

フリーハンドがついているので、

ちょっとした絵や字を加えたいときに便利です。

記事にオリジナリティを出すには、フリーハンドは活用できそうです。

付箋を使えるようになっています。

付箋というだけに、テキストを入力してエンターを押すだけで、

次々に付箋が貼れていけます。

アイデア出しや今までマインドマップなどで使っていた用途を

カバーできるかもしれません。

試してみる価値が大きいですね。

テーブル（表）も作成できます。

ブログの表作成にも役立ちます。

最大20✕20マスの表まで作れます。

縦横のマスの数は、マウスを操作するだけで簡単に設定できます。

豊富なテンプレートが用意されています。

Cacooに用意されているテンプレートを参考に、

図解を考えるのもいいですし、

実際にテンプレートを活用するのもいいでしょう。

グラフも簡単に作れます。

テーブルに項目と数字を入力するだけです。

他にも棒グラフ、折れ線グラフなども用意されています。

他にも画像挿入などもできます。

画像ファイルは512KBまでですが、

有料プランなら10MBまで挿入できます。

PNGファイルへの出力は、下記のエクスポートからできます。

無料プランではPNGファイルのみですが、

有料プランでは、PDFやSVGなどのファイルに出力できます。

今回、Cacooのメリットとして強く感じたのが、

「元に戻す」、「やり直す」ボタンとシートです。

作り込んだ図解などは、元に戻したい場合などが多いので、

地味に便利です。

シートは、今回のCacooで一番のメリットとして感じました。

Cacooの画面右側に配置されていますが、

羅列してプレビューされているので、

作図や図解が見やすく、ブログの記事作成で過去の図解をみたい場合や、

参考になる図解を、今後の記事作成のために書き溜めておくこともできそうです。

Cacooの無料プランでは6シートまでですが、

有料プランでは無限にシートが使えます。

図解や作図はCacoo、というように決めてしまえば、

ブログの記事作成での図解挿入などの管理が簡単になりそうです。

Cacooを使い込んでみて、使えるソフトとして認識した場合、

有料プランも検討にあるソフトですね。

Cacoo（カクー）オンライン作図ツール無料トライアルはこちらから

優秀な作図ツールを使いこなせれば、
有力な武器を手に入れたようなものです。

毎記事に作図を差し込んで、
競合に差をつけよう！

draw.ioとCacooの比較と所感

draw.ioとCacooの比較表を作ってみました。

ちなみに下図の表はCacooのテーブルから作ったものです。

Cacooは有料プランと比較して、使用制限 出力を記載しています。

draw.ioとCacooを使った所感は下記の通りです。

他にもいくつかの作図ツールやソフトを試しましたが、

ツールやソフトを使うまでの作業（アカウント登録など）や、

簡単に感覚的に操作ができて、ブログなどの作業に簡易的に

利用できるものは、現在ではこの2点です。

ブログの図解の作り方と作図ツールの紹介　まとめ

今回は、ブログに訪れてくれる人に、

よりわかりやすい記事を提供できるために、

図解の作り方と作図ツールを紹介しました。

紹介はツールを使いこなすまでの入り口までですが、

draw.io、Cacooともにブログで充分に使えるおすすめツールです。

現在のツールというものは、機能が豊富にあるので、

まずは色々と試して、使ってみることをおすすめします。

自分の使い勝手、好み、用途などもありますので、

各ツールの良いところを見つけてみるのが良いでしょう。

ツールを使いこなせるようになると、

ブログの記事も格段にレベルアップします。

また、ブログで役立つようなツールや機能を発見しましたら、

紹介していきますので、よろしくお願いします。