ダークモード、流行っていますよね。

 AppleのmacOSまでもがダークモードを導入し、それを発表したWWDCでは喝采を浴びていました。ダークモードは、それまで白が基調だった背景を黒もしくは墨色に反転させるモードのことです。

11
macOSがダークモードを追加し、対応アプリもかなり増えてきましたが、ブラウザで見るウェブサイトの背景はいまだに白いままで違和感があります

 単純に黒基調の画面がカッコイイ、ということもあるかもしれませんが、余計な光が目に届かないため、長時間画面で文字を見つめ続けるプログラマがぜひ使いたい画面モードということになります。

 ちなみに筆者は背景が白でも黒でもどちらでも良かったのですが、花粉シーズンも相まって、ダークモードの方が「楽」になってきました。でも、昔のコンピュータのスクリーンって、黒い背景に緑色の文字でしたよね。さすがに文字は緑にしませんが、なんとなく原点回帰、という感じもします。

Facebook Messengerにも隠し機能でダークモードが

 Macにダークモードが採用されたことで、アプリもOSのモードに合わせて画面のモードを連動させるようになってきました。Mac標準のメールやカレンダーなどのアプリはもちろん、もともとダークモードを用意していた筆者愛用のテキストエディタUlyssesもOS連動ができるようになりました。

 他方、モバイルアプリにもダークモードが進出中です。最近になってEmojipediaが、Facebook Messengerで三日月の絵文字を送信すると、自分と相手がダークモードを試せるようになると指摘しています。TwitterのMatt Navarraさん(@MattNavarra)さんの投稿を引用する形で紹介します。

11

 実際に試してみると、今まで真っ白なインターフェイスだったFacebook Messengerの背景色が真っ黒になり、今までとまったく違った印象に早変わりしました。Messengerのキャプチャーはなかなか記事に貼り付けられないのですが、ぜひ一度、アプリを最新版にして試してみてください。

バッテリー節約にもなるというダークモードの別の意味

 ダークモードは、長い時間画面を見つめているときに楽だったり、雰囲気や気分を変えられるといった効果がありますが、最近有機ELディスプレイを搭載するスマートフォンにとっては、バッテリーの節約になる、というメリットがあります。

 Googleは昨年開催されたAndroid Dev Summitで、有機ELを搭載するPixel 3で最大輝度にした場合、Googleマップの地図を表示すると63%も消費電力が節約できるとしています。同様にYouTubeでも、通常モードとダークモードで比較すると6割の電力を節約できるそうです。

 これは液晶ディスプレイでは同じ事が起きません。液晶の場合、消費電力の多くはバックライトの輝度で決まり、さらにいえば白はバックライトの色がそのまま見えている状態ということになります。

 一方の有機ELの場合、黒はその画素が消灯していることを意味しており、黒い面積が増えれば増えるほど、少ない電力でディスプレイ表示ができるわけです。そのため、ダークモードの方がバッテリ節約になるのです。

iPhoneはまだ白基調のUIを用いている

 Appleは2017年に発売したiPhone Xで、初めて有機ELパネルをiPhoneに取り入れました。有機ELの特性から、黒基調の方がバッテリの大幅な節約になるインターフェイスデザイン、といえますが、iOS 11ではiPhone X向けであっても、iPhone 8と同じこれまでの明るいインターフェイスを維持しています。

 この点についてAppleに聞いてみたことがありましたが、有機ELは技術的なファクターであって、人が慣れた「白い紙で文字を読む体験」を基準にインターフェイスを組み立てているため、黒基調の画面にはしなかった、とのことでした。

 ちなみにiOSであっても、アクセシビリティから設定できるディスプレイの「反転(スマート)」をオンにすることで、画像などはそのままのカラーリングで、背景と文字だけを反転させる画面モードに設定することができます。

 ただし、2015年に発売されたApple Watchは、はじめから背景が黒で白い文字が現れるインターフェイスデザインを採用しています。よりバッテリーがシビアであることと、時計の小さな画面で文字を読む体験を踏襲する必要がないことから、有機ELディスプレイの節電効果を最大限の享受できる黒い背景を採用している、と考えて良いでしょう。

問題はウェブサイトが黒ベースではないこと
スタイルシートを用い、OSのモードに合わせて切り替えも

 筆者もMacのダークモードを使っていますが、問題はウェブです。以前macOS Mojaveの記事でご紹介したときにも、ウェブを表示させるとそれまでダークだった画面に白い背景が広がり、目をくらませたという体験を書きました。

 OSのモードによって勝手にウェブサイトの色味を変えてしまうことはあまり推奨されませんので、OSのモードを読み取り、ウェブサイト側がライトモード、ダークモードそれぞれの配色を用意する形での解決が望ましい、と思います。

 Safari Technology Previewではすでにスタイルシートの「prefers-color-scheme」をサポートしており、OSのモードに応じてウェブサイトの色味を切り替えられるようになっています。この手法が広がれば、有機EL化が進むiPhoneにもダークモードが搭載されるようになるかもしれません。


matsu

筆者紹介――松村太郎

 1980年生まれ。ジャーナリスト・著者。慶應義塾大学SFC研究所上席所員(訪問)。またビジネス・ブレークスルー大学で教鞭を執る。モバイル・ソーシャルのテクノロジーとライフスタイルについて取材活動をする傍ら、キャスタリア株式会社で、「ソーシャルラーニング」のプラットフォーム開発を行なっている。

公式ブログ TAROSITE.NET
Twitterアカウント @taromatsumura