ビジネスも設計図も!何でも描ける作図ツール「draw.io」が超おすすめ!

ビジネスも設計図も!何でも描ける作図ツール「draw.io」が超おすすめ!
みるみ

今回はオンライン最強ツール。

フローチャートから組織図、ベン図に家の間取り図まで図ならなんでもお手軽に高クオリティなものを作れてしまう「draw.io」が本当に素晴らしいので紹介。

「ちょっとした作図ならExcelとかPowerPointでいいし…」

っていう人にこそ見てほしいです。というかそもそも自宅じゃMicrosoft純正のOfficeを持っていない人だってたくさんいるでしょ?もちろんビジネスユースもOKですけど!

「draw.io」はどんなツール?

draw.ioはブラウザ上で動作するオンライン作図ツールです。
https://www.draw.io/

draw-io1

無料で、かつ会員登録なども一切必要ないのでアクセスしたその瞬間からいきなり使えるのがまず最高。

ちなみに日本語対応もイケます。英語でも全然問題ないけど。

draw-io2

draw-io3

ウェブ上って聞いて条件反射する人もご安心を。動作もサクサクでUIもとっても使いやすいです。

draw-io4

draw-io5

draw-io6

「初めて見た操作系なのに特に迷うことなく実現したいことを行える」っていうのは思っている以上にすごく大切なことで、かつ作るのは難しいんです。これだけでもこのツールの高品質さが見て取れるでしょう。

みんな大好きダークテーマとかもできちゃいます。

draw-io7

draw-io8

ちなみにデスクトップ版と称したダウンロード用のものもある。Chromeの拡張機能の扱いのようです(僕はプラグインをなるべく入れたくないので使ったことはないです)。
draw.io | chromeウェブストア

どんなときに使える?

geometry

PCでなにか図を用意しなきゃいけないシーンっていうのは、多々ありますよね。普通のサラリーマンさんでも、打ち合わせの資料でなにか用意したいってことはよくあると思いますし(そういうときはさすがにパワポでいいかも…)。

で、ことブロガーなりネット上でなにか発信する人にとってはそれ以上に大事なことだと思っています。

  • 冒頭で言った「Officeが家にないケース」
  • 成果物はそもそもExcelやPowerPointじゃない
  • 物事を分かりやすく伝えるためにはもっと材料がたくさん必要
  • どんなニーズでも1つのツールで応えられるものを持っていたい(しかもウェアラブルで!

などなど、正直ビジネスで使う以上の需要があると思っています。

というわけで、どんなときに役に立つかちょっと考えてみましょう。「図の大切さ」ということですね。

物事の理解を助ける、もしくはひと目で分かるようにさせるとき

draw-io11

図を使う一番の目的は当然ここになるでしょう。

例えどんなに正確で体裁の良い文章でも、それを長々と書くより1枚の図を載せた方が理解しやすいのなら全力で図を用意するべきなのです。

これは僕もこのブログを含め、日頃から意識していることです。文字ばかりで読むのが嫌になるという第一印象を避ける効果も見逃せません。「箸休め」です。

そもそも視覚的にしか表せないものを表現するとき

draw-io10

1つ上の話は「そもそも頑張れば文章でも表現できる内容を助けてあげよう」というスタンスですが、当然そうじゃないときもあります。

組織図や構成図、もののグループ関係を表したり、間取り図のようにそれ自体が主目的の場合もある…。

「図」というか、もはやひとつの「コンテンツ」であると言えるでしょう。

実物のイメージをパッと見で伝えるとき

draw-io9

何かについて伝えるとき、お互いの間には決定的な相違があります。発信しているこっちはそのモノについてよく知っていますが、それを見ている/聞いている相手は何がなんだか全く知りもしないし、イメージも湧いていないのです。

ただスクリーンショットを撮ってだらだら貼っ付けるだけでも、実は初めて見に来た人は意外と見てくれるのです。イメージが湧くから。

そういうわけで、僕も最初に何枚か「draw.io」のスクリーンショットを紹介してみました。(これで僕自身が説明不足とかだったら超ダサい。ごめんなさい…)

draw.ioの素晴らしい点

draw-io12

前置きが長くなりました。(いつも

というわけで作図ツールを作ろうということになるんですが、この「draw.io」が優れている点を言わせてください。

汎用的な操作が全て利用できるので初めてでも直感的に使える

これはPCを普段から多く触る人にほど有利で嬉しいポイントです。

フォトショみたいなペイント系ソフトやエンジニア用のCADだったりみたいな、マウスとキーボードで操作する感じのインターフェースが基本的にいつもの感覚で使えるので、利用を始めた瞬間から作業効率100%です。

  • Ctrlキーとマウスホイールでの拡大縮小
  • Shiftを押しながらスクロールで横移動
  • ちょっとした選択解除とかで思わずEscキーに手が伸びるとちゃんと意図した動作をする
  • 「文字を入れたい」と思った場所をとりあえずダブルクリックしたりするとテキスト入力になる(当たり前かもしれないけど感動します。今の時代こういう分かりやすいソフトは減ってきている気がするので…)
  • カット・コピー・ペーストなどの基本ショートカットキーはもちろんサポート、その他大量にある

などなど。ユーザビリティを重んじるっていう超当然なことを、最近は全然享受できなくなってきている時代な気がするので、なんというか久しぶりに嬉しくなりました。

ちなみに、ホットキーの一覧はこちら。

draw-io-hotkey

豊富なテンプレートと、アホみたいに多い材料

draw-io13

まっさらな状態から好きな材料を置いていくことも可能なんですが(サービス開始当初はテンプレートなんかなかった気がする)、バリエーション豊かなテンプレートをベースに作ることも可能。

以下全部載せておきます(有言実行

draw-io14 draw-io15 draw-io16 draw-io17 draw-io18 draw-io19 draw-io20 draw-io21 draw-io22 draw-io23 draw-io24 draw-io25 draw-io26

こうやって「ただ画像を用意しまくるだけでは単にユーザビリティを下げるだけ」という良い例でした。()

とは言っても、この状態から実際に自分が作りたいものに向かうのはわりと非現実的な気もします。これは作りたいもののイメージのため、くらいに思っておくといいのでは?まあ、単なる「テンプレートいっぱいあるぜ」自慢なんでしょう。

ここに大量の「材料」を足せることの方がむしろ取り上げたい部分。

draw-io31

多すぎるのでさすがの僕も全掲載はやらないですが、とにかく大量にあるんです。

ひとつひとつの部品としての材料がありすぎて困るということはありませんから、これは本当に素晴らしいです。

中でも、

draw-io32

こういった公式デザインのアイコンが揃っていたり、

draw-io33

こんなWebアイコンまで揃っていたりします。

他にも

draw-io34

ソフトウェア設計で使うようなものから、

draw-io35

論理回路、アナログ回路もいけます。

困ることはなさそうですね。本当にこれが無料で広告もなしとは恐れ入る…。

細かいユーザーインターフェースの調整ができる

これ、メニューバーの中身です。

draw-io27

ウェブ上のツールなのに、ここまでスタンドアローンアプリのように自分好みにカスタマイズできるのはポイント高いです。

設定は(おそらく)Cookie保存だと思うので、また来たときにもちゃんと反映されているでしょう。

まとめ

これまでブラウザ上で動く色んなツールを使ってきましたが、ホットキーやUIなど、ここまで直感的になんのストレスもなく利用できるものは滅多にお目にかかれませんでした。

初めて触った日に「神だ」って思いました。でもpngで出力すると妙に画質が悪くなることがあるの、どうしてなんだろうなあ。ベクターデータになってないってこと?誰か教えてください…。

以上、ではまた!

みるみ
みるみ

ブロガー、ソフトウェアエンジニア。

この「みるめも」というブログの筆者です。

この記事へのコメント
コメントはまだひとつもありません :)

新しいコメントを書く

  • 必須項目はコメント本文のみですが、お名前はぜひご記入いただけると嬉しいです。
    ※メールアドレスを書いた場合も公開されることはないのでご安心ください。
  • 特定のコメントに返信したい場合は各コメントにある「返信する」ボタンからどうぞ。
  • コメントはこちらで承認の作業を行うまでは表示されません。ご了承ください。
    ※ここ数年スパムが激化しており、誤って削除されてしまうケースが増えてきました。スパムボックスも毎日自分の目で確認するようにはしているのですが、どうしても限界があります。確実に僕に連絡を取りたい方は メールTwitter からお願いします。