皆さんはフローチャートについてどんなイメージをお持ちでしょうか。「あると良さそうだけど作るのは面倒くさそう」「作った時のメリットがわからない」「システム開発のためのもの」といったイメージでしょうか。
今回、フローチャートをイチから作成する機会があり、メリットや作成のコツなどをまとめてお伝えしたいと思います。

フローチャートとは

フローチャートは、プロセス、システム、コンピューターアルゴリズムを示す図です。複雑化しやすいプロセスの記録、学習、計画、改善、伝達を明確かつ分かりやすい方法で実現するためのツールとしてさまざまな分野で広く活用されています。
引用：https://www.lucidchart.com/pages/ja/what-is-a-flowchart

このようにフローチャートは複雑なプロセスをシンプルに表現する際に役立つものです。
アプリやWebサイトでは “どの画面で何をするとどの画面に移動するか” という画面遷移を様々な条件分岐を踏まえて表すことができます。
そのため各画面の関係性やサービスの全体像を把握する際に役立ちます。
ゼロからサービスを作る時というよりは、既存のサービスの全容を把握したい時や既存サービスのリニューアルを行う時などに有用かなと思います。

フローチャートを作成する際のメリット

実際にフローチャートを作成してチーム内で感じたメリットは、以下のようなものです。

サービスの全体像が把握できる

サービス全体のフローチャートを作成することで、そのサービス内の機能、状態/ステータス、ユーザーがとれるアクション等の全体像が把握できます。
また、必要な画面を洗い出すためデザインや開発に取り掛かる前に全体ボリュームの把握や工数の見積もりも容易になります。
さらに、全体が見えることで分岐が複雑すぎる部分やユーザーの行うタスクのプロセスの煩雑さが一見してわかるため、サービスの改善点を早い段階で見つけることができます。

考慮漏れを防げる

フローチャートでは条件分岐を描くことによってエラーや画面ごとのステータスを洗い出すため、必要な画面をただリストアップするよりも考慮漏れが圧倒的に少なくなります。

共通認識がもてる

フローチャートはうまく作成できていれば誰がみてもわかるシンプルなものになります。そのため、作成しておくことでサービスに関わるメンバーはもちろん、クライアントやあらゆるステークホルダーともサービス全体の共通認識を持つことができ、これを議論の土台とすることもできます。
サービスを運用していく上でフローチャートを作りメンテナンスをしておくと、運用を引き継ぐ場合や新メンバーが入った場合でも簡単にサービスの全体を共有することができます。担当者が頻繁に変わったり、関わるメンバーがどんどん増えたりする可能性のあるサービスには、この点は特に良いのではないかなと思います。

条件分岐を含む画面遷移をシンプルに整理できる

ワイヤーフレームや実際の画面を利用して条件分岐を含む遷移をまとめようとすると、一画面からいくつも線が出ることになったり、注意事項の文字が増えたりして複雑なものになってしまいます。実際に画面のスクリーンショットを使って遷移をまとめようとしたこともありましたが、あまりに複雑で他の人が一見して把握することが難しかったため途中で諦めたことがあります。その点、フローチャートは画面の要素を削り落としたシンプルな構造のため、遷移にフォーカスして全体を整理することができます。

フローチャートを作成する際のTips

フローチャートを作成する上でいくつか気をつけた点や気づいた点をTipsとして紹介します。

サービス全体を1つのフローチャートで表現しない

非常にシンプルに見えるサービスでも全体をひとつにまとめようとすると巨大な図になります。作成している途中に複雑になりすぎて挫折する可能性も…。
そのため、基本的にはフローチャート自体をいくつかのカタマリに切り分けて作成することをお勧めします。今回作成してみてよかった切り分け方としては、”基本的にはユーザーの行動（アクション）ごとで切り分け、アクションで漏れた部分は機能ごとに切り分ける”というものです。
というものです。
例えばECサイトなら「カートに商品を入れる」「カートから決済する」「新規登録をする」というようなユーザーのとるメインの行動をベースにして切り分けるイメージです。
ただし、アクションごとに切り分けるとアクションとアクションのつなぎの部分が抜け漏れる可能性があるため、注意しましょう。

ルールは明確にする

フローチャートは長方形、ひし形などシンプルな図形のみを用いて表現するため、どの図形が何を示しているかというルールを最初に定義し、共有しておかなければなりません。

ルールは確認する人が一見してわかるように、フローチャート上に記載しておきましょう。

なるべく線を交差させない

線が交差するとどの画面からの遷移なのかわかりにくくなり、誰が見てもわかるというメリットがなくなってしまいます。せっかくシンプルに表現したものが複雑にならないよう、なるべく線は交差しないように工夫しましょう。
線がどうしても交差するときは線の太さや色を変えることで対処もできますが、そのルールの共有も忘れずに行いましょう。また、このような場合は条件分岐が複雑すぎる可能性もあるので、該当部分を課題として捉えて見直してみてもいいかもしれません。

▼線が交差していることで遷移がわかりにくくなっている

 

一緒にワイヤーフレームを作成する

ここまでフローチャートの有用性を書いてきましたが、もう一つの重要なこととしてあげたいのは併せてワイヤーフレームも作成することです。

ワイヤーフレームとは

簡単に言えば「何を・どこに・どのように」が記載された「サイト設計図面」です。
つまり、制作するウェブサイトの要素や機能、情報を設計図面のように配置しておき、お客様や制作者と認識を合わせるためのものです。
引用：https://liginc.co.jp/web/useful/128790

フローチャートをある画面から別の画面に遷移するまでの道筋や条件分岐を示す「画面ごとの関係性や大きな動きを表すもの」とすると、ワイヤーフレームは画面上のどこに何がどのように配置されているかを示す「画面上の要素を表すもの」です。

フローチャートは画面の要素や見た目の部分を削ぎ落としているので、各画面にどこへの導線があるのか、画面上で何ができるのかが表現できません。なのでフローチャートをもとに画面デザインを起こすことはできませんし、エラーや分岐が発生するタイミングが正しいのかも判断しにくいことがあります。
一方で、ワイヤーフレーム単体では上でも述べたように条件分岐を含む流れがうまく表現できません。よって両方合わせて用意することがベストだと感じました。

フローチャートとワイヤーフレームの両方を作成するとメンテナンスの負担が非常に大きくなるので、今後より良い方法を模索していきたいです。

フローチャート作成におすすめのツール

フローチャートを簡単に作りたい方におすすめなのが、オンライン上のホワイトボードとして使用できるオンラインホワイトボードStrapです。

チームコラボレーションを加速させるStrapを使えば、議論をしながらリアルタイムでフローチャートを作成していくこともできます。

 

フローチャート作成に活用できるStrapの特徴

  1. 図形+矢印をワンクリックで描画できる
    図形をクリックすると、四方向にコネクタのマークが出てきます。フローチャートを伸ばしたい方向を選択すると、ワンクリックで同じ図形を描画することができます。
  2. 様々な形状の図形を簡単に描画できる
    描画した図形はあとから簡単に形状を変えることができます。四角だけでなく、ひし形や小判型など、フローチャートに必要な図形が揃っています。

Strapの使い方については、ぜひこちらの記事もご覧ください。

リモートワークの強い味方！オンラインホワイトボードStrapの使い方（初級〜応用編・番外編）

 

最後に

今回はフローチャートを作成するメリットや作成のコツをまとめましたが、トーストや複数画面にまたがる要素、ループや条件分岐の多い遷移などの表現が難しかったり、画面の増減によるメンテナンスが大変だったりと課題も色々とありました。今後も必要に応じて作成していくと思うので、今回得た気づきを活かして改善していきたいと思います。
拙文ではありますが何かの参考になると幸いです。

Goodpatchはサービスの立ち上げから改善まで、様々な課題にクライアントとパートナーシップを組み一緒に取り組んでいます。ご興味のある方は是非こちらからお問い合わせください。

Share on

juri
2018年10月からGoodpatchにジョイン。PM/UXデザイナーの道を邁進中です。