UI/UXとは? 意味と違い、デザイン設計のコツ

kc@example.com (kc kim) — Sat, 31 Dec 2022 18:02:59 +0900

「このアプリは使いやすい」「このWebサイトは使いにくく、欲しい情報を探しにくい」など、日常的にインターネットを利用する人なら、このように思ったり感じたりしたことがあるのではないだろうか。ユーザーに「良いアプリ」「良いサイト」と感じてもらうにはどうすればよいかを考え、実現しようとするものが「UIとUX」である。Web業界の従事者やデザインに関わる仕事をする人が、主に多く悩むテーマだろう。

ここでは、このUIとUXの基礎から説明する。

UI/UXとは?

WebサイトやWebアプリだけでなく、製品やサービスを作るうえでも欠かせないのがUI/UXデザインである。UIとUXは1つの言葉のように言われることが多いが、実は2つの意味は異なる。それぞれについて以下で説明する。

まず結論から言うと、どちらも製品やサービスに関係する言葉である。UI(ユーザーインターフェース、user interface)は「ユーザーとの接点」であるのに対し、UX(ユーザー体験、user experience)は「ユーザーが製品やサービスを通じて得る経験」全体を指す。
そして、ユーザーとの接点もユーザーが経験する一部であるため、UIはUXに含まれる概念である。

UIとは?

UIとは、製品やサービスとユーザーの接点を示す用語で、ユーザーが見たり触れたりする部分を指す。UIというとデザインだけだと考えてしまいがちだが、ユーザーが見るものや操作するものすべてがUIに含まれる。

UXとは?

UXは、Webサイト、アプリ、製品、サービスなどを通じてユーザーが得るすべての経験を示す用語である。例えば、ユーザーがECサイト(Electronic Commerce Site)を訪問し、製品を選び、購入し、製品を使った後、また購入したいと思うところまでのすべてが「ユーザー体験」、つまりUXである。

UIとUXの違い

ここではUIとUXの関係について説明する。前述したように、UIはUXを実現する1つの方法として考えられる。2つの具体例を見ながら説明する。

具体例1)
UX: ページ移動が分かりやすく、ユーザーが欲しい情報をすぐに見つけられる。
↓ 実現するための手段
UI: メニューやボタンを見つけやすく、すべてのページからトップページへ簡単に戻れる。

具体例2)
UX: 申し込みや会員登録を簡単に行える。
↓ 実現するための手段
UI: リンクやボタンの位置や色が分かりやすく、入力フォームの項目数が必要最小限で、入力補助機能がある。

具体例3)
UX: ユーザーの興味を引き出すグラフィック。
↓ 実現するための手段
UI: テキストのフォントや色に違和感がない。

このようにUIはUXを実現するための要素の1つにすぎない。そのため、いくらUIが優れていても、製品やサービス全体のユーザー体験が考慮されていなければ無駄になってしまう。
UXデザインは、ユーザー満足度を高めるために、UI領域以外のものも含めた大きな観点から、ユーザー体験全体を総合的に設計しなければならない。

つまり、良い製品やサービスを作るには、まずユーザーの要求を理解したUXデザインを行い、それを基にUXを向上させるUIデザインを設計する必要がある。

UI/UXの具体例

ECサイト(ショッピングサイト)では、UIおよびUXデザインの品質が直接販売に関わる。そのため運営担当者は、常にユーザーの動線や動向を計測して分析し、得られたデータを基に仮説を立て、Webページ移動の最適化やユーザー体験の向上を目指して、UIの更新およびUX改善に努めている。このときUI/UXデザイナーが重要な役割を担う。
ECサイトでは、すべての人に分かりやすく、安心して買い物できるWebページを設計しなければならない。そのためには、製品写真を見やすいか、ユーザーが必要とする情報を探しやすいか、文字の色や大きさが分かりやすいか、ボタンやリンクを押しやすいかなどを考慮する必要がある。そのほかにも音声機能の追加や多様なデバイスへの対応などもUIデザインの領域である。UXデザインは単なる使いやすさだけでなく、商品選択や購入時の経験が快適で安心でき、さらに興味深いものにできるかという視点でユーザーの経験を考える。
例えば、ページの読み込み速度、商品注文から到着までの速度など、製品およびサービスの品質も考慮しなければならない。そのほかにも、ユーザーの購入途中での離脱率が高い場合は、UIの改善だけでなく、カスタマーサポートの充実や通知機能の追加など、さまざまな方法を用いて施策を実施する。

UI/UXデザイン設計の目的

ユーザーに考えさせない

ユーザーの要求や動向を予測し、ユーザーがあまり考えなくても目的を達成できるように設計することである。そうなれば、ユーザーは難しく考えずに直感的で、滑らかで快適に製品やサービスを利用できるようになる。

ユーザーの障害になるものを取り除く

たとえ小さなものでも、ユーザーがその製品やサービスを何度も使ううえでは非常に大きな障害になり得る。

UI/UXデザイン設計のコツ

ここでは実際に「良いUI」「良いUX」を設計するにはどうすればよいか、UI/UXデザインの目的を踏まえて説明する。

ユーザーの視点で考える

UI/UXデザインを設計するうえで最も重要なのは、ユーザーの視点で考えることである。よくあるケースとして、開発者が開発を進めるうちに視野が狭くなり、自己表現を追求してしまうと、開発者側にとって便利なデザインになってしまう場合がある。斬新なデザインや多機能性も、ユーザーの要求に合わなければ逆にストレスを感じさせてしまうため注意が必要である。
ユーザー視点で考えるためには、まず対象の製品やサービスについて熟知することである。できる限り対象の製品やサービスに関するすべてのデータを集め、そこからどうすれば使いやすくなるか、気持ちよく経験してもらえるかなどの改善策を導き出していく。

目標を設定する

自社の製品やサービスは誰のために何のためのものなのかを考え、最終的にどの程度認知されたいのか、どのユーザー層に利用されたいのか、どれくらい売上やユーザー数を増やしたいのかなど、目標を設定することも効果的である。それが決まればUI/UXデザインの方向性も自然に定まる。反対に目標が不明確なら、実際に完成しても曖昧なものになり得る。

ペルソナの設定を明確にする

前で「どのようなユーザー層に利用されたいか」と述べたが、このペルソナ(Persona)とは、製品やサービスを利用する典型的なユーザー対象である。優れたUI/UXデザインを設計するためには、どのような人がどのような目的で対象製品やサービスを使うのかを考え、明確にすることが重要である。
例えば、若者と中年では好むデザインや機能が異なる。また同じジャンルであっても、初心者、中級者、上級者では求める情報の質と量が変わる。
年齢、性別、属性などを詳細に想定し、そのユーザーが求める内容とずれがないようにUI/UXをデザインする必要がある。
ペルソナは実際のデータを基に設定する場合もあり、「このようなユーザー層に利用されたい」という仮想の人物像を作る場合もある。より具体的にユーザー対象を設定すれば、UXも設計しやすくなる。

ペルソナの目的を快適に達成する構造を考える

例えば、ユーザーが商品を購入したいなら、購入目的を達成する前にどのようなプロセスを踏む必要があるか考えてみよう。商品選択の段階では、ユーザーがより良い商品に出会えるよう、商品を価格順、評価が高い順に表示する機能を追加したり、商品にレビュー機能を付けたりできる。こうすればユーザーが製品を吟味でき、UXも向上する。

検証を繰り返す

UI/UXの改善に明確な正解や目標はない。例えば、ユーザーの要求を理解する手段として「ユーザーテスト」がある。自社の製品やサービスなどを実際に使用する様子を観察したり、レビューを受けたりすることで、改善点を見つけやすくなる。WebサービスならGoogle Analyticsのような分析ツールを使って効果を測定できる。そこから得たデータを今後の改良に反映するなど、細かくPDCAを回していくことが、ユーザーの要求に応えるUI/UXへの近道である。

UI/UXデザインを扱う職種

Webデザイナー

言うまでもないが、UI/UXデザインを扱う職種の代表格としてWebデザイナーが挙げられる。ちなみにWebデザイナーとは別に、UIを専門に扱うUIデザイナーという職種もある。2つの職種の違いは、Webデザイナーの役割が見た目そのものを良くすることなのに対し、UIデザイナーはユーザーの使いやすさや操作性といった機能面を追求する点である。

エンジニア

会社によってはエンジニアもUI/UXデザインを扱うことがある。小規模な会社なら、エンジニアがUI/UXデザインを考えながらアプリやWebサイトを設計することも多い。また大規模な会社でも、開発の上流工程を担当する場合には、UI/UXを考慮した設計が求められる。

まとめ

UIはユーザーとの接点となる外観や操作性に関わる部分であり、UXはUIを含むユーザー体験全体である。良い製品やサービスを作るには、まずユーザーの要求を理解したUXデザインを行い、それを基にユーザーが迷わず直感的に理解でき、円滑に使えるUIデザインを設計する必要がある。
そのためには、ユーザーの視点で考え、データを分析し、目標を立て、それに対する最適なアプローチを導き出すことが重要である。

devkuma – UI