ボトムアプリバー

Bottom App Bar
別名: 下部アプリバー
モバイル固有のパターン

🎮 ライブデモ

📝 説明

一言で説明

画面の下部に配置されるバーで、ナビゲーションや主要なアクション(FABを含む)を統合したもの。

いつ使う?

スマホの大画面化に伴い、親指が届きやすい画面下部にメニューやメインアクションを集約したい場合(マテリアルデザインでよく使われる)。

💡 日常の言い方

画面の下にあるバーで、真ん中あたりにメインの丸いボタンがめり込んでるやつ

🔄 似ている用語との違い

ボトムアプリバー vs ボトムナビゲーション

ボトムナビゲーションは『タブの切り替え(移動)』専用。ボトムアプリバーはそれに加えて『アクション(機能の実行)』や『FABのめり込み』を含む。

🤖 AIへの指示例

画面下部にボトムアプリバーを配置し、中央に作成用のFAB(+ボタン)をめり込ませて(カットアウト効果)。左右にはメニューや検索アイコンを置いて。