本記事では、Androidのナビゲーションバーのカラーを変更する方法を紹介します。
ナビゲーションバーは通常、色は白や黒を基調としており、変更する機能は提供されません。
が、サードパーティ製アプリを中心に、様々な方法でカスタマイズすることが可能です。
ナビゲーションバーの背景色やボタンデザインを変更した例。
スマホを個性的なデザインに変化させたいなら、ぜひご覧あれ。
スマホのナビゲーションバーのカラーを変える方法
本パートでは、ナビゲーションバーのカラーを変更する具体的な方法を解説します。
Playストアで配信されるサードパーティ製アプリを使えば自由に調整可能で、オススメのアプリを2つ紹介します。
| アプリ | メリット | デメリット |
|---|---|---|
 Navbar Apps |
|
|
 Navigation Bar |
|
|
Navbar Appsがオススメです。一方、ボタン（◉ホーム / ◀戻る / ■最近）のデザインも変えたいなら、Navigation Barをどうぞ。前提：Androidのナビゲーションバーとは?
ナビゲーションバーとは、画面下部に表示されるバーの部分を指し、主に3つのボタン（◉ホーム / ◀戻る / ■最近）が表示されます。
ホーム画面はもちろん(左)、任意アプリ画面上も常に表示される(右)。
このデザインは、Android 4.0以降ずっと変わらずでしたが、Android 9で2ボタンナビゲーション、Android 10でジェスチャーナビゲーションが導入されました。
上から3ボタンナビゲーション、2ボタンナビゲーション、ジェスチャーナビゲーションのデザイン。
従って、現在Androidでは3パターンのナビゲーションバーが存在することになります。
| 名称 | 特徴 |
|---|---|
| 3ボタンナビゲーション | 3つのボタン(◉ホーム/◀戻る/■最近)で操作 |
| 2ボタンナビゲーション | 2つのボタンと一部ジェスチャーで操作 |
| ジェスチャーナビゲーション | すべてジェスチャーで操作(ボタンなし) |
このうち本記事で紹介する内容は、3ボタンナビゲーションを前提としています。
もし別のスタイルを使用中の場合、
設定より切り替えて下さい。
例えばXperia 10 II（Android 11）なら、システム → ジェスチャー と進み、
システムナビゲーション より 3ボタンナビゲーション を選択すればOK。
3パターンのナビゲーションバーの特徴について、詳細は関連記事【Androidでナビゲーションバーのカスタマイズ方法まとめ! 画面下ボタンの見た目や機能を変えよう】で解説しています。
方法①：Navbar Appsを使う
Navbar Appsで表示される画面に従って、いくつか権限付与をしてから、トップ画面まで進みます。
(左)画面に従って権限付与する (右)トップ画面
初期設定が終わると、ナビゲーションバーの色が自動で変化します。
ナビゲーションバーがLINEは緑(左)、Instagramは紅色(右)で表示される例。
この色は、2パターンの方法で指定もできます。
- アプリごとカラーを指定する
- すべてのアプリで同じカラーに固定する
▼アプリごとカラーを指定する
設定アイコンから(左)、対象アプリを選ぶ(右)。
色を選択すれば(左)、当該アプリはその色で固定される(右)。
▼すべてのアプリで同じカラーに固定する
「特定の色に固定」から(左)、好きな色を選えば(右)、すべてのアプリがその色で固定される。
以上が、Navbar Appsの基本機能です。
そのほかにも、ナビゲーションバー関連のユニークな機能がいくつかあります。
- ナビゲーションバーの背景画像を変える
- ナビゲーションバーにバッテリー残量を表示する
- ナビゲーションバーに絵文字を表示する
- ナビゲーションバーに音楽ビジュアライザーを表示する
- 画面全体にデコレーションを加える
▼ナビゲーションバーの背景画像を変える
背景画像にチェックを入れ(左)、好きな画像を選ぶ(右)。
選択できる背景画像のデザイン例。
▼ナビゲーションバーにバッテリー残量を表示する
バッテリー残量にチェックを入れると(左)、ナビゲーションバーに電池残量を示すバーが出る(右)。
▼ナビゲーションバーに絵文字を表示する
絵文字にチェックを入れ(左)、好きな絵文字を選ぶ(右)。
選択できる絵文字のデザイン例。
▼ナビゲーションバーに音楽ビジュアライザーを表示する
ミュージックウィジェットにチェックを入れると(左)、ナビゲーションバーにビジュアライザーが出る(右)。
▼画面全体にデコレーションを加える
Overlaysにチェックを入れ(左)、好きなデザインを選ぶ(右)。
選択できるデコレーションの例。
以上、Navbar Appsの紹介でした。
ナビゲーションバーの色を変えたいなら、まず第一候補としてあがるオススメアプリです。
一方、次のような欠点もあります。
- 起動中のアプリによってはナビゲーションバーの色が変わらない
- ナビゲーションバーのボタンのデザイン・色は変更できない
相性が悪ければ、次に紹介するNavigation Barをどうぞ。
Playストアから類似アプリを探す場合、”navbar color”と調べればヒットします。方法②：Navigation Barを使う
Navigation Barの画面に従って、いくつか権限付与をしてから、トップ画面まで進みます。
(左)画面に従って権限付与する (右)トップ画面
初期設定が終わると、ナビゲーションバーの色を変更できます。
また「THEME」タブより、ボタン（◉ホーム / ◀戻る / ■最近）のデザインも変更できます。
(左)ボタンデザインが変わる (右)「Custom」オンで組み合わせを調整できる
カラーも調整すれば、自分だけのオリジナルボタンを作成可能です。
編集できるボタンのデザイン例。
以上が、Navigation Barの基本機能です。
そのほか「ACTION」タブより、ボタン（◉ホーム / ◀戻る / ■最近）長押し機能をカスタマイズできます。
対象のボタンに対して(左)、設定したい機能を選ぶ(右)。
設定例。■ボタン長押しで、クイック設定パネルを起動できる。
以上、Navigation Barの紹介でした。
ナビゲーションバーの色のみならず、ボタンのデザイン・機能まで変えたいなら、試す価値アリです。
一方、無償版の場合、広告表示が多い欠点があります。
頻繁にデザインを調整する場合、有償版への課金も検討してみて下さい。
参考：ジェスチャーナビゲーションバーの色を変える方法
Androidには3パターンのナビゲーションバーが存在しており、ここまで紹介した内容は3ボタンナビゲーションを前提としています
上から3ボタンナビゲーション、2ボタンナビゲーション、ジェスチャーナビゲーションのデザイン。
Navbar Appsを使えば一応、他2つ（2ボタンナビゲーション/ジェスチャーナビゲーション）のカラーも変化します。
▼2ボタンナビゲーションの例
▼ジェスチャーナビゲーションの例
一方、Navigation Barは失敗します。
これはアプリの仕組みとして、デフォルトのナビゲーションバーの上に、画面オーバーレイで擬似的なナビゲーションバーを配置するためです。
ナビゲーションバーの位置をずらすと、その下にデフォルトのナビゲーションバーが姿を現す。
Playストアから類似アプリを探す場合も、このような画面オーバーレイタイプのアプリが結構あるため、知っておくとよいでしょう。
ジェスチャーナビゲーションの詳細情報は、関連記事【Androidでジェスチャーナビゲーションを使う方法! スマホを下からスワイプ操作しよう】で解説しています。
補足：ナビゲーションバーのデザインに関するアレコレ
本パートでは、ナビゲーションバーのデザイン全般の細かい情報を補足します。
興味のあるコンテンツがあれば、ぜひどうぞ。
- 補足①ナビゲーションバーを透過する方法
- 補足②ナビゲーションバーに音楽ビジュアライザーを表示する方法
- 補足③なぜかナビゲーションバーの色が変わってしまう原因まとめ
- 補足④ホームボタンのアイコンが4色/二重丸に変わってしまう原因
ナビゲーションバーを透過する方法
ランチャーアプリ（ホームアプリ）によっては、ホーム画面上でナビゲーションバーを透明にできます。
例えば
Nova Launcherなら、設定から 外観と操作感 より、通知バーの透過 を有効にすればOK。
(右)ナビゲーションバーが透明になる。
またナビゲーションバー自体を非表示にしたい場合、全画面表示への切り替えがオススメです。
例えばサードパーティ製アプリ（例：
Immersive Settings）を使えば、自由に全画面表示のコントロールが可能となります。
Chromeアプリの例。通常画面から(左)、フルスクリーンへ切り替えた(右)。
Androidの全画面表示は奥が深く、説明が長くなるため、詳細は関連記事【Androidを全画面表示する方法! ステータスバー/ナビゲーションバー/ホームボタンを隠してフルスクリーンモードへ】で解説しています。
ナビゲーションバーに音楽ビジュアライザーを表示する方法
Playストアで配信されるアプリを使えば、再生している楽曲に合わせて、ナビゲーションバーにビジュアライザーを表示できます。
ここでは、オススメのアプリを2つ紹介します。
Muviz：ナビゲーションバーにビジュアライザーを表示
Muviz Edge：画面全体にビジュアライザーを表示
Muviz：ナビゲーションバーにビジュアライザーを表示
再生中の音楽に合わせて、ナビゲーションバーにエフェクトが付きます。
プリセットのデザインが豊富に用意されており、さらに自分で調整したオリジナルデザインを設定することも可能です。
(左)豊富なデザイン一覧 (右)自分でカスタマイズも可能
ビジュアライザーのデザイン例。
Muviz Edge：画面全体にビジュアライザーを表示
ナビゲーションバーのみならず、画面の枠全体にエフェクトが付きます。
プリセットのデザインが豊富に用意されており、エフェクトの強弱やカラーを自分で調整可能です。
(左)選べるデザイン例 (右)色などカスタマイズ可能
ビジュアライザーのデザイン例。
なぜかナビゲーションバーの色が変わってしまう原因まとめ
操作した覚えはないのに、ナビゲーションバーの色が黒系に変わるケースがあります。
個別アプリや(左)ホーム画面で(右)、ナビゲーションバーの背景が黒になった例。
ここでは、主な3つの原因を紹介します。
- 原因①：ダークテーマがオンになっている
- 原因②：バッテリーセーバーがオンになっている
- 原因③：色反転がオンになっている
原因①：ダークテーマがオンになっている
夜間向けの機能「ダークテーマ」が有効になっていると、画面全体が黒系に変化します。
クイック設定パネルのタイルで
ダークテーマを見つけ、オフにして下さい。
もしタイルの中で見当たらない場合、設定の 画面設定 より ダークテーマ をオフにすればOK。
ダークテーマに関する詳細な情報は、関連記事【Androidでダークテーマを設定する方法! スマホをダークモードにして画面を黒系に変化させよう】で解説しています。
原因②：バッテリーセーバーがオンになっている
電池残量を節約する機能「バッテリーセーバー」が有効になっていると、画面全体が黒系に変化します。
クイック設定パネルのタイルで
バッテリーセーバーを見つけ、オフにして下さい。
Xperiaの場合、STAMINA(スタミナ)モードという名称。
もしタイルの中で見当たらない場合、設定の バッテリー より バッテリーセーバー をオフにすればOK。
Xperiaの場合、STAMINA(スタミナ)モードという名称。
原因③：色反転がオンになっている
画面の色を反転させる機能「色反転」が有効になっていると、画面全体が黒系に変化します。
クイック設定パネルのタイルで
色反転を見つけ、オフにして下さい。
もしタイルの中で見当たらない場合、設定の ユーザー補助 より 色反転 をオフにすればOK。
ホームボタンのアイコンが4色/二重丸に変わってしまう原因
Androidは通常、◉ホームボタン長押しで
Googleアシスタント（旧：Now on Tap）が起動します。
ホームボタン長押しで(左)、Googleアシスタントが起動する(右)。
この機能が有効になっていると、◉ホームボタンのデザインが次のように変化します。
- ホームボタンをタップして
4色マークが表示される - ホームボタンのデザインが●(普通の丸)から◎(二重丸)へ変化する
▼ホームボタンをタップして4色マークが表示される
▼ホームボタンのデザインが●(普通の丸)から◎(二重丸)へ変化する
上が変化前、下が変化後。●(普通の丸)から◎(二重丸)となる。
これらを無効にしたい場合、アシストアプリ設定を変えればOKです。
設定から アプリ → デフォルトのアプリ 、
デジタルアシスタントアプリ → デフォルトのデジタルアシスタントアプリ と進み、
Googleアイコン側をタップして下さい。
をタップすると別画面へ進んでしまうためご注意を。
設定中のGoogleを
なしへ切り替えます。
これで◉ホームボタンのデザインが戻っていれば成功です。
アシストアプリ（ホームボタン長押し機能）の詳細は、関連記事【Androidでホームボタン長押しを無効にする方法! Googleアシスタントの設定を変えよう】で解説しています。
〆：ナビゲーションバーをカラフルにしよう!
以上、Androidでナビゲーションバーの色をカスタマイズする方法! ボタンのデザインを変更しよう の説明でした。
ナビゲーションバーの色は単調になりがちですが、今回紹介した方法で独自のデザインを実装すれば、雰囲気が大きく変わります。
ぜひ、お洒落でカラフルに設定してみて下さい。お試しあれ。
コメント
はじめまして。Navigation Barを試しましたが、やっぱり違うのにしたくなり、アンインストールしました。そうすると一部の文字が変に、例えば、白抜き文字、で表示されるようになりました。。再起動、フォルルマネージャーから未インストールapkも削除しました。
元に戻したいです、お助けくださいm(_ _)mよろしくお願いいたします。