暗いUI。 良い点と悪い点。 規則ルール。

ダークUIはドラマチックでスタイリッシュ、そしてエレガントです。 それでも、設計者が「ダークサイド」を歩くことを選択した場合は、慎重に踏む必要があります。

製品のルックアンドフィールを作成することは、設計者の主要な責任の1つです。最初の設計決定は、製品の目的、特定の状況、およびその対象者に適切である必要があります。 配色は長期的な影響を与えるため、慎重に選択する必要があります。すべては、デザイン要素を配置する背景である「キャンバス」の選択から始まります。 通常の選択は、ほとんどデフォルトで、白い背景です。

明るい背景を選択するのには十分な理由があります。 コントラスト、テキスト、読みやすさ、さまざまな微妙な色を処理する機能などがあります。 多くの科学的研究によると、最適な読みやすさには、白い背景に黒いテキストが必要です。 会社のロゴと色は暗いカラーパレットでは機能しないため、ブランディングも決定に影響を与える可能性があります。

ほとんどの研究では、明るい背景の暗いテキストは暗い背景の明るいテキストよりも優れている、つまり読みやすいことが示されています。 ある有名な研究では、被験者が暗い背景の明るい文字を読んだ場合と明るい背景の暗い文字を読んだ場合の「視覚的疲労」が有意に大きかった（Bauer、D.、Bonacker、M.、およびCavonius、CR1983）。

また、期待もあります。人々は、画像とともに提示される白い背景に濃いインクでレンダリングされたさまざまなコンテンツを見ることに慣れています。 350年以上前から存在している新聞や雑誌を考えてみてください。 さらに遡ると、旧石器時代（穴居人の時代）の35, 000年前に、ライオンやマンモスの洞窟壁画が明るい背景に置かれ、木炭や焦げた骨が描かれています。

それにもかかわらず、プロジェクトがそれを正当化する場合、今日のデジタル製品設計者は、さまざまな理由で暗い配色で作業することを選択する可能性があります。 上で示唆したように、それはドラマを伝え、感情を引き出すことを意図した美的選択であることがよくあります-予期しない何か-またはおそらくデザイナーはデザインをブランディングと融合するか、視覚的なコンテンツを目立たせることを望んでいます。

ただし、設計者が「ダークサイド」に移行することを選択した場合、多くの課題に直面します。 あらゆる種類のユーザビリティの問題が関係しています。主に、スキャン可能性、読みやすさ、およびコントラストに関連しています。 考慮すべき主な側面は、テキストと背景の十分なコントラストです。 コンテキスト（ユースケース）と環境、およびUIが表示される可能性のあるデバイスも考慮する必要があります。

一部の暗いUIは、「デジタル眼精疲労」を最小限に抑えるように設計されています。 デジタル技術の進歩に伴い、私たちは一日のほとんどの間画面を見つめています。 デジタル眼精疲労は、毎日何百万人もの人々に影響を与える一般的な状態です。 コンピュータの過度の使用から明るい光への定期的な曝露まで、あらゆるものが原因で、頭痛、首の痛み、かすみ目、目の灼熱感/刺痛を引き起こす可能性があります。

コンピュータビジョン症候群（CVS）や「目の不快感」などもあります。 ある調査によると、アメリカ人の83％以上が1日2時間以上デジタルデバイスを使用しており、60.5％がデジタル眼精疲労の症状を経験していると報告しています。 （目が露出オーバー：デジタルデバイスのジレンマ。）

企業間SaaS製品とマルチメディア編集アプリケーションは、何時間も続けて使用されています。 多くは、目の疲れを軽減しながら視覚的な明瞭さをサポートするために、暗いテーマのUIで設計されています。 ただし、このようなアプローチでは、設計の方向性を慎重に事前に評価する必要があります。

ほとんどの開発者は、目の疲れを軽減するために、色分けされた構文の黒い画面を使用しています。 Toptalの開発者であるKevinBloch氏は、次のように述べています。「背景が黒であると、目の疲れが軽減され、自動カラーコーディングが読みやすくなり、コードが一目で理解しやすくなります。」

Toptalの開発者であるAminShahGilaniは、次のように付け加えています。 暗いテーマが好きです。特に、照明を暗くしたり、夜に仕事をしたりするのが好きなので、背景が暗いほど目に優しいからです。」

ゲームアプリのUIも、テーマが暗い傾向があります。 ゲームのコンテキストとプレーヤーがゲームをしている環境は、黒いカラーパレットによく合います。 黒の背景デザインは、印象的なビジュアルを強化し、謎の感覚を導入し、より良いコントラストを持ち、ビジュアル階層をサポートします。

ダークUIがうまく機能する場合

エンターテインメント関連のUI（スマートTV、ゲームコンソール、TVおよびムービーアプリ）の大部分は、正当な理由から、暗いテーマのUIデザインを使用する傾向があります。 ほとんどの娯楽関連の活動は夕方に行われ、6〜10フィートの距離から見られ、薄暗い部屋で見られます。つまり、画面は環境と一致します。 さらに、カラフルなコンテンツ（カバーアートや​​プロモーションなど）は、暗いテーマのUIで劇的に目立ちます。

目的は、活動の文脈に一致させることです。「暗くなってきて、リラックスしていて、テレビを見たいです。」 何千もの小さな電球と同様に、デジタルスクリーンは明るいピクセルが存在する場所ならどこでも光を発します。 したがって、明るいUIは部屋を明るくします。これは、アクティビティを考慮すると望ましくない効果です。 このシナリオでは、UIデザインは、デバイス、コンテンツ、アクティビティ、および環境というコンテキストに一致させようとしています。

適切なコンテキスト、環境、アプリケーション、および使用法では、黒の背景のUIが理にかなっています。 インターフェイスが使用される可能性のあるコンテキストを常に考慮してください。ただし、それだけではありません。どのコンテキストを使用するかは、コンテンツとコンテキスト（何、いつ、どこで、どのデバイス）に依存する必要があります。

• 印象的なビジュアルの強力で劇的な外観を実現するため
• スタイルとエレガンス、ラグジュアリー、プレステージの感覚を投影する
• 陰謀と謎の感覚を作り出すために
• 最小限の気晴らしでユーザーの注意を集中させ、導くのを助けるため
• 視覚的な階層と情報アーキテクチャをサポートするため

暗いUIは、まばらで最小限のテキスト、および視覚に重点を置いた「チャンクされた」情報、つまりテキストに光を当てる場合にのみ使用する必要があります。 テキストを使用する場合は、暗い背景とのコントラストを高くする必要があります。できれば、純粋な白または黒の背景に別の強い色（濃い​​灰色ではない）を使用することをお勧めします。

ダークUIがうまく機能しない場合

記事の前半で示したように、暗いテーマのUIは、テキストが多くデータが多いコンテンツ、またはさまざまなコンテンツタイプ（テキスト、画像、ビデオ、データテーブル、ドロップダウン、フィールドなど）を使用する場合には適していません。 ）。 デザインコミュニティの一般的なコンセンサスは、単純なコンテンツを扱っていて、あちこちにテキストを散りばめている場合を除いて、ダークUIはデザインにとって大きな課題であるということです。

課題は、十分なコントラストを維持しようとすることです。これは、包括的な課題に影響を与えます。つまり、UXに影響を与えるユーザビリティに関連する読みやすさです。 一般に、すべての色は白い背景で機能しますが、暗い背景では、有効な色の範囲が大幅に減少します。

暗いテーマのUIを使用しない場合の実際の例を次に示します。私はB2BSaaSプロジェクトに参加しました。そこでは、CEOが「違う」ために、暗いテーマのUIを使用したいと固く決心していました。 UI-プラットフォーム全体で会社のブランディングと一致しました。 全てにおいて。 数回の会議の後、そして原因の背後にある設計チームと製品マネージャーを結集することによって、私たちはそのような潜在的に悲惨な決定から彼に話しかけることができました。

プラットフォームはSaaSアプリケーションUIコンポーネントの標準セットを使用していたため、フォーム、ウィジェット、ドロップダウン、ピクトグラム、アイコン、および表のテキストと数値データでいっぱいでした。 十分なコントラストと一貫した配色を実現しながら、ナビゲーション、レイアウト、および機能を管理することは非常に困難になります。 要約すると、暗いテーマのUIですべてを機能させることはほぼ不可能でした。

アプリケーションの適切性にもよりますが、おそらく正しい選択は、明るいUIと暗いUIの組み合わせを提案することでした。 たとえば、ウィジェットとフォームおよびデータテーブルを含む設定ページを明るい背景で設計し、グラフを含む分析ページを暗い配色で設計することができます。

ダークUIを使用する際の注意事項と禁止事項

最後に、暗いUIを使用するという決定には、注意して取り組む必要があります。 デザイナーは、ヒップである、違う、または他の誰かのデザインをコピーするなど、間違った理由でそれを行うべきではありません。 設計者がコンテキスト、コンテンツ（コントラストと読みやすさ）、デバイス、およびユースケースを検討し、選択する正当な理由があることが重要です。 潜在的に多くの利点がありますが、多くの落とし穴もあるため、これは微妙なバランスを取る行為です。

暗いUIを使用しても問題がない場合：

• ブランディングの配色がそれを正当化するとき
• デザインがまばらでミニマリストで、コンテンツタイプが少ない場合
• 夜間のエンターテインメントアプリなど、状況や用途に適している場合
• 長期間使用される分析ページなど、目の疲れを軽減するため
• 感情を引き出すために-例えば、陰謀と謎の感覚
• 印象的でドラマチックな外観を作成するには
• 高級感と威信を生み出すために
• 視覚的な階層をサポートするには

暗いUIから離れるのが最善の場合：

• テキストが多い場合（暗い背景で読むのが難しい）
• 画面に混合コンテンツが多い場合
• 多くのフォーム、コンポーネント、ウィジェットを備えたB2Bアプリケーションの場合
• デザインが幅広い色を必要とする場合

「ダークサイド」への乗換えには注意が必要です。 落とし穴に満ちたそのような潜在的に不安定な決定を下す前に、より深く、より徹底的な調査と分析が推奨されます。 デザイナーがその道を進むと、後戻りするのは非常に困難です。 設計者は、両足でジャンプする前に、すべての側面（良い点と悪い点、すべきこととすべきでないこと）を検討することをお勧めします。

•••

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

• eコマースUX–ベストプラクティスの概要（インフォグラフィック付き）
• 製品設計における人間中心の設計の重要性
• 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
• モバイルインターフェースのヒューリスティック原則
• 予測的デザイン：魔法のユーザーエクスペリエンスを作成する方法