なぜ下なのか
フーバー(2013)は1,333人を観察し、約半数が片手で持ち親指で操作していることを示しました。ベリストローム=レフトヴィルタとウラスヴィルタ(2014)は親指が届く範囲が画面の下部と中央に集中することをモデル化しています。これは親指ゾーンとフィッツの法則が示す結論です。
良いタブバーの条件
マテリアルデザインとAppleのガイドラインは3〜5項目を推奨します。アイコンに短いラベルを添え、現在地を明確に示し、タッチターゲットサイズを守ります。チェとキム(2004)は小さな画面で階層が深いと迷いやすいことを示しました。
よくある失敗
設定やログアウトなど使用頻度の低い機能を入れるのは失敗です。ペルニスとブディウ(2016)の調査でも、見えるナビゲーションは隠れたハンバーガーメニューより速く頻繁に使われました。
よくある質問
- タブは何個が適切?
- 3〜5個が推奨です。
- ウェブでも使える?
- 主要な行き先が少なければ有効ですが、ブラウザのツールバーと重ならないよう余白が必要です。
出典確認日:2026-10-27
参考文献
- Hoober, S. (2013, February 18). How do users really hold mobile devices? UXmatters. 1,333人のスマホの持ち方を観察した現場研究で、下部配置の根拠になります。
- Bergstrom-Lehtovirta, J., & Oulasvirta, A. (2014). Modeling the functional area of the thumb on mobile touchscreen surfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1991–2000). ACM. 親指が実際に届く範囲をモデル化した研究です。
- Park, Y. S., & Han, S. H. (2010). Touch key design for one-handed thumb interaction with a mobile phone: Effects of touch key size and touch key location. International Journal of Industrial Ergonomics, 40(1), 68–76. キーの大きさと位置が片手操作に与える影響を実験しています。
- Chae, M., & Kim, J. (2004). Do size and structure matter to mobile users? An empirical study of the effects of screen size, information structure, and task complexity on user activities with standard web phones. Behaviour & Information Technology, 23(3), 165–181. 小さな画面で深いメニュー構造が探索を難しくすることを示しています。
- Google. (n.d.). Navigation bar. Material Design 3. Android公式ガイドで、3〜5項目の規則があります。
- Apple. (n.d.). Tab bars. Human Interface Guidelines. iOSタブバーの役割と禁止事項を説明しています。
- Pernice, K., & Budiu, R. (2016, July 24). Beyond the hamburger: What makes navigation discoverable on mobile. Nielsen Norman Group. 隠しメニューより見えるタブが発見されやすいというテスト結果です。
