番号付きフロー（利用の流れ）セクション
ステップ番号と見出し・説明を 縦並びで表示する利用フロー のセクションです。リストは ol （順序付きリスト）で組まれ、各ステップに「01」「02」のような番号を aria-hidden の装飾として添えています。ステップ同士は接続線で繋ぎ、手順が一本道で進むことを視覚的に伝えます。
このパーツの使いどころと実装ポイント
ステップ番号と見出し・説明を縦並びで表示する利用フローのセクションです。リストは ol（順序付きリスト）で組まれ、各ステップに「01」「02」のような番号を aria-hidden の装飾として添えています。ステップ同士は接続線で繋ぎ、手順が一本道で進むことを視覚的に伝えます。1カラムの縦積みなので、上から順に読み下せるのが特徴です。
向いている場面
- 「ご利用の流れ」「お申し込みの手順」など申込導線の説明
- 制作会社の問い合わせ〜納品までのプロセス紹介
- サービスの利用開始ステップを順番に見せたい場面
カスタマイズの勘所
ステップ数は li（flow-step）の増減で変えられます。順序が意味を持つ内容なので、見た目だけでなく ol を使っている点を保つと、構造としても「順番のある手順」だと伝わります。番号テキストは装飾扱いで aria-hidden を付けているため、読み上げでは見出しと説明が中心に読まれます。各ステップの説明は1〜2文に抑えると全体の高さがそろい、流れが追いやすくなります。スマホでも縦積みのまま自然に表示されますが、番号と本文の左右の余白を詰めすぎないと、接続線と文字が窮屈にならず読みやすさを保てます。
よくある質問
ステップ数を増やしたり減らしたりできますか？
flow-step（li要素）を複製・削除すればステップ数を変えられます。番号は手動で連番を振り直し、各ステップの説明文を1〜2文にそろえると、接続線で繋がる縦の流れが整って読みやすくなります。
なぜol要素で組まれているのですか？
利用の流れは順番に意味があるため、順序付きリストのolを使うと「決まった順序の手順」であることが構造として伝わります。番号は装飾としてaria-hiddenを付けているので、読み上げでは見出しと説明が中心に読まれます。