[Chrome]Googleホーム画面のカスタマイズ 背景や色を設定する方法

今回はPC版GoogleChromeホーム画面の『カスタマイズ』ボタンから背景や色、ショートカットを設定する方法を紹介／解説しています。

GoogleChromeを使用している方で、ホーム画面右下の[カスタマイズ]というボタンが気になった方も多いと思います。
　

ただ、「気にはなっても特に設定していない」という方が大半のようです。

本記事では、[カスタマイズ]ボタンから設定することが出来る内容と、その設定方法や手順、サンプルなどを画像で分かりやすくお伝えしています。

スマホでは、Google検索ページをChromeのホーム画面にしていても[カスタマイズ]ボタンは表示されません。

PC版Chromeのみの機能ですのでご了承ください。

なお当ブログでは、Androidスマホの表示関連やChromeに関する記事も執筆しています。

ご興味がありましたら、下記も読んでみてください。

～Androidスマホの記事をピックアップ～

⇒⇒⇒[Android] Google検索バーの表示(色や形)を変更する方法

⇒⇒⇒Androidスマホでダークテーマを設定する方法・画面の明るさを調整する方法

⇒⇒⇒[Android] 開きすぎたサイトを一括整理！Chromeでタブのグループ化を活用しよう！

それでは、各設定について詳しく解説していきます。

スポンサーリンク

■GoogleChromeで『カスタマイズボタン』を表示する

GoogleChromeのホーム画面にカスタマイズボタンを表示するためには、以下の条件を満たしている必要があります。

◆指定の検索エンジンでGoogleを選択していること

GoogleChromeでは、ホーム画面の検索エンジンを指定することが出来ます。

つまり、ブラウザはChromeでも、検索エンジンにYahooやBingを指定することも出来るということです。

ただし、Chromeでホーム画面に[カスタマイズ]ボタンを表示するためには、検索エンジンが必ずGoogleになっている必要があります。

その確認方法と設定方法を説明いたします。

まず、GoogleChromeを起動して、Googleにログインして下さい。

《画像1》

①・・・ホーム画面が表示されたら、右上の[設定アイコン]をクリックします。

設定関連のリストメニューが表示されます。

《画像2》

②・・・リストメニューの中から、[設定(S)]をクリック。

Chromeの設定ページが表示されます。

《画像3》

設定ページの少し下の方までスクロールして、[検索エンジン]の項目を表示しましょう。

③・・・[アドレスバーで使用する検索エンジン]で、[Google]を選択。　⇒　新しいタブを開く。

以降はChromeを起動すると、ホーム画面にGoogleの検索エンジンが表示されます。

◆GoogleChromeのバージョンが78以降であること

カスタマイズボタンはGoogleChromeのバージョン78から搭載された機能です。

78より古いバージョンのChromeを使われている場合、カスタマイズボタンは表示されません。

Chromeを最新版にアップデートしましょう。

Chromeのバージョンの確認方法と、アップデート方法。

《画像4》

①・・・Chromeの設定ページにて、左上のボタンをクリック。

サイドメニューが表示されます。

《画像5》

②・・・サイドメニューより、[Chromeについて]をクリック。

《画像6》

③・・・Chromeが最新版であれば、《画像6》のように[GoogleChromeは最新版]と表示されます。

[GoogleChromeは最新版]と表示されていれば、問題なし。次の項目へ進みましょう。

■GoogleChromeホーム画面：カスタマイズボタンから[背景]を設定する

それでは、GoogleChromeホーム画面のカスタマイズボタンから、ホーム画面の背景を設定していきます。

◆背景の設定手順

《画像7》

Chromeを起動します。(Google検索のホーム画面が表示される。)

①・・・ホーム画面右下の[カスタマイズ]ボタンをクリック。

カスタマイズ画面が表示されます。

《画像8》

②・・・サイドメニューより[背景]を選択。（カスタマイズ画面を開くと、すでに選択されている状態です。）

③・・・[風景]のカテゴリをクリック。
※背景のカテゴリは、まれに新しいカテゴリが追加されることもあります。その場合、《画像8》の[風景]カテゴリの位置が変わっていることがあるので、ご了承ください。

《画像9》

風景カテゴリの画像が表示されます。

④・・・今回は、左から2番目『トンネル状の岩の画像』をクリックして選択。

《画像10》

⑤・・・画像が選択状態になったら、右下の[完了]をクリック。

《画像11》

⑥・・・⑤で選択した背景画像がホーム画面に設定されました。

以上。

ホーム画面の背景の設定手順を説明しましたが、とても手軽に背景を変えることが出来ますよね。

今回は、風景カテゴリの『トンネル状の岩の画像』を背景に設定しましたが、他にも沢山の背景画像があります。

次項では、おすすめのカテゴリと、背景のサンプル画像を紹介しています。

◆背景は、任意のカテゴリから選択できる（背景サンプル）

選択できるカテゴリは下記の10つ。(初期設定の[背景なし]含む)　※2021年2月28日現在

【背景なし／風景／テクスチャ／暮らし／地球／アート／都市景観／幾何学模様／単色／海の景色】

この中から、おすすめのカテゴリを5つ紹介しましょう。

また、各カテゴリのおすすめ背景画像もピックアップしてみました。

【風景】

風景の画像といえば『無難』というイメージがあります。

ですが、ここで選択できる風景画像は素晴らしいものが多いです。

【テクスチャ】

機械的なイメージの強いテクスチャですが、意外と面白い画像があります。

【暮らし】

カテゴリ名から、アットホームな画像を想像しますが、意外とスタイリッシュなものが多いです。

【アート】

カスタマイズ画面から設定できる[色とテーマ]と組み合わせると、エモーショナルなホーム画面が出来上がります。

[背景]と[色とテーマ]の組み合わせについては、記事の後半で解説しています。

【都市景観】

都市景観もカテゴリ名から、無難なイメージがします。

しかし、他には無いような夜景やレトロな画像が揃っていて、意外におすすめです。

おすすめの背景のカテゴリを紹介してきましたが、なかなかクオリティ高いと思いませんか！？

僕はこのブログを運営している関係で、素材サイトで画像を吟味することが多いですが、このクオリティの画像はなかなか目にしませんね。

おすすめに上げているもの以外にも、良い画像が沢山ありますよ。

◆毎日更新するボタン

背景の各カテゴリの画面には、[毎日更新する]ボタンが表示されます。

このボタンをONにすると、背景画像が毎日自動で切り替わります。(対象のカテゴリから自動選択される)

《画像12》

背景の各カテゴリの画面を表示。

①・・・[毎日更新する]ボタンをクリックしてONにします。
（《画像12》の例では、風景カテゴリで[毎日更新する]をONにしました。）

②・・・右下の[完了]をクリック。

《画像13》

③・・・背景画像が対象のカテゴリから自動で選択されました。

翌日には自動で別の画像に切り替わります。

ホーム画面の背景が毎日切り替わるので、飽きずに新鮮さを維持できます。

さらに、切り替えの手間もかからない、とても便利な設定ですよ。

◆アップロードした画像を背景にする

さて、『デバイスからアップロード』という表示が気になった方もいるかもしれません。

こちらは、パソコン上の画像をアップロードして、そのまま背景に設定できる機能になります。

以下、アップロード手順。

《画像14》

①・・・[デバイスからアップロード]をクリック。
（Windowsの場合は、エクスプローラが開きます。）

《画像15》

②・・・パソコン上の画像をクリックして選択します。

③・・・エクスプローラ右下の[開く]をクリック。

《画像16》

④・・・選択した画像が背景に設定されました。

お気に入りの画像を背景に設定したい方は、是非『デバイスからアップロード』を試してみて下さい。

■[色とテーマ]の設定①　既存のパレットから選択する

[色とテーマ]では、Googleのホーム画面と、Chromeのメニューバー（アドレスバーやタブなど）部分の色を設定できます。

また、[背景]の画像はホーム画面のみ表示されますが、[色とテーマ]は他のWebサイトを開いている時でも有効です。

◆色とテーマの範囲

色とテーマは、Chromeのホーム画面の背景 ＋ メインメニュー部分(タブやアドレスバー)に塗りつぶし色を設定することが出来ます。

《画像17》

画像で範囲を示してみましたが、色とテーマは、実際に設定してみないと分かりにくいかもです。

次項で手順を解説していますので、さっそく設定してみましょう。

◆色とテーマの設定　基本的な設定手順

《画像18》

①・・・GoogleChromeを起動して、ホーム画面右下の[カスタマイズ]をクリック。

《画像19》

②・・・サイドメニューの[色とテーマ]を選択する。

カラフルなパレットボタンがズラっと表示されます。

《画像20》

③・・・今回は、[黒]のパレットをクリック。
（初期設定では、左上から2番目の[既存]パレットが選択されています。）

④・・・右下の[完了]をクリック。

色とテーマが設定されました。

《画像21》

流行りのダークテーマっぽいホーム画面になりましたね。

このように、色とテーマの設定では、選択したパレットの2色でホーム画面とメインメニュー部分が塗りつぶされます。

なお、メインメニュー部分の塗りつぶしは、他のWebサイトを開いた際も有効です。

《画像22》

当ブログのトップページを表示してみました。

⑤・・・ホーム画面から他のサイトに移動しても、メインメニューの塗りつぶし色はそのまま有効です。

以上。色とテーマの設定手順でした。

次項では、サンプルを6種類紹介しています。

◆色とテーマの設定 サンプル

6種類ほどサンプルを上げてみました。

選択したパレットは下記を参照。

他にも良い色合いのパレットがありますので、いろいろ試してみて下さい。

■[色とテーマ]の設定②　自分で配色を選択する

色とテーマでは、既存のパレットを選択する以外に、自分で配色を選択することも出来ます。

まず、設定手順を紹介。

◆自分で配色を選択する手順

《画像23》

サイドメニューの[色とテーマ]を開いた状態から。

①・・・左上のスポイトアイコンのパレットをクリック。

《画像24》

②・・・中央にカラーピッカーが表示されました。
（※カラーピッカーのついては、次項で詳しく解説しています。）

《画像25》

③・・・グラデーション部分の任意の場所をクリックします。
（《画像25》と同じ色になっていなくてもOK）

《画像26》

④・・・続いて、カラーピッカーの外の空白部分をクリックします。
（空白であれば、どこでもOK）

空白部分をクリックすると、配色が確定します。

《画像27》

⑤・・・配色が確定し、選択されました。

《画像28》

ホーム画面で確認してみると、こんな感じになりました。

次項では、カラーピッカーの使い方を詳しく解説しています。

◆カラーピッカーの使い方

前項では、簡単に手順の説明をしましたが、カラーピッカーについては知らない人は知らないかもです。

なので、カラーピッカーについて、もう少し詳しく使い方などを解説していきます。

カラーピッカーの機能を一つずつ解説していきます。

《画像29》

①明るさ調節

選択している色をベースに、白と黒の比率（明るさ）や、選択色の濃さを設定することが出来ます。

といっても、グラデーション部分をクリック選択するだけなので、非常に簡単。

なお、クリック選択した結果は、③で確認することが出来ます。

②色の選択

ベースになる色をクリック選択することが出来ます。
（白黒以外のカラー色はここで選択します。）

赤をベース、青をベースなど、カラフルなバーの任意の場所をクリックして下さい。

③現在の色

現在選択中の色を確認できます。こちらは、③以外の全ての設定の選択結果が表示されます。

④スポイト

スポイトをクリック後、任意の場所をクリックすると、その場所の色を抽出することが出来ます。

⑤カラーコード

色を表現するために用いられる、文字の符号のことです。

[色とテーマ]のカラーピッカーで選択できるのは、以下の3種類です。

～RGB～
3原色（赤・緑・青）で色を表現する。

R：0～255

G：0～255

B：0～255

～HSL～
色相・彩度・輝度で色を表現する。

H：0～359

S：0％～100％

L：0％～100％

～HEX～
16進数で色を表現する。

#000000～#FFFFFF

カラーコードは、Web制作経験がある人はご存じだと思います。

以上。[色とテーマ]のカラーピッカーの使い方の解説してきました。

でも、ごめんなさい。

カラーピッカーの使い方について、全部覚える必要はまったくありません。

①～③だけ使えれば十分だと思います。

もっと細かく色を指定したいという人のみ、④、⑤も使うと良いでしょう。

■背景／色とテーマ の組み合わせ サンプル紹介

これまで解説してきた[背景]や[色とテーマ]を組み合わせて設定したサンプルを紹介。

基本的に、[背景]と[色とテーマ]どちらを先に設定しても問題ありません。

両方とも設定することで、組み合わせることが出来ます。

～[背景]と[色とテーマ]組み合わせサンプル～ （※[色とテーマ]は既存のパレットから選択しています。）

サンプルを4種類紹介しました。

[背景]と[色とテーマ]の2つの設定を組み合わせると、上記のような斬新なホーム画面を作ることが出来ます。

■GoogleChromeホーム画面にWebサイトの『ショートカット』を設定する

ショートカットの設定は、今までのデザイン要素の設定とは少し異なります。

一言で言うと、「ホーム画面にWebサイトのショートカットを表示できる」というものです。

表示設定の2種類と、非表示設定から選択することが出来ます。

◆カスタムショートカット（指定したWebサイトのショートカットを表示）

まず、使用者が指定したWebサイトのショートカットを表示する設定『カスタムショートカット』の設定方法を紹介します。

《画像30》

カスタマイズ画面にて、

①・・・サイドメニューの[ショートカット]をクリックして選択。

②・・・表示された中から、[カスタムショートカット]をクリック。

[カスタムショートカット]が選択状態になりました。

《画像31》

③・・・右下の[完了]をクリック。

[完了]をクリックすると、自動的にホーム画面に戻ります。

《画像32》

④・・・ホーム画面の[ ＋ ショートカット]をクリック。

[ショートカットの追加]の入力欄が表示されます。

《画像33》

[ショートカットの追加]の入力欄にて、

⑤・・・ショートカット名(任意)と、WebサイトのURLを入力します。

⑥・・・⑤を入力したら、[完了]をクリック。

《画像34》

⑦・・・⑤で入力した、URLのショートカットがホーム画面に表示されました。

⑧・・・左下に「ショートカットを追加しました」とメッセージが表示されます。
　このメッセージは、何もしなくても勝手に消えるので、そのままでOK。

同じ手順で、最大10個のショートカットを作成することが出来ます。

◆よくアクセスするサイト（アクセス履歴でアクセスの多いWebサイトのショートカットを表示）

続いて、『よくアクセスするサイト』の設定方法を紹介。

こちらは、アクセス履歴に応じて、表示されるショートカットが変わります。

《画像35》

カスタマイズ画面にて、

①・・・サイドメニューの[ショートカット]を選択。

②・・・表示された中から、[よくアクセスするサイト]をクリック。

[よくアクセスするサイト]が選択状態になりました。

《画像36》

③・・・右下の[完了]をクリック。

[完了]をクリックすると、自動的にホーム画面に戻ります。

《画像37》

④・・・ホーム画面にアクセスした回数が多いWebサイトのショートカットが表示されました。

◆ショートカットを非表示にする

《画像38》

カスタマイズ画面にて、

①・・・サイドメニューの[ショートカット]を選択。

②・・・表示された中から、下部の[ショートカットを非表示にする]のボタンをクリックして、ONの状態にします。

[ショートカットを非表示にする]が選択状態になりました。

③・・・右下の[完了]をクリック。

《画像39》

④・・・ショートカットが非表示になりました。

■まとめ：Googleさんにお任せ設定

最後に、細かく設定するのは、面倒だ・・という方へ。

背景の[毎日更新]するボタンの設定と、ショートカットの[よくアクセスするサイト]の設定だけ行いましょう。

この2つの設定にしておくと、背景は毎日、ショートカットもアクセス履歴に応じて自動で切り替わっていきます。

名付けて、Googleさんにお任せ設定！

面倒だから、後はGoogleさんに任せてしまいましょう。

今回紹介したカスタマイズボタンからの設定は、簡単なものばかりなので是非いろいろ試してみて下さいね。

当ブログでは、冒頭で紹介したAndroidスマホの記事以外に、

PC版のChromeや他のGoogleサービスに関するの記事も執筆しています。

宜しければ、下記よりお読みください。

～PC版Googleサービス関連の記事 ピックアップ～

⇒⇒⇒[GoogleChrome]テーマの変更方法/元のテーマに戻す方法

⇒⇒⇒[Chrome]ブックマークファイルのエクスポートとインポート

⇒⇒⇒Youtubeのダークテーマ(黒い背景)の設定方法[PCとAndroid]

～GoogleChromeの拡張機能～

⇒⇒⇒GoogleKeepのWebクリップが便利すぎる

⇒⇒⇒Chromeの拡張機能[CustomCursor]の使い方

⇒⇒⇒おすすめのChrome拡張機能【FireShot】使いやすさ抜群！

それでは、また！

スポンサーリンク