アイコン横並び 5 ステップ

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

この「アイコン横並び 5 ステップ」は、導入や申込みの流れを 5 つの工程に分け、円形アイコンを横一列に並べて示すフローパーツです。grid-template-columns:repeat(5,1fr) の 5 列で、各ステップは黄枠の円アイコン（インライン SVG）と短い見出し・補足で構成。さらに ::before 疑似要素で背後に横線を引き、工程が一本につながって進んでいく様子を表現しています。

向いている場面

問い合わせから導入・運用までの手順を簡潔に見せたいサービス全般に向きます。受託制作の進め方、SaaS のオンボーディング、スクールの入学フロー、引越し・リフォームの依頼手順など、「何をすればいいか」を一望で安心させたい場面に適します。各ステップの説明は短く、全体像の把握を優先する作りです。

カスタマイズと注意点

• ステップ数を変えるときは repeat(5,1fr) の数値と、背後の横線位置（left/right）を調整します。
• アイコンは SVG が直接埋め込まれており パスを手書きしない運用です。差し替えは Material Symbols 等の検証済みアイコンから行ってください。
• スマホでは 720px 以下で縦並びになり、背後の横線は display:none で消えます。詳しい説明が必要なら縦型フローの方が向きます。
• 各見出しは 13px と小さめなので、工程名は短い語で。