脚光を浴びる：ダークUIデザインの原則

暗いUIデザインは、モバイル画面から大規模なTVまで、広範囲にわたって見られます。 ダークテーマは、パワー、ラグジュアリー、洗練、エレガンスを表現できます。 ただし、ダークUIの設計には複数の課題があり、実装が不十分な場合は期待に応えられません。 「ダークサイド」に飛び込む前に、設計者は飛躍する前に目を向ける必要があります。

物理学者は、黒は実際には色ではないと言います。 それは光の欠如です。 アイザックニュートン卿は、プリズムを通して太陽光を照らす彼の実験では、それを色のスペクトルに含めていませんでした。

色彩心理学では、ほとんどの色は人によって異なるものを表しています。 西洋文化では、黒はしばしば死、謎、そして悪と関連付けられています。 緑は自然のために成長と関連していることがよくあります。 青は空と水に関連しているため、ほぼ普遍的に落ち着きます。 色は感情的です。

他の効果は文化的です。 たとえば、多くの古代文化では、紫色の染料は高価で希少であり、王族だけがそれを買う余裕があったため、紫色は依然として贅沢と関連付けられています。 それは、人間の精神の一部になるのに十分長い間、文化的な時代精神の重要な部分でした。

パワー、エレガンス、ミステリーに関連する暗いUIを備えたデジタル製品は、手ごわいトレンドです。 ダークモードは目の疲れを軽減できるとよく言われますが、これが真実であるという証拠はありません。 特定の状況下では、バッテリーの寿命を節約することもできます。 それでも、多くの場合、暗いテーマは審美的な選択です。

ダークUIとライトUI

すべてのインターフェースがダークテーマに適しているわけではありません。 デザイナーは、ブランドの適合性、文化的適合性、色彩心理学を検討し、感情的な影響を考慮してから選択する必要があります。 それはトリッキーなバランスを取る行為です。

ミレニアル世代を対象とした金融アプリは、ダークテーマでクールな要素を実現する可能性がありますが、一般の人々を対象とした大手銀行のWebサイトには不適切な場合があります。 金持ちすぎ、暗すぎ、スタイリッシュすぎると、残高を確認して請求書を支払うだけの人がやりたいと思うと、いらいらするかもしれません。

B2BSaaSアプリケーションのダークUIは設計が難しいことで有名です。 データテーブル、ウィジェット、フォーム、ドロップダウンなどの標準のWeb UIコンポーネントは、暗いUIでは奇妙に見える場合があります。 多くの配色は暗いUIではうまく機能しないため、特定のブランドや製品は、タイプ、コンテキスト、および環境要因に応じて、適切ではなく、克服できない課題となる可能性があります。

これまでダークUIデザインを使用したことがなく、両足でジャンプすることにしたデザイナーは、荒れた未知の海にいることに気付くかもしれません。 暗いUIの海では、規範が曲がり、ルールが変更され、落とし穴がたくさんあります。

とはいえ、ダークUIを使用する理由はたくさんあります。

• デザインがまばらでミニマリストで、コンテンツタイプが少ない場合
• 夜間のエンターテインメントアプリなど、状況や用途に適している場合
• 印象的でドラマチックな外観を作成するには

また、推奨されないシナリオがあります。

• テキストが多い場合（暗い背景で読むのが難しい）
• 混合コンテンツタイプが多い場合
• デザインが幅広い色を必要とする場合

ダークUIデザインのコントラスト

ダークテーマはブラックテーマではありません。 それは「ローライト」テーマとして考えるのが一番でしょう。 暗いUIの主な懸念事項の1つは、十分なコントラストを実現して、視覚要素に分離を持たせ、テキストを読みやすくすることです。 ほとんどの設計者は、強いコントラストを実現するには黒を使用するのが最適だと考えています。 ただし、背景や表面の色には真の黒（＃000000）を使用しないことをお勧めします。 黒は他のUI要素用に予約し、控えめに使用するのが最適です。 たとえば、真の黒は小さなUI要素や周囲のベゼルに使用できます。

Googleのマテリアルデザインダークテーマでは、ダークグレー（＃121212）をダークテーマの表面色として使用することを推奨しています。これは、「より広い範囲の奥行きのある環境で標高と空間を表現するため」です。 さらに、多くのデザイナーは、配色を定義するときに、ダークグレーに微妙なダークブルーの色合いを追加することを推奨しています。 これは、デジタル画面の暗い色調をより良くし、より心地よい暗いUIカラーパレットを作成する傾向があります。

グレーの範囲を使用する利点は、より広い範囲の色を表現できるため、デザイナーに自由度を与えることです。 灰色のパレットは、ドロップシャドウが灰色に対してより簡単に見られるため、奥行きを作成するのにも役立ちます。

暗いUIのテキストのコントラストには特に注意を払う必要があります。

Webコンテンツアクセシビリティガイドライン（WCAG）は、コントラスト比が少なくとも3：1である必要がある大規模なテキストを除いて、「テキストの視覚的表現は少なくとも4.5：1である」ことを求めています。 したがって、設計者は、コンテンツがダークモードで快適に読みやすい状態を維持できるようにする必要があります。

また、さまざまなディスプレイやデバイスのカード、ボタン、フィールド、アイコンなど、他のUI要素間の適切なコントラストをテストすることもお勧めします。 UI要素の間に知覚できないほどの分離がある場合、デザインが混ざりすぎて鈍くなるリスクがあります。

注目の焦点：色

暗いUIでは色が目立ちます。 明るい、不飽和のアクセントカラーのスキームを使用するのが最善です。 暗いUIで彩度の高い色を使用することは避けてください。暗い表面に対して視覚的に振動する可能性があるため、 さらに、ベストプラクティスとして、テキストで使用する場合、色はWCAGのAA標準である4.5：1以上に合格する必要があります。

暗いUIの配色を定義する場合、暗い表面に使用できるスペースの大部分を維持するために、限られた数の色のアクセントをお勧めします。 分割された補色を使用すると役立ちます。 このスキームには、1つのドミナントカラーと、ドミナントカラーの補色に隣接する2つのカラーがあります。 これを行うと、補色スキームの緊張なしに必要なコントラストが得られます。

適切な配色は、優れたコントラストを作成するのに役立ちます。 Colorableは、テキストと背景色のアクセシビリティ準拠の色の組み合わせを選択するための便利なツールです。

テキストやボタンやアイコンなどの重要な要素は、暗い背景に表示するときに読みやすさの基準を満たす必要があります。 上記のJabraSound+アプリに見られるように、テキストとアイコンには白以外の色を使用できます。

Googleのマテリアルデザインサイトには、デザイナーがカラーパレットを作成してUIに適用できる便利なカラーパレットジェネレーター（「色を選択するためのツール」の下）があります。 色の組み合わせのアクセシビリティレベルは、コンパニオンカラーツールを使用して測定することもできます。

「読みやすさを向上させるために、コントラストの強い色を使用してください。 フォントのサイズと太さ、色の明るさ、画面の解像度、照明条件など、多くの要因が色の認識に影響を与えます。」 Appleヒューマンインターフェイスガイドライン

少ないほど多い：ネガティブスペースの活用

ダークUIデザインを成功させるための基本的な要素の1つは、ネガティブスペースを巧みに使用することです。 設計が不十分な場合、UIが暗いと、デジタル製品が重くて圧倒的に見える可能性があります。 バランスをとるために、設計者は、まばらでミニマリストなデザイン内のネガティブスペースを利用することで、暗いUIをより軽量にすることができます。 ミニマリストのデザインは、そこにないものとあるものと同じくらい重要です。 ネガティブスペースを上手に使用すると、暗いUIがスキャンしやすくなり、人々が情報をより簡単に吸収できるようになります。

フランスの作曲家クロード・ドビュッシーはかつて「音楽は音符の間の空間です」と言っていました。 スキャン可能性についても同じ感情が当てはまります。要素間の負のスペースがレイアウトを機能させるものです。 UI要素の周りに十分な量のネガティブスペースがあることが、UI要素を定義するものです。 重要なコンテンツを強調し、デザインが密集して雑然と感じないようにするために必要な呼吸スペースを提供します。 呼吸スペースがないと、人間の脳は関心のあるポイントをスキャンする可能性が低くなり、さまよう可能性が高くなります。

あまりにも多くの要素とテキストが詰め込まれたインターフェースは、高品質のダークUIデザインの悩みの種です。 暗いUIの視覚的な階層を注意深く検討することで、デザイナーは自分の作品をより簡単にスキャンできるようにし、ユーザーエクスペリエンスを向上させることができます。

スタイリングワード：タイポグラフィ

暗いUIのすべてのテキストは、精査する必要があります。 懸念事項は2つあります。読みやすさとコントラストです。 まず、それはサイズについてです。 テキストは、読みやすくするために十分な大きさである必要があります（暗い背景の小さなテキストは読みにくくなります）。 次に、テキストと背景の間に十分なコントラストが必要です。

何千ものデジタルフォントが利用できるため、ヘッダーやヒーローメッセージに影響を与えるメッセージを簡単に表示できます。 設計者は、コントラストを上げ、フォントサイズ、文字間隔、および小さいテキストの行の高さを調整することで、読みやすさの問題を軽減できます。

通常サイズのテキスト（太字でない場合は18ポイント未満）に対するW3C AAAの推奨事項は、コントラスト比を少なくとも7：1にすることです。 これは、他のUI要素（アイコン、テキストの画像、ボタンラベルなどのテキストラベル）にも当てはまります。 すべてのデジタル製品に誰もがアクセスできるようにするのは、設計者の責任です。 それは使いやすさを改善するだけでなく、したがってUXを改善するだけでなく、ほとんどの国の法律です。

デザイナーが暗いUIでうまく機能する優れた書体を調達するために利用できるオプションは無数にあります。 Google Fonts、Font Library、Adobe Typekitは、アプリやサイトの統合が簡単で、幅広い選択肢を提供するいくつかの製品です。

コミュニケーションの深さ：標高

暗いテーマはフラットを意味するものではありません。 明るいテーマでは、イルミネーション、シェーディング、シャドウが奥行き感を生み出します。 暗いUIの場合、色のアクセントがまばらな暗い表面が主に含まれているため、より困難です。 それでも、設計者は、深さを伝えるために、テキストに対応する配色で3つまたは4つのレベルの標高を使用できます。

なぜ深さ？ 最新の設計システムのほとんどは、標高レベルのシステムを使用して深度を伝達します。 奥行き感は自然界に対応しています。 私たちのビジョンには奥行きのある知覚があり、私たちは3Dの世界に住んでいます。 深さは、インターフェイスの視覚的な階層を強調するのに役立ちます。 たとえば、前景の要素は、警告ダイアログなど、それ自体に注意を向けます。

さまざまな標高レベルを示すために、サーフェスの照明が異なります。 標高スタック内のサーフェスの位置が高いほど（暗黙の光源に近い）、サーフェスは明るくなります。 表面が明るいほど、コンポーネント間の標高を区別しやすくなり、影が見えやすくなり、各表面のエッジがより明確になります。

各レベルの表面の色を工夫するには注意が必要です。 4つまたは5つを超えるレベルを持たないことが最善です。 表面がスタックの上位になり、明るくなるにつれて、設計者はテキストのコントラストを考慮する必要があります。 背景色が、白いテキストと表面の間で少なくとも15.8：1のコントラストレベルを満たすのに十分なほど暗くない場合、最も高い（そして最も明るい）高さのある表面のテキストは4.5：1の標準に合格しません。 場合によっては、明るい灰色の背景で良好なコントラストを実現するために、デザインシステムで要素のテキストの色を真の黒（＃000000）として指定するのが最適な場合があります。

ダークUIデザインのインスピレーション

上で概説した原則を反映して、ダークUIデザインのいくつかの優れた例を次に示します。

Atom Financeは、ダークテーマを活用して洗練された外観を実現し、アクセントカラーを3色に制限しています。 レイアウトは、複雑な金融Webサイト用に、ネガティブスペースとスパースでミニマリストなデザインを使用しています。 このサイトでは、UIでさまざまなコンポーネントの標高を示すために、微妙な陰影をうまく使用しています。

これらのミニマリストダークテーマのWebサイトは、どちらも大胆なタイポグラフィを使用しています。 単一のアクセントカラーによる注意深いシェーディングは、暗いUIデザインのベストプラクティスに合わせて使用​​されます。

SaaSアプリケーションの暗いテーマを扱うという課題にもかかわらず、IBMのこのデータ視覚化ダッシュボードは模範的なものです。 アクセントカラーの数は最小限に抑えられ、サイトは微妙な陰影を使用してさまざまなUIの高さを表示します。

これらのモバイルアプリは、ベゼルにのみ真の黒を使用し、さまざまな標高レベルの要素に適切な陰影を付け、アクセントカラーの数を制限することで、暗いUIデザインのベストプラクティスを順守します。

概要

従来のUIデザインよりもダークUIデザインを使用するという決定には、慎重に取り組む必要があります。 ヒップである、異なる、または他の人のデザインを模倣するなど、間違った理由で選択するべきではありません。 設計者は、選択の強力な根拠を持ち、コンテンツ、使用状況、およびデザインが表示されるデバイスを検討する必要があります。

ダークテーマは一部のデジタル製品に適していますが、他の製品に実装するのは非常に困難です。 シンプルさが鍵となります。 ミニマリストコンテンツ、データの視覚化、メディアサイト、エンターテインメントプラットフォームを提示するのに最適です。 これらは、複雑でデータ量の多いB2Bプラットフォーム、テキスト量の多いページ、およびさまざまなコンテンツには適していません。

新しいスタイルのフロンティアを越え、感情的で審美的なレンズを通して暗いUIを探索する準備ができている勇気あるデザイナーにとって、彼らは「ダークサイド」で無限の可能性のエキサイティングな遊び場を提供します。

ご意見をお聞かせください。 以下にあなたの考え、コメント、フィードバックを残してください。

•••

Toptal Designブログでさらに読む：

• 暗いUI。 良い点と悪い点。 規則ルール。
• デザインの原則とその重要性
• ゲシュタルトのデザイン原理を探る
• 説得力と動き–モーションデザインの原則へのガイド
• これらの成功したインタラクションデザインの原則でUXを後押しする