フロントエンドカンファレンス北海道2024
LT(5分)
WebでiOS風のスタックナビゲーションを作りたい
junseinagao
junpai_code
例えばSHEIN ( https://m.shein.com/jp/?lang=jp )のWebサイト等に実装されているカテゴリ選択するメニューのようなUIを実装したいと思ったことはありませんか？
iOS/Android等でスタックナビゲーションとよばれるこのUIはSP重視のtoC向けのプロダクトではデザイナーからも人気の高いUIです。
しかしながら、スタックナビゲーションのUIの実装例はコミュニティにほとんどなく、SEOやアクセシビリティ、コンポーネントのメンテナビリティなどの要件を満たしながらWebで実装するのはかなり難しいUIになります。
このようなスタックナビゲーションのUIを各種要件を満たしながら実務で実装した経験を踏まえ、実装するに当たっての考慮点と実装例を紹介します。