Drip 'n' Snip

ドリップン・スニップ

あなたの生活役立つWEB情報イッパイお届け
drawio

マニュアルやフローチャートを作りたい!そんな時はDraw.ioが便利


こんにちは、基本図示しないと自分が理解できない村の畑で生まれたキャベツとしての僕です。
しかし、人間誰しも、そういう部分が、あると思うのです。

例えば、誰かと何かのイベントを定期的に開催したいと考えているとしましょう。

そのイベントには、設営作業や、金銭の授受が発生する度にしなければならない手順があるので、あなたはマニュアルを準備したいと考えています。
その手順に分岐がなければ文章で以下のように書くことも出来るでしょう。

1.注文をお聞きする
2.お金を受け取る
3.お釣りを返す
4.商品を袋に入れる
5.商品の入った袋を手渡す
6.ありがとうございました、と言う
7.…

しかし、この方法は分岐が発生した途端にかなりややこしいものに変貌します。

1.注文をお聞きする
2.注文の内容を入力する
3.食券の1/3をお客様に手渡す
4.厨房へもう1/3を渡す
5.レジ前のトレイにに最後の1/3を置く
6.丼物の場合には7へ、プレートランチの場合は11へ、麺類の場合は16へ

<丼物>
7.レトルトの具を鍋にかける
(13へ)

<プレートランチ>
8.具材のパックからプレートに盛り付ける
9.レトルトの具材を鍋にかける
(13へ)

<麺類>
10.麺を茹でる
11.濃縮スープを器に入れ、お湯でとく
12.茹で上がった麺を湯切りして器に入れる
(ごはんセットの場合は13へ、そうでない場合は15へ)

13.ご飯を盛り付ける
(サラダ付きの場合は14へ、そうでない場合は15へ)

14.冷蔵庫からサラダを出す

15.お客様をお呼びする
16.お金を受け取る
17.お釣りを返す
18.商品を手渡す

もう、長い!何のブログだよ!行ったり来たりして解りづらいし、読み辛いし、何考えてんだ…!?

しかし、こういうありがちな条件分岐を含むマニュアルは、業務でも家事のでも、作りたい!、というシーンは沢山あるはず!
そこでDraw.io

Draw.ioでマニュアル・フローチャートを作ろう!

Draw.ioはブラウザ上でフローチャートやXML図などを簡単に作成できる、無料の図形作成ツールです。
アクセスすると、早速「どこにファイルを保存したいんだい?」と聞かれます。
flowchart_maker___online_diagram_software

そうなのです、このDraw.ioは、直接Google DriveDropBoxなどのクラウドストレージに作った図を保存する事が出来ます。

どれか1つを選択すると、既存の図を開くのか、新しい図を作成するのか聞かれます。

flowchart_maker___online_diagram_software_%f0%9f%94%8a

上をクリックすると、新しい図の作成、下をクリックすると、既にある図を編集することが出来ます。

テンプレートを選ぼう

さて、新しい図を作成したいので上の方をクリックすると、何やら大量のテンプレートの一覧が表示されます。
量が凄まじい。上から順番に説明していきます。

まずflowchart_maker___online_diagram_software

・basic:これは空のテンプレートで、最初は何も配置されていません。
慣れてきたり、丁度よいテンプレートがない場合にはこれで作り始めることになります。
・business:ビジネスに便利なテンプレートがあります。具体的には、作業工程のフローチャートや、会社間のやり取り図、後はいくつかのSOTW分析のためのテンプレートが用意されています。
・charts:グラフや組織図などのテンプレートです
・Engineering:回路図などのテンプレートです
・Flowcharts:フローチャートのためのテンプレートです。
・Mindmaps:マインド・マップのためのテンプレートです。マインド・マップならDraw.ioよりもText 2 Mind Mapがおすすめではあります。
・Mockups:スマホアプリのモックアップを作るためのテンプレートです
・Network Diagram:ネットワークを可視化するためのテンプレートです。LAN構造やIPをメモするのには最適です。
・Other :その他色々なテンプレートです。
・Software Design:XML図やクラス図などを作成するためのテンプレートです
・Venn Diagrams:ベン図のためのテンプレートです。
・Wireframes:ワイヤーフレームのためのテンプレートです。WEBサイトの制作やアプリのUI制作には便利です。

はい、また長々と書いてしまいましたが、今回はこの中でもbasicを使用します。
もしくは、目的に近い便利そうなテンプレートがあればそちらを使用してください。

フローチャートを作ろう

basicのテンプレートを選択すると、こんな画面が表示されます。
左側から図の形を選択し、真ん中の空間にドロップする事で図を書いていきます。
詳細な設定が右側で行えますが、最初あまり触る必要はありません。
untitled_diagram_xml_-_draw_io_%e3%81%a8_%e6%96%b0%e8%a6%8f%e6%8a%95%e7%a8%bf%e3%82%92%e8%bf%bd%e5%8a%a0__drip__n__snip_-_wordpress_%f0%9f%94%8a

まず、四角形を1つ配置します。
配置した四角形をダブルクリックすると、その中に文字を書くことが出来るようになります。
%e6%b3%a8%e6%96%87%e3%83%95%e3%83%ad%e3%83%bc_-_draw_io

こんな風に8隅に◯が出ている時にそこをマウスでドラッグすると、四角形を大きくしたり小さくしたり出来ます。

%e6%b3%a8%e6%96%87%e3%83%95%e3%83%ad%e3%83%bc_-_draw_io

次に、その四角形をクリックしてマウスを四角形に合わせると、4方向に矢印が出ます。
この矢印をクリックすると、その方向に矢印のついた線でつながれた、同じ種類の四角形を出すことが出来ます。

%e6%b3%a8%e6%96%87%e3%83%95%e3%83%ad%e3%83%bc_-_draw_io

基本的には、箱同士を矢印で繋いでフローチャートを作っていきます。
こんな感じで。%e6%b3%a8%e6%96%87%e3%83%95%e3%83%ad%e3%83%bc_-_draw_io

簡単ですね!

分岐をしよう

しかし、フローチャートには分岐が必要です。
どんなふうに分岐をするかというと、ひし形の箱を使います。
%e6%b3%a8%e6%96%87%e3%83%95%e3%83%ad%e3%83%bc_-_draw_io
こんな風に。

マニュアル用のフローチャートであれば、この分岐の後に共通のフローを繋げていけば、自動的にフローチャートが完成します!
コツとしては、共通の内容を上手いこと切り出してまとめるとスッキリします。

保存したり書き出したりしよう

左上のuntitled〜〜〜と書いてある場所をクリックすると、名前を変更することが出来ます。
今回は注文フローという名前にしました。

その後、その下にあるFileをクリックすると、保存したりファイルとして書き出したり出来ます。

このメニューからExport as...を選ぶと、imageなどに書き出せます。
%e6%b3%a8%e6%96%87%e3%83%95%e3%83%ad%e3%83%bc_-_draw_io

そして実際に書き出したものがこちら。

%e6%b3%a8%e6%96%87%e3%83%95%e3%83%ad%e3%83%bc-2

テキストだけで書くよりも、かなりすっきりと解りやすく書くことができました。

まとめ

このDraw.ioはConfluenceを紹介した時に少しだけ名前が出てきましたが、プラグインとしてConfluenceに導入してあげることが出来ます。

すると、マニュアルをネット上で共有した次の瞬間にはメンバー全員が見ることが出来る状態になるので、とんでもなく便利です。

何か分岐を含む決まりきった作業がある時には、このDraw.ioがとってもおすすめです!

NEXT
スマホがスキャナに変身!スキャナよりも便利なスキャンアプリ「scannable」

  関連記事

pages
Macユーザーなら文書作成はやっぱりPages!

おはようございます!すっかり初夏っぽい日が増えてきて夏好きの私は今最高にテンショ ...

f.lux
パソコンによる目の疲れからの卒業。MacやPCのナイトシフト、f.luxを使おう!

こんにちは!疲れ目で、最近頭が頭痛で痛い僕です。 PCとにらめっこするお仕事をさ ...

JotForm
思い通りにトランスフォーム!Jotform!

週に1度はモンスター・エナジー。僕です。 皆さんは自分のサイトやブログやサービス ...

gifviewer
Twitterやfacebookで動画は重い…でもGIFなら…!?- 1.git viewer

こんにちは、近所に猫カフェが出来たので足繁く通っています、僕です。 猫カフェって ...

slack
SlackとGoogleが手を組んだぞ!…でも、Slackって何?便利なの?

こんにちは。 GoogleとSlackが手を組み、Google Drive内のB ...

-アプリ/サービス