見出し画像

モバイル版ウェブデザインのトレンド？：画面下部のグローバルナビゲーション集めてみた

とま

はじめに

最近、モバイル版のUIデザインを見ていて、画面下にハンバーガーメニューのあるウェブサイトが少し増えてきたように感じました（気のせいかもしれませんが…😅）

よくあるボトムナビゲーションではなく、90%以上のウェブサイトで画面の右上に見かけるハンバーガーメニューが下にあったため気になりました。そこで、最近見つけた画面下にハンバーガーメニュー（グローバルナビゲーション）があるウェブサイトをシェアします。


モバイル画面での操作しやすい範囲とは📱

モバイルデバイスのサイズが変化するにつれ、画面上の「操作しやすい範囲」も重要な考慮事項となっています。

一般的な操作性の考察としては下記のようなものが挙げられます。

・スマートフォンの片手操作が一般的
・画面下部の親指が届く範囲が最も操作しやすい
・画面上部は手が届きにくく、操作性が低下

また、Steven Hooberが親指ゾーンという言葉を造っています。

スティーブン・ホーバーの研究によると、親指ゾーンは以下のように分類されます。

出典：The Thumb Zone: Designing For Mobile Users

  • 自然な領域（緑）：最も操作しやすい

  • 伸ばせば届く領域（黄）：やや操作しづらい

  • 届きにくい領域（赤）：操作が困難

画像は左利き用と右利き用の親指ゾーンマッピング。
中央の「Combined」の緑のゾーンは、ほとんどのユーザーにとって最適な配置エリアを示しています。


また、以下はiPhone14までの親指ゾーンマッピングです。赤い部分がさらに大きくなっています。

出典：Why WhatsApp Redesigned Its UX


このように、親指の自然な動きの範囲は、画面下部から中央部にかけてです。この領域に主要な機能を配置すると、ユーザーの操作効率と快適性が大幅に向上するとSteven Hooberは述べています。



モバイル版のグローバルナビゲーション集🍔

PASMO

PC版のメニューはこちら。

PC版。グローバルメニューは画面上部に横並び。
モバイル版はハンバーガーメニューが左下に配置されている
2019年のリニューアル時点でこのデザイン

2019年時点からずっと左下配置のようです。
ターゲットが幅広いためユーザービリティの工夫が見られるのかと思い、他の主な交通系ICカードや大手鉄道会社のウェブサイトも確認しましたが、見た中では他にページ下部にナビメニューを配置している会社はありませんでした。

親指ゾーンマッピングに当てはめたもの

iPhoneSEのチェックではイエロー～グリーンの箇所にハンバーガーメニューが収まっています。右上の虫眼鏡の位置にあった場合は、赤のタッチしづらいゾーンになってしまいます。


Benesse

PC版。グローバルメニューは画面右上に固定。
ページ下部にメニューがぺろっと見えています。クリックで下からせり上がってきます。

2023年のフルリニューアルのタイミングでメニューの位置が変わりました。

2023年時点のコーポレートサイト。このときは右上にメニューがあります。


GU

PC版。おそらくモバイルファーストでデザインが作られている。
アプリのような下部固定されたアイコンがナビゲーションメニュー。


SmartHR採用サイト

PC版。FVではグローバルメニューは画面右上に展開された状態で固定。
PC版2。スクロールするとハンバーガーメニューに。
メニューをクリックすると画面いっぱいに展開。

2024年3月にリニューアルされた採用サイト。
本記事のメインとは逸れますが、モーションのオン/オフボタンも設置していて、アクセシビリティの対応もしています。


サタケシュンスケ / イラストレーター・キャラクターデザイナー

2024年2月に公開されたポートフォリオサイトです。

ハンバーガーメニューは上下、検索がページ下部に。メニューがせり上がってくる動き


アルビオンFLARUNÉ

PC版。既に画面中央下にメニューを設置している。
特設サイトのため、ページ内リンクを配置。
ハンバーガーメニューをクリックすると外部サイをが表示。


idea株式会社

PC画面はメガメニューと、右上にハンバーガーメニューが存在しています。


画面下部のメニューをクリックすると、画面右側に展開。メニューはスクロール可能。

ページトップからスクロールすると下部のメニューの内容が変化しています。上にスクロールする際は少しメニュー全体が上に出てくるようです。従来のボトムナビゲーションに近いです。


オリックス銀行 ❘ Career Recruiting Site

https://www.orixbank.co.jp/aboutus/recruit/mid-career/

PC版。ロゴも下部にある珍しいパターン。
PC版同様、画面下部に固定されている。左利きの人だとややクリックしづらそう。


おわりに🙇

ここまでグローバルナビゲーションの画面下部配置について見てきました。このトレンドは実際のユーザーの使い方に基づいているものだと感じます。

ただ今回様々なウェブサイトのモバイル版デザインを見てきて、やはりページ下部にメニューがあるサイトは圧倒的に少ないです。

・ユーザーは主にどんな環境でアプリを使う？
・頻繁に使う機能は何？
・ユーザーの年齢層や使い慣れている UI は？

こういった点を考慮しながら、適切なナビゲーションの配置を選んでいく必要があると思います。

このメニューも、将来的には別の方法に取って代わられるかもしれません。だからこそ、最新の動向をチェックしつつ、実際のユーザーの声に耳を傾けて改善していきます！

これからのみなさんのプロジェクトで、今回の内容が少しでも参考になれば幸いです🙇

いいなと思ったら応援しよう！