ダークモード画面とは？

# ダークモードについて
ダークモード（Dark Mode）は画面を暗くして、文字やアイコンなどを明るい色で表示するのが特徴です。
機能は多くのスマートフォン、パソコン、タブレット、アプリケーションなどに搭載されています。

<img width="350" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3031833/a89aece4-8c0c-a362-3941-782008f9ccf6.jpeg">
<img width="350" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3031833/19a9e0b8-36d5-e9e5-5784-00ea18554914.jpeg">


# ダークモードのメリット
__目の負担を軽減する__
ダークモードは、特に暗い場所での画面閲覧時に目の疲れを軽減します。
明るい背景よりも暗い背景の方が眩しさを抑えられるため、目に優しい設計です。

__バッテリーの節約__
OLEDやAMOLEDディスプレイを採用しているデバイスでは黒い部分が完全に消灯されるため、電力消費が抑えられる可能性があります。

__視覚的な快適性__
ダークモードはスタイリッシュで、多くの人にとって長時間の使用でも視覚的に快適と感じられるデザインです。

# ダークモードのデメリット
__日中の視認性が低下__
する明るい場所では、ダークモードだと画面の視認性が低下する場合があります。

__テキストの可読性__
一部やコンテンツアプリでは、濃い背景と明るい文字のコントラストが十分でないと読みづらくなることがあります。

__デザインの不完全統合__
一部のアプリやウェブサイトでは、ダークモードに対応していない場合があり、見た目が統一されないことがあります。

# ダークモードの歴史と普及
### 1. 初期のコンピュータ
- __1980年代以前__
コンピューターの画面は基本的に「黒い背景に緑や白の文字」が主流でした。
これはCRT（ブラウン管）ディスプレイの技術保留によるもので、当時は確実に「ダークモード」に近いものでした。
（例:1981年開発のIBMやMS-DOSなど）

- __1980年代後半__
1984年にマウスとアイコンを使うGUI（グラフィカルユーザーインターフェース）が登場し、白背景が標準化され、現在の「ライトモード」の形が一般的になりました。

### 2. ダークモードの導入
- __2016年__
Appleは初めてiOS 9.3で「Night Shift」機能を導入し、夜間に目の負担を軽減する青色光軽減モードを提供しました。ちなみに、これは「ダークモード」とは違います。

- __2018年9月__
AppleはmacOS Mojaveで完全なシステム全体のダークモードを初めて導入しました。
Finderやシステムアプリなど、ほぼすべてのインターフェースがダークモードに対応しました。

- __2019年5月__
Windows 10  May2019 Updateから設定メニュー全体を含むシステム全体のダークモード（「黒」）が正式化されました。

https://dekiru.net/article/18558/#:~:text=%E5%AE%9F%E9%9A%9B%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95,%E3%81%AB%E5%AE%9F%E8%A3%85%E3%81%95%E3%82%8C%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82

「できるネット」さんの所にWindowsのダークモードに関する詳しい記事がありました。

- __2019年9月__
AppleはiPhoneやiPadに関して、iOS 13から完全なダークモードが導入されました。
ユーザーは「ライトモード」と「ダークモード」を手動で切り替えたり、時間帯に応じて自動的に設定が可能です。

### 3. ダークモードの普及とアプリの対応
- __2020年以降__
多くのサードパーティアプリ[^2]（例：YouTube、Twitter、Facebook、Instagramなど）がダークモードに対応しました。
これにより、個々のアプリでダークモードを設定できるようになり、ユーザーの利便性が向上しました。
[^2]: サードパーティアプリとは、特定のアプリやサービスの開発者以外が提供する関連するアプリやサービスのことです。

- __2024年（今年）__
Google ChromeやSafariなど主要なブラウザもダークモード対応をするようになりました。
またCSSで「prefers-color-scheme」を指定することで、ウェブサイト自体がユーザーのダークモード設定に自動対応するようになりました。

# ダークモードが主流から姿を消した理由
ダークモードが主流から姿を消した理由はテクノロジーの進化やデザインのトレンド、ユーザーエクスペリエンス[^1]の変化に関連しています。
[^1]: ユーザーエクスペリエンス（UX）とは、製品やサービスを利用した際にユーザーが感じる使いやすさ、感動、印象といった体験を指します。

1980年代後半から1990年代にかけて、MacintoshやWindowsなどのGUI（グラフィカルユーザーインターフェース）が普及したことにより、白い背景が主流となった理由は下記です。

- __印刷物を模倣する__
白い背景に黒い文字は、紙媒体（本や新聞）のデザインを模倣しており、ユーザーにとって直感的でありそうなものでした。
- __カラー表示の進化したカラー__
ディスプレイが普及する中で、白い背景は色を正確に表示しやすいという意見がありました

# ダークモードの利用率
ダークモードを使用する人が増えた理由には、技術的な進歩やユーザーの視覚的快適性への配慮、ライフスタイルの変化などが挙げられます。

株式会社ベンチマークジャパン「日本のメルマガ購読調査2023年度版」(2023年10月発行）
こちらを見ると下記の調査結果が記載されていました。
> 全体の結果
> 45.8%の人がダークモード（ナイトモード）でメルマガを読むことがあると答えました。

> 年代別の結果
> 若い世代ほどダークモードでメルマガを読む割合が高い結果となりました。
> 20代の8割以上がダークモードでメルマガを読むことがあると答えており、60代と比較すると70ポイント近くも使用率が高いことが分かります。

https://prtimes.jp/main/html/rd/p/000000011.000081059.html

１度は消失したダークモードですが、現在はライトモードより人気だということがわかりますね。


# ダークモードの設定方法
__スマートフォン（例：iPhoneやAndroid）__
- __iPhone__
設定 → 画面表示と明るさ
「ライト」と「ダーク」から「ダーク」を選択

- __Android__
設定 → 画面 → ダークテーマ
スイッチをオンにする

__PC（例：WindowsやMac）__
- __Windows10/11__
設定 → 個人用設定 → 色
「アプリモードを選ぶ」で「ダーク」を選択
- __Mac__
Appleロゴ（）→　システム設定　→　外観
「ライト」、「ダーク」、「自動」から「ダーク」を選択

# 最後に
ダークモードが再普及し始めたのがここ5年ほどなので、開発をする際にライトモードとダークモードのデザインが異なることが今も続いています。
ダークモードブームがまだまだ続きそうなので、デザインが統一することを願います。