レスポンシブ対応のステップのナビゲーションを紹介します。
bootstrapで作ったサイトであれば、HTMLとCSSをコピーペーストするだけで利用できます。
通販のカートフローや、申し込みフォームなどのページで使うと、現在地が分かりやすくなり、申し込みのコンバージョンもアップするかと思います。
今回は例として４種類ご紹介します。
①右向き矢印で現在のステップを表すパターン
右矢印付の、ボックスの中に文字を入れるパターンです。
②ドットと線でステップを表すパターン
ドットで現在地を表したシンプルなパターンです。
③円の中の数字と線でステップを表すパターン
サークルの中に数字を入れ現在地を表すシンプルなパターンです。
④Flexboxで作るstep wizard
flexboxを使ったパターンです。PCの場合横に進み、スマホの場合縦に並びます。
