申し込みから納品・完了までの手順の見せ方を9つの型に分け、AIへの指示文・動く見本・コードを載せています。
フローはどの型を選ぶか
フローは、問い合わせる前の人が「頼んだら何が起きて、いつ終わるのか」を確かめるための部品です。型を選ぶときは、段階の数、段階ごとに説明したい量、期間や担当がどれだけ大事か、の3つを先に決めます。まずは横並び型で全体を見せ、説明したいことが増えたところで、詳しく書ける型や切り替えのある型を足すのが手堅い進め方です。
| こんなとき | 向いている型 |
|---|---|
| 段階が4〜6個で、全体をひと目で見せたい | 横並び型 |
| 段階ごとに、お客様に用意してほしいものがある | 縦タイムライン型 |
| 段階が6つ以上あり、横一列では1つずつが狭くなる | 番号カード型 |
| 公開日や納期で依頼先を選ぶ人が多い | 期間つき型 |
| どこまでを任せられるのか、はっきりさせたい | 担当分け型 |
| 申し込みの前に、書類や素材をそろえてもらう必要がある | 準備チェックリスト型 |
| 説明したいことが多いが、ページを長くしたくない | 詳細開閉型 |
| 依頼の種類によって段階や期間が変わる | 分岐型 |
| 依頼したお客様に、いまの状況を知らせたい | 進捗表示型 |
進捗表示型だけは、依頼する前の人ではなく、依頼したあとのお客様向けのページで使う型です。
どの型でも守ること
- 段階は ol でまとめ、番号を文字で書く。順番に意味がある並びなので
olを使い、「STEP 1」のような番号は CSS の連番だけに頼らず文字として書きます。 - 期間は幅で書き、何を基準にした期間かを添える。「1〜2週間」のように書き、「原稿と写真がそろってから」など前提を一文で添えます。
- お客様側の作業は別枠にする。用意してほしいものと締め切りを、小見出しを付けた専用の枠に書き出します。
- 線・矢印・丸は飾りにする。読み上げに入らないよう疑似要素か
aria-hidden="true"で描き、意味は文字で伝えます。 - SP では縦に並べ替える。横並びのまま縮小すると文字が小さくなるので、縦の1列に組み直します。
よくある質問 (FAQ)
4〜6個が目安です。細かい作業まで段階にすると数が増え、全体の流れがかえってつかみにくくなります。お客様から見て「ここで何かが変わる」区切り（契約する・確認する・公開する）で分け、細かい作業は各段階の説明に入れます。
実績をもとに、守れる幅で書きます。最短の日数だけを書くと、問い合わせのあとで食い違いが起きます。「1〜2週間」のように幅を持たせ、「原稿と写真がそろってから」など、何がそろった時点からの期間かを添えます。
「何を」「いつまでに」を必ず書きます。「ご協力ください」「ご確認ください」だけでは準備ができません。「ロゴのデータと写真を、ご契約から2週間以内にお送りください」のように書き、本文とは見出しで分けます。
料金の説明のあと、問い合わせの入口の手前が置きやすい場所です。何を頼めていくらかかるかが分かったあとに、頼んだらどう進むかを見せると、次の一歩を踏み出しやすくなります。流れの最後に、問い合わせのボタンを続けて置きます。