縦タイムライン導入フロー
アイコン付きの丸いノードを縦に並べ、中央のラインで進行を示す導入フローのタイムラインです。マークアップは順序のある ol と li で組み、ステップの順番をHTMLの構造そのもので表現しています。
このパーツの使いどころと実装ポイント
アイコン付きの丸いノードを縦に並べ、中央のラインで進行を示す導入フローのタイムラインです。マークアップは順序のあるolとliで組み、ステップの順番をHTMLの構造そのもので表現しています。ノードをつなぐ縦線は::beforeの擬似要素にグラデーションを当てて描いており、画像を使わずに進行の流れを可視化します。
向いている場面
- 「ご依頼から公開までの流れ」を4段階前後で示すサービス紹介
- 申し込みから利用開始までの手順を伝えるSaaSのオンボーディング案内
- 相談・見積もり・契約・施工と続く工務店や士業の流れページ
カスタマイズと注意
各ステップはSTEP 01のラベル、見出し、説明文、そしてアイコンの差し替えで構成できます。ステップ数を増減しても縦線は自動で伸縮するため、項目を足し引きするだけで成立します。順序が意味を持つのでulではなくolを維持し、スクリーンリーダーに番号が伝わるようにします。モバイルではノードと余白が縮むメディアクエリが効くので、狭い画面でも文字とアイコンが詰まりすぎないか確認します。アイコンは装飾扱いでaria-hiddenを付け、ステップの意味は文章で伝えます。
よくある質問
ステップを5つ6つに増やしても崩れませんか？
崩れません。中央の縦線は擬似要素でリストの高さに追従するため、li要素を足すだけで線も自動で伸びます。ただし数が多いとモバイルで縦長になるので、要点を絞って4〜6段階に収めると読みやすさを保てます。
横並びのタイムラインにしたいのですが。
このパーツは縦並び専用の設計です。横並びにするにはgridのカラム方向と縦線の擬似要素を作り変える必要があります。スマホで横スクロールが必要になりやすいので、縦のまま使う方が省スペースで読みやすい場合が多いです。