Chromeを完全にダークモード化する基本的な方法とツール3選【集中力アップ】

PC,モバイル

アプリ開発者だけでなく一般のウエブ閲覧者でもブラウザのダークモードを好んで利用している方が多いようです。ダークモードは見やすく目が疲れにくくなるだけでなく、PCのバッテリー消費量が減るからです。特に動画は見やすくなりますね。私自信ブログを何年も書いておりますが、実際にダークモードは集中力が上がります。この度GoogleはChromeをWindows10のダークモードに対応させました。少し前にはChromeをダークモードにできる公式テーマ(スキン)もリリースしています。この記事ではChromeをダークモードにする方法をまとめます。便利な拡張機能も紹介しますよ。

[1]【基本】Windows10のダークモードを利用する方法

Windows10には、アプリをシステム的にダークモード化する機能を備えています。

これを利用するなら、上の画像のように、「タブ」「アドレスバー」「ホームボタン」「ブックマークバー」だけでなく、右クリックした時に表示される「コンテキストメニュー」の背景に至るまで、徹底的にダークモード化できます。

設定は簡単です。

  1. 「スタートボタン」を右クリック
  2. 「設定」
  3. 「個人設定」
  4. 「色」
  5. 「黒」に✔を入れる

以上の手順で、Windows10のシステムでアプリの色を「黒」にすると、”あら不思議”、Chromeのアドレスバーからコンテキストメニューの背景に至るまで徹底的にダークモード化できました。

[2]【テーマの利用】Chromeの公式「Just Black」

次にChromeの公式テーマ「Just Black」を利用してChromeをダークモードにする方法です。

「Just Black」は2019年3月にリリースされた14色のテーマの一つです。いわゆるネイティブテーマです。公開してから一ヶ月も経たないうちに100万回ダウンロードされているという人気ぶりです。

Chrome ウェブストア「テーマ」

上記のChromeウエブストア・ページから「Just Black」を選択するだけてChromeをダークモードにできます。

稚拙のブログであはりますが、こんな感じで表示されます。

しかしこのテーマだけでは、完全にChromeをダークモードにできません。確かに、「アドレスバー」や「拡張機能ボタン」「ブックマークバー」の背景は黒にできますが、Windowsのシステムに依存する「コンテキストメニュー」の背景まではダークモードにできません。

ですからChromeを徹底的にダークモードにするためには、上のWindowsのシステムの色を「黒」にしたほうが良いです。

Chrome開発チームが愛を込めて作成した公式テーマだけありますね。

■ Youtubeが見やすい!

YoutubeをWindows10 PCで視聴する場合、ダークモード化したChromeで表示すると以下のような感じになります。

「見やすい!」ですね。

もともとYoutubeは動画に集中できるように映画館のように背景をブラックにしています。(ピンクで囲っている部分)つまり元来ダークモードなわけです。ChromeをダークモードにすることによってChromeが動画専用アプリに生まれ変わったようです。最高です。

[3]【拡張機能】「Dark Reader」でWebページの背景までダークモードに!

上記のChrome公式ダークモード・テーマがリリースされる前は、主にChrome拡張機能でダークモードを実現していました。以下の2つの拡張機能は上記のChrome公式ダークモード・テーマと併用することでChromeを好みのダークモードに仕上げます。

Dark Reader – Chrome ウェブストア

まず有名なのは「Dark Reader」というChrome拡張機能です。ChromeだけでなくFirefox版やSafari版もあります。

「Dark Reader」は上で紹介したChrome公式テーマと違い、Webページの背景の色までカスタマイズ可能なため、徹底的にChromeをダークモードにできます。好みがあると思いますが、Webページのテキストや画像を見やすく(?)できます。

この拡張機能はツールバーやメニュー部分はダークモードにできませんので、記事前半で紹介したWinシステムやChrome公式ダークモード・テーマと併用すると完全ダークモードを実現できます。

またこの拡張機能のオプションで、「輝度」「コントラスト」「セピア」を調整できますし、表示するサイトごとにきめ細かく調整可能です。完成度が非常に高いダークモード拡張機能です。

[4]【拡張機能】ワンクリックで白黒を変えられる「Dark Mode for Chrome」

Dark Mode for Chrome – Chrome ウェブストア

最後に紹介するこの拡張機能はChromeで表示したWebページを拡張ボタンをワンクリックすることで簡単にダークモードに切り替えられます。

目の疲れ具合に応じて、また表示しているサイトの色使いによって、背景をダークモードにしたり戻したりすることが非常に容易です。

【おまけ】ディベロッパーツールをダークモードにする方法

Chromeでウェブデザインをしているエンジニアには常識かもしれませんが、最後にChromeディベロッパーツールをダークモードにする方法を紹介ます。

Chromeブラウザの開発モード(以下は「検証」ツール)を利用している方は、Chromeのダークモードを利用することで集中力が高まり、眼球が疲れにくくなると思います。

Chromeのデベロッパーツールをダークモードにする方法は以下の通りです。

1.設定(︙)から「Settings」へ。

2.Appearance>Theme のプルダウンメニューで「Light」から「Dark」を選択。

まとめ

PCをダークモード中心で利用している方は、上記で紹介した3つのダークモードツールで事足りると思います。まとめると

  1. Windows10のシステムを利用してChromeをダークモードにする。
  2. Chrome公式テーマ「Just Black」でメニューやツールバー/ブックマークバーをダークモード化する。
  3. 輝度やコントラストをサイトごとに細かく調整したいなら拡張機能 Dark Reader を利用する。
  4. Webページの[ダークモード⇔通常表示]を簡単に切り替えたいないなら、拡張機能 Dark Mode を利用。

また紹介した通り、ディベロッパーツールだけをダークモードにしたいなら、拡張機能やテーマは不要です。

コメント