背景
モバイルアプリには Tab bar, Toolbar, Status bar, Menu bar, Navigation bar, Sidebar, App bar, Gesture bar など、BarがつくUIがたくさんあります。
これらのUIがどれのことで、目的や制約を正しく理解していますか？また、iOSとAndroidそれぞれで、同じ名前でも別のUIを指したり、挙動が違うことを理解していますか？
また2025年のOS26の発表やMaterial 3 Expressiveの発表以降で、さりげなーくそれらの名称が変わったのをご存知ですか？
この記事では俯瞰して一覧で見ることを目的としているので、デザイナーやエンジニアは、公式仕様をしっかり読み込みましょう。公式のFigmaもよく整理されているので、見てみるのもおすすめです。「この見た目のはこう呼ぶんだな」がわかりやすいです。
- Apple
各部位ごとの名称まとめ
以降にBar系UIの名称と外観についてまとめます。各名称をできるだけ公式ドキュメントへリンクしていますが、iOSは古いドキュメントは残ってませんのでリンク無しです。
OS最上部のバーUI
| iOS | Android | |
|---|---|---|
| 現在 |  Status bar |  Status bar |
| 以前 |  名称変更無し |  名称変更無し |
これはわかりやすいですね。時計・ネットワーク・バッテリーなどシステムの状態を表示するシステムUIです。
基本的に開発側でカスタムできることは少ないです。動画プレーヤーやゲームアプリなどで全画面表示したい場合、隠したりすることは可能です。
OS最下部のバーUI
| iOS | Android | |
|---|---|---|
| 現在 |  Home indicator |  Gesture bar ※公式Figmaでの呼称 |
| 以前 |  名称変更無し |  Android navigation bar |
OSのホーム画面に戻ったり、アプリを切り替えたりするためのシステムUIです。Status bar同様、あまり開発者が考慮することはないです。
Home indicatorの公式ガイドライン自体は見つけられなかったのですが、開発者向けのドキュメント(例)やユーザーヘルプで良く登場する呼称です。
AndroidではStatus barとまとめてSystem barと呼ばれたりもします。Gesture barという名前も正式なガイドラインにある呼称ではなく、いまだにGoogleの一部記事ではNavigation barと書かれています。しかしMaterial Design 3においてNavigation barは後述するタブUIをことを指すことになったので、今後これは間違いになっていくと思います。
アプリ内の上部のBar
| iOS | Android | |
|---|---|---|
| 現在 |  Toolbars |  App bars |
| 以前 |  Navigation bar |  App bars: top (Top app bar) |
アプリ内での現在位置を示したり、前の画面に戻るボタンを置いたりするためのBarです。Webの世界ではHeaderUIと呼ばれることが多いですね。
これが一番むずかしいというか紛らわしいです。この次に登場する「アプリ内の下部のBar」といっしょにチェックしてみてください。
iOSではNavigation barが正式なUI名称でしたが、OS26に伴うHIGのアップデートから上部も下部もToolbarsに統合されました。ただしHIGには以下のように
In iOS, a navigation-specific toolbar is sometimes called a navigation bar.
という表記があるので、引き続き上部のBarをNavigation barと呼んでも間違いでは無いらしいです。おそらく多くのドキュメントや実装APIに名前が残っているからでしょうが、紛らわしい。
Androidでは逆に以前までは上部も下部もApp barと呼ばれていたのが、上部のみをApp bar、下部のものはToolbarと呼ぶように分解されました。ああ紛らわしい、、、。
アプリ内の下部のBar
| iOS | Android | |
|---|---|---|
| 現在 |  Toolbars |  Toolbars |
| 以前 |  名称変更無し |  App bars: bottom (Bottom app bar) |
現在の画面に何かアクションをするためのBarです。登場頻度は少なめ。Webの世界ではFooterUIと呼ばれることが多いですね。
この次の「グローバルナビゲーションのタブバー」と同じ位置に表示され似ていますが、明確に別のUIです。
グローバルナビゲーションのタブバー
| iOS | Android | |
|---|---|---|
| 現在 |  Tab bars |  Navigation bar |
| 以前 |  名称変更無し |  Bottom navigation |
はい、またNavigation barという名称が登場しました。Androidでは今後は下部のタブUIをNavigation barと呼びます。
iOSは昔からTab barsで名称には変化がないです。しかし最近は挙動や見た目が大きくアップデートされる頻度が高く、開発者泣かせです。OS26では見ての通りガラス状の見た目になり、配置もフローティング&変形するようになりました。
参照: Apple、楽しくて優雅な新しいソフトウェアデザインを発表 - Apple (日本)
通知で表示されるバー
| iOS | Android | |
|---|---|---|
| 現在 | 無し |  Snackbar |
| 以前 | 無し |  名称変更無し |
Material Designで定義される、自動で消える通知UIですね。一般的に「トースト」UIと呼ばれることも多いですが、AndroidではOSが表示するエラーUIをToastと呼び区別することもあるので注意です。
Toasts overview | Android Developers
Appleではこのような自動で消えるトースト系の通知UIはNativeに存在しません。カスタムで似たようなUIを実装しているアプリはよくあり、慣例的にHUD(Head Up Display)やToastと呼ばれることが多いようです。iOS Nativeの通知UIにはAlerts, Action sheetsなどがあります。
番外編: 他にもBarってつくUIの紹介
ここまでは主にスマホのUIについて紹介してきましたが、iPadOSを付け加えるともう少し登場します。
Sidebar
Sidebars | Apple Developer Documentation
Tab bar同様にアプリ内でのセクションを移動するためのナビゲーションUIです。iPadOSではTab barは上部に表示するか、代わりにこのSidebarを使うことを推奨されます。Tab barとSidebarを統合する実装も可能で、ユーザーが切り替えて利用できるようになります。
https://developer.apple.com/design/human-interface-guidelines/tab-bars#iPadOS
SidebarはiPadOS, macOS, visionOSでの利用が想定されており、iOS(iPhone)では非推奨なので注意です。iOSで同様の目的がある場合はTabbarを使うか、Sheetを使うのが適切です。
AndroidではNavigation drawer, Navigation rail, Side Sheetsなどが似たコンテキストで使用されます。いずれも名称にBarはつきませんね。
The menu bar
The menu bar | Apple Developer Documentation
画面の最上部、アプリの外に表示される横断的なメニューUIです。MacOSやWindowsのデスクトップアプリでは定番ですよね。iPadOS26から、すべてのアプリにiPadでも表示されるようになります。
Android(というかMaterial Design)のMenuでも、似たような使い方をされている画面は登場します。
マウスを前提とするUIなので、スマホサイズで使われることは考えなくて良いでしょう。
おわり
もしご質問・ご指摘ありましたらXとかにご連絡ください。
ついでにここで復習です。Navigation barとは
- Apple系OSにおいてはアプリ上部のヘッダーUI (※ただし以前からの慣例名、現在の正式名は
Toolbars) - 現在のAndroidOSにおいてはアプリ下部のタブUI
- 以前のAndroidOSにおいてはホームに戻るシステムUI(※ただし未だにこっちを使う公式資料もある)
のことでした。ムズすぎ。