Webサービス

Draw.ioは無料で使える高機能チャート作成ツール

フローチャートや組織図のようないわゆるビジネスグラフィックを描くのに便利なツールdwaw.ioを紹介します。

いろんな用途に応じたテンプレート、パーツやクリップアートが豊富に用意されていてだれでも手軽に本格的なチャートを作成できます。

Microsoft社のVisioのような使い勝手で本格的なチャートをカンタンに描けて、しかも無料。これからビジネスグラフィックツールを使ってみたい方にぴったりです。

 

draw.ioでわかりやすく説得力のある図を作ろう

まず、draw.ioの主な特徴をまとめてみましょう。

  • 無料で使えるWebアプリケーション

  • テンプレートやパーツが豊富で、きれいな図をカンタンに作れる

  • オブジェクトの装飾がカンタンで表現力が高い

  • 作成した図はパソコンやクラウドに保存

  • PNGやJPEG画像のほか、HTMLやXML形式にもエクスポート可能

では、さっそく具体的に紹介していきます。

 

クラウドに保存、ブラウザがあればどこでも描ける

draw.ioというのはちょっと変わった名前ですが、実はこれがそのままWebサイトのアドレスになっています。

つまり、Webブラウザでhttp://dwaw.io/にアクセスして、ブラウザ上で図を作成するわけです。

Draw.ioにアクセス

ブラウザでdraw.ioにアクセスする

作成した図は、ローカルPC上に保存することもできますが、GoogleドライブやOneドライブなどのクラウドストレージに保存しておけば、外出先などいろんな場所で作業できます。

 

編集が簡単なドロー系のグラフィックツール

ビジネスグラフィック系のソフトでは、ブラシで絵を描くようないわゆるペイントツールと違い、あらかじめ用意されているパーツを並べて図を組立てていきます。このパーツはプリミティブとかオブジェクトと呼ばれます。

パーツを並べたり、パーツ同士を線で結んで関係を表現したり、パーツの大きさを変えたりカンタンにできるところがペイントツールとの大きな違いです。

パーツを移動して配置を調整したり、重なり順を変えてアレンジしたり、といったことがカンタンにできるから、絵が苦手な人でも見栄えのいい図を作れます

テンプレートも数多く用意されているのでちょっとアレンジしたり、テキストを書き換えるだけでも使えますよ。

テンプレートサンプル1

用途に応じたテンプレートを選べる

 

パーツの豊富さが表現力を決める

そして、このパーツが豊富に揃っていることが、ビジネスグラフィックツールの使いやすさと表現力に大きく影響します。

フローチャートの作成専用であれば、線で描いたシンプルなオブジェクトを並べるだけですみます。

しかしビジネス用の図としては人物、記号、オフィス機器などのイラスト、アイコンがたくさんあったほうが、見栄えがいいだけじゃなく判りやすくなりますね。

draw.ioではフローチャート用のパーツだけでなく、 コンピュータ、モバイル機器、ネットワーク機器などを表すハイクォリティなイラストがパーツ化されていて、クリックで図に配置できます。

Draw.ioのアイコンパレット

さまざまなパーツが用意されている

イラスト風のものだけでなく、シンプルなピクトサイン風のアイコンも揃っていてライブラリから自由に追加できます。

クリップアートを追加

クリップアートの種類も豊富だ

このブログでも、ルーター関係の記事などでdraw.ioで作った図を使っています。図の中で使っているルーターやWi-FIアクセスポイントなどのシンボルアイコンはすべて、draw.ioに用意されているもの。

Draw.ioで作った図の例

ルーター紹介で使った図はDraw.ioで作成

 

自分で描く必要もありませんし、フリー素材サイトから探してくる手間もいりません。

 

線の接続や装飾で関係性をわかりやすく説明

ビジネスグラフィックでは、ふたつのパーツを線で結んで関係性を表すような使い方をよくします。

それが複雑になってくると組織図のような本格的なチャートになっていきますね。

draw.ioでももちろんパーツ同士を線で結ぶことができます。

結ぶというのは単に線が引いてあるだけじゃなくて、パーツと線がぴったりくっついている(スナップしている)ということです。

アイコンの複製と接続

矢印のクリックで複製と接続が同時にできる

複製したアイコン

複製したアイコンは線で接続されている

だから、パーツの位置が悪いなと思ってちょっと移動すれば、線の位置もそれに合わせて動いてくれます。パーツと線がくっついているから線のほうを引きなおす必要がありません。

これだけでも作業性がぐんとアップします

アイコンの移動と線の変形

アイコンを動かすと線も自動的に変化する

パーツの周囲には線をスナップするポイントが四隅+4辺につき3ヶ所の計17ヶ所あるので、線のレイアウトがかなり自由にできます。

スナップポイントの移動

接続するポイントを移動できる

もちろん、線の太さ、色、点線や実線などの線種、不透明度なども指定できます。

また、直線やカーブを描くだけでなく、直線をカギ型の折れ線に変換するといったこともできます。カーブや折れ線は中間点というポイントを動かすことで形をカンタンに変えられるのもポイントです。

線の装飾

線の色や太さをカスタマイズ

 

テキストの表現力もまずまず

フローチャートのパーツでは中にいろんな文字を書き込みますが、draw.ioではそのほかのオブジェクトやイラスト風のアイコンにもテキストを書き込めます。

たとえばパソコンのイラストにそれぞれユーザーごとの名前を付けたり、矢印に説明の文字を書き加えるといった使い方ができます。

もちろん、それとは別に独立してテキストだけ配置することもできます。

装飾についても、太字や下線、位置揃えなどの指定はもちろん、縦書きにしたり、パーツに対する表示位置を指定したりもできます。

文字色、背景色、罫線(囲み)の色、不透明度などの指定も可能です。

テキストの装飾

文字色やアイコンに対する配置などを変更する

ただし、文字間隔や行間隔の設定などができないので、そういった機能が必要な人は本格的なグラフィックツールを使いましょう。

 

ドローツールには欠かせない整列やグループ化も

ドロー系グラフィックツールでは、並べたパーツの配置をキレイに揃えるための整列、複数のパーツをひとまとめにして扱えるようにするグループ化などの機能を備えているのがふつうです。

draw.ioにはもちろんこれらの機能も揃っています。

配置と整列

パーツの配置や整列、グループ化も可能

 

保存とエクスポート/インポート

最初にもふれたとおり、作成した図の保存先にはローカルPCのほかにGoogleドライブやOneDrive、DropBoxといったクラウドストレージが使えます。さらにGitHub、GitLab、Trelloなどのサービスも利用できます。

名前をつけて保存

クラウドストレージにも保存可能

Web用の画像として使用するならPNGやJPEG、SVG形式などでエクスポートしましょう。

画像だけでなく、HTMLやXML、PDF形式の文書にエクスポートすることもできます。

エクスポート機能

画像やHTML、XMLにエクスポートできる

インポートのほうはGoogleドライブ、OneDrive、Dropbox、GitHub、GitLab、Trelloなどに対応していますから、これらのサービスにアップされている既存の図を取り込んで利用可能です。

 

ビジネスグラフィック入門に最適

このように、draw.ioはVisioのように本格的なグラフィックソフトにさほど見劣りしない機能をもっています。

Webアプリケーションなのでレスポンスの点では最高とはいえませんが、インターネットさえつながっていれば、だれでもカンタンに無料で使えるのは最大の魅力です。

使用頻度の低いビジネスグラフィックツールにお金を使いたくない方、ビジネスグラフィックツールがどんなものかまず体験してみたい方にはぜひお薦めします。

-Webサービス
-,