ちょっとした遷移図を書く時、皆さんはどうしていますか？
マイクロソフトのPowerPointで図形を作っては矢印で繋げて画像を作っている方も多いのではないでしょうか？
今日はGoogleDriveに連携されているDraw.ioを使用した遷移図の作成方法を紹介していきたいと思います！
Draw.ioとは？
draw.io is free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams.
https://www.draw.io/
draw.ioは、フローチャート、プロセス図、組織図、UML、ER、およびネットワーク図を作成するための無料のオンライン図ソフトウェアです。
というわけで無料で様々な図を作成できる無料のWebサービスです。
下記ページからすぐに作図を始めることが出来ます
Draw.ioの始め方
まずページを開いたら右下の地球儀マークから日本語を選択しておきましょう。
次に保存先を決めましょう。
Show more…を選択すると↑の画面になります。
保存先にはGoogleドライブなどのオンラインストレージも使えます。
会社によってオンラインストレージを使えない場合でもDraw.ioのソフトを入れれば自分の端末上だけで作図が可能ですのでご利用ください。
なお「作ったものを保存しておく必要がない」という場合であれば「後で決める」を選択しても問題ありません。
各種Webサービスとの連携も可能で、GsuiteやTrelloとの連携が可能です。
Webサービス連携についても上記リンクに記載があるので興味のある方は参考にしてください！
Draw.ioの使い方
保存先を指定すると今度は↑のような画面になります。
ここで作図をしていきます。
ざっくりと説明をすると、
- 左側のボックスから好きな画像を選択して
- 任意の場所にドラッグ・アンド・ドロップ
- 図を選択した状態で右側の詳細設定の画面から色などの調整をする
- 1.〜3.を繰り返す
です。ね、簡単でしょ？
百聞は一見に如かず。簡単な図を作成してみたので参考にどうぞ！（約3倍速）
GoogleのサービスをインスパイアしているUIで、個人的にはとても分かりやすいと感じました。
特に注目してもらいたいポイントとしては
- 線を作るのが楽、且つ、綺麗✨
- 素材の量がすごい
があります。次の単元で細かく見ていきましょう。
ここがすごい！Draw.io！
線を作るのが楽、且つ、綺麗✨
通常、パワポでフローチャートを作る場合、「コネクタ」を使って図形の連携は可能です。
ただし、直線・カギ線・曲線などから選択する必要があり、使い方がわかりにくいです。
Draw.ioでは直感的に線を引くことができ、デザインの変更も簡単に可能です。
素材の量がすごい
例えば以下の画像ですが、全てDraw.io内ですぐに使用できる画像のみを使用して作りました。
外部サービスのアイコンなどは別途画像をダウンロードして追加しなければならないことが多く、面倒な部分のひとつですが、Draw.ioであれば主要なサービスであればアイコン素材を簡単に導入することができます。
素材の追加方法ですが、左側の素材バーの下に「その他の図形」と書かれたボタンがあるので、それを選択します。
次にダイアログが表示されるので、追加したいアイコンセットにチェックを入れて適用を選択します。
すると、左側にアイコンが追加されているので、これまでの方法と同様に画像を使えるようになります。
Draw.ioで文字が改行されてしまう問題
Draw.ioを使っていると画像をExportした時に画像が改行されてしまうことがありました。
その場合、Word Wrapのチェックを外してみてください。
これでおそらくうまくいくと思います。
まとめ
今回はDraw.ioについての紹介をしました。
これまで図を作ることが面倒でなんとか文章で伝えようとしていた事があったのですが、Draw.ioと出会って、視覚的に情報を組み立てていくようにしてからは、共有のコスト削減だけでなく、個人の仕事内容の整理にも繋がり、かなり役に立っています。
これだけの手軽さで、基本無料で使用できますので、この記事を通して、業務に役立ててもらえればと思います！
では、ここまで読んで頂きありがとうございました〜！
コメント