デザイン

デザイン

PR

明るい背景VS.暗い背景、デザイナーはどちらを選択すべき?適切なカラースキームを選択する方法【後編】

UX Planet

UX Planet is a one-stop resource for everything related to user experience.

本記事は、Light or Dark UI? Tips to Choose a Proper Color Scheme for User Interface
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

3,009 views

読了時間 : 約2分51秒

私たちの日々の生活は、数多くの選択の連続です。この記事ではUIデザイナーがプロジェクトごとにぶつかる頻繁な選択の1つについて議論していきます。「インターフェースには明るい色を使うべきか、暗い色を使うべきか?」という選択です。

 

この記事は後編として、カラースキームを選択する際のチェックリストをご紹介します。(前編はこちらです。)

 

 

配色選択のチェックリスト

前編での要因を踏まえて、Webまたはモバイルインターフェイスの一般的な配色を選択する際の基本的な手順を簡単に説明します。

 

1.インタフェースの目的を定義します。インターフェイスユーティリティのコアポイントと解決する課題を決定したら、より合理的なカラースキームを選択できます。

 

UIがテキスト駆動型(ブログ、ニュースプラットフォーム、電子リーダーなど)の場合、明るい背景が効果的な選択肢になりがちです。光があれば、スクリーンは明るく広がり、純粋にコピーに集中するのが容易になります。

一方、インターフェイスが視覚的駆動型で、テキストではなくイメージがメインである場合、イメージの色合いによってカラースキームが選択され、一般的なレイアウトであってもスタイリッシュな見た目にできるでしょう。

 

 

2.ターゲットオーディエンスを分析します。ターゲットオーディエンスの定義と分析は、デザイナーが行うべき主な作業です。潜在的なユーザと、ウェブサイトやアプリから得たいものを知ることは、有用で、魅力的なインターフェイスのための強固な基盤を確立します。

 

中高年のユーザーに向けるならば、より直感的でナビゲートが容易なようにデザインしましょう。そのため、明るい配色のインターフェイスが良い傾向があります。若い人たちはしばしば、元気でスタイリッシュな暗い背景を持つインターフェイスを魅力的に感じるため、そういったカラースキームが向いています。ティーンエイジャーや子供たちは、明るい背景や面白い細部によってインターフェイスに引き付けられます。カラースキームの選択は、インタフェースの機能と内容の性質に依存します。しかし、ターゲットオーディエンスの好みは、常にユーザー中心の意思決定をするには良い手がかりです。

 

 

3.競合相手を研究しましょう。あなたの製品がブルーオーシャンの中にあることはほぼないということを覚えておいてください。その逆で製品はダイナミックな競争の条件下で存在し、ユーザーの注意を引くために他と争う必要があるでしょう。

 

カラースキームの選択は、アプリやウェブサイトを傑出したものにし、ユーザ側からのインタラクションのような貴重な最初の一歩につながる方法にもなります。セグメント内の既存製品の探索に費やされる時間は、無効なソリューションの再設計で無駄になる時間と労力を節約します。

 

 

4.テストが重要です。カラースキームがインターフェイスのユーザビリティや魅力に直接影響を及ぼす要素を内包するため、さまざまな解像度、さまざまな画面、さまざまな条件で適切にテストする必要があります。テストでは、製品が市場に出る前にカラースキームの強みと弱みが明らかになります。

 

 

妥協のソリューション

厳密なカラースキームに固執したくない場合、ユーザーインターフェースデザイナーは次のような妥協する解決策を見つけることができます。

 

ダークインターフェース、テキストには白いタブ

このトレンドは暗い背景スキームに基づくインターフェイスで特に人気がありました。これは、議論の中心である適切な可読性のためのもう1つのアプローチとなります。

ボックスやスペース内にのみ明るい背景を適用し、そこにテキストを表示するのです。これを適用すると、デザイナーは背景選択の問題を逃れられ、画面やページにエレガントなコントラストを追加できます。

 

 

ユーザーに配色の選択を与える

別のアプローチとして、ユーザーにモードの選択肢を与えることができます。このアプローチは製品をユーザーフレンドリーにし、ユーザビリティの問題だけでなく審美的な好みに合わせてよりパーソナライズされた選択を提供します。一方、デザイナーと開発者がすべてのスキームを解決するためには、作業時間を余分に必要とします。

 

※本記事はLight or Dark UI? Tips to Choose a Proper Color Scheme for User Interfaceを翻訳・再構成したものです。

 

 

▼こちらの記事もおすすめです!

 

おすすめ新着記事

おすすめタグ