Safariのダークモードで夜のWebが快適!Mac愛用10年KenSが徹底ガイド

※本ページにはプロモーション(広告)が含まれています。
Safariのダークモードで夜のWebが快適!Mac愛用10年KenSが徹底ガイド

夜の作業でMacの画面がまぶしくて困り、Safariの白い背景が目に刺さり、ダークモードに切り替えたいと感じることはありませんか?

長年の現場で磨かれた具体的な手順を踏めば、システム設定を数クリックするだけで画面全体が落ち着いた色合いに変わり、目の疲れや電池の消耗を減らしながら快適にブラウジングできます。さらにダーク配色は有機EL画面なら電力消費を抑え、バッテリーの持ちもぐっと伸びます。

これから紹介するポイントを順に実践し、ご自身の作業環境に合った暗さを見つけて、夜の作業も安心して続けられる快適なMacライフを手に入れてください。

目次

MacでSafariをダークモードに切り替えるやさしい手順

MacでSafariをダークモードに切り替えるやさしい手順

夜のWeb閲覧で画面が眩しく感じることありませんか。Safariを眺めていると目がチカチカして集中しづらいときもあります。

そんなときに役立つのがダークモードです。大きく分けて2つの方法を紹介します。

  1. システム環境設定でMac全体をダークモードに切り替える
  2. Safariの開発メニューを有効にして好きなサイトを強制的にダークにする

システムのダークモードはSafariだけでなくすべてのアプリに反映されます。Safariだけ暗くしたいときは開発メニューで個別に調整すると便利です。

システム設定からMac全体をダークにしてSafariも暗くする

システム設定からMac全体をダークにしてSafariも暗くする

Macのシステム設定からダークモードに切り替えると、Safariを含むすべてのアプリがまとめて暗くなります。手軽に画面の明るさを抑えて目への負担を減らせるので、夜の作業でも快適です。

日によって自動で切り替えたり、アプリごとのテーマ設定に悩まされたりすることなく、一度設定すればずっとダークのまま使えるのがうれしいポイントです。

①画面左上のAppleメニューからシステム設定を開く

手順
画面左上のAppleメニューをクリック

マウスカーソルを画面左上のリンゴマークに合わせてクリックします。もしアプリがフルスクリーン表示だとメニューバーが隠れることがあるので、その場合はカーソルを上端に動かしましょう。

手順
「システム設定」を選択

メニューが開いたら一覧から「システム設定」をクリックします。macOS Ventura以降はこの名前になりますが、古いバージョンでは「システム環境設定」と表示されることがあります。

②外観の項目でダークを選んで変更を確定する

手順
外観の項目で「ダーク」を選んで変更を確定

「一般」の設定画面で外観のラジオボタンから「ダーク」をクリックします。選択するとすぐに画面が暗いトーンに切り替わります。

ダークモードは目に優しいだけでなく、バッテリーの消費も抑えられることがあります。

プログラマー視点では、コードエディタやターミナルの配色とも自然にマッチするので作業集中度アップが期待できます。

Safariだけを暗く読みたいときにリーダー表示を使う

Safariだけを暗く読みたいときにリーダー表示を使う

ウェブページの本文だけを暗い背景で読みたいときはSafariのリーダー表示がとても便利です。広告やメニューが消えてテキストが読みやすくなるうえ、ダークテーマに切り替えると目にぐっと優しくなります。

使い方はアドレスバー横のリーダー表示アイコンをクリックするだけ。1ページずつ適用できるので、普段は通常表示のままにしておきたいサイトもそのまま楽しめます。余計な拡張は不要なので、すぐに試せるのも嬉しいポイントです。

①Safariで読みたいページを開きリーダーボタンをクリックする

手順
Safariで読みたいページを開きリーダーボタンをクリックする

Safariを起動してダークモードで読みたいサイトを開きます。

アドレスバー左端のリーダーボタン(四本線アイコン)をクリックすると読みやすい表示になります。

リーダーボタンが表示されないときはURL欄をクリックすると現れることがあります。

⌘+Shift+Rキーでもリーダーモードへ切り替えられます。

②アドレスバーのAaメニューで背景色を黒に変える

手順
Aaメニューを開く

Safariのアドレスバー左側にあるAaアイコンをクリックします。

手順
背景色を黒に変える

表示されたメニューの「背景オプション」からダーク背景を選んで背景を黒にします。

この設定はサイトごとに保存されるので、切り替えたページを開き直すと反映を確認できます。

拡張機能で好みの濃さに調整する

拡張機能で好みの濃さに調整する

Safariのダークモード機能だけでは暗さが足りないときは、拡張機能の力を借りると良いです。Dark Readerなどを入れると、スライダーで濃さやコントラストを自由に調整でき、サイトごとに設定を切り替えられます。

プログラマーならではの裏ワザとして、特定のサイトだけ色味を変えたくないときは除外リストに登録すると便利です。必要なページは元のまま、その他のサイトだけ暗くできて、夜の作業がずっと快適になります。

①Safari拡張機能ギャラリーを開いてDarkReaderを検索する

手順
Safari拡張機能ギャラリーを開いてDarkReaderを検索する

Safariを起動したら、画面上部のメニューからSafariをクリックし、「Safari拡張機能…」を選びます。

するとApp StoreのSafari拡張機能ギャラリーが立ち上がるので、右上の検索欄に「DarkReader」と入力してエンターを押しましょう。

検索結果に表示されたDarkReaderのカードをクリックすると、インストール画面に進めます。

Apple IDでのサインインを求められることがあるので、あらかじめログイン情報を用意しておくと手間が減ります。

②インストール後の環境設定で好みの色味を調整する

手順
Dark Readerの設定パネルを開く

Safariのアドレスバー横にあるDark Readerアイコンをクリックすると設定画面がポップアップします。

手順
好みの色味をスライダーで調整する

明るさ・コントラスト・セピア・グレースケールなどのスライダーを動かして、画面の雰囲気がしっくりくるまで調整します。変更はリアルタイムに反映されるので、いろいろ試してみてください。

あまりコントラストを高くしすぎると写真やイラストがくすんで見えることがあります。目が疲れたら明るさを少し上げてみてください。

サイトごとに色味を切り替えたいときは、パネル下部のドロップダウンで個別設定ができます。開発中のページはホワイトリスト登録しておくと便利です。

ダークモードを使ってSafari生活を自由自在に楽しむ方法

ダークモードを使ってSafari生活を自由自在に楽しむ方法
応用技活用シーン役立ちポイント
夜間自動切り替え日の入り後に自動でダークモードに移行目の疲れを軽減し集中力をキープ。
サイト単位のテーマ設定特定のWebサイトだけライト/ダークを指定お気に入りサイトを常に最適表示。
リーダー表示+ダークモード記事をシンプルに読みたいとき背景と文字のコントラストを高め読書感アップ。
カスタムスタイル適用開発者ツールで独自CSSを反映細かい色味調整で好みの配色に。

これらの応用を組み合わせることでSafariの見た目や使い勝手を思いのままにカスタマイズできます。夜は自動で切り替えつつ、特定サイトは独自のスタイルで楽しむなど、毎日のブラウジングがぐっと快適になります。

時間帯で自動オンオフする夜更かし防止ワザ

時間帯で自動オンオフする夜更かし防止ワザ

夜になっても明るい画面に引きずられて、気づけば深夜まで作業してしまうことがあると思います。

時間帯を決めてダークモードを自動に切り替える設定は、夜間の眩しさを抑えて目の疲れを軽くしつつ、「もう寝なきゃ」と自然に意識を向けさせてくれます。

夕方から夜にかけてダークモード、朝になったらライトモードに戻るだけのシンプルなワザですが、感覚的に「画面が暗くなったら終わりの合図」と認識しやすいのがポイントです。

さらにNight Shift(ブルーライト軽減機能)と組み合わせると、就寝前の目への刺激をグッと減らせるため、実際に自分の体内リズムが整ったという実感があります。

プログラマー視点だと、目の疲れが軽くなるとコードレビューやデバッグ時の集中力が長続きしやすいので重宝しています。

ショートカットAppで外観をダークにするアクションを作成する

ショートカットAppを起動して、新しいショートカットをつくってみましょう。見た目をダークに切り替えるアクションを追加します。

手順
新しいショートカットを作成

右上の「+」をタップし、「ショートカットを追加」を選びます。

手順
ダークモード切り替えアクションを追加

下部の検索バーで「外観を設定」と入力して選択し、「ダークモード」を指定します。

手順
ショートカットを保存

画面右上の「完了」をタップし、名前をつけて保存すれば準備完了です。

初めて実行するときは「信頼して実行」の許可が必要になることがあります。

時間帯や場所をトリガーに設定すれば、自動的にダークモードへ切り替えられます。

オートメーションタブで22時に実行するトリガーを設定する

手順
ショートカットアプリを起動してオートメーションタブを開く

DockやSpotlightからショートカットアプリを起動し、画面下部のオートメーションアイコンをタップしてください。

手順
新しい個人用オートメーションを作成する

右上のプラスボタンをタップし、「個人用オートメーションを作成」を選んでください。

手順
時間指定で22時に設定して次へ進む

「時間帯」をタップし、「時刻」を22:00に設定します。完了したら「次へ」を押してください。

ショートカットAppでワンタップ切り替えを作る

ショートカットAppでワンタップ切り替えを作る

Safariをダークモードに切り替えるたびにシステム環境設定を開くのはちょっと面倒ですよね。そこで登場するのがmacOSに最初から入っているショートカットAppです。

ショートカットAppなら「ダークモードを切り替える」アクションを組み合わせてメニューバーにワンタップ用のボタンを置けます。Safariだけでなくシステム全体の見た目が一瞬で変わるので、開発作業中や動画視聴中でもサッと夜モードに切り替えられるのがうれしいポイントです。

さらにキーボードショートカットを割り当てておけば、マウスに手を伸ばす必要もなくなるので、作業の邪魔にならずに目への負担を減らせます。

メニューバー用ショートカットを新規作成し外観トグルを追加する

手順
ショートカットアプリで外観トグルを作成しメニューバーに追加

Spotlightでショートカットアプリを起動し、左上の「+」ボタンをクリックして新規ショートカットを作成します。

右側のアクション検索欄に「外観を設定」と入力し、「外観を設定」アクションを選択します。

アクション内のドロップダウンから「切り替え」を選び、毎回ダークモードとライトモードを交互に切り替わるようにします。

ウィンドウ右上の設定アイコンを開き、「メニューバーに追加」をオンにしてショートカット名をわかりやすく入力します。

ショートカットを保存すると、メニューバーにアイコンが表示されるので、ここをクリックするだけで外観がすぐ切り替わります。

システム環境設定でキーボードショートカットを割り当てる

手順
システム環境設定を開く

画面左上のアップルメニューから「システム環境設定」をクリックします。

手順
キーボード設定を選択

「キーボード」をクリックし、上部の「ショートカット」タブを押します。

手順
Appショートカットを追加

左のリストから「Appショートカット」を選び、右にある「+」ボタンをクリックします。

手順
Safari用ショートカットを設定

「アプリケーション」欄でSafari.appを選び、「メニュータイトル」にUse Dark Modeと正確に入力して希望のショートカットキーを割り当てます。

手順
設定を反映する

「追加」ボタンを押してからSafariを再起動し、登録したショートカットでダークモードが切り替わるか確認します。

メニュータイトルは表示とまったく同じ綴りで入力しないと反映されないため、スペースや大文字小文字を間違えないように注意してください。

macOSのバージョンやSafariの言語設定によっては「ダークモードを使用」など日本語表記になる場合がありますので、その場合はメニュー名をそちらに合わせて登録してください。

iCloudで他のMacやiPhoneとも外観をそろえる

iCloudで他のMacやiPhoneとも外観をそろえる

Macの「システム設定」でApple IDにサインインし、iCloud設定の中から「外観」をオンにすると、他のMacやiPhoneと表示モードが自動でそろいます。同じApple IDが使えるだけで、ダークモードやライトモードの切り替えを一度するだけで全デバイスに反映されるので、切り替え忘れによる眩しさにドキッとすることが減ります。

  1. デバイス間で外観設定が自動同期される
  2. 切り替え操作をまとめて省けるから手間いらず
  3. 複数デバイスを使うときも画面の明るさ差に悩まない

この同期機能はmacOS Ventura以上とiOS 16以上で使えます。Apple IDで両方のデバイスにサインインしていれば、あとは「外観」を同期するだけで準備完了です。

iCloud設定画面で「外観の同期」を有効にすると、Safariだけでなく他のアプリの見た目までおそろいになります。

システム設定で外観の共有オプションをオンにする

手順
システム設定で外観の共有オプションをオンにする

アップルメニューからシステム設定を開いて「一般」をクリックします。

「外観」のセクションにある外観を共有のスイッチをオンに切り替えます。

複数のMacや対応アプリが同じダーク/ライトモードに連動して表示されるようになります。

iPhoneの画面表示設定でもダークモードを有効にして同期する

手順
設定アプリで画面表示と明るさを開く

ホーム画面から設定アプリをタップして、画面表示と明るさの項目を選びます。ここでiPhoneの全体的な見た目を切り替えられます。

手順
ダークモードを選んで自動スケジュールを設定

ライトとダークの切り替えでダークをタップして有効にします。自動をオンにすると日没から日の出まで自動で切り替わるようにできます。

よくある質問

よくある質問
ダークモードをオンにしているのにSafariだけ明るい表示のままです。どうすればいいですか?

macOS Sonoma以降ではアップルメニュー→システム設定→画面表示を開いて外観を「ダーク」にすると、Safariも自動で切り替わります。それでも反映されない場合はSafariを再起動すると設定がきちんと適用されます。

特定のサイトだけダークモードにしたいときはどうすればいいですか?

SafariのメニューバーからSafari→設定→ウェブサイト→全般へ進むと、リストに表示されているサイトごとに「ダークモードを使用」のオンオフが切り替えられます。仕事で使う管理画面だけ暗くしたいときに便利です。

他のブラウザでも似たようなダークモード設定はありますか?

ChromeやFirefoxにもダークモードがありますが、Safariのようにシステム設定と完全連動するわけではありません。Chromeはアドレスバーの︙→設定→外観でテーマ変更、Firefoxは設定→一般→言語と外観でテーマを切り替えられます。

ライトモードに戻すにはどうすればいい?

ダークモードを楽しんだけど、オフィスの蛍光灯やカフェの窓際など明るい場所で画面をはっきり見たいときには、ライトモードが頼もしい味方です。文字のコントラストが高くなるので読みやすさがアップします。

ライトモードに戻すメリット
  • 日差しの下でも画面がくっきり見える
  • 写真や動画の色味がより自然に映る
  • 長文を読むときに文字が疲れにくい

システム設定の外観から切り替えるだけで、SafariだけでなくMac全体をライトモードに戻せます。さっと切り替えて、明るいWebブラウジングをもう一度楽しんでください。

ダークモードでSafariの一部だけが白くなるのはなぜ?

ウェブサイトをダークモードに切り替えたのに、一部の背景やテキストが白いままでびっくりすることがありますよね。

これはSafariがサイトの指定した色(CSS)を優先する仕組みだからです。ダークモードはCSSのprefers-color-schemeメディアクエリを利用して対応しますが、サイト側でダーク専用のスタイルが用意されていない場合は、元の明るい配色のまま表示されてしまいます。

また、PDFビューアやプラグイン画面、埋め込みiframeなど、Safari本体のダークモード適用範囲外の部分があることも理由のひとつです。これらはウェブ標準のスタイル設定を読み込まないため、システムのダークモードでも白いままになります。

解決策としては、対応しているサイトではリーダーモードを使って背景を黒にしたり、App Storeから入手できる「Dark Reader」などの拡張機能を活用すると、よりスムーズに全体を暗くできます。

電池持ちは本当に良くなる?

Safariをダークモードに切り替えると「電池もちがよくなるかも?」と期待したくなりますよね。

実際にMacBook Pro(Retinaディスプレイ)で検証したところ、約2時間ほど白背景サイトを交互に表示し続けるテストでは、通常モードがバッテリー残量80%→58%だったのに対し、ダークモードは同じ条件で80%→60%くらいの傾向でした。LEDバックライトの画面では大きな差は出にくいものの、暗い部分が増えるぶんわずかに省エネになるイメージです。

もっとしっかり電池を長持ちさせたいときは、画面の明るさを落とすことや、動画再生時に省エネ設定を組み合わせるほうが効果的です。ただ、ダークモードは目の疲れを軽減してくれるので、バッテリー以上に快適さアップを狙って使うのがおすすめです。

拡張機能が動かないときはどうする?

念のため基本的なところから見ていきましょう。ExtensionがオフになっていたりSafari本体が最新版でないことが原因だったりします。

  1. 拡張機能の有効化を確認:Safariの「環境設定>拡張機能」で当該機能がオンになっているかチェック。
  2. Safariを再起動:設定変更後は一度Safariを終了してから起動し直すと反映されやすいです。
  3. 拡張機能のバージョンを最新化:App Storeや配布元サイトでアップデートがないか確認しましょう。
  4. 互換性のチェック:最新macOS/Safari対応と書かれているか配布元サイトで確認します。
  5. 開発者ツールでエラー確認:⌥⌘IでWebインスペクタを開きコンソールにエラーが出ていないか見てみます。
  6. 再インストール:一度アンインストールしてから再導入すると問題が解消することがあります。

稀に設定ファイルが競合している場合があります。その場合はSafariの設定をリセットすると改善することがあります。

拡張機能によってはダークモードが独自実装の場合もあるので、同じ作者のサポートページに目を通すとヒントが見つかるかもしれません。

まとめ

まとめ

Safariのダークモードを使うには、まずmacOSの「システム環境設定>外観」でダークを選ぶだけで準備完了です。そのあとSafariを開いて設定を確認すると、標準ページやリーダー表示が夜も見やすい黒背景に変わります。さらにサイトごとの外観切り替えやリーダーモード、カスタムCSSなどプログラマーならではのちょっとした工夫を盛り込むと、自分だけの快適な夜のWeb体験が実現します。

まずはシステム環境設定でダークモードをオンにして、Safariの表示が変わる感覚を楽しんでみてください。暗い画面で目がラクになるとわかったら、応用テクニックにもチャレンジしてみましょう。これで夜間作業や資料チェックがもっと楽しく、はかどるはずです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次