縦ステップインジケータ

解説

縦ステップインジケータは、申込や予約などの複数段階フローを縦一列に並べ、進み具合を可視化する UI です。各ステップは丸い番号と見出し・補足テキストで構成され、左側を縦に貫く線（::before で描画）が全体を一本につないで「順序」を表します。完了したステップは is-done クラスでチェックマークの SVG に切り替わり、現在地のステップは強調表示されるため、利用者は今どこにいて、あと何が残っているかを直感的に把握できます。CSS のみで動作し JavaScript は不要です。

こんなフローに最適

• 会員登録や購入手続きの進捗表示
• 予約・申込フォームの段階案内
• オンボーディングや設定ウィザード

状態の切り替えは、各ステップの <li> に付けるクラス（完了・現在・未着手）を変えるだけです。縦線の色や太さは ::before の background と width で、丸い番号のサイズは .sv__no で調整できます。横並びより縦並びは説明文を添えやすいのが利点で、各ステップに何をするかの一文を入れると離脱を抑えられます。完了マークはアイコンを使っているため OS に依存せず表示が崩れません。読み上げ対応として、現在ステップに aria-current="step" を付けると親切です。