3 ステップ進捗バー（コンタクトフォーム）

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

このパーツは、コンタクトフォームの「入力・確認・完了」という 3 段階の進み具合を上部に示すプログレスバー付きのフォームヘッダーです。各ステップは円形の番号バッジで、状態に応じて 3 色に塗り分けます。完了済みには is-done で緑、現在地には is-active で濃紺、未到達はグレーのままです。バッジ同士をつなぐ線（csp__b）も、通過済みの区間だけ is-active で緑に変わり、どこまで進んだかがひと目で分かります。ステップ名のラベルは position:absolute でバッジの真下に配置されています。

向いている場面

問い合わせフォーム、見積もり依頼、会員登録、予約申し込みなど、複数画面に分かれた入力フローの現在地表示に向きます。利用者が「あと何ステップで終わるか」を把握できるため、途中離脱を減らす助けになります。

カスタマイズの勘所

• ステップ数を増やすには、円バッジ（csp__s）と接続線（csp__b）を交互に追加します。
• 進行状態は is-done と is-active のクラスを各ステップに付け替えることで表現します。実際の遷移ではサーバー側やフォーム制御でこのクラスを切り替えます。

注意点として、色だけで状態を示すと色覚特性のある利用者に伝わりにくいことがあります。番号やラベルのテキストで現在地を補い、現在のステップに aria-current を付けると、より多くの人に状態が伝わります。