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

Tweet

Pocket

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

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

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

１．注文をお聞きする
２．お金を受け取る
３．お釣りを返す
４．商品を袋に入れる
５．商品の入った袋を手渡す
６．ありがとうございました、と言う
７．…

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

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

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

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

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

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

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

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

テンプレートを選ぼう

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

まず

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

フローチャートを作ろう

basicのテンプレートを選択すると、こんな画面が表示されます。
左側から図の形を選択し、真ん中の空間にドロップする事で図を書いていきます。
詳細な設定が右側で行えますが、最初あまり触る必要はありません。

まず、四角形を１つ配置します。
配置した四角形をダブルクリックすると、その中に文字を書くことが出来るようになります。

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

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

基本的には、箱同士を矢印で繋いでフローチャートを作っていきます。
こんな感じで。

簡単ですね！

分岐をしよう

しかし、フローチャートには分岐が必要です。
どんなふうに分岐をするかというと、ひし形の箱を使います。

こんな風に。

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

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

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

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

このメニューからExport as...を選ぶと、imageなどに書き出せます。

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

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

まとめ

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

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

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

  関連記事