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