ナンバリングステップフロー

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

このパーツは、サービス利用の流れを「01・02・03・04」と番号付きで縦に並べるステップフローです。各ステップは <ol> のリスト項目で組み、左に丸い番号バッジ、右に見出しと説明文を配置しています。番号同士は ::before 疑似要素で描いた縦線でつながり、最後の項目だけ線を消す仕掛けにしているため、紙の手順書のように「上から順に進む」流れが直感的に伝わります。

向いている場面

契約までの流れを説明したい士業・コンサル、施工の進め方を見せたいリフォーム・工務店、申込みから納品までを案内する制作会社やサブスク型サービスに向きます。問い合わせ前の不安を減らし、次の行動を促す導線として機能します。

カスタマイズと注意点

• ステップ数は項目の増減だけで対応でき、番号は手入力なので飛び番にもできます
• 丸バッジの色や縦線の色を変えるだけでブランドカラーに馴染みます
• 順序に意味があるため、見出しは <ol> のまま使い、読み上げ順を崩さないでください

横幅 700px の中央寄せで、スマホでは番号と本文が縦に詰まりすぎないよう余白を確保すると読みやすくなります。