ホームページとダークモード

近年流行りのダークモード。
普段からアプリの設定などでダークモードを適用している方もいるのではないでしょうか？
実はホームページもダークモードに対応させることができます。
ここではそんなダークモードについてと、GoogleChromeやsafariでダークモードに切り替えればいいかも紹介します。

ダークモードとは

ダークモードとは、画面の背景を黒くして、文字や画像を白く表示するデザインのことです。従来のライトモードでは、画面の背景が白く、文字や画像が黒く表示されますが、ダークモードでは、その色を反転させます。

画面の明るさが抑えられるため目が疲れにくくなったり、夜間や暗い場所で画面を閲覧する際には、周囲の人への配慮にもなります。
デバイスのバッテリーの消費量を減らすこともできます。

ダークモードは目に良いという意見もありますが、ダークモードが視力に影響を与えるかどうかは未だはっきりとわかっていません。

ダークモードを適応させるには？

・Google Chrome の場合

右上の歯車アイコンをクリックします。
[設定] をクリックします。
[外観] タブをクリックします。
[テーマ] ドロップダウンメニューから、[ダーク] を選択します。
[保存] をクリックします。

・safariの場合

iPhoneの「設定」アプリを開きます。
「画面表示と明るさ」をタップします。
「外観モード」をタップします。
「ダーク」を選択します。

現段階でsafariだけダークモードにするという機能はなく、デバイス本体のモードをダークモードに変えなければいけないので注意が必要です。

ダークモードに切り替えても、ホームページ自体がダークモードに対応していない場合は、通常の色で表示されます。

自身のホームページをダークモードに対応させるには

自身のホームページをダークモードに対応させるにはホームページがどのように作られたかによって、方法が変わってきます。

CMS（WordPressなど）を使わずに、HTMLとCSSで構成されている場合には、CSSにダークモード用のデザインを記述することで対応させることが出来ます。
ですがCSSに変更を加えることで、デザインが崩れてしまう場合もあるので、ホームページ制作会社に頼むのが1番ですが、もし自分で手を加える場合にはしっかりバックアップは取っておきましょう。

@media (prefers-color-scheme: dark) {
body {

background: #000;

color: #fff;
     }
 }

この (prefers-color-scheme: dark)の中に、ダークモードになっている際のCSSを記述すれば、簡単に適応させることが出来ます。

WordPressをお使いの場合はダークモードに対応しているプラグインやテーマを使うことで、対応させることはできますが、今のテーマのままダークモードにしたいといった場合は専門的な知識が必要になるので、ホームページの制作会社に依頼することをおすすめします。

ダークモードは目の疲れを軽減したり、バッテリーの消費量を減らす、夜間でも眩しさを抑えることが出来るので画面が見やすくなる、といったメリットもありますが、safariのようにアプリによってはダークモードに切り替える機能がなかったり、デザインや使用して色によっては逆に見づらく感じてしまうデメリットもあります。

自社のホームページのコンテンツやデザインにダークモードが合うかどうか、まず一度考えてみてくださいね。