番号付きフロー（縦型）

このパーツの使いどころと実装ポイント

このパーツは、お問い合わせから納品までの手順を上から下へ並べる縦型タイムラインです。マークアップには順序の意味を持つ ol 要素を使い、各ステップに 01〜04 の番号バッジを添えています。左端には .flow__list::before による縦線を引き、番号の丸と重ねることで「順番につながっている」感覚を視覚的に表現しているのが特徴です。番号・見出し・補足文という3層構造で、流れと各工程の役割がひと目で伝わります。

向いている場面

• 制作・コンサル・士業など、依頼の進め方を説明したいサービスサイト
• 無料相談から契約までの導線を見せたいLP
• 申し込み手順やサポートの流れを案内するページ

工程が3〜6個くらいのときに最も読みやすく、初めての利用者の不安をやわらげます。

カスタマイズと注意

ステップを増減するには li.flow__item を足し引きし、番号テキストを振り直すだけです。番号を自動採番にしたい場合はCSSの counter を使うと付け替えの手間が減ります。実装上の注意として、縦線は ::before の top・bottom を基準に伸びるため、最初と最後のバッジから線がはみ出さないよう余白を調整してください。アクセシビリティ面では順序が意味を持つので ul ではなく ol を維持するのが適切です。スマホでは番号バッジと本文が詰まりやすいので、左右の余白を確保すると窮屈さが消えます。