UIデザインガイドライン

マテリアルデザイン|No.16-1/2:Dark theme|日本語解説

この記事から得られること

この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Dark theme(ダークテーマ)」の概要について学ぶことができます。

なお、この記事は「約7〜10分」で読める内容となっています。

Material Design : Design section “Dark theme”
URL:https://material.io/design/color/dark-theme.html

この記事の前提

この記事では、私が実際に「マテリアルデザイン」を読んだ経験から「理解しておくべき基本的な内容」を抜粋して紹介しています。

また、マテリアルデザインで使用されている専門用語は「英語のまま」使用しています。
理由は、日本語に翻訳しますと不自然な表現となるためです。
少し読みにくい部分もあるかもしれませんが、ご了承ください。

また、この記事は、記事上の各画像を細かく見ていただくためにも「パソコンでの閲覧」を推奨していますが、「スマホのブラウザ」でももちろん閲覧可能です。

なお、この記事を読み進めるなかで、もし分からない専門用語が多い場合は、「マテリアルデザイン」ガイドラインの最初の「概要編」の記事から順番に読み進めることをおすすめします。

マテリアルデザイン|No.00:概要と構成|日本語解説この記事では、Googleが提供しているUIデザインガイドライン「マテリアルデザイン(Material Design)」の概要と、そのコンテンツ構成について学ぶことができます。...

“Dark theme”の目的とは?


出典:Material Design : Design section “Dark theme”
URL:https://material.io/design/color/dark-theme.html

マテリアルデザインにおける「Dark theme」の目的は、UIのコントラスト比を維持しながら、画面の輝度を下げることを目的としています。

さらに、デバイスのバッテリーの節電や、目の疲れの軽減なども目的としています。

なお、UIを表示するデバイスのディスプレイが「有機ELディスプレイ(OLED)」の場合、画面の輝度によって消費電力が変わるため、「Dark theme」によって画面輝度を下げることによる節電効果が期待できます。

それでは「Dark theme」の具体的なルールについて解説します。

“Dark theme” の切り替え方法


出典:Material Design : Design section “Dark theme”
URL:https://material.io/design/color/dark-theme.html#behavior

「Dark theme」にはON/OFFの切り替え設定を設ける必要があります。

上の図では、「App bar」上にON/OFFアイコンを用意することによって、「Dark theme」のON/OFFを切り替えることができます。


出典:Material Design : Design section “Dark theme”
URL:https://material.io/design/color/dark-theme.html#behavior

上の図では「Overflow menu」内に「Dark theme」と「Light theme」の切り替え設定を設けています。


出典:Material Design : Design section “Dark theme”
URL:https://material.io/design/color/dark-theme.html#behavior

そのほかにも、上の図のように、設定内に「Dark theme」のON/OFFスイッチを設ける方法もあります。

“Dark theme” の “Surface”


出典:Material Design : Design section “Dark theme”
URL:https://material.io/design/color/dark-theme.html#properties

「Dark theme」の「Surface」のカラーは「完全なブラック」ではなく、「ダークグレー」カラーを使用します。

具体的なカラーは、上の図の通り「#121212」のダークグレーを使用しています。

なお、「Surface」について詳しく学びたい方は、こちらの記事も合わせてご確認ください。

マテリアルデザイン|No.01:Surfaces|日本語解説この記事では、Google社提供の「マテリアルデザイン」ガイドラインにおける「Surface(サーフェス)」という概念の「デザイン概要」「Surfaceの種類」「見え方のルール」「変形のルール」「動き方のルール」などを学ぶことができます。...

「Surface」上に「ホワイトカラー」のテキストを表示する場合、この「ダークグレー」の方が「完全なブラック」よりもコントラスト比が低いため、目の疲れを軽減する効果があります。


出典:Material Design : Design section “Dark theme”
URL:https://material.io/design/color/dark-theme.html#properties

また、「Dark theme」の「Surface」は、上の図のように①の「Surface」上に②の「半透過のホワイトのOverlay」を重ねることによって構成されています。

そして「半透過のホワイトのOverlay」は「Surface」の輪郭を明確にする効果もあります。


出典:Material Design : Design section “Dark theme”
URL:https://material.io/design/color/dark-theme.html#properties

また、「Surface」は「Elevation」が高くなるほど(つまり光源に近づくほど)、「Surface」上の「半透過のホワイトのOverlay」が明るくなることによって、より明るく見えるようになります。

上の図は、「dp」別の「Elevation」による「半透過のホワイトのOverlay」の変化を示しています。

そして「半透過のホワイトのOverlay」の変化率は「0%」から「16%」の間で変化します。

また、「Primary color」もしくは「Secondary color」を適用した「Surface」には、「半透過のホワイトのOverlay」は適用しないルールとなっています。

なお「Elevation」について詳しく学びたい方は、よろしければこちらの記事もご確認ください。

マテリアルデザイン|No.02:Elevation|日本語解説この記事では、Google社提供の「マテリアルデザイン」ガイドラインにおける「Elevation(高さ)」の概念について学ぶことができます。...


出典:Material Design : Design section “Dark theme”
URL:https://material.io/design/color/dark-theme.html#properties

上の図は「Dark theme」を適用したUIの例です。

「B」の「Floating Action Button」に対しては「Secondary color」を適用しており、「半透過のホワイトのOverlay」は適用していません。


出典:Material Design : Design section “Dark theme”
URL:https://material.io/design/color/dark-theme.html#properties

なお、「Elevation」を表現するために、「Shadow」の代わりに、上の図のような「Light glow」を使用することは禁止されています。


出典:Material Design : Design section “Dark theme”
URL:https://material.io/design/color/dark-theme.html#properties

「Dark theme」の「Surface」と「Surface」上のホワイトカラーのテキストのコントラスト比は、少なくとも「15.8:1」の比率を保持する必要があります。

そうすることにより一番「Elevation」が高い状態でも、「WCAG Standards」の「AAレベル」である「4.5:1」のコントラスト比を保持することができます。

また「Surface」に対して「Primary color」を適用する場合は、「#121212」の「Surface」に対して、「半透過のPrimary colorのOverlay」を適用させます。

上の図ではパープルカラーである「#1F1B24」を「Primary color」として、「8%の半透過のOverlay」にし、「Surface」に適用させています。


出典:Material Design : Design section “Dark theme”
URL:https://material.io/design/color/dark-theme.html#properties

少し繰り返しとなりますが、「Surface」の「Elevation」が最も高いとき、「Surface」と「Surface」上のテキストとのコントラスト比が少なくとも「WCAG Standards」の「AAレベル」である「4.5:1」以上であることを確認してください。

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

まとめ


出典:Material Design : Design section “Dark theme”
URL:https://material.io/design/color/dark-theme.html

マテリアルデザインでは、UIのコントラスト比を維持しながら、画面の輝度を下げることを目的とした「Dark theme」のデザインルールが規定されています。

デバイスのディスプレイが「有機ELディスプレイ(OLED)」の場合、「Dark theme」によって節電効果もあるため、UIを検討する際は、この「Dark theme」も検討することをおすすめします。

また、この章はボリュームが多いため、「Dark theme」の残りの内容は別の記事で解説します。

最後までお読みいただきありがとうございます。
今回の記事は以上です。

この内容がみなさんのUIデザインの勉強になりましたらうれしいです。
引き続き、UIデザインの勉強を一緒にしていきましょう。

続きを学びたい方は

なお、「マテリアルデザインの続き」を学びたい方は、よろしければこちらの記事もご確認ください。

次のガイドラインを学びたい方は
マテリアルデザイン|No.16-2/2:Dark theme|日本語解説この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Dark theme(ダークテーマ)」の概要について学ぶことができます。...

一つ前のガイドラインを学びたい方は
マテリアルデザイン|No.15:Text legibility|日本語解説この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Text legibility(テキストの読みやすさ)」の概要について学ぶことができます。具体的には、テキストを読みやすくするためのカラーの活用方法を学ぶことができます。なお、この記事は「約6〜9分」で読める内容となっています。...

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA