Webサイトのフロー図を作成する際、多くの人がいきなりデザインツールを開いて描き始めますが、途中で手順の抜け漏れやテキストの不一致、スタイルの不統一に気づき、何度も修正して時間を無駄にしてしまいます。実は、事前にいくつかの準備をしておけば、その後の作業がスムーズに進みます。以下に、作成前に準備すべき内容のリストをまとめましたので、参考にしてください。
1. フローの目的と対象を明確にする
まず、このフロー図がWebサイトのどの位置で使用され、誰に向けたものかを考えましょう。例えば：
- 製品の使用フローの場合、ユーザーは操作手順に注目するため、図は簡潔明瞭である必要があります。
- サービスのフローの場合、ユーザーはタイミングや成果物に関心を持つため、重要なポイントを明記する必要があります。
- 社内チーム向けのフローの場合、より詳細な判断分岐や例外処理が必要です。
目的を明確にした後、図のメインビジュアルスタイル（ビジネス調、フラット、手書き風など）と複雑さを決定し、闇雲に始めるのを避けましょう。
2. 完全なフローの手順とテキストアウトラインを整理する
いきなり図を描かず、まずフローをテキストで書き出しましょう。以下の要素を含めることをお勧めします：
- 開始点：ユーザーがどこから始めるか（例：ページ訪問、ボタンクリック）。
- 主要な手順：各段階の名称、アクション、または判断条件。
- 分岐の方向：条件が成立する場合としない場合の経路。
- 終了点：フローが終了する合図（例：送信成功、ダウンロード完了）。
同時に、各手順に簡潔なテキスト説明（8文字以内を推奨）を用意し、図上にテキストが多すぎて読みにくくなるのを防ぎます。テキストアウトラインを整理したら、同僚やクライアントに確認してもらい、フローに誤りがないことを確認してからデザインを始めましょう。
3. ビジュアル参考資料と配色を収集する
アイコンのスタイルと配色を事前に決めておくことで、途中でツールを切り替えて素材を探す手間を省けます。以下の準備をお勧めします：
- アイコンライブラリ：例えば、無料で商用利用可能な素材サイトから、フラット、線画、または塗りつぶしスタイルのアイコンを統一してダウンロード。
- カラーパレット：Webサイトのブランドカラーや全体的なスタイルに基づき、メインカラー、補助カラー、背景色、テキスト色を決定。通常は3～4色以内に抑える。
- 矢印と接続線のスタイル：直線、折れ線、曲線のどれにするか、矢印の方向を統一するか。
- レイアウト参考：同種のWebサイトのフロー図のスクリーンショットをいくつか見つけ、レイアウトやテキストサイズを参考にする。ただし、コピーはせず、構造のみを参考に。
4. 図のタイプとサイズを決定する
フロー図は必ずしも上下に並べたワイヤーフレームである必要はありません。内容に応じて適切なタイプを選びましょう：
- 線形フロー図：手順が少なく、一方通行のフローに適しています。
- スイムレーン図：部門間や役割分担のあるフローに適しています。
- 決定木図：判断分岐が多いフローに適しています。
同時に、画像の出力サイズ（例：幅1200ピクセル、高さは内容に応じて自動調整）を決定し、Webサイトでの使用シーンを考慮します。内部ページのイラスト、記事の挿絵、バナーの一部など、場所によってサイズや解像度の要件が異なります。
5. ツールとテンプレートを準備する
デザインスキルに応じて適切なツールを選びましょう。自分で行う場合：
- オンラインツール：Canva、ProcessOn、Lucidchartなど、既存のテンプレートがあり、テキストと配色を調整するだけで使用可能。
- デザインソフト：Photoshop、Illustrator、Figmaなど、カスタマイズ性の高い要件に適しています。
外部にデザインを依頼する場合は、事前にテキストアウトラインと参考図を提供し、デザイナーがあなたの枠組みに沿って直接出力できるようにすると、コミュニケーションコストを削減できます。
6. コンプライアンスと著作権リスクを確認する
最後に、使用するすべてのアイコン、フォント、画像素材が無料で商用利用可能か、または適切なライセンスを取得していることを確認します。特に企業のWebサイトで使用する場合、素材の著作権問題によるトラブルを避けるためです。また、フロー図内のテキスト説明は正確で真実に基づき、架空のサービス手順や効果を約束しないようにしましょう。
まとめ
フロー図を作成する前に、上記の内容を30分かけて準備すれば、その後のデザイン効率が大幅に向上します。まずフローを明確に考え、書き出してから描き始めれば、通常は一度で合格できます。Webサイトのサービスページやヘルプセンターを更新中の場合は、このリストに従って事前準備を行い、手戻りを減らしましょう。
