UI（ユーザーインターフェース）デザインを正しく理解できる基礎知識
- kyo
- 2021年12月3日
- 読了時間: 8分
更新日：8月30日
UI：User Interface（ユーザーインターフェース）
Webデザインやグラフィックデザイン同様、一般的になったUIデザイン（以下、UI）。このUIを簡単にいうと「ユーザーがwebサイトやアプリを快適に使うための設計／要素」となります。
英語のInterfaceには
・境界面
・仲介
などの意味がありますが、IT用語的には、「ヒト（ユーザー）」と「モノ（機器、プログラムなど）」をつなぐ役割を果たすものと使われることが多くあります。
Webサイトやアプリを例に具体的なものを挙げると、
・フォント
・イラスト
・応募フォームの入力欄
などがあります。しかしこのUIは、ありとあらゆるものが対象となります。これらUIを如何にユーザーにとって使いやすいものにできるか。これがUIの本質となります。
当記事ではこのUIの本当に大切なポイントを解りやすくご紹介します。
なぜUIデザインが大切なのか
なぜUIが大切なのか？
それは、UIが優れているかどうかで、サービスの利用率、Webサイトの離脱率に大きく影響します。
UIが良くない例として、
・欲しい情報、知りたい情報がどこにあるか解らない
・要素がゴチャゴチャしていて見づらい
・予約や検索のやり方がわからない
などがあります。
ユーザーにとって使いやすいかどうか
Webサイト上で、いくら発信者（売り手・企業）がユーザーにとって有益な情報を発信していたとしても、ユーザーに「このサイトは解りにくい、使いにくい」と判断されれば離脱されてしまいます。離脱されるということは、購入や予約、問い合わせに繋がらないということです。こういったことを避けるためにも、ユーザーがスムーズに使えるUIを意識する必要があります。
UIを行う上で大切なポイント４つ
UIデザインには、４つの大切なポイントがあります。
・近接 ・整列
・反復 ・コントラスト
がUIデザインの基本原則です。UIを考える上でも役に立ちます。
1. 近接
複数の情報や素材を扱う時は、関連するもの・同質のものでまとめることが必要です。
例えば、「ひまわり、みかん、りんご、バラ」があったとしたら、「ひまわり、バラ」「みかん、りんご」のように同質のものでまとめる、ということです。ユーザーにとって、内容が把握しやすくなり、情報も入りやすくます。
2. 整列
バラバラに散らばっている情報・素材をきちんと整理整頓することです。文章を頭揃えにする、写真やイラストのサイズを揃える、天地左右の余白を揃える、などがあります。写真だと、大きいものは全て同じサイズ、小さいものも全て同じサイズに統一します。各情報やコンテンツのルール化を作るということです。視点がまとまり見やすくなるのと同時に、視線の幅も小さく抑えることができ、見た目もスッキリとして内容が解りやすくなります。
3. 反復
上記の２で作ったルールや、同じデザインパターン（レイアウトやサイズ等）を繰り返し使います。レイアウトや色（濃度や系統）など、各要素を繰り返し使って一貫性を持たせます。この一貫性により全体に統一感が生まれるため、ユーザーにとってスムーズに読みやすく・見やすくなるUIとなります。この統一感が強いブランディングへと発展していきます。
4. コントラスト
情報に強弱をつけてより解りやすくします。文章の場合、見出し文字を太字にする、見出しと本文の文字サイズを変える、などがあります。また文字数が多い場合、重たく感じられて読まれにくいことがあるため、内容がひと目で解るアイコンを付けて重たさを和らげる、といった手法もあります。目につきやすくなる・解りやすくなることから、重要なポイントを強調したい場合にとても効果的です。
UI改善の大切なプロセス
すでにデザインされているUIが効果的でない場合、改善は必要となりますがそのプロセスも重要になってきます。UI改善のプロセスと考え方は下記のようになります。
1. 現状の問題点を考える
現状のUIがなぜ使いにくいのか、改善箇所はどこか、どう改善すれば良いのか、そもそも改善する目的は何なのか、そしてユーザーの動線を邪魔していないか、などの問題点を考えます。その際、実際に使用するユーザーの目線になって考えることが大切です。
2. どうすればユーザーにとって使いやすくなるのか考える
問題箇所が判明したら、次はどうすれば「使いやすくなるのか」を考えます。手間を減らす、説明をつける等を考えます。そして実際に自分で使用してみて、ユーザーの立場に立って考えるようにしています。ユーザーの立場に立つ、ということは非常に大切です
3. デザイン製作
２で出た改善案を基に製作していきます。ここでは先の項目「UIを行う上で大切なポイント４つ」をメインに行うことになります。実際に形にしていくと、違和感が発生することもあるので、その都度、改善を重ねていくことになります。
4. 検証
３で製作したものが、本当に使いやすくなったか、目的としたUI/UX（ここでは主にUXに主眼を置くことが多いです）の雰囲気と合っているか、動線を邪魔していないかを確認します。このフェーズでは、デザイナーやディレクターだけでなく、お客様にも参加してもらい意見を頂くこともあります。さらなる改善点があれば、１に戻って改修していきます。
補足：ビジュアルデザインとの違い
UIと混同しやすいことに、ビジュアルデザインがあります。ユーザーに、快適にサービスやプロダクトを利用してもらうように設計を行うUI。
一方ビジュアルデザインの目的は、文字・写真・グラフィックなど、視覚的な表現でユーザーに狙ったイメージやブランドを持ってもらうことです。両者はとても混同されやすいですが、ビジュアルデザインは表現、UIデザインは機能や設計を重視する考え方です。そのため役割も異なっています。
UIデザインのトレンド
UIには、オブジェクト指向UIと、その対比としてあるUIとして、タスク思考UIがあります。
■オブジェクト指向UI（OOUI）
オブジェクトとは、ユーザーが使おうとしている目的のモノ・コトを差します。
そのため、オブジェクト指向UIとは、ユーザーの目的とするもの（オブジェクト）を起点として設計されたUIです。ユーザーはまず目的とするもの（商品など）を選択し、その後に行動（商品の購入）を行います。そのためUIもまずはオブジェクトを一覧で表示させます。そして対象のオブジェクトを選択させてからタスクを選びます。
例1）
メッセージアプリでは、アプリを開いたTOP画面で、連絡した（したい）相手の一覧が並んでいます。これは、アプリ利用時のオブジェクト（＝連絡したい人）を起点として、それをタップすることにより、メッセージを送れることが直感的に分かるよう設計されています。
例2）
ECサイトも、オブジェクト指向のUIです。。アプリやサイトを開いて、購入したい商品の写真を一覧からタップ。その後、購入のアクションをすることになります。このように購入目的である商品を起点としてECサイトは、UI設計されています。
■タスク指向UI
「最初にアクション、その後にオブジェクト選択」の設計を、タスク指向UIと呼びます。
オブジェクト指向UIで設計されたメッセージアプリに対して、メールソフトはタスク指向UIとなります。メールを送るためには「新規メール画面を開く」「連絡先を入力する」「メッセージを入力する」などのタスクが要求されます。
その後、送りたい相手に送ります。タスクを指示されることなく、すぐにメッセージを送ることができるアプリとは逆の動線になっています。
＜より分かりやすいUIが必要＞
タスク指向UIの場合、タスクは1つのオブジェクトに対して複数発生します。自動販売機でドリンク（オブジェクト）を購入する場合、タスクは「代金を支払う」「商品を選ぶ」の2つが必要です。このためタスク指向UIは、タスクが多くなるほど「ユーザーの目的への到達」が遠のいてしまいます。このため、タスク指向でUIをデザインする場合は、如何に解りやすいUIとするかが必須となります。
ファンが作れるUXデザインについて
ここで、UIと一緒に話すことの多いUXについて少しご紹介します。
ユーザーが商品・サービスを通して得る全ての体験を示すのがUXデザイン。
この顧客体験には、ユーザーがサービスやプロダクトを
認知
購入
使用
といった流れを経験した後に「また購入したい」「いい商品だ」といった感想を持つまでの過程全てをデザインすることが、UXにはとても重要です。
つまり、UXデザインとはサービスやプロダクトを通じて、顧客にリピーターになってもらい、リピーターにはファンになってもらう、ということです。
さいごに
よく似ているサービスはたくさんあり、Webには膨大な数のサイトがあります。そんな状況下で周りとの差別化を図らなければ、サービスの良さを伝えても、ユーザーの目には止まらないことが事実としてあります。差別化を図るためには如何にユーザーのことを考えているかが求められます。本当にユーザーに寄り添ったデザインが必要です。
「整理されていて情報が解りやすい」「使い心地がいい」などの『良い経験』が得られるWebサイトやアプリは、ユーザーからきちんと支援されます。そのため、その快適さ・便利さを実現するために、サービスとユーザーを快適に繋ぐデザイン（設計）としてUIデザインが求められています。
今回も最後まで読んでくださり、ありがとうございます。
UIに関してのご相談などがありましたら、ブランディング戦略を基にしたマーケティング・クリエイティブの得意な僕たちにぜひご相談ください。
