最新コラム
-
-
-
Webサイト制作
【2023年版】国内・海外のおすすめVPS10選
-
Webサイト制作
初心者でも5分で分かる!SSL/TLSとは何か?
-
SEO外部対策SEO対策
Googleが推奨するnofollowの正しい使い方とは?
ios13の新機能として搭載され、今大注目のダークモード。yahooニュースやInstagramなど有名なアプリは続々とダークモードに対応していますが、今後はWebサイトもダークモードの対応を求められるでしょう。今回はWebサイトをダークモードに対応させる方法と、デザインを考案する時に注意すべきポイントをご紹介します。
目次
「ダークモード」とは、モニターに表示される背景色やメインカラーを黒基調にし、反対にテキストやアイコンなどを白基調の明るい色にしたデザインに変更する機能を指しています。株式やFXなどのチャート画面、建築や土木のCAD画面といった方がイメージしやすいかもしれません。
このダークモードはスマホユーザーに欠かせない各種SNSをはじめ、YouTubeなど人気アプリなどで次々と導入されており、徐々にWebサイトにも実装されつつあります。
ちなみに、一般的にはダークモードという名称が広く浸透していますが、ダークテーマやナイトモード、ナイトテーマ、ハイコントラストなどとOSをはじめブラウザや機種によって異なる名称が使われています。
なぜダークモードはこれほど急速に普及しているのか、その理由はライフスタイルの変化や実利的なメリットに関係しているようです。
確かに寝る前お布団の中でスマホを見ていても、ダークモードにしてからは眼への負担が減ったような気がします…!
実はYouTubeではかなり以前から導入されていたダークモードなのですが、ここでは、2019年に発表されたダークモードに関する大きなニュースを時系列でピックアップしてみました。
表にすると2019年はダークモード旋風と言っても過言ではないぐらい、各種OSをはじめSNSやアプリで続々とダークモードの導入されていることがわかります!
2019年3月11日 | Slack(iOS/Androidアプリ)で設定が可能に |
---|---|
2019年3月12日 | Google Chrome 73(macOS)で設定が可能に |
2019年3月28日 | Twitter(iOS)で「ダークブルー」と「ブラック」を追加 |
2019年4月15日 | Facebook Messengerで設定が可能に |
2019年10月~ | Twitter(Android)で濃い紺色」→「黒」へ変更 |
2019年10月~ | Instagram(iOS 13/Android 10)で設定が可能に |
2019年10月~ | LINE(Android 10)で設定が可能に |
定番アプリとして世代を問わず高い人気を誇っている「Yahoo!ニュース」もダークモードに対応しました。
「Yahoo!ニュース」がダークモードの導入に踏み切った理由として、ユーザーからのリクエストが多かったという理由があるようです。
メジャーなSNSが続々とダークモードへの対応を開始している中、Twitter上で「Yahooニュースもダークモードにして欲しい」というツイートが増え、従来からユーザーの声を重視していたYahooとしては、ダークモードの導入がユーザビリティの向上になると判断したのでしょう。
ここまで見てきたように、スマホアプリでは続々とダークモードが採用されているのですが、WEBサイトはまだほとんどが非対応です。
では、WEBサイトはどのようにダークモードに対応させれば良いのでしょうか。
実はダークモードはcssのメディアクエリprefers-color-schemeで簡単に実装出来てしまいます!
@media (prefers-color-scheme: dark){ /* ここにダークモード時のコードを記述*/ /* 例 */ .dark{ background-color: #1c1a1a; color: #faf8f7;; } }
@media (prefers-color-scheme: dark)にスタイルを書き、デバイス側でダークモードに設定をすれば、反映されます。
後述するデザインポイントを踏まえたデモページを作りました。
この記事をPCで読んでいただいてる方はQRコードを貼りますのでスマホをダークモードにした上でご確認ください
とはいえ、もともとダークモードを想定せず作っている既存サイトをダークモードに対応させるのは、けっこう大変ですね。
そのような時はcss変数を使えばコードも少しすっきりするかと思います!
@media (prefers-color-scheme: dark) { :root { --bg-base: #1c1a1a; --text-main: #faf8f7; --grayscale-percentage:30%; } .dark{ background-color: var(--bg-base); color: var(--text-main); } .dark-img img{ filter:grayscale(var(--grayscale-percentage)); }
上記のコードはWebサイトにダークモードを手軽に実装できる優れモノです。しかし、不具合なく反映させるには基本的にOSおよびブラウザのバージョンが対応していなければなりません。中にはOSやブラウザが対応外であっても問題なく読み込めるというケースもあるようですが、Can I useで確認しておきましょう。
ダークモードデザインはUI(User Interface)の側面において、すでにスタンダードになりつつあります。この段落では、ユーザーにとって快適で読みやすいという必須条件はもちろん、全体のバランスも考慮したダークモードをデザインするためのポイントについてご紹介しましょう。
ユーザーの目に優しいかどうかは、ダークモードをデザインするうえで欠かせない要素です。この点において特に重要な2点について取り上げてみました。
▼避けるべき理由
OLEDスクリーンでダークモードを利用するとバッテリーが節約できる反面、ピュアブラックを背景にしているとブラックスミアが発生しやすいという難点があります。OLEDスクリーンの場合、ピュアブラックのピクセルが常にオフになっていますので、ダークモードで見るにはオンに切り替えなければなりません。ところが、カラーを変更するよりもピクセルをオフからオンに切り替える作業に時間がかかるため、ブラックスミアが発生しやすいのです。
▼彩度を落とすべき理由
ちなみに、Googleのウェブデベロッパーアドボケートとして活躍しているトーマス・シュタイナー(Thomas Steiner)氏の調査によると、ダークモードの彩度に関して下記の結果が報告されています。
大多数の人(57.7%)はグレースケールフィルターを好み、40.9%の人はフィルターなし(つまり、色をそのままにする)を好み、ごく一部の人(1.5%)はグレースケールフィルターと反転フィルターの組み合わせを好みました。
多くのメリットが得られるダークモードですが、安易にデザインしてしまうと不自然な仕上がりに成り兼ねません。違和感のないダークモードをデザインするには、少なくとも下記の3点を押えておきましょう。
ダークモードは「遠いほど暗く、近いほど明るい」という原則によってユーザーに物理的な安心感を与えています。ここで問題となるのが、初心者にありがちなライトモードを反転させただけのダークモードです。Webサイトは背景と文字だけでなく、何枚ものレイヤーを重ねるように構築されていますので、採用しているカラーによっては手前より奥の方が明るくなって不自然に見えてしまいます。
対策としては、ライトモードのメインカラーだけを反転させる、複数のグレーカラーを組み合わせる手法などが効果的です。特にグレーは黒基調というダークモードの必須条件を満たしているうえ彩度やニュアンスによって種類が豊富なため、各種SNSでも多用されています。
ライトモード時にfontのcolorを不透明度(%)で指定している場合は注意が必要です。
例えば白背景に対して黒#000000が60%で設定されていたとします。
ブラックモードにした際は文字が白色になるかと思いますが、不透明度を継続して60%のままにしてしまうととコントラスト比が低く、文字が読みにくくなってしまいます。
この場合、60%を65%に変更しましょう。たった5%コントラストをプラスする事で、ライトテーマさながらの読みやすさを実現できます。
ダークモードでは、手前のコンテンツほど明るい色調にする必要があります。なぜなら、ユーザーの意識を背景の黒基調より手前の白基調の方に誘導する効果があるからです。
ここで問題となるのが、ライトモードで水色の背景に白地の枠を重ね、中に黒のテキストを採用しているケースです。この場合、背景の水色が明るい色の大きなブロックになります。
ところが、これをダークモードにすると水色の大きなブロックに黒地の枠が重なってしまい、背景より手前の方が暗くなってしまうのです。Webサイトは構造上、サイズが大きいブロックの上に小さいブロックを重ねて配置します。つまり、最もユーザーに見てもらいたい小さなブロックを一番明るい色にするには、奥にある大きなブロックの色調を最も暗くするべきなのです。
いかがでしたか?ダークモードについての簡単な説明と、WEBサイトへの実装方法、ダークモードをデザインする上でのポイントをまとめました。
スマホユーザーが増え、従来のPCデザインをスマホに対応させる”レスポンシブ化”に追われたあの頃のように、今度はダークモード対応を求められるようになるかと思います。
cssのメディアクエリ「prefers-color-scheme」を使えば、技術的には簡単にダークモードを実装できます。
しかし、ライトモードベースで作っている既存サイトをダークモードデザインに対応させるには、配色の再設計を始め、細かい調整が必要となり、簡単ではないと思います。せっかくダークモードに対応させても、違和感が生じたり読みにくいサイトになってしまっては本末転倒です。
ますます増えていくであろうダークモード化に置いてかれないよう、サイト制作において追求していければと思います。