UI(ユーザーインターフェース)デザインを正しく理解できる基礎知識

更新日:2021年12月13日



UI:User Interface(ユーザーインターフェース)


耳にする人も多くなってきている、UIデザイン(以下、UI)。このUIを簡単にいうと「ユーザーがwebサイトやアプリを快適に使うための設計/要素」となります。


英語のInterfaceには

・境界面

・仲介

などの意味がありますが、IT用語的には、「ヒト(ユーザー)」と「モノ(機器、プログラムなど)」をつなぐ役割を果たすものと使われることが多くあります。Webサイトやアプリを例に具体的なものを挙げると、

・フォント

・イラスト

・応募フォームの入力欄

などがあります。しかしこのUIは、ありとあらゆるものが対象となります。これらUIを如何にユーザーにとって使いやすいものにできるか。これがUIの本質となります。


今回はこのUIの本当に大切なポイントを解りやすくご紹介します。



なぜUIデザインが大切なのか

なぜUIが大切なのか?それは、UIが優れているかどうかで、サービスの利用率、Webサイトの離脱率に大きく影響します。

UIが良くない例として、

・欲しい情報、知りたい情報がどこにあるか解らない

・要素がゴチャゴチャしていて見づらい

・予約や検索のやり方がわからない

などがあります。Webサイト上で、いくら発信者(売り手・企業)がユーザーにとって有益な情報を発信していたとしても、ユーザーに「このサイトは解りにくい、使いにくい」と判断されれば離脱されてしまいます。離脱されるということは、購入や予約、問い合わせに繋がらないということです。こういったことを避けるためにも、ユーザーがスムーズに使えるUIを常に意識する必要があります。




UIを行う上で大切なポイント4つ

UIデザインには、4つの大切なポイントがあります。

・近接 ・整列

・反復 ・コントラスト

がUIデザインの基本原則です。UIを考える上でも役に立ちます。



1. 近接

複数の情報や素材を扱う時は、関連するもの・同質のものでまとめることが必要です。

例えば、「ひまわり、みかん、りんご、バラ」があったとしたら、「ひまわり、バラ」「みかん、りんご」のように同質のものでまとめる、ということです。ユーザーにとって、内容が把握しやすくなり、情報も入りやすくます。



2. 整列

バラバラに散らばっている情報・素材をきちんと整理整頓することです。文章を頭揃えにする、写真やイラストのサイズを揃える、天地左右の余白を揃える、などがあります。写真だと、大きいものは全て同じサイズ、小さいものも全て同じサイズに統一します。各情報やコンテンツのルール化を作るということです。視点がまとまり見やすくなるのと同時に、視線の幅も小さく抑えることができ、見た目もスッキリとして内容が解りやすくなります。

3. 反復

上記の2で作ったルールや、同じデザインパターン(レイアウトやサイズ等)を繰り返し使います。レイアウトや色(濃度や系統)など、各要素を繰り返し使って一貫性を持たせます。この一貫性により全体に統一感が生まれるため、ユーザーにとってスムーズに読みやすく・見やすくなるUIとなります。この統一感が強いブランディングへと発展していきます。



4. コントラスト

情報に強弱をつけてより解りやすくします。文章の場合、見出し文字を太字にする、見出しと本文の文字サイズを変える、などがあります。また文字数が多い場合、重たく感じられて読まれにくいことがあるため、内容がひと目で解るアイコンを付けて重たさを和らげる、といった手法もあります。目につきやすくなる・解りやすくなることから、重要なポイントを強調したい場合にとても効果的です。




UI改善の大切なプロセス

すでにデザインされているUIが効果的でない場合、改善は必要となりますがそのプロセスも重要になってきます。UI改善のプロセスと考え方は下記のようになります。



1. 現状の問題点を考える

現状のUIがなぜ使いにくいのか、改善箇所はどこか、どう改善すれば良いのか、そもそも改善する目的は何なのか、そしてユーザーの動線を邪魔していないか、などの問題点を考えます。その際、実際に使用するユーザーの目線になって考えることが大切です。



2. どうすればユーザーにとって使いやすくなるのか考える

問題箇所が判明したら、次はどうすれば「使いやすくなるのか」を考えます。手間を減らす、説明をつける等を考えます。そして実際に自分で使用してみて、ユーザーの立場に立って考えるようにしています。ユーザーの立場に立つ、ということは非常に大切です



3. デザイン製作

2で出た改善案を基に製作していきます。ここでは先の項目「UIを行う上で大切なポイント4つ」をメインに行うことになります。実際に形にしていくと、違和感が発生することもあるので、その都度、改善を重ねていくことになります。



4. 検証

3で製作したものが、本当に使いやすくなったか、目的としたUI/UX(ここでは主にUXに主眼を置くことが多いです)の雰囲気と合っているか、動線を邪魔していないかを確認します。このフェーズでは、デザイナーやディレクターだけでなく、お客様にも参加してもらい意見を頂くこともあります。さらなる改善点があれば、1に戻って改修していきます。



補足:ビジュアルデザインとの違い

UIと混同しやすいことに、ビジュアルデザインがあります。ユーザーに、快適にサービスやプロダクトを利用してもらうように設計を行うUIに対してビジュアルデザインの目的は、文字・写真・グラフィックなど、視覚的な表現でユーザーに狙ったイメージやブランドを持ってもらうことです。両者はとても混同されやすいですが、ビジュアルデザインは表現、UIデザインは機能や設計を重視する考え方です。そのため役割も異なっています。




UIデザインのトレンド

最近のUIのトレンドとして、オブジェクト指向UIがあります。そしてその対比としてあるUIとして、タスク思考UIがあります。



■オブジェクト指向UI(OOUI)

ここで言うオブジェクトは、ユーザーが使おうとしている目的のモノ・コトを差します。例えばECサイトであれば、探したい(買いたい)と思っている服がオブジェクトになります。オブジェクト指向UIとは、ユーザーの目的とするもの(オブジェクト)を起点として設計されたUIです。ユーザーはまず目的とするもの(商品など)を選択し、その後に行動(商品の購入)を行います。そのためUIもまずはオブジェクトを一覧で表示します。そして対象のオブジェクトを選択させてからタスクを選びます。

例えば、友人に連絡するときメッセージアプリを利用しているとします。ほとんどのメッセージアプリでは、アプリを開いたTOP画面で、連絡した(したい)相手の一覧が並んでいます。これは、アプリ利用時のオブジェクト(=連絡したい人)を起点として、それをタップすることにより、メッセージを送れることが直感的に分かるよう設計されています。

また、自宅で過ごす時間が増えたことで利用者が増加しているECサイトも、オブジェクト指向のUIとなっています。アプリやサイトを開いて、購入したい商品の写真を一覧からタップします。そしてその後、購入のアクションをすることになります。このように購入目的である商品を起点としてECサイトは、UI設計されています。

思っている以上に、身近にあるUIは、オブジェクト指向で設計されています。

■タスク指向UI

「最初にアクション、その後にオブジェクト選択」の設計をタスク指向UIと呼びます。


例えば、オブジェクト指向UIで設計されたメッセージアプリに対して、メールソフトはタスク指向UIとなります。メールを送るためには「新規メール画面を開く」「連絡先を入力する」「メッセージを入力する」などのタスクが要求されます。その後、送りたい相手に送ります。タスクを指示されることなく、すぐにメッセージを送ることができるアプリとは逆の動線になっています。


タスク指向UIの場合、タスクは1つのオブジェクトに対して複数発生します。自動販売機でドリンク(オブジェクト)を購入する場合、タスクは「代金を支払う」「商品を選ぶ」の2つが必要です。先に紹介したECサイトでの買い物であれば、購入するといったアクション以前に、より多くのタスクが必要です。このためタスク指向UIは、タスクが多くなるほど「ユーザーの目的への到達」が遠のいてしまいます。このため、タスク指向でUIをデザインする場合は、如何に解りやすいUIとするかが必須となります。



オブジェクト指向UIとタスク指向UIの基本設計は、別記事にて詳しくご紹介します。この記事内で紹介すると、記事自体が長くなりすぎてしまいます。記事(ページ)を適切な長さとしてまとめることも、UIの一種となります。




ファンが作れるUXデザインについて

ここで、UIと一緒に話すことの多いUXについて少しご紹介します。


ユーザーが商品・サービスを通して得る全ての体験を示すのがUXデザイン。この顧客体験には、ユーザーがサービスやプロダクトを

・認知

・購入

・使用

といった流れを経験した後に「また購入したい」「いい商品だ」といった感想を持つまでの過程全てを含みます。つまり、UXデザインとはサービスやプロダクトを通じたユーザーの顧客体験のすべてを設計する(仕組み化する)ことを意味します。もっと端的に説明すると、顧客にリピーターになってもらい、リピーターにはファンになってもらう、ということです。このことからも解るかと思いますが、ブランディングを行う上でUXデザインが非常に重要かつ有効な手法となります。こちらも別記事にてご紹介します。




さいごに

最近はよく似ているサービスが増え、Webには膨大な数のサイトがあります。そんな状況下で周りとの差別化を図らなければ、サービスを良さを伝えても、ユーザーの目には止まらないことが事実としてあります。差別化を図るためには如何にユーザーのことを考えているかが求められます。本当にユーザーに寄り添ったデザインが必要です。


「整理されていて情報が解りやすい」「使い心地がいい」などの『良い経験』が得られるWebサイトやアプリは、ユーザーからきちんと支援されます。そのため、その快適さ・便利さを実現するために、サービスとユーザーを快適に繋ぐデザイン(設計)としてUIデザインが求められています。


UIに関してのご相談などがありましたら、ブランディング戦略を基にしたマーケティング・クリエイティブの得意な僕たちにぜひご相談ください。


今回も最後まで読んでくださり、ありがとうございます。