番号付きフロー説明セクション

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

このパーツは、依頼から納品までの流れを番号付きの4ステップで示すフローセクションです。マークアップには順序の意味を持つ ol 要素を使い、各ステップを li で並べています。番号バッジ・見出し・説明文がひとまとまりになっており、ステップ間は ::after の擬似要素で描いた縦のコネクターラインでつないでいるため、視線が上から下へ自然に流れます。

向いている場面

「ご利用の流れ」「お申し込みの手順」「制作の進め方」といった、工程を順番に説明したいページに向きます。Web制作会社の受注フロー、リフォーム業者の現地調査から施工までの流れ、オンラインスクールの入会手順などで使うと、初めての訪問者でも全体像をつかみやすくなります。

カスタマイズと注意点

• ステップ数は li を増減するだけで4以外にもできます。番号は手書きのため、追加時は連番を振り直してください。
• 最後のステップだけ :last-child で下の余白とコネクターラインを消す指定があるので、並び順を変えても末尾の見た目が崩れません。
• 説明文が長くなるとステップ全体が縦に伸びます。1ステップ2行程度に収めると、流れとして読みやすくなります。