話題のUIデザイン「ダークモード」作成のポイントを徹底解説！カラーパレットは「機能ごと」「最小限」に

2019年9月、Android10とiOS13がリリースされ、「ダークモード（ダークテーマ）」の認知が世間に広まってきました。

そんな中でUIデザイナーは、Webサイトやアプリをダークモード対応させるよう、依頼されるケースが増えてきています。

この記事では、ダークモードのUIデザイン作成に関するコツをご紹介します。

▲TripItのダークモードの初期ドラフト（出典：Muzli）

そもそも、ダークモードとは？

ダークモードとは、最低限のカラーコントラスト比を確保しつつ、デバイススクリーンからの発光量を削減する機能です。ダークモードに設定すると、「暗いカラー」と「明るいカラー」の要素が入れ替わります。

ダークモードにより、以下のメリットが期待できます。

• 目の疲れを軽減させる
• 暗い環境でもスクリーンを見やすくする
• ユーザーの好みに合わせてカスタマイズされたUXを提供できる
• 「光に対して繊細な人」にも便利なユニバーサルデザインを提供できる
• バッテリーの消費量を削減する

とくにOLEDスクリーンのデバイスの場合は、ダークモードにより黒いピクセル部分を「そもそも発光させない」ため、消費電力を大幅に削減できます。

ダークモード対応させるための、カラーパレットの決め方

ダークモードは、ライトモード（通常モード）よりも色合いのニュアンスに気をつける必要があります。

ライトモードのテキストは、「ダークグレー」と「ライトグレー」など2色を使用してテキスト内容の重要度に差をつけて表現するケースがあります。しかしダークモードはそれが難しく、コントラスト比や読みやすさを配慮すると、ほとんどが白のテキストとなります。そのためダークモードの色使いに合わせて、ライトモードの色合いも同時に調整する必要があるのです。

▲出典：Muzli

カラーパレットを決めるときは、以下の2点に気をつけましょう。

ポイント1. デフォルトのカラーパレットは「機能」ごとに定義する

カラーパレットは、ライトモードもダークモードも、機能に合わせて16進数（HEX）で表現しましょう。

対となるカラーを設定できれば、ダークモードとライトモードの切り替えがスムーズになります。こうすることで、開発時に混乱が生じにくくなります。

▲出典：Muzli

ポイント2. 使用色は最低限に

ライトモードのカラーパレットがシンプルであればあるほど、ダークモードのデザインは楽になります。そのため、使用するカラーは最低限に留めましょう。以下が最低限のカラーパレット例となります。

• スクリーン背景色：
  例えばライトモードでは淡いグレーに、ダークモードでは暗いブルーに設定します
• レイヤー背景色：
  コンテンツのレイヤーに使われる背景色。スクリーンの何もないキャンバスと、コンテンツの乗っている背景色を区別するために設定します
• サブレイヤー背景色：
  セクションのヘッダーなどに使われる背景色。ブロックごとにコンテンツを区別でき、内容のヒエラルキーを分かりやすく表現するのに役立ちます
• アクションカラー：
  クリックなど、何らかのアクションができるコンテンツに使われるカラー。ライトモードとダークモードで濃淡の差をつけても良いですが、大幅に変える必要はありません
• メインテキストカラー：
  ライトモードでは黒、ダークモードでは白を使用するのが無難です
• サブテキストカラー：
  サブテキストカラーは注意が必要です。ライトモードでは、メインとサブで濃淡をつけて重要度に差をつけられるのに対し、ダークモードではサブテキストにもメインテキストカラーと同じ白を使用せざるを得ないケースが多いです

▲出典：Muzli

一方で「ステータスカラー」や「非アクティブカラー」など、特定の目的があるものや、強調したいコンテンツには、ライトモード／ダークモード共通の色を使用するのがおすすめです。

しかし、あくまでシンプルなカラーパレットを心がけ、最低限の色をベースに使うようにしましょう。

まとめ

ダークモードのためのデザインシステムを考えるのは、チームにとってよい経験となるはず。

またダークモードのデザインは、ユーザーの満足度も間違いなく向上させるでしょう。開発するときはカラーに捉われるのではなく、16進数（HEX）で規定された、対となるカラーを定義するのを忘れずに。

機能を重視した定義づけをすることで、ライトモードとダークモードの切り替えが圧倒的にスムーズになり、UXも向上します。

（執筆：Kat Angeles　翻訳：Sugita Mariko　編集：Sansui Riho）