1. 概要
Google I/O 2019 で、マテリアル デザインは、プロダクトの既存のマテリアル テーマを補完するダークモードを作成するためのガイダンスを導入しました。ライトモードは長文の読書に適しており、コントラストがはっきりして読みやすいですが、ダークモードは輝度が低いため、暗い場所での目の疲れを軽減できます。
マテリアルでは、ダークテーマはデフォルトのライトテーマの補完モードとして使用するように設計されており、ニュアンスのある夜間モードのプレゼンテーションを通じて、アプリの独自のアイデンティティ（色、シェイプ、タイプ、標高のスタイルなど）を維持します。
このデザインラボでは、マテリアル スタディの 1 つを使用して、既存のマテリアル テーマに基づいてダークモードを作成するために必要な手順について説明します。
ここでは、明瞭さ、読みやすさ、直感性、使いやすさを重視して設計されたメールアプリ「Reply」を使用します。Reply のアイデンティティを把握し、アプリ内のブランド モーメントを維持しながら、ダークモードでも快適なテーマを作成できるよう慎重に判断します。
また、テーマをさらに推し進め、基本的なダークテーマを超えたカスタム サーフェス カラーを使用して、返信のユニークな個性を再強調します。
必要なもの:
2. 必要なファイルを集める
まず、Figma スターター ファイルをダウンロードする必要があります。このファイルには、デザインラボに必要なものがすべて含まれています。
- DarkTheme DesignLab Kit.fig（7.6 MB）をダウンロード
3. 環境を設定する
次に、デザイン環境をセットアップする必要があります。
まず、Figma にログインするかアカウントを作成します。
ログインしたら、前の手順でダウンロードしたファイルをインポートします。これを行うには、Figma ファイル画面の左上にある [import file]（ファイルをインポート）アイコンを見つけて、[Downloads]（ダウンロード）フォルダにあるファイルを探します。
ファイルを見てみると、これには、ライトモード、アプリのブランドに基づく事前構築済みのトーンパレット、作成する最終的なダークモードのコピーが含まれています。
- 別のタブで、ダークモードに関するマテリアル デザイン ガイダンスを開きます。このガイドラインは、デザインラボ全体で参照します。
4. プロダクトの ID を理解する
Reply のダークモードの作成を開始する前に、Reply のブランド特性をいくつか理解しておく必要があります。これにより、ライトモードとダークモードの両方で Reply のアイデンティティとブランドを常に表現できるように、テーマについて十分な情報に基づいて選択できるようになります。
Reply のブランドはコミュニケーションを重視しています。アプリは機能的な品質を優先し、機能的な目的のないデザイン要素よりも使いやすさを重視しています。
このデザインラボでは、Reply のブランド表現で最も重要な要素は色、タイプ、シェイプです。
色
Reply のカラーテーマでは、濃い青灰色のプライマリ カラーとオレンジがかった黄色のセカンダリ カラーが組み合わされています。
セカンダリ カラーはほとんど使用されないため、Reply の UI はプライマリ カラーのバリエーションを使用したモノクロームであることが多いです。この控えめなカラーテーマにより、コンテンツを邪魔されることなく簡単に読んだり、写真のアバターを簡単に確認したりできます。
そのため、Reply のセカンダリ カラーは、使用される場所で大きな影響を与え、重要なアクションを強調し、アプリ全体でブランドの瞬間を明確に表現します。
タイプ
テキストベースのコンテンツと効率性を重視するアプリとして、Reply のアイデンティティを表現するうえで、書体とタイポグラフィは中心的な役割を果たしています。アプリは、Work Sans を完全なタイプスケールとして使用し、Light、Regular、Medium、SemiBold、Bold の 6 つのウェイトを取り入れたさまざまなスタイルを使用しています。
Work Sans からタイプスケール全体を構築することで、Reply は一貫性があり予測可能な、オーガニックで読みやすいタイポグラフィを実現しています。
Work Sans のデザイナーである Wei Huang 氏によると、このファミリーは画面での使用に最適化されています。そのため、メールなどのコンテンツのテキストを効率的に読むのに最適です。初期のグロテスク体の形式を緩やかにベースにしているため、やや親しみやすく人間的な美しさを感じさせます。また、トラッキングを広めに設定することで、読みやすさを高めています。
図形
Reply は、丸みを帯びたコンポーネントとシャープなコンポーネントを組み合わせて、メールリストの効率性と機能性を強調しつつ、主要なアクションや大きなコンポーネントにソフトな印象を与える、ニュアンスのある形状のストーリーを持っています。
- 小さなコンポーネント
- 中程度のコンポーネント
- 大規模なコンポーネント
ボタンや FAB などの小さなコンポーネントは完全に丸みを帯びていますが、メールカードやボトムアプリバーなどの中程度のコンポーネントは完全に角張っています。アカウント切り替えやボトムシートなどの大きなコンポーネントの角はわずかに丸みを帯びています。
これらの形状を組み合わせることで、ユーザーはアプリ内の現在地、各コンポーネントのコンセプト、インターフェースの他の部分との関係をより深く理解できます。
5. 色の取り扱い
Reply のデフォルトのライトモードで色がブランドの表現にどのように関連しているかを把握することで、使用可能で表現力豊かなダークモードのパレットを調整できます。
マテリアルでは、カラーステムは色調パレットに基づいています。これらのパレットでは、ブランドカラーを使用して、アプリ全体に適用される包括的なカラーステムで調和のとれたバリエーションのセットを作成し、スタイルと視認性を確保します。
Figma ファイルで、Reply のプライマリとセカンダリのトーンパレットを確認できます。各パレットの上にある明るい矢印は Reply のライトテーマで使用される値を示し、暗い矢印はダークテーマで使用されるバリエーションを示しています。
マテリアルでダークモードを作成する際は、カラーシステムが表現力を維持し、目に負担をかけずに適切なコントラストを維持できるように、明るいバリエーションが選択されます。彩度の高い色は、暗い背景に対して視覚的に「振動」する傾向があり、読みにくくなります。明るいトーンは、エレベートされたサーフェスの色を変化させる際の柔軟性も高めます。これについては、後ほど詳しく説明します。
6. サーフェスの色を調整する
Reply の色調パレットとダークモードで使用する色を把握できたので、モックアップで色の値を調整していきます。
マテリアルのダークモードでは、インターフェースの最下層は通常、16 進数値 #121212 の濃いグレーです。
- Figma ファイルで、「Reply Starter」というアートボードを見つけて、「Background」というレイヤを選択します。
- 画面右側のインスペクタ パネルの [塗りつぶし] で、色の値を 121212 に設定して Return キーを押します。
- アートボードは次のようになります。
Reply のモノクロームの受信トレイ ビューでは、メールカードの色は背景色よりもわずかに明るくなっています。受信トレイの視覚的な階層を維持するため、ダークモードのカードにも同じ処理を施す必要があります。
- 同じアートボードで、[Email cards] というグループを開き、[Email card.] というレイヤをすべて選択します。
- これまでと同様に、インスペクタ パネルで [塗りつぶし] の値を選択します。値を 121212 に設定して、Return キーを押します。
- 次に、[Email card overlay.] という名前のレイヤのみを選択します。これらのレイヤを使用すると、メールカードを背景と区別するオーバーレイを作成できます。
- レイヤーに塗りつぶしを適用し、不透明度を 2% にして FFFFFF にします。
メールカードが暗くなったため、テキストが読めなくなっています。次はテキストの色について説明します。
7. テキストの色を調整する
ダークテーマのテキストの色を理解するには、マテリアル デザイン システム全体でテキストに色がどのように適用されるかを理解することが重要です。
マテリアル コンポーネントでは「on」色の概念を定義しています。これは、プライマリ、セカンダリ、サーフェス、背景、エラーの色を使用するコンポーネントやキー サーフェスの「上」に表示される色であるため、このように呼ばれます。「オン」の色は主にテキストに使用され、これらのサーフェスでテキストが読みやすいようにします。
マテリアルのデフォルトの「オン」の色は白（#FFFFFF）と黒（#000000）です。黒または暗い「on」色は暗いサーフェスには適さないため、白を使用します。
この「on」色でテキストの階層を確立するシステムはシンプルです。強調テキストの不透明度は 87%、中程度の強調テキストは 60%、無効なテキストは 38% です。
優先度の高いテキストが純粋な白ではないのは、ステップ 5 で説明したように、明るい色である #FFFFFF は暗い背景に対して視覚的に「振動」するためです。また、暗い背景に純粋な #FFFFFF のテキストを使用すると、テキストの光が暗い背景ににじんだりぼやけたりして、視認性が損なわれる可能性があります。
以上のことを踏まえて、ダークモードのテキストの色を修正しましょう。
- スターター レイアウトのすべてのテキストは、簡単にアクセスできるようにグループ化されています。[Inbox text] というグループを見つけて展開し、構成するすべてのレイヤを表示します。
- 「Hi -" で始まるレイヤをすべて選択します。これらはレイアウト内の強調表示されたテキストです。
- インスペクタ パネルで、[塗りつぶし] を FFFFFF に設定し、不透明度を 87% に設定します。
- [Inbox text] グループに戻り、「Med -」で始まるすべてのレイヤを選択します。
- インスペクタ パネルで、[塗りつぶし] を FFFFFF に設定し、不透明度を 60% に設定します。
8. コンポーネントの色を調整する
マテリアルで構築されたダークモードでは、エレベーションの高いサーフェスとコンポーネントはオーバーレイを使用して色付けされます。サーフェスがより高い位置にあるほど、オーバーレイはより強く、明るくなります。これは、背景が暗すぎて暗い影を確実に表現できない場合に、標高と階層を伝える方法です。
ボトム アプリバー
返信のボトムアプリバーは、受信トレイの UI の他の部分よりも上に表示されるため、微妙なオーバーレイを適用します。
- レイヤリストで [Bottom app bar] というグループを見つけて展開し、構成レイヤを表示します。
- そのグループ内の [Surface] というレイヤを見つけ、その [塗りつぶし] の値を 121212 に設定します。
- その上のレイヤ（Surface overlay）を見つけ、塗りつぶしの値を FFFFFF に、不透明度を 12% にします。
フローティング操作ボタン
次に、FAB に新しい色を適用します。そのためには、先ほど見た色調パレットに戻り、Reply のセカンダリ カラーの 700 の値を取得します。
必要に応じて、アプリ内の影響力の大きい小さなコンポーネントには、基盤となる色とのコントラストが適切に保たれる範囲で、彩度を少し高めた色を選択することもできます。このオプションについては、後のステップで説明します。
- レイヤのリストで FAB というグループを見つけ、展開して構成要素を表示します。
- [Surface] レイヤを見つけて選択します。塗りつぶしを FCC13B に設定します。
選択したカード
同じ効果的なオレンジがかった黄色が、返信の受信トレイで選択したメールカードの隅にも表示されます。これもブランドを強く意識した瞬間ですが、コンポーネント、サーフェス、テキストにうまく収まりません。
このような場合は、セカンダリ バリアント カラー（この場合は #FFFBE6）から始めて、Reply の機能的な美しさを損なうことなく、適切に表現できる色を見つけるのが最善です。[Reply] では、通常のセカンダリ バリエーションを使用できます。
- Earmark というレイヤを選択し、塗りつぶしを FFF5A0 に設定します。
9. さらに一歩進んで: カスタム サーフェス
前述のとおり、Reply のフローティング アクション ボタン（FAB）は、アプリのブランドを強く表す、強調度の高いコンポーネントです。そのため、Reply のダークモードでは、Reply の元のセカンダリ カラーを使用して、このコンポーネントの色表現を維持することにしました。
- レイヤのリストで FAB というグループを見つけ、展開して構成要素を表示します。
- [Surface] レイヤを見つけて選択します。塗りつぶしを F9AA33 に戻します。
また、Reply のプライマリ カラーを、下部のアプリバーとメールカードのカスタム サーフェス カラーとして戻すこともできます。これを行うには、参照してきた色調パレットで示されている暗いプライマリ カラーを使用するようにオーバーレイを変更するだけです。
- レイヤリストで [Bottom app bar] というグループを見つけて展開し、構成レイヤを表示します。
- Surface overlay というレイヤを見つけ、新しい塗りつぶしの値として 344955 を指定し、不透明度を 48% にします。これにより、十分なコントラストを維持しながら、ブランドカラーをより強く表現できます。
- レイヤのリストで [Email card overlay] というレイヤを見つけて、すべて選択します。
- 塗りつぶしを ADC0CB に設定し、不透明度を 4% に設定します。
10. まとめ
マテリアルでは、ダークテーマはライトテーマで表現されたプロダクトの固有のアイデンティティを慎重かつ意図的に拡張したものです。色と標高の表現方法を簡単に調整するだけで、最初のマテリアル ダークモードを正常に作成できました。おめでとうございます！
このデザインラボの手順は、独自のプロダクトのダークモードを理解し、定義するためのフレームワークと捉え、ブランドとプロダクトのプロパティと目標を常に念頭に置いてください。
ダークモードに関するその他のガイダンスについては、ダークモードに関するマテリアル デザイン仕様をご覧ください。
不明な点がある場合は、Twitter の @MaterialDesign までいつでもお気軽にお問い合わせください。
その他のデザインに関するコンテンツやチュートリアルについては、Google Design YouTube チャンネルをご覧ください。