プロダクトの開発段階でUIデザイン案が複数ある場合、どのようにしてより良いUIを選べばいいのでしょうか。本記事では基本となるUIの選定基準から、ユーザー層が幅広いプロダクトの選定基準、UIデザインでのカラー選定基準について解説します。
開発の初期段階でUIデザイン案が複数ある場合、より良いUIを判断するためには判断軸とプロセスを意識することが重要です。UIデザイン案の決定方法については、大きく分けて以下の2つのパターンがあります。
受託開発では、チームで提案の方向性やアウトプットの議論後、クライアントへの提案に臨む場合が多いでしょう。このケースでは異なるUIデザイン案に対してチーム内で意見が割れることが考えられます。
この場合の本質的な課題は「チーム内でデザインの判断軸が合っていない」ことが想定されます。それぞれが各個人の視点で「良い」と思うものを意見している状態のため、まずはチームメンバーの良し悪しを判断している基準を見つけることが重要です。
課題に対する解決策
チームメンバーが良いと思っている理由を付箋などで発散し、観点ごとに整理してみましょう。それぞれの意見が、同じ観点や異なる観点を持っていることが可視化されます。それらの各個人の判断軸を明確にしたうえで、事業やプロジェクトにとって優先すべき観点をチーム内で議論し、共通の判断軸をつくりましょう。UIに関わらず、チームで議論が紛糾するときは、それぞれが持っている判断軸を整理し、状況に合わせた優先度に則って決定するプロセスを踏んでみてください。
自社のプロダクト開発では、チームメンバーや事業責任者がデザインの意思決定を行う場合が多いでしょう。このケースではユーザーにとって本当に良いUIなのかはリリースしてユーザーが使ってみなければわかりません。自社事業ではリリースまでのスケジュールを自社でハンドリングできるため、スピード感を持って改善することが強みとなります。その強みを活かして、開発スケジュール内に「ユーザーに聞いてみるプロセス」を組み込んで実施するのが理想です。
課題に対する解決策
プロトタイプでのユーザビリティテストやリリース後のABテスト、定量データの計測など、実際のユーザーの声や行動から検討するプロセスを実施してみましょう。プロダクトとして初期段階の場合や新しいUIや機能を取り入れる場合、対象としているユーザーに使ってみてもらうことで初めて課題や気づきが生まれます。はじめから完璧を求めず、改善を繰り返していくことで最適なUIになるデザイン思考の考え方をぜひ実践してみください。
プロダクトのユーザー層が幅広い場合、メインターゲットではないユーザーをデザイン選定の判断軸にしてしまうと、本来のターゲットにとって魅力的なデザインとならない可能性があります。ユーザー層を主従関係で整理し、メインターゲットを起点とした判断軸を持ち、カバーするユーザーの範囲を決定しましょう。
ユーザー層を整理し、ターゲット像を以下のような主従に分けて「どのようにデザインを決定するか？」について検討しましょう。
プロダクトのペルソナが明確に決まっている場合、トーン＆マナーやUIデザインはペルソナを判断軸として選定しましょう。
デザインのトーン＆マナーは以下を重視して選定します。一方で、ペルソナはあくまでトーン&マナーを決める一つの軸に過ぎません。事業として表現したいコンセプト等、事業の目線を持つことも大切です。
操作性や使いやすさなどを表現するUIデザインは、ペルソナが属する主ターゲットを軸として方向性を決定します。品質を担保する領域ではユーザー層を従ターゲットの軸で定義し、事前に対応する範囲のすり合わせを行いましょう。
シニア向けデザインのベースにはユニバーサルデザインの考え方があります。幅広い年齢層に対応した、快適で使いやすいデザインがシニア向けデザインのひとつの基準です。シニア向けデザインでは、以下の3つのポイントを意識してみましょう。
「見やすさ」を実現するために、カラーユニバーサルデザインやコントラスト比に配慮したカラーリングを行います。
複雑な説明や膨大な情報を読み解くことは、年齢に限らずストレスが伴います。「わかりやすさ」を実現するために、最も伝えたいポイントは、タイトルやコピーなどで完結に伝えるようにします。何かを説明するときは、各ステップをわかりやすく順序立てて説明し、写真や図などを使って視覚的に表現するようにしましょう。
年齢を重ねると視力が低下し、小さい文字が見えづらくなっていきます。シニア向けのデザインを行う時は、文字の大きさ、太さ、フォントの種類、行間などに配慮しましょう。文字の太さは細いものよりも太いものがよく認識でき、フォントも明朝体よりゴシック体の方が読みやすいとされています。
UIデザインでカラーを選定する場合、「何を重視するのか」の判断軸を明確にしたうえで、基準やルール、用途を定義することが重要です。カラーの選定方法については、以下の3つのポイントを意識してみましょう。
プロダクトの配色を決めるにあたって、選定の基準となる観点「何を重視すべきなのか」を明確にしましょう。
トーン＆マナーを決める上で、ブランドコンセプトやコーポレートカラーなどプロダクトの顔となる配色がすでに決まっている場合があります。その場合には、ブランドの世界観を担保するために下記の観点を意識しましょう。
また、既存のブランドカラーがWCAG2.1のコントラスト比を担保できていない場合、視認性や可読性が重視されるコンテンツで使用するためのカラーを新たに設定するようにしましょう。
WCA2.1とは
Web Content Accessibility Guidelines (WCAG) 2.1 は、ウェブコンテンツを障害のある人にとってよりアクセシブルにする方法を定義している。 アクセシビリティは、視覚、聴覚、身体、発話、認知、言語、学習、神経の障害を含む、広範な障害に関係している。
（Web Content Accessibility Guidelines (WCAG) 2.1）
UXデザインのフェーズなどで決定したペルソナやクリエイティブターゲットに合わせてカラーを選定する際には、ロービジョン属性を意識するようにしましょう。ロービジョン属性がターゲットとなるようなプロダクトの場合、ユニバーサルカラーを意識した配色と文字サイズなどを組み合わせた、よりアクセシビリティの高いデザインが優先されます。ロービジョン属性ではないユーザーがターゲットの場合でも、事前に対応する範囲のすり合わせを行って最低限担保する基準を決めておきましょう。あらかじめ基準を定めておくことで、カラーの調和を守りながら遵守すべき観点で選定できるようになります。
ロービジョンとは
ロービジョン（Low Vision）とは、何らかの原因により視覚に障害を受け「見えにくい」「まぶしい」「見える範囲が 狭くて歩きにくい」など日常生活での不自由さをきたしている状態を指します。
（国立障害者リハビリテーションセンター）
問い合わせや決済手続き、入力業務などユーザーがよりわかりやすく、目的に向かってストレスなく操作する必要がある画面では、世界観やブランドイメージよりもカラーのコントラスト比を重視し基準値をクリアすることを優先しましょう。入力フォームの境界線や決定ボタンの視認性、注意事項など、伝えるべき必要な情報は基準値を満たしたカラーを選定をする必要があります。
デザインルールを定める際には、どんな用途でそのカラーを使用するのかをあらかじめ定義し、視認性や可読性が重視されるようなエリアにはコントラスト比が低いカラーを使用しないなどのルールを定めることも重要です。明度が高い有彩色であれば、使用するルールとして可読性が重視されるようなパーツには使用せず、22px以上の文字や装飾表現に使用するなどを決めておきましょう。
色以外の表現によってアクセシビリティを担保できる場合もあります。現状のデザインが色に頼った表現になっていないか、テキストや形状、配置などの表現方法で解決できないか確認してみましょう。
本記事では、基本となるUIの選定基準をはじめ、ユーザー層が幅広いプロダクトの選定基準、UIデザインでのカラー選定基準などUIデザインを複数案で迷ったときの判断軸について解説しました。クライアントの要望やプロダクトの性質によって優先すべき事項が異なります。ぜひ本記事を参考にして、より良いUIを選定できる基準を検討してみてください。
