このような悩みを持つ方へ向けた記事です。
こんにちは、セイタです。
ぼくのブログは基本的にシンプルなテキスト構成を心がけているので、図を多用するわけではないのですが、複雑な解説（サーバーの仕組みやアフィリエイトの構造など）をする際には必ず図を取り入れています。
そのときに愛用しているサイトで『draw.io（ドローアイオー）』という図解作成ツールがあるのですが、完全無料でプロ並みの図が作れるので圧倒的におすすめです。
ぼくは本業でシステムエンジニアをしながらブログを7年間運営していますが、システムの設計図を書くエンジニアの間でも、この『draw.io』は世界中で定番ツールとして使われています。[cite: 1]
本記事では、無料でブログに使える最強の図解作成サービス『draw.io』について触れつつ、ブログ初心者が「とりあえず図を作成してブログに貼れるようになるまで」の手順を画像付きで解説していきます。
ブログで使える図解作成サービスは『draw.io』一択！【完全無料】
過去に色々なマインドマップツールや図式作成サービスを探して試してみたのですが、最終的に「無料でここまでのクオリティが出せる」のはdraw.ioだけでした。
『draw.io』ってどんなサイト？安全性は？
draw.ioは、ブラウザ上でフローチャートや図解を無料で作成できる超高機能なWebサービスです。（会員登録やログインすら不要でいきなり使えます。）
海外のサービスにはなりますが、通信はSSL（https）で暗号化されており、作成したデータも自分のパソコン内やGoogleドライブに保存される仕組みなので、セキュリティ面でも安心して利用できます。
あらかじめ用意されているテンプレートを見てみると、ビジネスやIT系の資料作成を念頭に作られたものが多いです。
割とシンプルなデザインが多いのですが、色や形を自分でカスタマイズすることも全く難しくないため、ブログのテイストに合わせたポップな図解を作ることも十分に可能です。
draw.ioの使い方は「自作」か「テンプレ」か選べる！手順を解説
それでは、実際にdraw.ioを使って図を作成し、ブログ用の画像として書き出す（保存する）までの使い方を解説していきます。
draw.ioで図を作成して保存する手順
- draw.ioにアクセスする
- 「Create New Diagram」を選択する
- 各図式タイプからテンプレートを選択する
- テンプレートを選択後、必要な文字や色を書き換える
- メニューの『File』から図を書き出す（Export）
- 書き出しオプションは初期値でOK！
- 保存先を指定して作成完了
① draw.ioにアクセス
まず、draw.ioにアクセスすると、上記の画像のような小さなウインドウが出てきます。
シンプルすぎて戸惑いますが、新しく図を作りたい場合は『Create New Diagram（新しいファイルを作成する）』を選択してもらえればOKです。
② Create New Diagramを選択（言語を日本語化も可能）
「Create New Diagram」をクリックすると、上記の画像のようなテンプレート選択画面が登場します。
※もし英語で分かりにくい場合は、右上の地球儀マーク（Language）から「日本語」を選択してページを再読み込みすれば、日本語メニューで利用可能です。
最初は白紙（Blank Diagram）から作るよりも、左側に表示されているカテゴリー（Basic, Business, Chartsなど）をクリックして、あらかじめ作成されているテンプレートの中からイメージに近いものを選んで作っていくと良いでしょう。
慣れてきたら白紙から図を作れるようになるので、よりオリジナリティの高い図を作ることが可能です。
③ 各図式タイプでテンプレート選択
各テンプレートを見てみると、カラフルなものからシンプルなフローチャートまで、沢山の種類の図が用意されています。
これらの完成されたデザインをベースにして編集していくことで、図を作ることが苦手な人でも、バランスの取れたクオリティの高い図を作ることが出来ます。
ぼくは絵やデザインのセンスが全くと言っていいほど無いので、こういったテンプレートが豊富なサービスは非常に助かっています。
④ テンプレートを選択後、必要な部分を書き換える
テンプレートを選択して「Create（作成）」を押すと、このような編集画面（キャンバス）が表示されます。
配置されている四角形や丸などのパーツ、中の文字、色はすべて変更可能となっているので、編集したい部分をクリックして画面右側のメニュー（スタイル・テキスト）から操作します。
作りたい図の内容によっては「テンプレートのパーツが多すぎる」ということもあると思いますが、不要なブロックをクリックして「Deleteキー」でどんどん削除し、大きさを変えることも出来るので、直感的に細かな修正が可能です。
⑤ 『File（ファイル）』から図を画像として書き出す（Export）
図が完成したら、ブログに貼り付けるための「画像」として保存します。左上にある『File（ファイル）』メニューから『Export as（形式を指定してエクスポート）』 ＞ 『JPEG』または『PNG』を選択します。
形式をクリックすると、書き出しのオプション画面が表示されますが、基本的には初期設定のままで「Export（エクスポート）」を押して問題ありません。
画像の保存先を聞かれるので、『Device（デバイス）』をクリックすると、パソコンのダウンロードフォルダ（または指定したフォルダ）に画像として保存されます。
以上で、draw.ioを使った図解作成から保存までの一連の流れは完了です。あとは保存した画像をWordPressにアップロードして記事に貼るだけです！
その他、ブログで使える図解作成サービスはある？（Canvaとの比較）
さて、ここまではdraw.ioの使い方について解説してきましたが、「他には図式を作成できる便利なサービスは無いの？」という疑問についても触れておきたいと思います。
結論から言うと、アイキャッチ画像と合わせて図を作るのであれば『Canva（キャンバ）』もおすすめです。
アイキャッチ特化の『Canva』でも図は作れるが、フローチャートには不向き
Canvaは主にブログのアイキャッチ画像（サムネイル）を作成するために使用している人が多いツールですが、図形素材を組み合わせて図を作成することも可能です。
注意点
しかし、draw.ioと比較すると「関係性を示す図式（フローチャートやツリー構造）」に特化しているかというと、微妙なところなんですよね。
作れないことはないのですが、たとえば「矢印」のアイテムを横に長く伸ばそうとすると、矢印の太さ自体も大きくなってしまってバランスが崩れるなど、構造的な図を作るのには扱いづらい面があります。
小ぶりでシンプルな図（丸が3つ並んでいるだけ等）を作成するならCanvaでも良いですが、しっかりとした「仕組みの解説図」や「相関図」を作りたい場合には不向きでしょう。
まとめ：ブログに図があることで、読者の理解度が飛躍的に深まる
文章だけで長々と説明されるよりも、パッと見で構造がわかる「図解」が1枚あるだけで、読者の理解度は飛躍的にアップし、記事からの離脱を防ぐことができます。
draw.ioは少しビジネスチックな印象を受けるサービスですが、色使いやフォントのアレンジを加えることでブログに馴染むポップな図にすることも十分に可能です。
自分の図の作り方（フォーマット）が定着すれば、読者に対しての解説表現の幅が大幅に広がり、ブログのクオリティが一段階アップするでしょう。
ブログの図解作成に困ったときは、ぜひ無料で使える『draw.io』を試してみてくださいね！
あわせて読みたい！