[日本語]マテリアルデザイン『Dark theme』#16

2022年10月18日 23:50

はじめに
今回は『マテリアルデザインガイドライン』の『Dark theme』について解説していきます。
なお、この記事は私が(翻訳機能を使って)ガイドラインを読む中で、日本語訳に違和感を感じたり、理解が難しいな。と思った箇所を分かりやすい言葉に置き換えるなど、一部個人的な解釈が含まれます。

正しい情報は下記のガイドラインをご確認ください。
引用元 Google - Material Design
URL：https://material.io
/※動画・画像データ等はこちらから引用させていただいております。

Dark themeとは？

Dark themeは、Right themeの補足モードとして設計され、コントラスト比を維持しながら輝度を下げます。

また、Dark themeを使用することで以下のような効果が期待できます。

暗い環境でも画面が見やすくなり、眼精疲労の軽減につながります。
OLED(有機ELディスプレイ)の場合、画面の輝度によって消費電力が変わるため、節電効果が期待できます。

Dark themeの原則

グレーを使用: 黒ではなくダークグレーを使用することで、奥行きや高さのある空間を表現します。
アクセントカラーの使用:Dark theme専用のアクセントカラー (明るい色、彩度の低い色、明るい色、彩度の高い色) を使用します。
エネルギーの節約:OLEDの場合、画面の輝度によって消費電力が変わるため、Dark themeの使用でバッテリーを節約します。
アクセシビリティの強化: Web コンテンツのアクセシビリティガイドライン (WCAG) AAの基準を満たす必要があります。(少なくとも 4.5:1 )

Dark theme の切り替え

Dark themeでは、表示を切り替える設定(ON/OFF)を設ける必要があります。

「Overflow menu」内に「Dark theme」と「Light theme」の切り替え設定項目を設置

Dark themeの Surface

「Dark theme」の「Surface」の色は、黒ではなくダークグレーを使用します。
理由は、黒ではなくダークグレーを使用することで影が見やすく、高さや深さを表現できる為です。
また、テキストを置いた際も、完全な黒の背景に白いテキストだとコントラストが強過ぎてしまいますが、ダークグレーを使用することでコントラストが下がり目の疲れを軽減することができます。

Elevation

「Dark theme」の「Surface」は、「半透過のホワイトのOverlay」を重ねることによって構成され、Elevationが高いほど明るくなります。(以下の動画)

「半透過のホワイトのOverlay」を使用することによって、コンポーネント間の高さの違いや、「Surface」の輪郭を明確にする効果があります。

下の画像では、Elevation別の「半透過のホワイトのOverlay」の変化を示しています。

また、以下の画像のBのように「Primary color」や「Secondary color」を適用した「Surface」では、「半透過のホワイトのOverlay」は適用しないルールとなっています。

A. 5% のoverlay：1dp のelevationのカード
B. overlayなし：secondary colorを使用した 6dpのelevationのFAB
C. 12%overlay：8dpのelevationのボタン

アクセシビリティとコントラスト

Dark themeの「Surface」と「Surface」上の白いテキストのコントラスト比は、少なくとも「15.8：1」の比率を保持する必要があります。
そうすることによって、最も「Elevation」が高い状態でも、WCAG Standardsの「AAレベル」である「4.5：1」のコントラスト比を保持することができます。

「Surface」に対して「Primary color」を適用する場合は、「#121212」の「Surface」に対して、「半透過のPrimary colorのOverlay」を適用させます。「#1F1B24 」は、Dark themeのSurfaceカラー「#121212 」と、 8% の「Primary color」を組み合わせた色です。

また、「Surface」の「Elevation」が最も高いとき、「Surface」と「Surface」上のテキストとのコントラスト比は少なくとも「4.5：1」以上であることを確認してください。

上部の「Dialog」のコントラスト比は「AAレベル」を満たしていますが、下部の「Dialog」の本文テキストのコントラスト比は「AAレベル」を満たしていません。

Dark themeのカラー

繰り返しになりますが、「Dark theme」のカラーは、十分なコントラスト比で表示する必要があり、少なくとも「WCAG(Web Contents Accessibility Guideline) Standards」の「AAレベル」である「4.5：1」のコントラスト比に準拠する必要があります。

アクセシビリティのための彩度の低い色

「Dark theme」では、彩度の高いカラーの使用を避ける必要があります。
理由は、「WCAG Standards」の「AAレベル」に準拠しないことに加え、眼精疲労を誘発する可能性がある為です。
彩度の高いカラーの代わりに、彩度の低いカラーの使用を検討してください。

暗い背景に対して、彩度の高い色を使用すると、読みにくくなってしまうため避けてください。

Primary color

「Dark theme」における「Primary color」では、基本的に「200番」のカラーを使用します。（少なくとも 4.5:1 という WCAG の AA 基準に準拠しています)

また、以下の画像の「Snack bar」の様に、明るい色の「surfaces」の上には、彩度の高い色を表示することができます。

「Snack bar」の「Primary color」として「パープルカラーの700番(#3700B3)」を使用しています。

Secondary color

「Dark theme」における「Secondary color」では、通常の「Secondary color」と同様に「アクセントカラー」として使用することができます。
（この時も、少なくとも 4.5:1 という WCAG の AA 基準に準拠する必要があります)

そして、「Primary color」と同様で基本的には「200番」のカラーを使用します。

Accent color

「Dark theme」における「Accent color」は、「Primary color」と「Secondary color」の考え方と基本的に同じで、重要な要素を目立たせる為に使用します。
また、デフォルトの「theme」では 900 ～ 500番の色を使用しますが、「Dark theme」では200 ～ 50番を使用することが推奨されています。

(左)彩度の低い色(200 ～ 50 の範囲の色) は、「Dark theme」での読みやすさが向上します。
(右)彩度の高い色は、「Dark theme」では読みにくくなってしまうので使用しないでください。

Brand color

「Dark theme」では、ブランドイメージを保持するために、「Primary color」とは別に、「Brand color」を使用することができます。
「Brand color」を使用する際は、ロゴやブランドのボタンなど、使用する箇所を1 〜2 つに絞って使用することで、ブランドイメージをより際立たせることができます。(使用しすぎないように注意が必要です。)