ダークモードって目に優しいの？デザインの視点から考えてみた

こんにちは。MaromaroのChieです。

スマホやパソコンの画面、みなさんは「ライトモード」と「ダークモード」のどちらを使っていますか？

「なんとなく目に優しそうだから」
「黒い画面のほうがかっこいいから」
「白い背景のほうが文字を読みやすいから」

など、選ぶ理由はいろいろあるかと思います。

でも、そもそもダークモードって、本当に目に優しいのでしょうか？
画面が暗くなると、目への負担も減りそうな気がしますが、実際のところが気になります。
子どもがスマホを使うようになってからはますます気になるところ。

そこで今回は、ダークモードの「まぶしさ」と「文字の読みやすさ」について調べながら、デザインの視点でも考えてみたいと思います！

ダークモードってどんなもの？

ダークモードは、画面の背景やメニューなどを暗い配色にする表示設定です。
明るい背景に暗い文字を組み合わせるライトモードに対して、ダークモードは暗い背景に明るい文字を組み合わせるのが基本となります。Appleでは、暗い環境での閲覧に配慮した表示として紹介されています。

参考：Apple Developer

名前に「ダーク」とついていますが、背景が必ず真っ黒というわけではありません。
濃いグレーなどを使い、文字やボタンとの組み合わせを考えてつくられているようです。

ダークモードなら目が疲れにくい？

ここで気になるのが、「画面が暗い＝目に優しいの？」というところ。

調べてみると、「まぶしく感じにくいこと」と「文字が読みやすいこと」は、分けて考えたほうがよさそうです。

暗い場所では、画面のまぶしさが気になることも

暗い部屋でスマホを開いた瞬間、「まぶしい！」と感じたことはありませんか？

暗い部屋で画面が明るすぎることは、目の疲れにつながる場合があるそうです。ダークモードは、こうした周囲と画面の明るさの差を小さくするための選択肢になります。

ただ、背景を暗くしたら、それだけで安心というわけではありません。
画面の明るさも、周囲の明るさに合わせて調整することが勧められています。モードを切り替えるだけでなく、明るさの設定も一緒に確認しておきたいですね！

文字の読みやすさは、また別のお話

一方、文字を読む場合には、明るい背景のほうがよい結果になった研究もあるようです。

2013年に発表された研究では、若い人・高齢の人の両方で、暗い背景に明るい文字を表示するよりも、明るい背景に暗い文字を表示したほうが、視力検査や文章の誤りを見つける課題でよい成績が得られたそうです。ただし、これは特定の条件での見やすさや作業成績を調べたもので、目の病気を防ぐ効果を調べたものではありません。

「まぶしくないから読みやすい」とは、必ずしも言えないようです。

ダークモードかライトモードか、という二択だけではなく、何を見ているのか、どんな環境で使っているのかも考えたいところです。

白と黒をひっくり返せばOK……ではない！

ここからは、少しデザインのことも。

ダークモードと聞くと、「背景の白を黒にして、文字の黒を白にすればよいのでは？」と思うかもしれません。

ですが、Appleのデザインガイドラインでも、ライトモードとダークモードの色は、単純な反転とは限らないと説明されています。どちらの表示でも読みやすいか?を確認することが大切なんですね。

参考：Apple Developer

同じダーク系でも、色の組み合わせはいろいろ

例えば、背景と文字にはこんな組み合わせが考えられます。

同じ文章で比べるなら、文字の大きさや太さ、行間はそろえて、色だけを変えてみたいところです。

「文字を追いやすいのはどれだろう？」
「小さな文字や数字まで、無理なく読めるかな？」

見た目の好みだけでなく、そんなところにも注目してみてください。

グレーにすれば読みやすくなる？

ここで、「真っ黒と真っ白より、グレーを使ったほうがよさそう！」と思うかもしれません。

ただし、文字と背景の色を近づけすぎるのも要注意です。
明暗の差が小さくなると、文字が見分けにくくなることがあります。Webのアクセシビリティに関する指針「WCAG※」でも、文字と背景には十分なコントラストを確保することが求められています。

※WCAG：障害のある人や高齢者を含むすべてのユーザーに向けてWebコンテンツをより利用しやすくするための国際的なガイドライン
参考：W3C

コントラストというと少し難しく聞こえますが、ここでは「文字と背景の明暗の差」と考えるとわかりやすいと思います。

落ち着いた雰囲気にしたくても、肝心の文字が読みにくくなってしまっては困ります。

デザインを考えるときは、大きな見出しだけでなく、小さな補足文やボタンの文字まで確認しておきたいところ。
「黒くする」「色を薄くする」だけではなく、必要な情報がきちんと読める組み合わせを考えることが大切です。
コントラスト確保ができていないとNGがでる場合もあるので、デザインを行う場合は要注意です！

モードと一緒に、ここも見直してみよう！

普段のスマホやパソコンで試すなら、まずは同じ文章をライトモードとダークモードで読み比べてみるのもよいかもです。

「こちらのほうが落ち着くな」「こちらのほうが文字を追いやすいな」など、自分がどう感じるかを確認してみてください。

そして、モードと一緒に見直したいのが、次の3つです！

• 画面の明るさ
  周囲に対して画面が明るすぎないか、照明が映り込んでいないかを確認。

• 文字の大きさ
  小さな文字を無理に読まず、必要に応じて拡大。

• 画面を見る時間
  ときどき画面から目を離して遠くを見るなど、休憩を取りましょう。

ダークモードにしているからといって、ずっと画面を見続けてよいわけではないので、休憩も忘れずに！

まとめ

今回は、ダークモードの見やすさについて考えてみました。

「目に優しそう」というイメージだけで選ぶのではなく、まぶしさと文字の読みやすさを、それぞれ確かめてみたいですね。

デザインの面でも、背景を暗くすれば完成！というわけではなく、文字やボタンとの組み合わせを考える必要があります。
見た目をかっこよくすることと、使いやすくすること。どちらも大切にしたいところです。

いつも同じモードを使っている方は、もう一方の表示も試してみてはいかがでしょうか。
文字の大きさや画面の明るさも合わせて、自分にとって読みやすい設定を探してみてください！

ちなみに私はスマホもパソコンもダークモードを長く使っていますが、試しにライトモードにしてみたところ・・・
眩しくて続けられませんでしたTT
長年使った慣れというのもありますが、自分の目にはダークモードがあっているようです。

以上、MaromaroのChieでした。