Safariのウェブサイト着色機能をマスター:iPhone・iPad・Macでブラウザの外観をカスタマイズする方法
Safariの「ウェブサイト着色(Website Tinting)」機能は、閲覧中のウェブサイトの配色に合わせてブラウザの外観を自動的に変えるカスタマイズ機能です。iOS 15、iPadOS 15、macOS Montereyで導入されたこの機能は、Safari画面の上部(iPhoneではステータスバーを含む)をウェブページのテーマに合わせて変化させます。ただし、iPadやMacのコンパクトなタブレイアウトなど、特定のレイアウトでのみ動作し、統一感のある見た目でブラウジング体験を高めることを目的としています。
Safariのウェブサイト着色とは?
このカラー同期機能は、ウェブサイトのデザインをブラウザに取り入れることで、より視覚的に魅力的なネットサーフィンを実現しようとするAppleの試みです。便利かどうかは主に個人の好みによります。没入感のある体験を好むユーザーもいれば、頻繁な色の変化が気になって標準的なブラウザの外観を好むユーザーもいるでしょう。
ウェブサイト着色は自分の好みに合わせて自由に調整でき、カラフルなブラウジング体験が自分に合っているかどうかを判断できます。iOSデバイスやMacでは、この機能を簡単にオン/オフでき、自分の選んだブラウジングスタイルが尊重されます。Safariにカスタマイズ性を持たせることで、ユーザーはオンラインセッション中にどの程度の視覚的な一体化を望むかを自分で決められるのです。
デバイスでウェブサイト着色を調整するには、以下の手順に従ってください。
1. iOSデバイスでウェブサイト着色をオンにする
iOS 15のSafariブラウザでウェブサイト着色機能を有効にするには、以下の簡単な手順に従ってください。
- iPhoneまたはiPadで「設定」アプリを開きます。
- リストを下にスクロールして「Safari」を見つけ、タップして開きます。
- 「Webサイトの着色を許可」オプションを探し、トグルをオンにして機能を有効にします。
以上で完了です!機能を有効にしたら、実際にインターネットを閲覧して変化を確認し、新しい外観が気に入るかどうか確かめてみてください。
なお、iOS 15以前は、アクセシビリティ設定の中に「タブバーにカラーを表示」という項目があり、現在の「Webサイトの着色を許可」トグルとほぼ同じ役割を果たしていました。この名称変更は、以前はこの機能を知らない、あるいは使っていない人が多かったため、より多くのユーザーに機能を知ってもらい、活用してもらいたいというAppleの意向を示しています。
2. iOSデバイスでウェブサイト着色をオフにする
ウェブサイト着色が自分に合わないと感じたら、無効にするのも有効にするのと同じくらい簡単です。以下の手順で機能をオフにできます。
- まず、iPhoneまたはiPadで「設定」アプリを開きます。
- スクロールして「Safari」を見つけ、タップして設定画面に入ります。
- 「Webサイトの着色を許可」というトグルを探し、オフにします。
これで、Safariは閲覧中のウェブサイトに合わせて色を変えなくなり、どのサイトを見ていても外観が一定に保たれます。変更を反映させるためにiPhoneを再起動する必要もありません。
3. Macでタブバーの着色をオン/オフする
最新のSafariアップデートが適用されており、macOS Big Sur、Catalina以降のバージョンを使用していれば、Macでウェブサイト着色(タブバーの着色)を切り替えるのは簡単です。Macでは、Appleはこの機能を「タブバーにカラーを表示」と呼んでいます。手順は以下の通りです。
- MacでSafariを開き、画面左上の「Safari」メニューから、ドロップダウンメニュー内の「環境設定」をクリックします。
- 環境設定ウィンドウで「タブ」セクションをクリックします。
- 「タブバーにカラーを表示」オプションを見つけ、チェックボックスにチェックを入れます。すでに機能がオンになっている場合は、チェックを外せばオフになります。
チェックボックスにチェックを入れるとすぐに、Safariのタブの色が閲覧中のウェブサイトに合わせて変わります。あとは環境設定ウィンドウを閉じて、カラフルなブラウジング体験をお楽しみください。
FAQ(よくある質問)
Q: ウェブサイト着色は「タブバーにカラーを表示」機能と同じものですか?
A: はい、「タブバーにカラーを表示」はウェブサイト着色の別名にすぎません。この機能はSafari 15で注目される前から存在していました。つまり、タブバーへのカラー表示について語るとき、それはウェブサイト着色のことなのです。
Q: ウェブサイト着色を有効にするとSafariのパフォーマンスに影響しますか?
A: いいえ、ウェブサイト着色を有効にしてもSafariが遅くなったり、ページの読み込み速度に影響したりすることはありません。純粋に視覚的な機能であり、閲覧中のウェブサイトに合わせてブラウザの見た目が変わるだけです。パフォーマンスを心配することなく、よりパーソナライズされたブラウジング体験を楽しめます。
Q: iPhoneでウェブサイト着色をコントロールできますか?
A: はい、気に入らない場合はSafariのウェブサイト着色機能を無効にできます。後で気が変わったら、簡単に再度オンにすることも可能です。すべては自分の好み次第です。
Q: Safari以外のブラウザでも利用できますか?
A: いいえ、この機能はSafari独自のもので、Appleが継続的に更新しています。現在のところ、ウェブサイト着色のような機能を提供している他のウェブブラウザはありません。
著者について

Khalid Ali(カリッド・アリ)
カリッドは5年以上にわたり専門性を磨いてきた多才なアナリストです。GoogleとIBMの認定資格を持ち、業界の最新トレンドにとどまらず幅広い分野に精通した知識を有しています。
-
「ssl_error_handshake_failure_alert」を解決!ブラウザのSSLハンドシェイクエラーの原因と直し方
SSLハンドシェイクエラーは、アクセスユーザーの正当性を検証する必要があるWebサイト(特にハードウェア暗号デバイスやカードを使用して認証を行うサイト)でよく発生する問題です。このエラーは、FirefoxやChrome、Edgeといった主要なブラウザで、Windows・Mac・Linuxなど主要なデスクトップOS上で表示されることが確認されています。典型的なエラー表示は以下のようなものです。SSLハンドシェイクエラーとは、SSLプロトコルを使用したサーバーとクライアント間の通信が失敗することを指します。このエラーはクライアント側とサーバー側の両方の要因で引き起こされる可能性があります。主な原因
-
Google ChromeでWebGLエラーが発生したときの対処法4選
WebGLエラーとは?このエラーは主にGoogle Chromeユーザーに発生しやすいもので、WebGLという技術自体があまり知られていないため、原因の特定が難しいのが実情です。WebGL(Web Graphics Library)とは、プラグインを使わずにブラウザ上でインタラクティブな2D・3Dグラフィックスを描画するためのJavaScript APIです。WebGLはブラウザのWeb標準に組み込まれており、Webページのcanvas要素の一部として、物理演算や画像処理をGPU(グラフィックス処理装置)の性能を活用して高速に実行できます。しかし、何らかの原因でWebGLがグラフィックカードへ