アプリケーションのダークモード(ダークテーマ)をデザインする事前準備として、まずは1週間ダークモードを使ってみました。ダークモードを使った感想や気付いたことを今後の振り返りメモとして残します(ダークモードに慣れていない状態での感想を残したい意図もあります)。macOS Mojaveの外観モードをダークにして試しました。
結論:いくつかのアプリケーションのダークモードを使ってみた感想
ダークモードが目の負担軽減に効果的な場面もある 。 デザインやコーディングアプリケーションのダークモードは使いやすい。 長文を読む場合はライトモードが使いやすい 。文章を書いたり、推敲したりはライトモードが使いやすい 。無彩色のグレー で設計されていると、使用時のノイズや負担が少ない。ブランドカラーを馴染ませるのが良いかどうかは状況による (検証を繰り返して判断するのが良い)。「暗い色調(配色)のデザイン」と「ダークモードのデザイン」は、似ているようで違う(ライトモードとの整合性の維持が必要)。 ダークテーマ設計の適切なタイミングは、標準テーマのデザインシステムをチームで運用できたのち (標準テーマとのデザインの整合性や維持コストの観点から)。
詳細に続きます。
前提
ダークモードを使い始めてから7日後時点の感想である。 ダークモードを使う前は、主にmacOS標準の外観モード(ライト)を使っていた。 ダークモードの設計経験はまだない。
過去に黒や暗いグレーをベースとしたグラフィックやWebサイト、アプリのデザイン経験はありますが、ライトモードが標準となっているWebサイトやアプリに対して、ダークモードの設計経験は記事公開時点ではまだありません。そこで今後の観点として活かしたいことをメモします。
そもそもダークモードとは何か?
ダークモードとは黒や暗いグレーを基調とした画面モードのことです。OSやアプリケーション、Webサービスへの導入が進んでいます。主に次の効果が期待されています。
ダークモードの目的や期待されていること
目の負担を減らす。 バッテリーの節約。 ユーザーの集中力を高める。
ダークモードのメリットとして、AppleのWebサイトでは次のように書かれています。
ダークモードを使えば、より作業に集中しやすくなります。コントロールやウインドウが暗くなって背景に溶け込み、作業中のコンテンツが際立ちます。
Apple
OSやアプリケーションごとのダークモードの感想
実際にダークモードを使った感想をアプリケーションごとにまとめました。
macOS(オペレーションシステム)
使い始めは違和感を感じたが、1週間が経過した頃には違和感は薄れてきた。 Finderのファイル操作は、目の負担が減ったと感じる。 メニューバーのデザインの違いにも慣れてきた。 Dockのゴミ箱アイコンが黒くなっており、全体のデザインとして調和が取れているのが良いと思った。 今後もダークモードを使うかは未定。
Firefox(Webブラウザ)
白い背景のWebサイトが相対的に多く、黒いメニューUIとのコントラストを強く感じる。結果的に目の負担は上がったと感じる(Chromeも同様)。 Faviconがダークモードに対応していないWebサイトで、使いにくさや違和感を感じた。 開発ツール(デベロッパーツール)の表示は元々ダークテーマを使っていたので、特に違和感はない(Chromeも同様)。
Chrome(Webブラウザ)
FirefoxとChromeを用途で使い分けており、ブラウザのUIの色で見分けていたので見分けにくくなった点は不便に感じる(Firefoxの上部のバーがライトモード時にも黒かったので、見分けやすかった)。
Slack(コミュニケーションツール)
左のメニュー部分とメインのチャット部分のグレーの色味が違うことに違和感を感じた。 色味(色相)の差がノイズに感じたので、ライトモードが使いやすい。 Slackではスタンプを使うが暗い背景色に対応していないスタンプも多く、判別しにくくなった。 使っているテーマによるかもしれないが、チャットの文字装飾系アイコンのコントラストが低い印象。 OSはダークモードを選んだとしても、Slackのテーマはライトテーマを選ぶと思う。
Photoshop(画像編集アプリケーション)
元々ダークモードのカラー設定で使っていたので、違いは感じなかった(変わっていない?)。
Illustrator(デザインアプリケーション)
元々ダークモードのカラー設定で使っていたので、違いは感じなかった(変わっていない?)。
Adobe XD(UIデザイン・プロトタイピングアプリケーション)
OSがダークモードであっても、アプリケーションのUIは明るいグレーのままだった。 ライトモード時との違いはなさそうで、違いは感じなかった(変わっていない?)。
VS Code(コードエディター)
元々ダークモードのカラー設定(Atome One Dark Theme)で使っていたので、違いは感じなかった(変わっていない?)。
CotEditor(テキストエディター)
メモ書きにはダークモードも使いやすいと感じた。 推敲の繰り返しが必要な長文メモの場合は、ライトモードが使いやすいかもしれない。 グレー階調がmacOSのダークテーマ配色に近く、自然な印象を受けた。 メインのテキスト入力欄の背景色がやや緑がかった感じするのが少し気になった(ブランドカラーを意識しているのかもしれない)。
Twitter(PCのWebブラウザ版)
Twitter(デフォルトのテーマ)
Twitter(ダークブルーのテーマ)
目の負担を抑えられていると感じた。 長文を読んだり文章を書いたりする場合はライトモードが使いやすい(白背景に黒文字)。 PCのWebブラウザでTwitterを使う場合はライトモードが使いやすく、iPhoneアプリのTwitterを使う場合はダークモードが使いやすいと感じた。 これはディスプレイの大きさ、ディスプレイと目の距離、光量(周辺環境の違い)、1行ごとの表示文字数など複数の要因によるものかもしれない。
Twitter(iPhoneアプリ版)
ダークモードは以前から使っていた。 iPhoneアプリのTwitterは読む用途で使うことが多いので、ダークモードが使いやすい印象。
まずはオペレーションシステム(OS)のデザインガイドラインを参考にする
ダークモードについて詳しく知りたい場合は、まずはAppleやGoogleのデザインガイドラインを参考にすると良いかもしれません。
Dark Mode – Human Interface Guidelines
Dark theme – Material Design
設計意図が学べるので参考になります。
Material Designの解説動画を参考にする
以下はダークモード設計について参考にした、Material Designの解説動画です。少し長いので気になった点を動画キャプチャの引用とともに抜粋します。
VIDEO
気になった点を抜粋
ダークテーマはライトテーマの反転ではない(単純な反転では成立しない)。 ダークテーマ設計で大事なのはコントラスト。 ダークテーマではコントラストを維持するために、ブランドカラーの使い方を考慮する(Material Designのカラーシステム上では、ダークテーマ時に200や300の明るい色を使うことが推奨されている)。 ダークテーマではシャドウではなく、オブジェクト表面(Suface)の明るさによって深度(階層)を表現する。 ベースの背景色は#121212を推奨。 ダークテーマにブランドカラーを馴染ませることも可能。
Google
Google
Google
ダークモードの必要性と疑問
ダークモードについて調べていくうちに、「そもそもなぜダークモードを用意する必要があるのか」と疑問がわいてきました。
ダークモードの主な目的として、目の負担を減らす、バッテリーを節約する、集中力を高める効果が期待されています。そうかもしれないと思う一方で「本当にそうなのかな?」とも思うので、もっと知りたいと考えています。
ダークモードの効果への仮説
アプリケーションのダークモードは集中力を高める効果があるとされています。自分の経験では、IllustratorのUIを明るいグレーから暗いグレーに変えて制作に集中しやすくなった実感があります。
個人の感覚や用途、周囲の環境(光量や光の種類)、慣れによってもライトモードとダークモードのどちらが使いやすいかは異なるはずです。
その中でユーザーが好きなモード(テーマ)を選べることは価値の1つだと思います。そう考えると両方のモードを行き来したときに違和感がないデザインになっているかは、デザインの改善につながる観点の1つかもしれません。
Nintendo Switchのテーマはベーシックブラックを使っている
自分の経験を例に挙げると、Nintendo Switchの画面デザインのテーマはダークモード(ベーシックブラック)にしています。
Nintendo Switch(ベーシックホワイト)
Nintendo Switch(ベーシックブラック)
Nintendo Switchの購入後まもなくだと思いますが、迷わずダークモードを選びました。目の負担を和らげられるメリットが大きいので、自分は今後もベーシックブラックを使い続けると思います。
ダークモードの色相(色味)について
複数のOSやアプリケーションを使ってみた感想として、ダークモードの広い面積を占める背景色の色相(色味)は、無彩色に近いほど使用時の負担が少なく自然に感じました。
その一方でmacOSのダークモードのユーザーインターフェイスには若干青みがかったグレーが使われています(無彩色の箇所もあります)。macOSで使われているグレーは無彩色に近いためか、青みがかっていても自然な印象に感じました。
ダークテーマの背景色にブランドカラーを混ぜる(馴染ませる)メリット・デメリット
Webサイトやアプリケーションでブランドイメージと一体感を出すために、広い面積の背景色にブランドカラーを含んだ色を使いたい場合もあるのではないでしょうか?
Material Designにはダークモードにブランドカラーを馴染ませる場合の設定値が定められているのでカラー生成の参考になります。
Dark theme – Material Design
その設定値を元にした色は#121212 の暗いグレーをベースとして、ブランドカラーを8%の透過で重ねてつくると定められて います。
To create branded dark surfaces, overlay the primary brand color at a low opacity over the recommended dark theme surface color (#121212). The color #1F1B24 is the result of combining the dark theme surface color #121212 and the 8% Primary color.
Dark theme – Material Design
ブランドカラーを馴染ませるのが良いか、グレー階調をそのまま使って仕上げるのが良いかは状況によって変わる と考えます。
ブランドカラーを混ぜると一体感が出やすいメリットがあります。その反面、飽きやすくなったり、ユーザーの色の好みに左右されたり、くどい印象になりやすいデメリットもあります。ユーザーが長期的に使いやすいのはどちらなのかを、継続的に比較検証して改善につなげられると良いと思います。
ダークモードをデザインすることと、最初から暗い配色でデザインすることの違い
例えば高級ブランドの製品で、「落ち着いたイメージを訴求するために黒や暗い色をベースとしてデザイン(設計)すること」と、「元々明るい色で設計していたアプリケーション(もしくはWebサービス)にダークモードを新たに追加でデザインすること」は、視覚的には似ていたとしても必要な観点は異なる と考えます。
元々が明るい配色で設計されているアプリケーション(Webサービス)があり、ダークモードを追加したい場合は、次の観点も必要になるのではないでしょうか。
ダークモード設計に必要な観点
もっとたくさんあると思いますが、ダークモード設計時に必要になる観点を挙げてみます。
元の明るい配色(ライトモード)と配色の整合性 は取れているか? 全ての画面でライトモードとダークモードの切り替えに対応しているか? ユーザーがこれまでにライトモードで学習したUIの振る舞いを活かせるか? 完全には活かせなかったとしても、スムーズに切り替えられるように配慮されているか? ブランドカラーはライトモード時とダークモード時の両方で視認できるコントラスト になっているか? もしなっていないのであれば、どのように調整するのが良いか? アプリケーションのステータスを表す配色(例:完了、エラー、注意喚起、非活性など)はダークモードでもコントラストが維持できる色 になっているか? なっていないのであればどのように配色設計するか? アイコンの視認性 はダークモードの状態でも維持できるか? 単純に反転しただけでは、判別しにくくなっていないか?アイコンは反転色になっても、その意味が伝わりやすい形状になっているか? アイコンが反転色になった場合に、線が太く見えすぎたり、エッジが潰れて見えていないか? 一般的に黒に比べて白は膨張して見えるため、黒背景に白いアイコンのほうが大きく(エッジが太く)見えやすくなる。 運用性や拡張性 は考慮されているか? 例えばライトモード時とダークモード時で文字サイズや余白の大きさは同一のまま 運用できるか(コンポーネント管理がしやすくなっているか)。チームメンバーに負荷がかかりすぎないか? デザインシステムを長期的かつ複数人で運用できる状態か? まずはライトモードのデザインシステムを維持できているかが1つの指標になる。
元のアプリケーションの規模が大きいほどダークモード設計時の影響範囲は大きくなり、運用のしやすさにも関わります。効率的な運用のために、まずは標準モードのデザインシステムを設計することが重要だと考えます。
参考情報
ダークテーマについて調べる際に主に参考にした情報です。
Dark theme – Material Design
Dark Mode – Human Interface Guidelines
DarkModeのデザインを中心とした色彩設計の考え方 – くらげだらけ
ダークモードまとめてみた|あき|note
ダークモードの観察|鈴木慎吾 / TSUMIKI INC.
今後について
情報収集や仮説、検証を重ねてダークモードの必要性や効果をもっと探っていきたいと感じました。気付いたことを今後のデザインに活かし、改善につなげたいです。