UXとUIの違いを知らない人に説明する最善の方法は、比喩を使って説明することです。UIが車の見た目だとすると、UXは運転の仕方です。またUIが出会い系のプロフィールだとしたら、UXは出会い方です。これらの比較は違いを上手く表している一方で、UIの複雑性を軽視していることもあります。
UIとは、単なる塗装やTinderのプロフィールではありません。UIとは全体の環境です。ピクセルひとつひとつが重要であり、多面的な構造を持っています。私たちは、サービスのプラットフォームを選ぶときは全体の体験を最適化できるよう注意深く考えます。一方で、配色理論やレイアウト、タイポグラフィ、フォントの選択などの小さな要素については、数秒以上かけて考慮されることは滅多にありません。
そのため、「明るい背景のUIと暗い背景のUIでは、どちらが良いでしょうか？」とクライアントから聞かれても、その答えは単純ではありません。デザインの意思決定には数えきれないほどの要因が影響を与えており、それらはプラットフォームのUI基盤と同じくらい大きな影響力を持ちます。
しかし、私たちは生粋のUXデザインエージェンシーです。よって今日は、このクライアントの疑問を、純粋なユーザビリティの観点から検証しようと思います。これは、決して評価基準がほかに存在しないということではありません。
暗いインターフェイスや明るいインターフェイスは、既存のブランドと適合しているでしょうか？ それとも不適合に見えるでしょうか？ 暗いインターフェイスは現在の「流行」ですが、プラットフォームにとって「流行」に敏感であることは重要でしょうか？ これらを検証する代わりに、私たちは１つの重要な要因を追求しようと思います。
その要因とは、ユーザビリティを改善するかどうかという点です。
読みやすさ
UIを明るくするか暗くするかという選択は、ユーザビリティに影響を与えます。それは読みやすさです。読みやすさはコントラストに大きく依存するからです。特に、テキストと背景のコントラストが重要です。もちろん、文字と同じ色を背景色に使いたいとは思わないでしょう。しかし、「白い背景の上に黒い文字」や「黒い背景の上に白い文字」といった、正反対の組み合わせにも長所と短所があります。
多くのケースでは、明るいUIの上に黒のテキストを使うと、もっとも読みやすくなります。そのため、ブログや新聞といったほとんどすべてのオンライン出版物で、白やオフホワイトの背景色にシンプルな黒のテキストが採用されているのです（UsabilityGeekもその一例です）。
UsabilityGeekでは、明るいUI上に黒のテキストを使うことで読みやすさを保っています。
しかしこのようなUIはもっとも読みやすい一方で、長時間見るとユーザーの目を疲労させる可能性があります。Microsoft WordやGoogle Docsで長い文章を書いていると、次第に目が疲れてくる経験があるでしょう。
そのため、ユーザーが相当な時間読み続けるだろう、テキスト量の多いインターフェイスでは、暗い背景に明るいテキストが用いられることが多いです。読みやすさを維持しつつ、明るい背景ほど目に負担を掛けません。プログラマーがこの技術を利用しているのをよく見ると思います。一度に何時間もコーディングを行う中で、プログラマーは、疲弊することなく視界をシャープに維持できるUIを必要としています。
ユーザーの環境
私たちがユーザーの環境について話すときには、彼らがどこで見るのかだけでなく、いつ見るのかも話題になります。明るいUIか暗いUIかという議論においては、「いつ見るのか」という議論は「昼か夜か」という二択に単純化できます。
ご想像のとおり、暗いインターフェイスは夕方や夜において理想的です。一方で、明るいものは昼間に適しています。強烈に明るいスマートフォンのライトは、暗い部屋で見ると不快に感じる可能性があります。また、暗いインターフェイスの落ち着いた外観は、明るい場所ではよく見えないでしょう。
The AV ClubのWebサイト（スクリーンショットのソース：The AV Club）
もっともわかりやすい例として、New York TimesやAV ClubのWebサイトを見てみましょう。これらのサイトは、日中を通して読者が消費できるように、記事や特集を公開しています。対照的に、日が沈んだ仕事の後に利用されるようなNetflixやSteam、Spotifyには暗いUIが使われ、ユーザーがムービーやゲームに熱中できるようになっています。
Spotify （スクリーンショット：Spotify）
GroupMeやTwitterのような、一日を通して使われるプラットフォームでは、明るいものと暗いものという両方のインターフェイスを提供しています。暗いインターフェイスは「夜間モード」と呼ばれています。また、Google Mapsでは現地時間に応じてUIを自動調整して、よりアクセスしやすいナビゲーション体験をユーザーに提供します。
Twitterの暗いモードと明るいモード（スクリーンショットのソース：Twitter）
強調
プラットフォームのどの要素に、ユーザーを注目させたいですか？ 注目を集めたいコンポーネントは１つですか？ それとも製品ページのように、多種多様なコンテンツがありますか？ これらの質問に対する答えも、明るいUIか暗いUIかを決める要因になるはずです。
ふたたびSpotifyを事例に挙げましょう。パーティやディナーなど、薄暗い状況で見るなら、暗いインターフェイスのほうが快適です。では、その最大の競合であるApple Musicは、なぜ異なるテクニックを利用しているのでしょうか？
１つ目の理由は、純粋にブランドに関連しているからかもしれません。Appleは、鮮明な白のインターフェイスを好んでいます。しかし、同時にユーザビリティの要因も存在します。AppleのUXデザイナーは、プラットフォームの多種多様なカラー要素、つまりアルバムアートを強調したいのでしょう。
Apple Music（スクリーンショットのソース：Apple Music）
Apple Musicをスクロールすると、アーティストのプロフィール写真と一緒に、お気に入りのアルバムのカバーアートが画面を流れてきます。背景に暗い色ではなく白色を使うことによって、Appleはユーザーの音楽に光を当てています。アプリの多様なカラーベースの要素、アルバムアートを強調しているのです。
一方で、ページ上のビジュアル要素が少ない場合では、暗いインターフェイスが理想的です。地元の劇場でステージを見ている状況を思い浮かべてください。ステージはどれも黒色です。同様の理論が、MercedesのWebサイトでも採用されています。なぜなら、ユーザーにたった１つの要素を見てもらいたいからです。
Mercedes-BenzのWebサイト（スクリーンショットのソース：Mercedes）
まとめ
シンプルな質問ほど答えるのが難しいものです。この記事で触れた要因は重要なものですが、ユーザビリティの観点から述べただけのものです。この問題を考える視点はほかにも存在します。マーケティングチームもきっとこの議題について意見を持っているでしょう。
UXのプロセス全体の中でも、UIのデザインはもっともクリエイティブで芸術的な部分です。さらに芸術において、ルールとは破られるためにあります。ですから、この記事のアドバイスを絶対的なルールと見なしてはいけません。この記事のアドバイスは、UIデザイナーやデザインエージェンシーが、自分のユーザーにとっての最善の選択肢を決定するガイドラインです。
