無料で説明図を作るならドローツール「draw.io」に敵うものはないかも

先日、ブログなどに載せる説明図の作成ツールをいろいろ紹介しました。

読み手に伝わりやすく!ブログに説明図を入れるときに便利な無料ツールまとめ
画像は情報量が多いです。 「百聞は一見にしかず」みたいなもので、下手に文字で説明するよりも、適切な画像を1つ挟んで補足説明をつけたほう...

で、図説ドローツールとしては、CacooGliffyを紹介しました。

けれども、「draw.io」というのを使ってみたら、完全に無料で利用できるうえに、日本語にも対応、さらには機能も豊富という何拍子も揃った素晴らしいドローツールだったので紹介です。

photo by David Goehring

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

draw.ioとは

draw.io

draw.ioは、WEB上で無料で使えるフローチャート作成ツールです。

インストールなどは必要なく、ブラウザからログインも不要で手軽に利用することができます。

通常、こういったドローツールは、「作業シート何枚まで無料であとは有料」などというサービスも多いのですが、draw.ioは完全無料で利用することができます。

やれることが豊富

このツールを利用するだけで、以下のような図を手軽に作成することができます。

ビジネス・プロセス

チャートなんかも。

チャート

こんな回路図なんかも。

回路図

もちろんこんなフローも。

フローチャート

関連図。

関連図

マインドマップ。

マインドマップ

モックアップ。

モックアップ

ネットワーク図。

ネットワーク図

スケジュール表とか。

スケジュール表

ソフトウエアデザインなんかにも。

ソフトウエアデザイン

ベン図。

ベン図

ワイヤーフレームも作ることができます。

ワイヤーフレーム

まあとにかく、やれることが豊富で、大抵の図なら作れてしまうと思います。

パーツ(ステンシル)が豊富

これだけのことが簡単にできるのは、最初から用意されているステンシル(図のパーツ)が豊富だからというのもあります。

とりあえず、ざっと数えただけでも845個ものステンシルがデフォルトで用意されています。

カスタムして追加すると、もっとステンシルを増やすことができます。すべて合わせると2000以上(もっとかも)はありそうです。

ステンシル

有料ツールでも、ここまで多いものはそうないような気がします。

保存場所も選べる

保存場所も、Googleドライブ、OneDrive、Dropboxのサービスの中から選ぶこともできます。もちろんローカルディスクにも保存することができます。

draw.ioデータの保存場所

好きなクラウドドライブに保存できるのは、どこからでも編集できて便利です。

情報をクラウドにあげたくない場合は、ローカルに保存できるというのもいいですね。

フォントも自由に設定

フォントの設定画面から、「カスタム」を選ぶことで

本当の競って

パソコンに入っているフォントなら、自由に使うことができます。

フォントのカスタム

一度登録すれば、同じブラウザなら手軽に利用できるようになります。

フォントが登録される

draw.ioは、このようにフォントも自由に設定できます。同じ手軽に使える無料のGliffyは、日本語のフォントは選択できず、全てOSデフォルトのフォントになっていました。

draw.ioは、フォント以外にも随所でこういった細かな設定ができるようになっています。

使い方

draw.ioの使い方は、基本的に以下の2つを押さえておけば、ある程度利用できると思います。

  1. 配置する
  2. 図同士を繋ぐ

配置する

まずは、左側のステンシルから、図をドラッグ&ドロップで作業領域に配置します。

ステンシルを配置する

図同士を繋ぐ

あとは、関連するステンシル同士を繋ぐだけです。

ステンシルを繋ぐ

他にも設定はいろいろありますが、基本的な動作で、この2つを抑えておけば図の半分以上はできたも同然です。

あとは、ステンシル(図のパーツ)にテキストを挿入したり、大きさを調整したり、色をつけたりして、属性を変更するだけです。

保存

保存もメニューの「ファイル」から「Export as」を選択することで、いろいろの形式で保存することができます。

import.ioの保存方法

まとめ

draw.ioを利用すれば、大抵の説明図ならパパパっと作ってしまえるかと思います。

いろいろ使ってみたのですが、ぱっと思いつくだけでも以下の点が素晴らしいです。

  • 登録不要で簡単に使い始められる
  • 操作が簡単
  • 操作が軽い (操作性が良い)
  • 日本語対応
  • ステンシル(図のパーツ)が豊富
  • 機能が豊富(豊かな表現ができる)
  • 保存方法を選べる
  • 出力方法も豊富(一般画像、PDF、SVG、HTML、iframeで埋め込むなど)
  • PCに入っているフォントなら自由に使える(要フォント名入力)
  • 完全無料

有料ツールでも、ここまで機能豊富なものは、そうなさそうな気がします。

とりあえず、「図説用のドローツールはどれを使ったらよいかわからない」なんて場合は、draw.ioを選んでおけば、まず間違いないと思います。

『無料で説明図を作るならドローツール「draw.io」に敵うものはないかも』へのコメント

  1. 名前:齋藤俊樹 投稿日:2015/06/05(金) 21:26:08 ID:eee7d8d1a

    素晴らしい記事です。私も時々使用しており全く同感です。一点タイトルに「無料で説明図を作るならドローツール「dwaw.io」に適うものはないかも」とdraw.io→dwaw.ioになっています。あれ、似たツールがあるのかな、と思いました。修正していただければ、このコメントは削除して頂いて構いません。

  2. わいひら 名前:わいひら 投稿日:2015/06/05(金) 21:41:34 ID:f79cd1eae

    ありがとうございます。
    タイプミスしていたのに気づいていませんでした;
    修正しておきました。

  3. 名前:田中 則行 投稿日:2015/06/18(木) 10:16:14 ID:f3ef1a2be

    わいひら 様
    ありがとうございました。
    私からの質問メールでは、趣旨がうまく表現できなかったようで、大変申し訳ありません。
    ブログ作成で苦戦しているのは、作図ではなく、既に作成したワード原稿を使ってブログ記事とする段階で、このワード原稿に貼りこんだ図表(多くがエクセルやビジオ、ドキュワークスからの切り取り図)をブログ記事に貼りこむ方法です。
    ブログのマニュアルどおりに行っても、pdfではだめとかhtmlに変換しても図表として表示されないということで行き詰まっている状態です。
    わいひらさんのブログの趣旨には合わない質問かもしれませんが、簡便なブログ作成ツールのご紹介も含めて、何かいいアドバイスをいただけませんでしょうか?
    ブログ作成初心者ですので、無理をいいますが、よろしくお願いいたします。

  4. わいひら 名前:わいひら 投稿日:2015/06/18(木) 12:40:44 ID:1fa4ed4ed

    PDFや、HTMLで出力できるのであれば、出力された図を「Skitch(Windows版のサポート終了)」もしくは、Screenpressoでスクリーンショットを撮影し、撮影した画像をブログに貼り付けるとかでOKかと思います。
    エクセルやビジオなどの図形オブジェクトを保ったままブログに出力というのは、難しいかもしれません。

  5. 名前:田中 則行 投稿日:2015/06/19(金) 00:08:51 ID:8364fb757

    わいひら 様

    アドバイスありがとうございました。
    SKICHとかScreenpresoというのは初めてお目にかかるものですが、試してみます。

  6. 名前:tanaka 投稿日:2015/06/19(金) 12:29:13 ID:8a7dcad53

    わいひら 様

    SKICHを試してみました。驚くほど、サクサクと進行し、FC2ブログ編集で使用するアップロード作業も難なく出来ました。ありがとうございました。

  7. わいひら 名前:わいひら 投稿日:2015/06/19(金) 20:07:49 ID:ac03e4f9b

    うまくいったようで、よかったです。

  8. 名前:Okamoto 投稿日:2015/12/23(水) 09:31:31 ID:b6bdf09b5

    わいひらさんのブログを見て「draw.io」で、フローチャートを作ってみました。
    作ってみたは、いいのですが、、、「draw.io」上でしかフローチャートを見ることができません。XMLファイルでしか、保存することができないのでしょうか?
    「出力方法が豊富」と書かれていましたが、どのようにすれば、PDF等に変換して保存することができますでしょうか?パソコンに疎くて、、、しょうもない質問をしているかもしれませんが、教えていただけると幸いです。

  9. わいひら 名前:わいひら 投稿日:2015/12/23(水) 12:47:04 ID:58e70f852

    PDFで保存するのであれば、「ファイル」メニューから「Export as」→「PDF」で行えるかと思います。
    PDFでのエクスポート

  10. 名前:umamoru 投稿日:2016/06/24(金) 11:05:12 ID:61734fa1c

    draw.ioを拝見し使いたいと思い、リンクをクリックしWebアプリを開いたのですが、
    メニューなどすべて英語版になっています。何度トライしてましても日本語版には
    ならないみたいです。

    TEXT入力でも日本語フォントがリストアップされません。

    何が原因でしょうか。教えていただけませんでしょうか。

    お願いいたします。

  11. わいひら 名前:わいひら 投稿日:2016/06/24(金) 18:17:23 ID:742957fc9

    日本語化するには、最初に出てくるダイアログの地球儀マークをクリックして
    地球儀マークをクリック

    日本語を選択すると、
    日本語を選択

    日本語で表示されるようです。
    日本語で表示される

  12. 名前:通りすがり 投稿日:2016/07/20(水) 15:10:06 ID:7e89960af

    こんにちは。
    このブログを拝見しフローを作成しました。
    PDFへエクスポートした際ですが、フォントが埋め込まれていないようです。
    フォントを埋め込む設定を知っていましたら、教えてください。

  13. わいひら 名前:わいひら 投稿日:2016/07/20(水) 16:46:34 ID:6059d90eb

    こんにちは。
    申し訳ないですが、draw.ioの機能でPDFにフォントを埋め込む方法は僕も知らないです。
    フォントを埋め込むには、以下のような方法で後からソフトなどで埋め込むしかないのかもしれません。
    PDF ファイルにフォントを埋め込む方法(Windows 版 Acrobat 9/X)
    無料ソフトでも埋め込みができるものがあるようですが、実際に試してみたことはないです。
    PDF関連無料ソフト(ツール)特集:お得WEB