番号付き 4 ステップ
大きな番号と見出し・短い説明で構成した4ステップのフロー図です。 display:grid の repeat(4,1fr) で4列を作り、グリッドの ::before 疑似要素で背後に横線（グラデーション）を引いて、ステップ同士のつながりを視覚化しています。
このパーツの使いどころと実装ポイント
大きな番号と見出し・短い説明で構成した4ステップのフロー図です。display:grid の repeat(4,1fr) で4列を作り、グリッドの ::before 疑似要素で背後に横線（グラデーション）を引いて、ステップ同士のつながりを視覚化しています。各ステップは円の中に番号（01〜04）を入れ、線の上に重ねることで「順を追って進む」イメージを伝えます。
向いている場面
「お問い合わせから納品まで」「ご利用の流れ」のように、サービス提供の手順を説明したい場面に向きます。制作会社・リフォーム・士業・サブスク登録など、初めての利用者に道筋を見せたいときに効果的です。手続きの不透明さによる離脱を防げます。
カスタマイズと注意点
差し替えどころは番号・見出し・説明文です。ステップを3つや5つに変える場合は、要素の増減に合わせて repeat(4,1fr) の数字を変えてください。番号の円やつなぎ線の色はブランドカラーに寄せると統一感が出ます。注意点として、4列を横一列に保つとスマホで線が崩れやすいため、狭い画面では縦並びにして横線を縦線に変えるか非表示にする指定が無難です。各ステップの見出しは具体的な動詞（ヒアリング・お見積りなど）にすると流れが伝わります。
よくある質問
ステップ数は4つ固定ですか？
いいえ。各ステップ要素を増減し、grid-template-columns の repeat の数字を合わせれば3つでも5つでも作れます。背後の横線は疑似要素なので、数が変わっても自動で全幅に引かれます。
スマホでは横線がずれませんか？
横一列のまま縮めると線がはみ出すことがあります。狭い画面では縦並びにし、つなぎの線を縦方向に変えるか、いったん非表示にするメディアクエリを足すと崩れません。