MD-Blog_Web Creative

MONSTERSの勉強会『Creators Lab』！
今回のテーマは、「画面フロー／システムフロー」を考えよう！です。

Webコンテンツを構築する上で、かなり重要なのがフロー設計。普段、ディレクターに甘えがちなところですが、クリエーターにとっても大事なトコロですよ！ってことで、実案件をベースに画面フローやシステムフローを作成する課題に挑戦しました。

• コンテンツワイヤーを含めた画面フロー図を作成するフロントエンド側
• システムフロー図を制作するバックエンド側

という二手に分かれ、課題に挑戦です。

コンテンツワイヤーを含めた画面フローを考える

必要な画面を洗い出す

画面をフローを作成する上で、まずコンテンツ全体を理解することが大事かと思います。

一つのコンテンツ内でも、場合によっては、場面ごとに仕様が違ったりすることもあるかと思いますので、そのルールを理解し、想定される画面を洗い出す、理解することによって、構成の破綻も防げます。
漏れが無いように画面数を想定するのが大事ですね。

画面をUIと結びつける

画面数や仕様を洗い出したら、システムの一連の操作に沿って、画面の位置付けと流れを紐づけながら、フロー図形式で表現していきます。

ボタンなどのトリガーをワイヤーで表現していくと、アクションを起こした時の画面推移が分かりやすくなりました。
また、アクションの違いなどで、画面推移が異なる場合には、色を使い分けたり、フローの線が交錯しないように配置するのも大事かと思います。

まとめ

画面フローは、ユーザーが迷子になりにくいよう、使い易さやサイト構造を考え、自分以外にも伝わるように表現しなければいけないので、コンテンツ構造の理解を深められますね。

• 導線の設計
• 必要となる機能

などが洗い出されると、デザインも余計な修正に手間を取られることもなく、スケジュールが立てやすくなるのではないでしょうか。

画面フローを設計することで、ユーザーもクリエーターも"迷子にならないコンテンツ"を心がけたいと思います。

システムフロー図を考える

フロー図を書くツールを選ぶ

Cacooを使用しました。 サイトのワイヤーフレームから、フローチャートまで様々な図を簡単に作成できます。オンラインサービスなので環境に依存することがありません。ファイルを忘れたから修正できないなどのミスもおきません。

データを共有できるのでプロジェクトメンバーとの情報共有に最適です。

操作も簡単で、直感的なUI、可愛らしいデザインも魅力的です。色分けやフォント種類、テンプレートも豊富なので見栄えが良いフロー図を作成することができます！

仕様に基づいて処理内容と分岐を洗い出す

使用した記号は、□(処理内容)、◆(分岐)と矢印を用いてフロー図を書いていきます。対応ブラウザの判別や処理内容に応じて、分岐処理や前の画面に戻るなどの流れを作ります。大きな処理ごとや役割の違う処理など色分けするとより分かりやすくなります。

図に使用した記号は、こちらを参考にさせていただきました。

Cacooで制作したフロー図

Cacooを使用して、簡単な画像を読み込むフロー図を作成しました。

まとめ

システムフロー図を書くことで難しく感じたことは、人が見ても分かりやすいフロー図を書くということです。作成した人が分かっていても、図式や資料がが無ければどう処理されるのか、分岐されるかは他の人は分かりません。システムフローを書く理由としては、

• 案件のメンバーに共有できること
• 処理内容を明確化

だと思います。システムフローがあれば、チーム内で確認することが容易になるので、フロントエンド側とのずれ、チェック漏れを制作する前に確認することができます。

まとめのまとめ

フローを作る上でのポイントは以下の3点です。

• 頭の中を整理する。手を動かす前に考えるクセをつけることが大切！
• 全体工数を解析し、手がかかりそうな部分、量産する部分など見極める！
• 後工程、クライアント対応にやさしく。柔軟に対応できるよう汎用的なつくりを考える！

制作していく上での差異を無くすために、社内の情報共有や案件の認識を併せておくことは大切です！
そういったことを無くすための一つの手段として、フローを作ってプロジェクトメンバーに共有することも必要だと思います。これを機会に分かりやすいフロー図が書いて案件に取り組みたいと思います。

(Written by Yuji Ushida + Ken.Otsuka)