21
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ダークモードは本当に読みやすいのか?コントラスト極性の研究から考える表示モードの設計

21
Last updated at Posted at 2026-05-18

みなさん、電子書籍を読む時どの背景色を使っていますか?

Kindleを使っていて気になったのですが、Kindleの背景色の設定には、白・黒だけでなく「セピア」や「グリーン」も用意されています。

Frame 1-1-2.png

私自身は、Kindleでは黒背景だと目が滑るような気がして、白背景を使うことが多いです。

一方で、SNSは黒背景(ダークモード)で使っています。

単なる好みなのか、もしくはコンテンツの種類や使い方によって、向き・不向きがあるのでしょうか。

こうした疑問から、ライトモードとダークモードは人間の視覚や認知にとって何が違うのか、いくつかの研究をもとに整理してみました。

※本記事は、個人的に調べた内容をもとに整理・考察しています。内容は筆者個人の見解です。

結論

今回は査読済みの論文を中心に調査しました。先に結論を整理しておきます。

  1. 文字を正確に認識する・校正するようなタスクでは、正のコントラスト極性(ライトモード)が有利な傾向がある
  2. 負のコントラスト極性(ダークモード)は、読解性能を上げるというより、環境適応や審美的な理由で選ばれやすい
  3. 表示モードを考えるうえでは、白・黒だけでなく色付き背景のような選択肢もある

つまり、表示モードは「ライトモードとダークモードのどちらが正しいか」ではなく、サービスやアプリで扱うコンテンツや使われる環境に応じて、どの表示モードを基本にし、どの選択肢を用意するかを考えるものだと言えそうです。

まずは、ライトモードとダークモードの違いから整理します。

ライトモードとダークモードは何が違うのか

研究では、ライトモードとダークモードの違いは「コントラスト極性(contrast polarity)」として扱われます。

  • 正のコントラスト極性:明るい背景に暗い文字
  • 負のコントラスト極性:暗い背景に明るい文字

一般的なライトモードは正のコントラスト極性、ダークモードは負のコントラスト極性に近い表示です。

この違いは、単なる見た目の好みだけでなく、文字の見え方や認知パフォーマンスにも影響します。

ここからは、コントラスト極性に関する研究をいくつか見ながら、ライトモードとダークモードの違いを整理していきます。

研究から分かること

1. 文字認識では正のコントラスト極性が有利

1. 文字認識では正のコントラスト極性が有利

Piepenbrockらの研究では、若年者と高齢者を対象に、正のコントラスト極性と負のコントラスト極性の表示で、視力測定と校正タスクのパフォーマンスを比較しています。

結果として、若年者・高齢者のどちらにおいても、正のコントラスト極性の方が高い成績を示しました。

特に校正タスクでは、文章中の誤りを見つける必要があり、ある程度の集中や認知処理を伴います。

そのような読み取りにおいても、正のコントラスト極性が有利だったということです。

この研究から、文字を正確に認識するタスクでは、ライトモードが有利になりやすいことが分かります。

2. 小さい文字ほど正のコントラスト極性の優位性が高まる

2. 小さい文字ほど正のコントラスト極性の優位性が高まる

さらに、文字サイズが小さくなるほど、正のコントラスト極性と負のコントラスト極性のパフォーマンス差が広がることも報告されています。

Piepenbrockらの別研究では、8pt・10pt・12pt・14ptの文字サイズで校正タスクを行い、文字サイズが小さいほど正のコントラスト極性の優位性が大きくなることが示されています。

これは、読書や学習のように、細かいテキストを長く読むコンテンツにおいては無視しづらいポイントです。

3. 「読みやすい」と「読めている」は一致しない

3.「読みやすい」と「読めている」は一致しない

複数の研究を見ていて興味深かったのは、パフォーマンスに差があっても、ユーザー自身がそれを自覚しているとは限らない点です。

先ほどの文字サイズに関する実験でも、校正タスクの成績にはコントラスト極性間で差が出ていた一方で、主観的な読みやすさの評価では大きな差が見られないケースがありました。

つまり、「読みやすい感覚」と「実際に速く・正確に読めている」は一致しないことがあるということです。

4. コントラスト極性の差は環境によって変わる

4.コントラスト極性の差は環境によって変わる

Dobresらの研究では、周囲の明るさ、文字サイズ、コントラスト極性を組み合わせて、短時間で文字を認識するタスクを比較しています。

これは校正タスクのように文章をじっくり読む実験ではなく、瞬間的に文字を読み取る状況を想定したものです。

結果として、暗い環境では、負のコントラスト極性の方が文字を正確に読むために必要な時間が長くなることが報告されています。

一方で、明るい環境では、コントラスト極性による大きな差は見られませんでした。

つまり、正と負のコントラスト極性の差は一定ではなく、周囲の明るさやタスクの種類によって変わると考えられます。

5. ダークモードは好まれるが、パフォーマンスとは別

5. ダークモードは好まれるが、パフォーマンスとは別

負のコントラスト極性には、読みやすさとは別の価値があります。

Sethi & Ziatの研究では、ダークモードの人気が感情的・審美的な魅力と関係している可能性が検討されています。

  • かっこいい
  • 落ち着く
  • 眩しくない

といった理由でダークモードが選ばれることがあります。

また、データビジュアライゼーションの比較タスクを対象にしたWhile & Sarvghadの研究でも、ユーザーが好むコントラスト極性と、実際に成績が良くなるコントラスト極性は必ずしも一致しないことが示されています。

つまり、ダークモードは「好きだから使う」価値はありますが、「好き=パフォーマンスが高い」とは限らないということです。

ダークモードが向いているコンテンツ

負のコントラスト極性は、認知パフォーマンスを高めるためというより、審美的な好みや、眩しさの軽減、コンテンツを引き立てる目的で適している場合があります。

たとえば、Spotifyは2014年のリデザインで、暗い背景を基調としたUIを採用しました。

Spotify画面
▲現在のSpotifyアプリの画面(2026年5月時点)

Fast Companyの記事では、SpotifyのMichelle Kadir氏が、カラフルな音楽やカバーアートは暗いUI上でより見えやすく、周囲の要素が邪魔になりにくいと説明しています。また、映画館のように周囲が暗くなることで、コンテンツ自体が体験の中心になるという考え方も紹介されています。

また、Amazon Prime VideoやNetflixなどの動画配信サービスを思い浮かべると、暗色の背景の印象が強い人も多いのではないでしょうか。

動画配信サービス画面
▲Amazon Prime Video(左)・Netflix(右)

背景色の理由をコントラスト極性だけで説明することはできませんが、画像・動画・アルバムアートのような視覚コンテンツが主役になる体験では、暗い背景がコンテンツを引き立てる設計として選ばれやすいと考えられます。

読書アプリから見えること

最初の疑問に戻ります。

なぜKindleには、白・黒だけでなく、セピアやグリーンのような背景色があるのでしょうか。

まずは、他の読書アプリも合わせて確認してみます。(2026年5月時点)

Kindle

Kindle背景色設定画面

Apple Books

Apple Books背景色設定画面

楽天Kobo

楽天Kobo背景色設定画面

アプリ 確認できた表示設定
Kindleアプリ 白・黒・セピア・グリーン
Apple Books ライトモード・ダークモード・デバイスに合わせる・周囲に合わせる

テーマ設定(薄いグレーやセピア、チャコールなど)
楽天Kobo シアン・セピア・チャコール・夜間モード

※端末・アプリのバージョンなどによって異なる可能性があります。

ここからは、これらの読書アプリの表示設定を見たうえでの考察になります。

読書は、長時間にわたって文字を正確に読み続けるタスクです。

そのため、読書アプリでは、長時間の読書、夜間利用、眩しさの感じ方、紙の本に近い読み心地などを考慮して、複数の表示モードが用意されていると考えられます。

つまり、表示モードの設計では、単にライトモードとダークモードを切り替えられるようにするだけでなく、ユーザーがどのような環境で、どのようなコンテンツを受け取るのかを考える必要がありそうです。

セピアは正のコントラスト極性を保った選択肢

個人的に面白いと思ったのは、セピアの存在です。

白背景は読解性能の面で有利になりやすい一方で、ユーザーや利用環境によっては眩しく感じることがあります。

セピアは、明るい背景に暗い文字という正のコントラスト極性の構造を保ちながら、白背景よりも画面の明るさを抑えた表示と考えることができます。

そのため、白と黒の中間というより、「正のコントラスト極性を保ったまま、白背景の眩しさを和らげる選択肢」と見ると分かりやすいかもしれません。

また、少し黄みがかった背景の方は、古い本のような質感を感じやすく、電子書籍であっても読書らしい落ち着きを演出してくれます。

色付き背景の必要性

では、Kindleアプリにあるグリーンや楽天Koboのシアンはどう考えればよいのでしょうか。

色付き背景が一般的に読解性能を高めると言い切ることはできませんが、読みづらさや眩しさの感じ方に個人差があることを考えるうえで、参考になる話はいくつかあります。

たとえば、Razukらの研究では、ディスレクシア(識字困難)児において、緑フィルターを使用した条件で読書時間や視線停留時間が改善したと報告されています。

日本でも、2019年に「グリーンノート」が話題になりました。

視覚過敏の女子高生が「白い紙は光が反射して目が痛くなる」とツイートしたことをきっかけに、東急ハンズが淡い緑色のノートを販売した事例です。

このように、色付き背景の効果を一般化することはできないものの、特定の読みづらさや眩しさを感じる人にとって、背景色を選べること自体が助けになる場合はあります。

白・黒以外の背景色が用意されていることは、「どの色が最も読みやすいか」という単純な話ではなく、読書体験には個人差があることを前提にした選択肢の一つと考えるのがよさそうです。

Kindleはライトモード、SNSはダークモードは正解か

ここまで整理すると、自分の使い分けにも納得がいきます。

Kindleでは、文脈を保持しながら、長い文章を読み続ける必要があります。

このような場面では、ライトモードの方が合いやすいと考えられます。

特に私は最小の文字サイズで読んでいるため、読みやすさの差を、より強く感じていたのかもしれません。

一方、SNSでは短文・画像・動画を流し見することが多く、画面全体の眩しさの少なさや、落ち着いた雰囲気を重視していたのだと思います。

つまり、自分の使い分けは、

  • Kindle:文字を正確に追いやすい表示
  • SNS:眺めていて心地よい表示

という整理ができます。

何をしているかによって、快適な表示が変わるということです。

無意識で使い分けていましたが、意外と理に適った選択をしていたようです。

表示モードの設計で考えるなら

ここまでの研究や読書アプリの例を踏まえると、表示モードは「ライトモードとダークモードのどちらが優れているか」ではなく、アプリやサービスが扱うコンテンツや利用される環境に応じて考えるのがよさそうです。

なお、想定ユーザーの慣れや好みも無視できません。

JetBrains の The State of Developer Ecosystem 2019 では、約7,000人の開発者を対象にした調査で、83%がエディタまたはIDEでダークテーマを好むと報告されています。

これは、開発者があらゆる画面でダークモードを好むことを直接示すものではありませんが、少なくとも開発環境ではダークテーマがかなり一般的に受け入れられていることを示しています。

そのため、表示モード設計では、コンテンツや環境だけでなく、想定ユーザーの慣れや好みも判断材料になります。

アプリ・体験の特徴 表示モード設計の考え方
長文・文章中心の体験 ライトモードを基本にしつつ、眩しさや読み心地に配慮してダークモードや色付き背景も選択肢にする
画像・動画・音楽など視覚コンテンツが主役の体験 暗色の背景を基本にする選択も◎
SNSやコミュニケーションツールのように日常的に長く使われる体験 読解性能だけでなく、眩しさの少なさや雰囲気の好みも考慮してダークモードを選択肢にする

表示モードは、アプリ・サービス全体の体験設計として「どのモードを基本にし、どの選択肢を提供するか」を考えるものだと言えそうです。

まとめ

研究を見る限り、文字を正確に読む・校正するようなタスクでは、ライトモードが有利な傾向があります。

一方で、ダークモードには、画面やコンテンツを魅力的に見せる、眩しさを抑える、といった別の価値があります。

読書アプリを見ると、白と黒だけでなく、セピアやグリーンのような選択肢も用意されていることがあります。

調べてみると、ライトモード・ダークモードは単なる好みの違いではなく、読解性能、利用環境、コンテンツの種類を踏まえて考えるべき表示モードの設計テーマなのだと感じました。

参考文献・出典

論文

  • Piepenbrock, C., Mayr, S., Mund, I., & Buchner, A. (2013). Positive display polarity is advantageous for both younger and older adults. Ergonomics. DOI: 10.1080/00140139.2013.790485
  • Piepenbrock, C., Mayr, S., & Buchner, A. (2014). Positive display polarity is particularly advantageous for small character sizes: implications for display design. Human Factors. DOI: 10.1177/0018720813515509
  • Piepenbrock, C., Mayr, S., & Buchner, A. (2014). Smaller pupil size and better proofreading performance with positive than with negative polarity displays. Ergonomics. DOI: 10.1080/00140139.2014.948496
  • Dobres, J., Chahine, N., & Reimer, B. (2017). Effects of ambient illumination, contrast polarity, and letter size on text legibility under glance-like reading. Applied Ergonomics. DOI: 10.1016/j.apergo.2016.11.001
  • Sethi, T., & Ziat, M. (2023). Dark mode vogue: Do light-on-dark displays have measurable benefits to users? Ergonomics. DOI: 10.1080/00140139.2022.2160879
  • While, Z., & Sarvghad, A. (2024). Dark Mode or Light Mode? Exploring the Impact of Contrast Polarity on Visualization Performance Between Age Groups. IEEE VIS 2024 Short Paper. DOI: 10.1109/VIS55277.2024.00050 / arXiv:2409.10841
  • Fan, Q., Xie, J., Dong, Z., & Wang, Y. (2024). The Effect of Ambient Illumination and Text Color on Visual Fatigue under Negative Polarity. Sensors. DOI: 10.3390/s24113516
  • Razuk, M., Perrin-Fievez, F., Gerard, C. L., Peyre, H., Barela, J. A., & Bucci, M. P. (2018). Effect of colored filters on reading capabilities in dyslexic children. Research in Developmental Disabilities. DOI: 10.1016/j.ridd.2018.07.006

参考記事・関連情報

KIYOラーニング株式会社について

当社のビジョンは『世界一「学びやすく、分かりやすく、続けやすい」学習手段を提供する』ことです。革新的な教育サービスを作り成長させていく事で、オンライン教育分野でナンバーワンの存在となり、世界に展開していくことを目指しています。

プロダクト

  • スタディング:「学びやすく・わかりやすく・続けやすい」オンライン資格対策講座
  • スタディングキャリア:資格取得者の仕事探しやキャリア形成を支援する転職サービス
  • AirCourse:受け放題の動画研修がついたeラーニングシステム(LMS)

KIYOラーニング株式会社では一緒に働く仲間を募集しています

21
19
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?