最早トレンドではない。「ダークモード」を作成する際に気をつけたい6つのポイント

デザインの美しさと機能性の高さから人気を博している、ダークモード。

目の疲れやバッテリー消耗までも軽減してくれる利便性と、シンプルなデザイン性を両立しており、いまや一過性のトレンドではなく「普及し定着したデザイン」といえます。

今回は、ダークモードを作成する際に気をつけたい6つのポイントをご紹介します。

ポイント1. 背景を真っ黒にしない

「ダーク」という言葉から黒を連想しがちですが、ダークモードの背景に黒を使うのは避けましょう。

ダークモードの目的のひとつは、目の疲れを軽減すること。背景を真っ黒にしてしまうと、真っ白の背景と同様か、それ以上に目に負担がかかります。

▲左は黒、右は黒に近いグレー（出典：UX Planet）

ポイント2. 純色を使わない

各色相においてもっとも彩度が高い「純色」をダークモードで使うのはご法度です。

WCAG（※）では、「ダークモードに純色を使用することは、アクセシビリティの基準に反する」としています。

（※Webコンテンツを障がいのある人にも使いやすいようにするためのガイドライン）

▲左は純色の紫、右は白成分の多い紫（出典：UX Planet）

ポイント3. コントラストをつける

コントラストは、ダークモードのアクセシビリティにおいて重要な役割を果たします。

スマートフォンのような小さなデバイスで使用する場合や、プレゼンテーション用のスクリーンのような大きなデバイスで使用するケースでは、とくに重要です。

▲左はコントラストが弱く、右はコントラストが強い（出典：UX Planet）

ポイント4. 色を反転させるだけでは不十分

ダークモードでやりがちな間違いのひとつが、「色の反転させただけ」のデザイン。

色を反転させるだけでもデザイン性や利便性に一定の効果は期待できますが、製品としては不十分。きちんと手動で、要素ごとに色味を調整しましょう。

▲左は色を反転させただけのもの、右はダークモード用に調整したもの（出典：UX Planet）

ポイント5. 不透明度が高い色を使う

不透明度が低すぎる色は視認性を低下させます。

目を疲れさせるだけでなく、ユーザーが重要な情報を見逃す原因になります。できるだけ不透明度が高い色を使うようにしましょう。

▲左がもっとも不透明度が高く、右側がもっとも低い（出典：UX Planet）

ポイント6. 影を使わない

ダークモードそのものが暗く深みがあるため、余計な影をつけるのは避けましょう。

不要な要素が加わることで、ユーザーの目を疲れさせてしまいます。

▲左は画面のまわりに影がついており、右はついていない（出典：UX Planet）

ダークモード成功の鍵はアクセシビリティ

現代的でクールなデザイン、目やバッテリーの負担軽減など、さまざまなメリットがあるダークモード。

しかし一歩間違えるとアクセシビリティが下がり、逆にユーザーの負担を増やしてしまいます。

今回ご紹介したポイントを参考に、ダークモード作成の際はアクセシビリティを意識してみてください。

（執筆：Srishti Vashishtha　翻訳：中島あすか　編集：泉　提供元：UX Planet）