Wikipedia

ダークモード

ウェブサイトの表示方法。文字を明るい色に、背景を濃い色に設定

ダークモード表示（ダークモードひょうじ 英語: dark mode）とはページ表示の配色の設定の1種。背景を濃色、それよりも薄い色で文字列やアイコン、利用者向けの画像要素（英語版）を表示させることを指し、しばしばコンピュータ上のユーザインタフェースならびにウェブデザインなどの設計要素の観点から議論される。最近のウェブサイトやオペレーティングシステムの多くはオプションを提供し[1][2]、暗色背景に明色で画面の要素を表示する方法を選択できる。配色の明暗逆転ともいう（英: light-on-dark color scheme、dark theme、night mode、black mode、lights-out (mode)）。

GNOMEのダークモード
同一の画面の表示をノーマルにした場合（左）と、ダークモード（右）

利用者には、目の疲れ[3]を軽減できるからと、この表示モードに変える人もいる。電力消費量を比べた場合、2016年版の Google PixelはディスプレーにOLED（有機エレクトロルミネッセンス）を採用しており、白色を最も明るく設定すると、黒色100％表示よりもエネルギーをおよそ6倍使うことになる[4]。そうは言っても、節電効果を従来型のLEDディスプレーには期待できない[5]。最近の OSは、画面表示の選択肢にダークモードを採用する[6]。

開発史 編集

 
1980年代のビデオゲーム「ゾーク」の見た目。CRT画面の黒バックに文字は緑色。

現代のコンピュータ画面の前身であるブラウン管オシログラフやオシロスコープなど、黒い背景に画像や他のコンテンツを光る軌跡としてプロットし表示した。

コンピュータ画面の導入当初、ユーザー・インターフェイスの形成は旧来の表示装置にならい、陰極線管（CRT）の採用を前提とした。モノクロ画面上に塗った蛍光体は、通常の状態では非常に暗い色をしていて、電子ビームが当たると黒い背景に明るく点灯し、採用した蛍光物質（英語版）に応じて白や緑、青または琥珀色に見える。RGBスクリーンの動作も同様であり、ビームをすべて「オン」にすると白色を呈する。

文字多重放送が出現すると、新しい媒体に最適の原色と二次光器[7]、その組み合わせが研究された[8]。パレットには黒と赤、緑と黄、青とマゼンタ、シアンと白があり、一般に黒地にシアンまたは黄色が最適と判明した。

逆のカラーセット、つまり明色の背景に暗色の組み合わせは、本来はWYSIWYG方式のワープロ向けの技術であり、紙にインクで出力した場合の色味を試す目的で標準化していた。

Microsoftは2016年、Windows 10のアニバーサリ・アップデート（英語版）としてダークモードを導入[9]、モバイル版では2018年に Apple が追従し macOS Mojave に採用した[10]。翌2019年9月、iOS 13 と Android 10 （英語）の両方にも展開した[11][12]。

ブラウザではFirefox も Chromium も内部画面すべてにオプションとしてダークテーマを用意しており、サードパーティの開発者は独自のダークテーマを実装可能[13][14]。

フロントエンドのウェブ開発者（英語版）対応の「カラー表示を選択」は2019年にオプションとして登場し、ユーザーはシステムのテーマを好みで明色または暗色にでき、CSS プロパティがその選択を知らせる[15]。

エネルギーの消費量 編集

暗色の背景に明色で表示するスキームは、OLEDディスプレイに表示するとき消費エネルギーが少なくて済む。バッテリ寿命にはプラスの影響を与え、エネルギーを節約する[16]。

OLED で黒色主体の画像を表示する場合、消費電力は LCD と比べると約 40% にとどまる代わり、文書やウェブサイトなど白い背景に置いた画像の表示には、3倍超の電力を使う場合がある[17]。それさえ配慮するなら、バッテリ寿命とエネルギー使用量を抑制できる可能性はあり、また長期的に電力使用量を削ると、バッテリの寿命やディスプレイとバッテリの耐用年数も延ばせる場合がある。

明色の背景に暗色で表示するスキームでエネルギーを節約するには、OLED 画面の機構に依存し、光の生成はサブピクセル単位で個別に実行すること、電力消費は光の生成時点に限定して発生する。LCD ではその動作は対照的で、サブピクセルは常時オン（点灯）であり、LED バックライトの光を遮断または通過している。

黒色の代わりにダークグレーを採用するものと比べると、明暗色スキームでも平均輝度に比例して消費電力が減少する「AMOLED ブラック」画面[18]は純粋な黒色を用いてダークグレーを使わないが、エネルギー節約に優れているとは限らない。AMOLED の黒色は省エネの面ではダークグレーで置き換えるよりも確かに効率が良いが、多くの場合、その幅は無視できる程度にすぎない。たとえば、Google の公式 Android アプリのダークテーマが採用するダークグレーと比較して、AMOLED の黒の省エネ率は 1% 未満[19]。Google は2018年11月に Android のダークモードがバッテリ寿命を延ばすと公式に認めた[20]。

ウェブ環境との相性 編集

人によっては暗い背景に明るい文字という配色の方が、全体の明度が低いから目が疲れにくく、画面も読みやすいと主張する。あるいは別の人[21][注釈 1]は、反対の主張をする。注意点はウェブ上のほとんどのページは白い背景を前提として設計されており、GIF および PNG 画像がアルファブレンドの代わりに透明ビットを採用する場合、傾向として輪郭の表示が切れぎれで、他の描画要素にも問題が発生しがちである。

CSSには画面表示の機能として「prefers-color-scheme」が用意され、ユーザーが要求した配色は明るい方式か暗い方式か検出し、希望された配色を提供する。ユーザーはオペレーティング・システムの設定で指定するか、もしくはユーザーエージェントを採用して指定できる[15][23]。

以下はCSS の記述の例である。

@media (prefers-color-scheme: dark) {
    body {
        color: #ccc;
        background: #222;
    }
}

JavaScript の例を示す[24]。

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    dark();
}

参考文献 編集

主な執筆者、編者の順。

  • 梶川浩太郎、岡本隆之、高原淳一、岡本晃一「2. プラズモニックモードの結合 §2.1.4 表面プラズモン誘起透明化」『アクティブ・プラズモニクス』コロナ社、2013年5月、18頁。 
  • さくしま たかえ「簡単＆快適 Windows10：第1回 画面を好みの配色にする」『日経パソコン』第827巻、日経BP、2019年10月14日、50-53頁、CRID 1520290882157712768、ISSN 0287-9506。 掲載誌別題『Nikkei personal computing』。
  • Mana「6-11 ダークモードに対応させる」『ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座』SBクリエイティブ、2021年3月。 ISBN 978-4-8156-0614-5
  • 宮田 将司、廣畑 純平、高原 淳一「連結プラズモンアンテナを用いた可視光領域におけるブライト・ダークモード結合」『応用物理学会学術講演会講演予稿集』第2014.2巻、公益社団法人 応用物理学会、2014年9月1日、919-919頁、CRID 1390296420726907776、doi:10.11470/jsapmeeting.2014.2.0_919、ISSN 2436-7613。 

脚注 編集

[脚注の使い方]

注釈 編集

  1. ^ ウィンドウ表示用インターフェイスの matchMedia() 方式では、新しい MediaQueryList オブジェクトを返す。このオブジェクトを使い、ドキュメントとメディア・クエリ文字列との一致不一致を判断したり、ドキュメントを監視してメディア・クエリとの一致（もしくは一致停止）のタイミングを検出する[22]。

出典 編集

  1. ^ 宮田, 廣畑 & 高原 2014, pp. 919–919
  2. ^ さくしま 2019, pp. 50–53
  3. ^ Cummins (2018年11月21日). “Dark mode is easier on your eyes—and battery [ダークモードは目に優しい—そしてバッテリーにも]” (英語). popsci.com. Popular Science. 2023年1月21日時点のオリジナルよりアーカイブ。2024年2月8日閲覧。
  4. ^ Emily Price (2018年11月11日). “Use Dark Mode to Conserve Your Phone's Battery Power” (英語). Lifehacker. 2021年3月20日閲覧。
  5. ^ Eisfeld, Henriette; Kristallovich, Felix (2020). The Rise of Dark Mode : A qualitative study of an emerging user interface design trend [ダークモードの台頭 : 新たなユーザーインターフェイス設計とトレンドの定性研究] (Thesis) (英語). スウェーデン ヨンショーピング市ユティリガタン（Gjuterigatan 5 Box 1026 551 11 Jönköping, Sweden）: ヨンショーピング大学（英語版）. ISRN:JU-JTH-IKA-1-20200182、oai:DiVA.org:hj-50563、DiVA, id:diva2:1464394。学士論文
  6. ^ Murphy (2020年10月28日). “Embrace Evil by Enabling Dark Mode in Every App” (英語). Lifehacker. 2020年11月16日時点のオリジナルよりアーカイブ。2020年11月15日閲覧。
  7. ^ Koninklijke, Philips NV. “Application JP2008501465A [多結晶セラミック構造の蛍光体及び前記蛍光体を有する発光素子]”. Google Patents. 2024年2月8日閲覧。 “2006 US EP WO KR JP; 2010 US [2006-03-10 Application filed by Koninklijke Philips NV, Koninklijke Philips Electronics NV; 2008-08-21 Publication of JP2008533270A; 2014-05-14 Application granted.]”
  8. ^ Petterson (1985年3月). “Use of Colors in Teletext and Videotex [文字放送およびビデオテックスにおける配色]” (英語). ResearchGate. 2024年2月8日閲覧。
  9. ^ “The Anniversary Update's most exciting features: Windows 10 users weigh in” (英語). PCWorld. 2023年8月7日閲覧。
  10. ^ “macOS Mojave: Dark Mode, Stacks, & More” (英語). MacRumors (2019年10月25日). 2022年8月8日時点のオリジナルよりアーカイブ。2022年8月8日閲覧。
  11. ^ Hardwick (2019年6月6日). “How to Enable Dark Mode in iOS 13” (英語). MacRumors. 2022年8月8日時点のオリジナルよりアーカイブ。2022年8月8日閲覧。
  12. ^ Callaham (2019年9月3日). “Here's how to enable the Android 10 dark theme mode” (英語). Android Authority. 2022年8月8日時点のオリジナルよりアーカイブ。2022年8月8日閲覧。
  13. ^ Porter (2019年6月3日). “Dark mode is coming to iOS 13” (英語). The Verge. 2019年6月5日閲覧。
  14. ^ Mana 2021, 「6-11 ダークモードに対応させる」
  15. ^ a b “prefers-color-scheme - CSS: Cascading Style Sheets” (英語). MDN Web Docs. 2021年3月18日時点のオリジナルよりアーカイブ。2021年3月18日閲覧。
  16. ^ Gottsegen (2018年11月10日). “Using Android's dark mode improves battery life, Google confirms [Googleが承認、Androidのダークモード使用でバッテリー寿命が向上]” (英語). cnet.com. CNET. 2022年12月27日時点のオリジナルよりアーカイブ。2024年2月8日閲覧。
  17. ^ Stokes, Jon (2009年8月11日). “This September, OLED no longer "three to five years away"” (英語). Arstechnica.com. 2012年1月25日時点のオリジナルよりアーカイブ。2024年2月8日閲覧。
  18. ^ 梶川 et al. 2013, pp. 18-
  19. ^ Raga (2019年6月27日). “No, "AMOLED Black" Does NOT Save More Battery Than Dark Gray [「AMOLED ブラック」はダークグレーよりバッテリー節約に優れていない]” (英語). XDA. XDA Developers. 2024年2月8日閲覧。
  20. ^ Welch (2018年11月2日). “Google confirms dark mode is a huge help for battery life on Android [Google が承認、 Android のダークモードはバッテリ寿命を大幅に延ばす]” (英語). The Verge. 2024年2月4日閲覧。
  21. ^ Sharma (2020年6月29日). “Love dark mode? Here's why you may still want to avoid it [ダークモードはお好き？ それでも避けたほうがよい次の理由]” (英語). Android Authority. 2020年9月24日時点のオリジナルよりアーカイブ。2020年9月12日閲覧。
  22. ^ Budiu (2020年2月2日). “Dark Mode vs. Light Mode: Which Is Better? [ダークモードかライトモードか：どっちが優秀？]” (英語). Nielsen Norman Group. 2023年2月14日時点のオリジナルよりアーカイブ。2024年2月8日閲覧。
  23. ^ Walsh (2019年1月28日). “prefers-color-scheme: CSS Media Query [優先配色スキーム：CSS メディア クエリ]” (英語). David Walsh Blog. 2021年3月18日閲覧。
  24. ^ “Window.matchMedia() - Web APIs” (英語). MDN Web Docs. 2021年3月2日時点のオリジナルよりアーカイブ。2021年3月18日閲覧。 “The Window interface's matchMedia() method returns a new MediaQueryList object that can then be used to determine if the document matches the media query string, as well as to monitor the document to detect when it matches (or stops matching) that media query”

関連項目 編集

読みの順。

「https://ja.wikipedia.org/w/index.php?title=ダークモード&oldid=99291571」から取得