番号付き 3 ステップ サービス
このパーツは、 01 02 03 の番号を大きく見せながら、3つのサービスや工程を順に説明するセクションです。各カードに大きな数字（ position:absolute でカード内に重ねる作り）と小見出し・説明文を配置し、 display:grid の3列で横並びにしています。
このパーツの使いどころと実装ポイント
このパーツは、01 02 03 の番号を大きく見せながら、3つのサービスや工程を順に説明するセクションです。各カードに大きな数字（position:absolute でカード内に重ねる作り）と小見出し・説明文を配置し、display:grid の3列で横並びにしています。番号を主役級の大きさにすることで「順番がある流れ」だと一目で伝わり、戦略設計→制作実行→運用改善のようなプロセスを直感的に示せます。
向いている場面
- 申込から導入までの流れを説明する SaaS・サービスの案内
- 戦略から運用まで一気通貫を打ち出す制作・コンサル会社
- 3ステップで完結するサービスの手順紹介
カスタマイズと注意点
差し替えどころは各ステップの見出し・説明文で、ステップ数は2〜4に増減できますが、増やすほど横幅が窮屈になります。番号は装飾として大きく見せますが、見出しと説明の順序が読み上げで自然になるよう、HTML 上は番号→見出し→説明の流れを保ってください。実装上の注意は、overflow:hidden で大きな数字をカード内に収めている点で、はみ出した装飾が切れる前提です。狭い画面では3列を1列に縦積みし、順番が上から下へ自然に読める並びにすると流れが伝わりやすくなります。
よくある質問
ステップは3つ以外でもよいですか
2から4つ程度に増減できます。ただし横3列で並べる前提のため、増やすほど1枠が狭くなり説明文が入りにくくなります。ステップが多い場合は縦積みに切り替えるか、各説明文を短くまとめると読みやすさを保てます。
大きな番号は読み上げで邪魔になりませんか
番号は視覚的な装飾として大きく見せますが、HTMLの並び順を番号、見出し、説明の流れにしておけば読み上げでも自然です。順序を示すための数字なので、見出しテキスト自体に手順の意味が伝わる言葉を入れておくとより親切です。