スマホのメニューをヘッダー以外に固定（例えば、画面下部やサイドに固定）するケースも増えてきました。デバイスのサイズが大きくなった影響でしょうか。
そんなUIでもメリット・デメリットと参考サイトをご紹介します。
メリット
1. ユーザーの操作性向上
- 親指で操作しやすい（特に画面下部に配置する場合、片手操作が楽になる）
- スクロールしても常にメニューが表示され、ナビゲーションがしやすい
2. デザインの自由度が高い
- ヘッダーにメニューを配置しないことで、メインコンテンツの表示領域を広く確保できる
- モバイルアプリのような直感的なUIデザインを実装できる
3. コンバージョン率向上の可能性
- 購入ボタンやお問い合わせリンクをフッター固定メニューに配置すると、CTA（Call To Action）へのアクセスがスムーズになる
- 特にECサイトや予約サイトでは、コンバージョン率向上が期待できる
デメリット
1. 画面の一部を占有してしまう
- 画面下部やサイドに固定メニューを置くと、コンテンツの表示領域が狭くなる
- 特に小さいスマホでは、操作時に邪魔と感じる可能性がある
2. 誤タップのリスク
- フッターやサイドにメニューを配置すると、スクロール時やコンテンツ操作時に誤ってタップしやすくなる
- UXを損ねる場合があるため、適切なサイズや間隔の調整が必要
3. デバイス依存の影響
- iPhoneの「ホームバー」（Face ID機種）やAndroidのナビゲーションバーと重なると、操作性が悪化する
- デバイスごとの調整やレスポンシブ対応が必要
参考サイト
■清家巧貴税理士事務所
https://seike-office.com
海の近くにあるのか、マリン風なデザインでかわいい感じでメニューを下に配置されています。
■深山城崎旅館
https://shinzan-kinosaki.jp/
旅館らしく和テイストのデザインです。重要なリンクは外にだされ、他はハンバーガーメニューに入れられています。ハンバーガーのデザインも和っぽくていいですね。
■アンデルセンリビング（薪ストーブ専門店）
https://andersen-living.com
シンプルでおしゃれなデザイン。ハンバーガーを開いた際も下にメニューが集約されていてユーザビリティを考慮されています。
■高見株式会社（採用サイト）
https://recruit.takami-hd.com
こちらはフッターではなくサイドにメニューボタンを配置。ヘッダーよりも押しやすくコンテンツの邪魔もしないように工夫されていますね。
■京都芸術大学
https://www.kyoto-art.ac.jp
とてもシンプルで、使いやすいUIです。アプリのUIとほぼ同じ感じで、ユーザーは使いやすいでしょうね。
■いいり歯科医院
https://iiri-dc.com
年季を感じさせる重厚なデザインで、メニューもシンプルにフッターにハンバーガーと電話番号です。
とても分かりやすいUIだと思います。
■長野ろうきん
https://www.nagano-rokin.co.jp/
他とは少し違う形で、右下にシンプルにハンバーガーボタンを配置し、ヘッダーにもアコーディオンでメニュが出てくる形に。デザインは少しあれですが、もう少し工夫すればいい感じにできるかも。
■Nakazawaグループ
https://nakazawa-group.com
ページ数が少ないので、フッターにメニューを並べています。ページ数少ないサイトとかならありなデザインですね。
■株式会社サン建築設計
https://sun-arc.co.jp
メニューボタンが一瞬分かりにくいですが、面白いデザインです。そこに配置するか！と思わず叫んでしまいますね。
■株式会社エヴォワークス
https://www.evoworx.co.jp
デザイン会社らしい斬新なメニュー配置です。シンプルで個人的には好きですね。
まとめ
ヘッダー以外に固定することで、親指操作のしやすさやコンバージョン率向上のメリットがある一方、誤タップや画面占有といったデメリットもあります。
「どのサイトに適しているか」を考え、設計段階でテストを重ねることが重要です。
コメント