UXデザイナーに学ぶ、ダークテーマをデザインする時に気をつけたい5つのポイント

サイト構築 -デザイン

Post on:2019年10月24日

はじめに

スマホアプリのデザインで、最新のトレンドはダークテーマです。macOSは去年ダークモードを導入し、Androidは先月ダークテーマをローンチしました。iOSも先日のiOS13でダークテーマに対応しました。

現在、ダークテーマが広く注目されています。

ダークテーマはうまくやれば、多くの利点があります。
目の疲労を軽減し、暗い場所でも読みやすく、スクリーンによってはバッテリー消費を大幅に減らすこともできます。

ただし、快適なダークテーマを作り出すことは困難です。色を単純に再利用したり、色合いを反転するだけではできません。下手なダークテーマは目の疲労が増え、暗い場所で読みにくくなり、情報の階層を壊すことさえあります。

この記事では、読みやすく、バランスのとれた、快適なダークテーマをデザインする方法を紹介します。

ダークテーマをデザインするポイント1. 奥の面を暗くする

ダークテーマのUIデザインのほとんどは、「遠くにある奥の面を暗くする」という原則に従います。これは上から光が投射される環境をシミュレートし、親しみやすく安心できる物理的特性を伝えます。

ダークテーマを作成する時、ライトテーマを反転させたくなるかもしれません。しかし反転させるだけでは、奥の面は明るく、手前の面は暗くなります。これは物理的特性を壊し、不自然に感じます。

その代わりに、ライトテーマのメインの面のカラーのみを使用してください。このカラーを反転して、ダークテーマの主要な面のカラーを生成します。面が手前の場合はこのカラーを明るくし、奥の場合はこのカラーを暗くします。

Superhumanのダークテーマは、5色のグレーで構成されています。より手前の面は明るいグレーで、より奥の面は暗いグレーを採用しています。

面がより手前ほどより明るいグレー、より奥ほど暗いグレーを採用

ダークテーマをデザインするポイント2. 知覚コントラスト

ライトテーマを元にしてダークテーマをデザインする場合、知覚コントラストを再検討することが重要です。数値が示唆するものに関係なく、要素がどの程度コントラストを持っているように見えるかです。

例えば、下記のライトテーマでは連絡先のテキストはブラックで、不透明度は60%です。しかし、ダークテーマではテキストを不透明度60%ではなく、65%のホワイトにしています。どちらのコントラスト比もAAの基準を超えていますが、5%のコントラストを追加することで、特に低照度での疲労を防ぐことができます。

この補正値には厳密なルールはありません。代わりに、文字のサイズ、フォントのウェイト、ラインの幅を考慮してアイテムを個別に調整し、ダークテーマをライトテーマと同じくらい明確で読みやすいものにデザインします。

5%のコントラストを追加することで、読みやすくなる

ダークテーマをデザインするポイント3. 明るい色の大きなブロック

コンテンツに明るい色の大きなブロックをよく使用します。ライトテーマでは問題ありません。しかし、最も重要な要素がさらに明るくなる可能性があるため、ダークテーマでは機能しません。色の大きなブロックは、最も重要な要素からフォーカスを引き寄せます。

例えば、下記のリマインダーを例に見てみましょう。ライトテーマではピンクの背景がさらに明るいダイアログの邪魔になることはありません。しかし、ダークテーマではダイアログより背景に注意が引き付けられます。右端の例でピンクの背景を完全に削除すると、重要な要素に集中しやすくなります。

明るい色のブロックを減らすと、重要な要素に集中できる

ダークテーマをデザインするポイント4. ブラックとホワイト

Superhumanではダークテーマに、ピュアブラックとピュアホワイトは使用していません。これには4つの理由があります。

1. リアリズム

トゥルーブラックはわたし達の日常には存在しない色です（世界で最も暗い物質はMITで開発されたまだ名前がない物質で、トゥルーブラックより0.005%暗さが不足しています）。

従って、わたし達の目は相対的な暗さをトゥルーブラックとして認識するように適応してきました。そのため、#000000を特に明るい要素に使用すると、非常に不快に感じることがあります。わたし達が通常目にするものとは一致しないからです。

2. ブラックスミア

ブラックスミアとは、ピュアブラックの背景で明るいコンテンツをドラッグ・スクロールした時に発生する視覚的な歪みです。

この現象は、ますます普及されているOLEDスクリーンで発生します。OLEDスクリーンではピュアブラックのピクセルはオフになります（ダークテーマがライトテーマよりエネルギー消費が少ないのはこのためです）。ただし、ピクセルのオンとオフの切り替えはカラーを変更するより遅くなるため、この可変応答はブラックスミアを起こします。

iOSの時計アプリでのブラックスミア（OLEDスクリーンで表示した場合）

ダークグレーを使用するとピクセルがオフにならないため、このブラックスミアは簡単に防ぐことができます。#010101のような暗いグレーでも機能しますが、ライトテーマよりもエネルギー消費がはるかに少なくなります！

3. 奥行き

要素の背景にトゥルーブラックを使用すると、奥行きを表現するテクニックが失われます。

例えば、背景がピュアブラックだとします。そして、通知パネルを表示します。通知パネルは背景の上に浮かんで表示されるので、シャドウを使用して奥行きを伝えます。しかし、ピュアブラックより暗い色はないので、シャドウは見えません。

背景がピュアブラックではない場合は、さまざまな不透明度とぼかしのシャドウを使用して奥行きを表現できます。例えば、下記のSuperhumanでの通知パネルを見てみてください。

背景がピュアブラックでない場合は、シャドウで奥行きを表現できます

4. ハレーション

ピュアブラックの背景に対してピュアホワイトのテキストを使用すると、21:1の最高のコントラスト比が得られます。WCAGアクセシビリティにおいて、理想的なコントラスト比です。

ただし、ダークテーマをデザインする場合、コントラスト比が非常に高くなることには注意することが重要です。コントラスト比が高すぎると、ハレーションだけでなく目の疲労を引き起こす可能性があります。

非常に明るいテキストを非常に暗い背景に使用すると、テキストが背景ににじみ出て見えることがあります。特に、乱視がある人にとっては強い効果があります。

乱視（人口の約50%）がある人は、ホワイトにブラックの文字よりもブラックにホワイトの文字の方が読みにくいと感じます。これは光のレベルに関係しています。明るいディスプレイ（白背景）では虹彩が閉じて、変形したレンズの効果が減少します。暗いディスプレ氏（黒背景）ではより多くの光を受けるため虹彩が開き、レンスの変形によって目の焦点がよりぼやけて見えます。

感覚知覚および相互作用研究グループの博士研究員: ジェイソン・ハリソン

Superhumanではテキストが非常に多いため、ハレーションに特に注意する必要があります。ホワイトのテキストは不透明度を90%にし、暗い背景が透けて見えるようにしています。これにより、コントラストと明るさのバランスが保たれるため、さまざまな照明条件でテキストが読みやすくなっています。

ホワイトのテキストは不透明度を90%に

ダークテーマをデザインするポイント5. カラーを濃くする

目の疲労やハレーションを避けるためにテキストのトーンを下げたので、カラーのアクセントやボタンが明るすぎるように見えるかもしれません。ダークテーマでより適切に機能するように、それらのカラーを調整する必要があります。まず、それらのカラーが近くのテキストを圧倒しないように、明度を下げます。次に、彩度を上げて、個性を与えます。

例えば、ライトテーマのパープルをそのまま使用すると、近くのテキストに対して明るすぎます。そのため、ダークテーマでは、ユーザーがテキストに集中できるようにパープルを濃くします。