Androidでナビゲーションバーの色をカスタマイズする方法! ボタンのデザインを変更しよう

スポンサーリンク
Android

本記事では、Androidのナビゲーションバーのカラーを変更する方法を紹介します。

ナビゲーションバーは通常、色は白や黒を基調としており、変更する機能は提供されません。

が、サードパーティ製アプリを中心に、様々な方法でカスタマイズすることが可能です。

ナビゲーションバーの色を変更する説明

ナビゲーションバーの背景色やボタンデザインを変更した例。

スマホを個性的なデザインに変化させたいなら、ぜひご覧あれ。

 

スポンサーリンク
スポンサーリンク

スマホのナビゲーションバーのカラーを変える方法

本パートでは、ナビゲーションバーのカラーを変更する具体的な方法を解説します。

PlayストアアプリのアイコンPlayストアで配信されるサードパーティ製アプリを使えば自由に調整可能で、オススメのアプリを2つ紹介します。

アプリメリットデメリット
Navbar Appsのアイコン
Navbar Apps
  • 機能が豊富
    (例:好きな画像を背景に設定)
  • 広告の表示が少ない
  • ボタンのデザインは
    変更できない
Navigation Barのアイコン
Navigation Bar
  • ボタンのデザイン、
    色も変更できる
  • 無償版は広告の
    表示頻度が多い
とりあえずナビゲーションバーの色を変えたいなら、Navbar AppsのアイコンNavbar Appsがオススメです。一方、ボタン(◉ホーム / ◀戻る / ■最近)のデザインも変えたいなら、Navigation BarのアイコンNavigation Barをどうぞ。

前提:Androidのナビゲーションバーとは?

ナビゲーションバーとは、画面下部に表示されるバーの部分を指し、主に3つのボタン(◉ホーム / ◀戻る / ■最近)が表示されます。

ナビゲーションバーの説明

ホーム画面はもちろん(左)、任意アプリ画面上も常に表示される(右)。

このデザインは、Android 4.0以降ずっと変わらずでしたが、Android 9で2ボタンナビゲーション、Android 10でジェスチャーナビゲーションが導入されました。

Androidに存在する3パターンのナビゲーションバーの説明

上から3ボタンナビゲーション、2ボタンナビゲーション、ジェスチャーナビゲーションのデザイン。

従って、現在Androidでは3パターンのナビゲーションバーが存在することになります。

名称特徴
3ボタンナビゲーション3つのボタン(◉ホーム/◀戻る/■最近)で操作
2ボタンナビゲーション2つのボタンと一部ジェスチャーで操作
ジェスチャーナビゲーションすべてジェスチャーで操作(ボタンなし)

このうち本記事で紹介する内容は、3ボタンナビゲーションを前提としています。

もし別のスタイルを使用中の場合、Android設定アプリのアイコン設定より切り替えて下さい。

例えばXperia 10 II(Android 11)なら、システムジェスチャー と進み、

設定から3ボタンナビゲーションへ切り替える手順1

システムナビゲーション より 3ボタンナビゲーション を選択すればOK。

3つのボタン(◉ホーム / ◀戻る / ■最近)が表示されます。

設定から3ボタンナビゲーションへ切り替える手順2

方法①:Navbar Appsを使う

Navbar Apps
Navbar Apps
Price:Free

Navbar AppsのアイコンNavbar Appsで表示される画面に従って、いくつか権限付与をしてから、トップ画面まで進みます。

Navbar Appsの使い方 - ナビゲーションバーの色を変える手順1

(左)画面に従って権限付与する (右)トップ画面

初期設定が終わると、ナビゲーションバーの色が自動で変化します。

設定される色は、起動中アプリのテーマカラーに合わせて判定されます。
Navbar Appsの使い方 - ナビゲーションバーの色を変える手順2

ナビゲーションバーがLINEは緑(左)、Instagramは紅色(右)で表示される例。

この色は、2パターンの方法で指定もできます。

  • アプリごとカラーを指定する
  • すべてのアプリで同じカラーに固定する

▼アプリごとカラーを指定する

Navbar Appsの使い方 - ナビゲーションバーの色を変える手順3

設定アイコンから(左)、対象アプリを選ぶ(右)。

Navbar Appsの使い方 - ナビゲーションバーの色を変える手順4

色を選択すれば(左)、当該アプリはその色で固定される(右)。

▼すべてのアプリで同じカラーに固定する

Navbar Appsの使い方 - ナビゲーションバーの色を変える手順5

「特定の色に固定」から(左)、好きな色を選えば(右)、すべてのアプリがその色で固定される。

以上が、Navbar AppsのアイコンNavbar Appsの基本機能です。

そのほかにも、ナビゲーションバー関連のユニークな機能がいくつかあります。

  • ナビゲーションバーの背景画像を変える
  • ナビゲーションバーにバッテリー残量を表示する
  • ナビゲーションバーに絵文字を表示する
  • ナビゲーションバーに音楽ビジュアライザーを表示する
  • 画面全体にデコレーションを加える

▼ナビゲーションバーの背景画像を変える

Navbar Appsの使い方 - ナビゲーションバーの背景画像を変える手順1

背景画像にチェックを入れ(左)、好きな画像を選ぶ(右)。

Navbar Appsの使い方 - ナビゲーションバーの背景画像を変える手順2

選択できる背景画像のデザイン例。

有償版であれば、自分でアップロードした画像やコミュニティーで公開される画像など、より多様なイラストを設定できます。

▼ナビゲーションバーにバッテリー残量を表示する

Navbar Appsの使い方 - ナビゲーションバーにバッテリー残量を表示する手順

バッテリー残量にチェックを入れると(左)、ナビゲーションバーに電池残量を示すバーが出る(右)。

表示するバーのデザインは、個別に調整可能です。

▼ナビゲーションバーに絵文字を表示する

Navbar Appsの使い方 - ナビゲーションバーに絵文字を表示する手順1

絵文字にチェックを入れ(左)、好きな絵文字を選ぶ(右)。

Navbar Appsの使い方 - ナビゲーションバーに絵文字を表示する手順2

選択できる絵文字のデザイン例。

▼ナビゲーションバーに音楽ビジュアライザーを表示する

【ビジュアライザーとは?】 – visualizar。音楽を視覚的に表現する機能のことで、音の強弱やリズムに合わせて上下するバーを示す。
Navbar Appsの使い方 - ナビゲーションバーに音楽ビジュアライザーを表示する手順

ミュージックウィジェットにチェックを入れると(左)、ナビゲーションバーにビジュアライザーが出る(右)。

表示する音楽ビジュアライザーのデザインは、個別に調整可能です。なお、うまく設定できない場合、アプリ情報からマイク(録音)権限が許可されているかチェックして下さい。

▼画面全体にデコレーションを加える

Navbar Appsの使い方 - 画面全体にデコレーションを加える手順1

Overlaysにチェックを入れ(左)、好きなデザインを選ぶ(右)。

Navbar Appsの使い方 - 画面全体にデコレーションを加える手順2

選択できるデコレーションの例。

以上、Navbar AppsのアイコンNavbar Appsの紹介でした。

ナビゲーションバーの色を変えたいなら、まず第一候補としてあがるオススメアプリです。

一方、次のような欠点もあります。

  • 起動中のアプリによってはナビゲーションバーの色が変わらない
  • ナビゲーションバーのボタンのデザイン・色は変更できない

相性が悪ければ、次に紹介するNavigation BarのアイコンNavigation Barをどうぞ。

PlayストアアプリのアイコンPlayストアから類似アプリを探す場合、”navbar color”と調べればヒットします。

方法②:Navigation Barを使う

Navigation BarのアイコンNavigation Barの画面に従って、いくつか権限付与をしてから、トップ画面まで進みます。

Navigation Barの使い方 - ナビゲーションバーのボタンの色を変える手順1

(左)画面に従って権限付与する (右)トップ画面

初期設定が終わると、ナビゲーションバーの色を変更できます。

「SETTINGS」タブのBackground Colorで背景の色、Button Colorでボタンの色が変化します。

Navigation Barの使い方 - ナビゲーションバーのボタンの色を変える手順2

また「THEME」タブより、ボタン(◉ホーム / ◀戻る / ■最近)のデザインも変更できます。

一部のデザインは、広告を表示することでアンロックされます。
Navigation Barの使い方 - ナビゲーションバーのボタンのデザインを変える手順1

(左)ボタンデザインが変わる (右)「Custom」オンで組み合わせを調整できる

カラーも調整すれば、自分だけのオリジナルボタンを作成可能です。

Navigation Barの使い方 - ナビゲーションバーのボタンのデザインを変える手順2

編集できるボタンのデザイン例。

以上が、Navigation BarのアイコンNavigation Barの基本機能です。

そのほか「ACTION」タブより、ボタン(◉ホーム / ◀戻る / ■最近)長押し機能をカスタマイズできます。

Navigation Barの使い方 - ナビゲーションバーのボタン機能を変える手順1

対象のボタンに対して(左)、設定したい機能を選ぶ(右)。

Navigation Barの使い方 - ナビゲーションバーのボタン機能を変える手順2

設定例。■ボタン長押しで、クイック設定パネルを起動できる。

以上、Navigation BarのアイコンNavigation Barの紹介でした。

ナビゲーションバーの色のみならず、ボタンのデザイン・機能まで変えたいなら、試す価値アリです。

一方、無償版の場合、広告表示が多い欠点があります。

正直、ウンザリするくらい何度も出てきます。。。

頻繁にデザインを調整する場合、有償版への課金も検討してみて下さい。

参考:ジェスチャーナビゲーションバーの色を変える方法

Androidには3パターンのナビゲーションバーが存在しており、ここまで紹介した内容は3ボタンナビゲーションを前提としています

Androidにある3種類のナビゲーションバーの説明

上から3ボタンナビゲーション、2ボタンナビゲーション、ジェスチャーナビゲーションのデザイン。

Navbar AppsのアイコンNavbar Appsを使えば一応、他2つ(2ボタンナビゲーション/ジェスチャーナビゲーション)のカラーも変化します。

▼2ボタンナビゲーションの例

Navbar Appsで2ボタンナビゲーションの色を変える説明

▼ジェスチャーナビゲーションの例

Navbar Appsでジェスチャーナビゲーションの色を変える説明

一方、Navigation BarのアイコンNavigation Barは失敗します。

これはアプリの仕組みとして、デフォルトのナビゲーションバーの上に、画面オーバーレイで擬似的なナビゲーションバーを配置するためです。

つまりナビゲーションバー自体の色は変更できません。
Navigation Barでジェスチャーナビゲーションの色を変更できない説明

ナビゲーションバーの位置をずらすと、その下にデフォルトのナビゲーションバーが姿を現す。

PlayストアアプリのアイコンPlayストアから類似アプリを探す場合も、このような画面オーバーレイタイプのアプリが結構あるため、知っておくとよいでしょう。

 

補足:ナビゲーションバーのデザインに関するアレコレ

本パートでは、ナビゲーションバーのデザイン全般の細かい情報を補足します。

興味のあるコンテンツがあれば、ぜひどうぞ。

説明の流れ
  • 補足①
    ナビゲーションバーを透過する方法
  • 補足②
    ナビゲーションバーに音楽ビジュアライザーを表示する方法
  • 補足③
    なぜかナビゲーションバーの色が変わってしまう原因まとめ
  • 補足④
    ホームボタンのアイコンが4色/二重丸に変わってしまう原因

ナビゲーションバーを透過する方法

ランチャーアプリ(ホームアプリ)によっては、ホーム画面上でナビゲーションバーを透明にできます。

例えばNova LauncherのアイコンNova Launcherなら、設定から 外観と操作感 より、通知バーの透過 を有効にすればOK。

Androidのナビゲーションバーを透過する手順1

Androidのナビゲーションバーを透過する手順2

(右)ナビゲーションバーが透明になる。

またナビゲーションバー自体を非表示にしたい場合、全画面表示への切り替えがオススメです。

例えばサードパーティ製アプリ(例:Immersive SettingsのアイコンImmersive Settings)を使えば、自由に全画面表示のコントロールが可能となります。

Androidのナビゲーションバーを透過する手順3

Chromeアプリの例。通常画面から(左)、フルスクリーンへ切り替えた(右)。

Androidの全画面表示は奥が深く、説明が長くなるため、詳細は関連記事【Androidを全画面表示する方法! ステータスバー/ナビゲーションバー/ホームボタンを隠してフルスクリーンモードへ】で解説しています。

Androidを全画面表示する方法! ステータスバー/ナビゲーションバー/ホームボタンを隠してフルスクリーンモードへ
この記事では、Androidを全画面表示する方法について解説します。ステータスバー/ナビゲーションバーを隠して、スマホをフルスクリーンで楽しみましょう。

ナビゲーションバーに音楽ビジュアライザーを表示する方法

PlayストアアプリのアイコンPlayストアで配信されるアプリを使えば、再生している楽曲に合わせて、ナビゲーションバーにビジュアライザーを表示できます。

【ビジュアライザーとは?】 – visualizar。音楽を視覚的に表現する機能のことで、音の強弱やリズムに合わせて上下するバーを示す。

ここでは、オススメのアプリを2つ紹介します。

  • MuvizのアイコンMuviz:ナビゲーションバーにビジュアライザーを表示
  • Muviz EdgeのアイコンMuviz Edge:画面全体にビジュアライザーを表示
自分で探す場合、Playストアで”ビジュアライザー”と調べればヒットします。

Muviz:ナビゲーションバーにビジュアライザーを表示

再生中の音楽に合わせて、ナビゲーションバーにエフェクトが付きます。

Muvizアプリでナビゲーションバーにビジュアライザーを表示する手順1

プリセットのデザインが豊富に用意されており、さらに自分で調整したオリジナルデザインを設定することも可能です。

Muvizアプリでナビゲーションバーにビジュアライザーを表示する手順2

(左)豊富なデザイン一覧 (右)自分でカスタマイズも可能

Muvizアプリでナビゲーションバーにビジュアライザーを表示する手順3

ビジュアライザーのデザイン例。

Muviz Edge:画面全体にビジュアライザーを表示

ナビゲーションバーのみならず、画面の枠全体にエフェクトが付きます。

Muviz Edgeアプリで画面全体にビジュアライザーを表示する手順1

プリセットのデザインが豊富に用意されており、エフェクトの強弱やカラーを自分で調整可能です。

一部のデザインは課金が必要です。
Muviz Edgeアプリで画面全体にビジュアライザーを表示する手順2

(左)選べるデザイン例 (右)色などカスタマイズ可能

Muviz Edgeアプリで画面全体にビジュアライザーを表示する手順3

ビジュアライザーのデザイン例。

なぜかナビゲーションバーの色が変わってしまう原因まとめ

操作した覚えはないのに、ナビゲーションバーの色が黒系に変わるケースがあります。

なぜかナビゲーションバーの色が黒になってしまう説明

個別アプリや(左)ホーム画面で(右)、ナビゲーションバーの背景が黒になった例。

ここでは、主な3つの原因を紹介します。

  • 原因①:ダークテーマがオンになっている
  • 原因②:バッテリーセーバーがオンになっている
  • 原因③:色反転がオンになっている
Xperia 10 II(Android 11)の画面を例に説明します。

原因①:ダークテーマがオンになっている

夜間向けの機能「ダークテーマ」が有効になっていると、画面全体が黒系に変化します。

クイック設定パネルのタイルでダークテーマのタイルアイコンダークテーマを見つけ、オフにして下さい。

Androidのダークテーマを無効化する手順1

もしタイルの中で見当たらない場合、Android設定アプリのアイコン設定の 画面設定 より ダークテーマ をオフにすればOK。

Androidのダークテーマを無効化する手順2

ダークテーマに関する詳細な情報は、関連記事【Androidでダークテーマを設定する方法! スマホをダークモードにして画面を黒系に変化させよう】で解説しています。

Androidでダークテーマを設定する方法! スマホをダークモードにして画面を黒系に変化させよう
この記事では、Androidのダークテーマ設定手順を解説します。黒基調の画面へ変化すれば、バッテリー節約や焼き付き対策になりますよ。

原因②:バッテリーセーバーがオンになっている

電池残量を節約する機能「バッテリーセーバー」が有効になっていると、画面全体が黒系に変化します。

機種によって呼称が異なります。例えばXperia系は「スタミナモード」、Galaxy系は「パワーモード」、AQUOS系は「長エネスイッチ」です。

クイック設定パネルのタイルでバッテリーセーバーのタイルアイコンバッテリーセーバーを見つけ、オフにして下さい。

Androidのバッテリーセーバーを無効化する手順1

Xperiaの場合、STAMINA(スタミナ)モードという名称。

もしタイルの中で見当たらない場合、Android設定アプリのアイコン設定の バッテリー より バッテリーセーバー をオフにすればOK。

Androidのバッテリーセーバーを無効化する手順2

Xperiaの場合、STAMINA(スタミナ)モードという名称。

原因③:色反転がオンになっている

画面の色を反転させる機能「色反転」が有効になっていると、画面全体が黒系に変化します。

クイック設定パネルのタイルで色反転のタイルアイコン色反転を見つけ、オフにして下さい。

色反転はスクリーンショットに反映されないため、下記画像では確認できませんが、実際の画面上は黒系に変化しています。

Androidの色反転を無効化する手順1

もしタイルの中で見当たらない場合、Android設定アプリのアイコン設定の ユーザー補助 より 色反転 をオフにすればOK。

Androidの色反転を無効化する手順2

ホームボタンのアイコンが4色/二重丸に変わってしまう原因

Androidは通常、◉ホームボタン長押しでGoogleアシスタントのアイコンGoogleアシスタント(旧:Now on Tap)が起動します。

このように◉ホームボタン長押しで起動するアプリを、アシストアプリと呼びます。
Androidのアシストアプリの説明

ホームボタン長押しで(左)、Googleアシスタントが起動する(右)。

この機能が有効になっていると、◉ホームボタンのデザインが次のように変化します。

  • ホームボタンをタップしてホームボタンの4色マーク4色マークが表示される
  • ホームボタンのデザインが●(普通の丸)から◎(二重丸)へ変化する

▼ホームボタンをタップしてホームボタンの4色マーク4色マークが表示される

ホームボタンをタップして4色マークが表示される説明

▼ホームボタンのデザインが●(普通の丸)から◎(二重丸)へ変化する

Androidホームボタンの二重丸について

上が変化前、下が変化後。●(普通の丸)から◎(二重丸)となる。

これらを無効にしたい場合、アシストアプリ設定を変えればOKです。

Pixel 3a XL(Android 12)の画面で說明します。

Android設定アプリのアイコン設定から アプリ → デフォルトのアプリ

アシストアプリを「なし」へ変える手順1

デジタルアシスタントアプリデフォルトのデジタルアシスタントアプリ と進み、

デフォルトのデジタルアシスタントアプリ では設定中のGoogleアプリのアイコンGoogleアイコン側をタップして下さい。アシストアプリの設定アイコンをタップすると別画面へ進んでしまうためご注意を。

アシストアプリを「なし」へ変える手順2

設定中のGoogleアプリのアイコンGoogleをアシストアプリなしのアイコンなしへ切り替えます。

これで◉ホームボタンのデザインが戻っていれば成功です。

アシストアプリを「なし」へ変える手順3

 

〆:ナビゲーションバーをカラフルにしよう!

以上、Androidでナビゲーションバーの色をカスタマイズする方法! ボタンのデザインを変更しよう の説明でした。

ナビゲーションバーの色は単調になりがちですが、今回紹介した方法で独自のデザインを実装すれば、雰囲気が大きく変わります。

ぜひ、お洒落でカラフルに設定してみて下さい。お試しあれ。

参考 Androidヘルプ – Androidスマートフォンを使いこなす

Android
スポンサーリンク
スポンサーリンク

関連記事

スポンサーリンク
スポンサーリンク
あっとはっく

コメント

タイトルとURLをコピーしました