プロセスカードフロー
このパーツは、サービス提供までの流れを 4つの番号付きカード で見せるプロセスフローです。各ステップに Material Symbols のインライン SVG アイコン・連番（01〜04）・見出し・短い説明文を持たせ、カードとカードの間に「→」を置いて進行方向を示します。
このパーツの使いどころと実装ポイント
このパーツは、サービス提供までの流れを4つの番号付きカードで見せるプロセスフローです。各ステップに Material Symbols のインライン SVG アイコン・連番（01〜04）・見出し・短い説明文を持たせ、カードとカードの間に「→」を置いて進行方向を示します。土台は display:flex の横並びで、各カードに flex:1 と min-width:140px を与え、画面幅が足りなくなると flex-wrap で自然に折り返す設計です。
向いている場面
- 制作会社や士業の「ご依頼の流れ」「ご相談から納品まで」
- サロン・クリニックの「初回ご来店の流れ」
- 採用ページの「選考フロー」やオンライン講座の「受講ステップ」
カスタマイズと注意点
ステップ数は __step と __arrow をセットで増減できますが、横一列に並ぶため4〜5個までが読みやすい上限です。アイコンは SVG なので fill:currentColor を保てば文字色と一緒に色替えできます。矢印は装飾要素なので aria-hidden="true" を付け、スクリーンリーダーが「→」を読み上げないようにしています。モバイルでは矢印を縦向きに変えるか非表示にし、カードを縦積みにすると視線の流れが自然になります。番号は実際の手順順序と一致させ、飛び番号にしないことが大切です。
よくある質問
ステップ数を4つから増やしても大丈夫ですか？
増やせますが、横一列に並ぶ構造のため4〜5ステップが読みやすい上限です。それ以上になると1枚あたりの幅が狭くなり文字が窮屈になるので、説明文を短くするか、2行のフローに分けるか、モバイルと同様に縦積みレイアウトへ切り替える方法を検討してください。
矢印「→」はモバイルでも横向きのままですか？
そのままだと縦積み時に違和感が出ます。カードを縦に並べる場合は、矢印を下向き（↓）に差し替えるか、CSSで非表示にするのがおすすめです。矢印は装飾なのでaria-hidden付きで読み上げ対象から外してあり、消してもアクセシビリティ上の問題はありません。