【小技】パソコンの画面がまぶしいッ!それならダークテーマ(ダークモード)を使ってみよう

世の中のアプリケーションやウェブサイトの多くは、白の背景に黒い文字という配色が基本になっていますよね。
白い背景の画面を長時間見ていて、まぶしい、目が疲れる、と感じたことはありませんか。

そんな時は、ダークテーマ(ダークモード)を使ってみましょう。

ダークテーマを使ってみよう

[オススメ]
ECナビ

[PR]

ダークテーマ(ダークモード)とは、黒や暗いグレーの背景に、白や明るいグレーの文字という配色になった表示スタイルのことです。

私自身、ウェブサイトやよく使うアプリケーションは、できるだけダークテーマを適用しています(このブログはダークではないですけれど…)。
眼精疲労予防の効果は、医学的には確証はないようですが、単純にね、画面がまぶしいんです。

まぶしいなら、ディスプレイの明るさを下げればいいという意見もありますが、私は、ダークテーマの適用と合わせて、ディスプレイの明るさも落としています。
ディスプレイの明るさだけで調節しようとすると、画面が暗くなりすぎてしまうんです(飽くまで、私個人の意見です)。

ダークテーマは、ウェブサイトやアプリケーションの設定に、そのような項目が用意されている場合もありますが、多くはありません。
でも、そこは、ツールの助けを借りたり、工夫で解決できる部分もあります。

この記事では、Windows、マイクロソフト・オフィス、ブラウザ(ウェブサイト)、3つのダークテーマについてご紹介します。

Windowsのダークテーマ

※以下の手順は、Windows 10で確認したものです、他のバージョンでは手順が異なる、あるいは、設定自体が存在しない可能性もありますので、ご了承下さい。

設定 > 個人用設定 > 色と進むと、「色を選択する」という項目があります。

色を選択する

ここを変更すると、タスクバーやウィンドウのタイトルバー、エクスプローラーなど一部アプリケーションの背景をダークテーマにできます。
下の画像は、白を選択した場合と、黒を選択した場合の比較です。

エクスプローラー

これだと、複数のウィンドウを開いた時に、どのウィンドウがアクティヴなのか判別しづらいですね。

同じく、設定 > 個人用設定 > 色と進んで、最下部にある「タイトルバーとウィンドウの境界線」にチェックを入れると、タイトルバーに着色できます。
その上にある「Windowsの色」で任意の色を設定することもできますし、「背景から自動的にアクセントカラーを選ぶ」を有効にしてもOKです。

マイクロソフト・オフィスのダークテーマ

Windowsをダークテーマにすれば、当然、オフィスもダークテーマになるはず、なんたって同じマイクロソフト製なんだし、と思うかもしれません。
でも、前項のWindowsの設定は、オフィスには影響がないんです。

※以下の手順は、マイクロソフト・オフィス 2016にて確認したものです、他のバージョンでは手順が異なる、あるいは、設定自体が存在しない可能性もありますので、ご了承下さい。

オフィス製品(エクセルでもワードでも構いません)を開いて、ファイル > アカウントと進むと、「Officeテーマ」という項目があります。

オフィステーマ

ここを変更すると、タイトルバーやリボン、スクロールバーなど、ページ以外の部分をダークテーマにできます。
下の画像は、左から順に、カラフル、濃い灰色、黒、白を選択した場合の比較です。

カラフル・濃い灰色・黒・白

ページ以外の部分?
まぶしいのは白背景のページ部分なのに、そこはダークテーマにならないの?

もちろん、指定した色で背景を塗りつぶして、ダークテーマっぽくすることはできます。
でも、設定として、ページをダークテーマにする項目はないんです。
ページ部分は、アプリケーション本体とは別な独立したファイルですから、当然かもしれませんけどね。

ここからが工夫のしどころです。

ワードをダークテーマっぽく

デザイン > ページの色で簡単に背景色を変更できるので、白背景のまぶしさを軽減するという目的は、これで達することができます。

ページの色

ただし、見やすさという点では十分とは言えません。
ページの色に、黒やブルーグレーといった深い色を選んだ場合、フォントの色は自動で黒から白になって、白背景に戻すとまた自動で黒になるのですが、罫線は対象外なんです。

ダークグレー

自分で罫線の色を変更することはできますが、めんどくさいですよね。
例えば、提出用のファイルを作成するような場合、罫線の色を変更すると、最後に元に戻さないといけません。

現実的な手段としては、ページの色は、罫線が視認できるように明るいグレーくらいにとどめておいて、多少まぶしさを軽減するといったところでしょうか。

ライトグレー

エクセルをダークテーマっぽく

ワードのページの色のような項目はないので、同じようなことをしようとすると、シート全体のセルを塗りつぶすという方法を取ることになります。
でも、これには2つの問題点があります。

  1. 枠線(罫線のことではない)まで塗りつぶしてしまう
  2. ワードのようなフォントカラーの自動切りかえはない

枠線の代用として罫線を引くという方法は考えられますが、最後にファイルを完成させる際に、セルの色を戻して、フォントの色を戻して、罫線を消して、なおかつ、枠線の代用ではなく必要な罫線があるなら、その対応もしなければいけません。
これでは実用的ではないですね。

セルを塗りつぶすのではなく、背景に画像を挿入するという方法があります。
塗りつぶしとは違って枠線には影響しませんし、単色でベタ塗りにした画像を挿入すれば、背景を単色無地にすることができます。

フォントや罫線の見やすさというネックはありますが、消す罫線・残す罫線という問題はないので、ワードのなんちゃってダークテーマと同程度には、使えるレベルではないでしょうか。

背景

ページレイアウト > 背景で画像を挿入できます。

背景の削除

挿入した画像を削除する時は、背景の削除をクリックするだけでOKです。

ブラウザ(ウェブサイト)のダークテーマ

タブバーやメニューバーなど、ブラウザの各部については、Windowsの「色を選択する」でダークテーマになるはずですが、表示されるウェブサイトについては、それだけではダークテーマにはなりません。
前項のオフィステーマの変更で、ページ部分がダークテーマにならないのと同じです。

例えば、ツイッターやユーチューブのように、サイト側にダークテーマの設定項目が用意されている場合もあります。
でも、こういったサイトは、ごく一部です。

ツイッター

ユーチューブ

ダークテーマが用意されていないサイトでも、ダークテーマで表示できるようにするブラウザの拡張機能があります。
「Dark Reader」という拡張機能が有名どころで、Chrome/Edge/Firefox/Safariに対応しています。

コチラからダウンロードいただけます → Dark Reader

リンク先のサイトは日本語非対応ですが、拡張機能自体は日本語に対応しています。

注意点としては、ツイッターやユーチューブのように、サイト側が用意しているダークテーマではない=純正のダークテーマではないので、部分的にうまく表示できない場合がある、ということです。
また、仕組み上、サイトによっては表示速度がやや遅くなることもあります。

HTML/CSSの知識をお持ちの方なら、Dark Readerの「開発者ツール」を使って、表示に不具合のある部分を要素レベルでスタイル指定することができます。

知識をお持ちでない方でも、ドメイン単位でDark Readerのオン/オフを切りかえたり、一時的に無効化することもできます。
うまく表示できない部分があるサイトや、表示速度の気になるサイトがあれば、そのサイトではDark Readerが動作しないようにしましょう。

Dark Reader
(画像はChrome版です)

  1. Dark Readerのアイコンをクリックすると、メニューが開きます
  2. クリックすると、ドメイン単位でオン/オフの切りかえができます
  3. オフをクリックすると一時的にDark Readerを無効化、オンをクリックすると有効化されます
  4. 黒を基調とした「ダーク」と、ライトグレーを基調とした「ライト」の切りかえができます

無効・ライト・ダーク

左から順に、Dark Readerをオフにした場合、ライト、ダークの比較です。
一例として、ヤフーの検索結果で比較しています。



Windows、マイクロソフト・オフィス、ブラウザと駆け足で紹介しましたが、その他にもダークテーマに対応したソフトはあります。
私自身、画像編集ソフトはダークテーマを適用、テキスト・エディタは元々から黒が基調のソフトを使っています。

たまに、ダークテーマの使えないアプリケーションやサイトで作業をすると、パソコンってこんなにまぶしかったっけーと、ビックリするくらいの違いを感じますよ。
上記のダークテーマをお試しになって、もしも、気に入ったら、よくお使いになるソフトがダークテーマに対応していないか、チェックしてみて下さい。


[特集]
GetMoney!

[特集]
ECナビ

関連キーワード

■雑記の最新記事

コメント

コメントを書く

※ コメント以外は空欄でもご投稿いただけますが、できるだけお名前のご入力をお願いします。

ポイントタウン
ちょびリッチ
JFX
ECナビ
[PR]