フローの型の選び方
フローの型は、「どのくらい詳しく伝えるか」「何を軸に見せるか」「依頼の種類でフローが変わるか」の3つで変わります。依頼のあとの進み具合を共有する場合は、問い4の型を加えます。問い1〜3の順に選ぶと、ページ全体の組み立てが決まります。型を選んだら、各Patternのページでワイヤーフレームとプロンプト、動くデモを確認できます。
問い1：フローを、どのくらい詳しく伝えますか？
サービスページのセクションや、進め方のページで使う型です。
| 伝え方 | 向く型 |
|---|---|
| 全体の順番を、短くひと目で見せたい（基本） | 横並び型 |
| 各段階の内容と、お客様にお願いすることまで、順番に読んでもらいたい | 縦タイムライン型 |
| 全体の順番を先に見せ、詳しい内容は読みたい人だけに開いてもらいたい | 詳細開閉型 |
問い2：何を軸に、フローを見せますか？
問い1の型に加えたり、単独で使ったりします。伝えたい情報に合わせて選びます。
問い3：依頼の種類で、フローが変わりますか？
種類ごとに段階が違い、まとめると読みにくい場合の型です。
| 状況 | 向く型 |
|---|---|
| 新しく作る・リニューアル・運用だけ、のように、依頼の種類ごとに流れが違う | 分岐型 |
問い4：ご依頼のあと、進み具合を共有しますか？
依頼の前の説明ではなく、ご依頼のあとにお客様と共有する画面で使う型です。
| 状況 | 向く型 |
|---|---|
| いまどの段階か、お客様に何をお願いするかを、依頼のあとも確かめてもらいたい | 進捗表示型 |
フローの型の比較
| 型 | 役割 | 置く場所 | 向く状況 |
|---|---|---|---|
| 横並び型 | 基本の見せ方 | サービスページ、トップページ | 段階が5つ前後で、順番と長さをひと目で見せたい |
| 縦タイムライン型 | 詳しい見せ方 | 進め方のページ | 各段階の内容とお客様にお願いすることまで伝えたい |
| 期間つき型 | 期間の見せ方 | 進め方のページ、料金表の近く | 全体の期間が判断材料になり、条件で変わることも伝えたい |
| 担当分け型 | 担当の見せ方 | 進め方のページ | お客様の作業が多く、事前に把握してもらいたい |
| 詳細開閉型 | 詳細の開き方 | 進め方のページ | 全体の順番を保ちつつ、詳しい説明も用意したい |
| 分岐型 | 分岐の見せ方 | 進め方のページ | 依頼の種類によって、流れの段階が変わる |
| 進捗表示型 | 依頼後の見せ方 | お客様専用のページ | 依頼のあと、いまの段階とお客様の作業・期限を共有したい |
すべての型に共通する設計の原則
フローの型を作る中で、型が違っても繰り返し出てきた原則です。どの型を選んでも、次の点は同じように確かめます。
- 段階は5つ前後を目安にする。多い場合は近い作業をまとめ、詳しい内容は別の場所や開閉で見せる
- 順番は文字で示す。矢印・線・色だけで表さない。通常の段階の一覧は順序のあるリスト（ol）、担当の比較は表（table）で組み、期間図には各段階の文字情報を添える
- 段階の名前は、その段階で起きることが分かる言葉にする。「対応」「実施」のような抽象的な言葉だけにしない
- 期間は予定・目安であることを図や一覧のすぐ近くに常に示し、前後する条件も近くに書く。実際の運用で守れない期間は書かない
- お客様にお願いすることを、内容と期限が分かる書き方で書く。「ご協力ください」だけにせず、準備に時間がかかるものは、頼む段階と提出の期限を前の段階から示す
- 進捗を示す画面でなければ、特定の段階だけを目立たせない。今の位置のように読める
- 図やバーだけにせず、期間や担当を文字でも書く。担当は色や位置だけで分けない
- 開閉や切り替えの操作は、押している状態を aria-expanded や aria-pressed で示し、切り替えたことを読み上げでも知らせる
- 進み具合を示す画面では、いまの段階を文字と aria-current でも示し、最終更新の日時を添える
- 切り替えで段階が減るときは、表示される段階の番号を、上から順に振り直す
- 段階・期間・内容は実際の運用に合わせる。決まっていない場合は「表示例」と明記する
組み合わせの例
- 制作会社のサービスページ：横並び型で全体の順番を見せ、詳しく知りたい人には縦タイムライン型の進め方のページへつなぐ
- お客様の準備が多い業種：担当分け型で、制作側とお客様の作業を並べ、期間が気になる人には期間つき型を加える
- 段階ごとの説明が多い業種：詳細開閉型で、全体の順番を保ったまま詳細を開いて読めるようにする
- 依頼の種類が複数ある業種：分岐型で種類ごとの流れを見せ、共通の段階は同じ名前と内容にそろえる
- 料金やフォームの手前：横並び型を料金表やフォームの近くに置き、依頼後の見通しを先に見せる
- 依頼の前と後をつなぐ：依頼の前は横並び型で進め方を見せ、ご依頼のあとは進捗表示型で同じ段階の名前のまま進み具合を共有する
よくある質問
段階は、何個くらいにすればよいですか?
決まった数はありませんが、横一列で読みやすく収まるのは5つ前後と考えられます。多い場合は、近い作業をひとまとめにして段階数を減らし、詳しい内容は縦タイムライン型や詳細開閉型で見せます。
フローは、ページのどこに置くとよいですか?
依頼までの不安が出やすい場所の近くに置くと、読み手が先の見通しを持ちやすくなると考えられます。たとえば、料金表の下、フォームの手前、CTAの近くなどです。
案件によって、期間が大きく違う場合はどう書けばよいですか?
段階ごとの細かい期間は書かず、全体の期間の幅と、前後する条件を書く方法があります。条件で期間が変わるなら、期間つき型のように条件を切り替えて見せる方法もあります。守れない期間は書かないようにします。
フローと、フォームのステップ表示は、どう違いますか?
フローは、依頼から完了までの進め方を伝える説明です。フォームのステップ表示は、入力の途中経過を示す画面の部品で、役割が違います。入力の流れはステップ分割型 フォームを参考にしてください。