![見出し画像](https://assets.st-note.com/production/uploads/images/144715118/rectangle_large_type_2_371ed70ac726bfa3e333f33fdfcbe611.png?width=800)
モバイル版ウェブデザインのトレンド?:画面下部のグローバルナビゲーション集めてみた
はじめに
最近、モバイル版のUIデザインを見ていて、画面下にハンバーガーメニューのあるウェブサイトが少し増えてきたように感じました(気のせいかもしれませんが…😅)
よくあるボトムナビゲーションではなく、90%以上のウェブサイトで画面の右上に見かけるハンバーガーメニューが下にあったため気になりました。そこで、最近見つけた画面下にハンバーガーメニュー(グローバルナビゲーション)があるウェブサイトをシェアします。
モバイル画面での操作しやすい範囲とは📱
モバイルデバイスのサイズが変化するにつれ、画面上の「操作しやすい範囲」も重要な考慮事項となっています。
一般的な操作性の考察としては下記のようなものが挙げられます。
・スマートフォンの片手操作が一般的
・画面下部の親指が届く範囲が最も操作しやすい
・画面上部は手が届きにくく、操作性が低下
また、Steven Hooberが親指ゾーンという言葉を造っています。
スティーブン・ホーバーの研究によると、親指ゾーンは以下のように分類されます。
![](https://assets.st-note.com/img/1718894274632-UBRqaH3X5L.png?width=800)
自然な領域(緑):最も操作しやすい
伸ばせば届く領域(黄):やや操作しづらい
届きにくい領域(赤):操作が困難
画像は左利き用と右利き用の親指ゾーンマッピング。
中央の「Combined」の緑のゾーンは、ほとんどのユーザーにとって最適な配置エリアを示しています。
また、以下はiPhone14までの親指ゾーンマッピングです。赤い部分がさらに大きくなっています。
![](https://assets.st-note.com/img/1718894902794-956tUhnVIg.png?width=800)
このように、親指の自然な動きの範囲は、画面下部から中央部にかけてです。この領域に主要な機能を配置すると、ユーザーの操作効率と快適性が大幅に向上するとSteven Hooberは述べています。
モバイル版のグローバルナビゲーション集🍔
PASMO
PC版のメニューはこちら。
![](https://assets.st-note.com/img/1718890893607-jULu7CtGdC.png?width=800)
![](https://assets.st-note.com/production/uploads/images/144703234/picture_pc_7e1370ef943c2da214f506e76049af29.gif)
![](https://assets.st-note.com/img/1718892451359-bLHZD3DlpU.png?width=800)
2019年時点からずっと左下配置のようです。
ターゲットが幅広いためユーザービリティの工夫が見られるのかと思い、他の主な交通系ICカードや大手鉄道会社のウェブサイトも確認しましたが、見た中では他にページ下部にナビメニューを配置している会社はありませんでした。
![](https://assets.st-note.com/img/1718895616371-949QfO3DEw.png)
iPhoneSEのチェックではイエロー~グリーンの箇所にハンバーガーメニューが収まっています。右上の虫眼鏡の位置にあった場合は、赤のタッチしづらいゾーンになってしまいます。
Benesse
![](https://assets.st-note.com/img/1718891185757-Lcwb4Ge4Uk.png?width=800)
![](https://assets.st-note.com/production/uploads/images/144703855/picture_pc_d0485334c6c085819f88931842aba414.gif)
2023年のフルリニューアルのタイミングでメニューの位置が変わりました。
![](https://assets.st-note.com/img/1718897854182-GZ51yVA8zd.png?width=800)
GU
![](https://assets.st-note.com/img/1718891761971-UCBiCrnthq.png?width=800)
![](https://assets.st-note.com/production/uploads/images/144704648/picture_pc_0cc4b1fb503434cde1e0aa0af3be5958.gif)
SmartHR採用サイト
![](https://assets.st-note.com/img/1718891517596-ugxkpst9cO.png?width=800)
![](https://assets.st-note.com/img/1718891614342-AAky9grMMg.png?width=800)
![](https://assets.st-note.com/production/uploads/images/144704473/picture_pc_ba16ab7789ee57be17b1fa91f6dd9339.gif)
2024年3月にリニューアルされた採用サイト。
本記事のメインとは逸れますが、モーションのオン/オフボタンも設置していて、アクセシビリティの対応もしています。
サタケシュンスケ / イラストレーター・キャラクターデザイナー
2024年2月に公開されたポートフォリオサイトです。
![](https://assets.st-note.com/production/uploads/images/144702430/picture_pc_b6adf563d33fa651260ffb5f13a621f6.gif)
アルビオンFLARUNÉ
![](https://assets.st-note.com/img/1718898430191-A4lsiZNzg3.png?width=800)
![](https://assets.st-note.com/production/uploads/images/144713637/picture_pc_bc8473520a4253f7240ef4ca5425e48a.gif)
ハンバーガーメニューをクリックすると外部サイをが表示。
idea株式会社
![](https://assets.st-note.com/img/1718898694970-Mg9aZvXkat.png?width=800)
![](https://assets.st-note.com/production/uploads/images/144714038/picture_pc_e2d1b51ffd9e7486c22a5179b36f1961.gif)
ページトップからスクロールすると下部のメニューの内容が変化しています。上にスクロールする際は少しメニュー全体が上に出てくるようです。従来のボトムナビゲーションに近いです。
オリックス銀行 ❘ Career Recruiting Site
https://www.orixbank.co.jp/aboutus/recruit/mid-career/
![](https://assets.st-note.com/img/1718899632221-0rbRlx7MvF.png?width=800)
![](https://assets.st-note.com/production/uploads/images/144714513/picture_pc_ab0be8766438dc0c88606d5ccc10c76f.gif)
おわりに🙇
ここまでグローバルナビゲーションの画面下部配置について見てきました。このトレンドは実際のユーザーの使い方に基づいているものだと感じます。
ただ今回様々なウェブサイトのモバイル版デザインを見てきて、やはりページ下部にメニューがあるサイトは圧倒的に少ないです。
・ユーザーは主にどんな環境でアプリを使う?
・頻繁に使う機能は何?
・ユーザーの年齢層や使い慣れている UI は?
こういった点を考慮しながら、適切なナビゲーションの配置を選んでいく必要があると思います。
このメニューも、将来的には別の方法に取って代わられるかもしれません。だからこそ、最新の動向をチェックしつつ、実際のユーザーの声に耳を傾けて改善していきます!
これからのみなさんのプロジェクトで、今回の内容が少しでも参考になれば幸いです🙇
この記事が気に入ったらサポートをしてみませんか?