【UI】と【UX】の違いと関連性｜プロダクトデザインで気を付けるべき2つのポイント
Webサイトの設計やデザインにおいて必ず意識しなければならない要素として、たびたびUIとUXが挙げられます。
UIは「人間とサービスや商品との接点」、UXは「サービスや商品に対するユーザーの体験」のことですが、これだけ聞いてもうまく理解できない人は多いでしょう。
UIとUXは、言葉としては似ていますが異なる概念です。
しかし「UIはUXの一部」であり、まったくの別物というわけでもありません。
この記事では、まずUIとUXの定義を明確にし、それからその違いと関係性を解説していきます。
UIもUXも開発現場でよくきかれる言葉ですが、UI/UXデザイナーや開発担当者以外も理解しておくことをお勧めします。なぜなら、顧客やユーザーの満足に直結する要素のため、最終的には企業の利益やブランドイメージに関わる要素だからです。
できるだけ具体的に噛み砕いて説明していくので、なんとなくでしか理解できていない人はぜひご一読ください。
目次
１．UI/UXとは何か
１－１．UIの定義
１－２．UXの定義
１－３．UIとUXの違い
１－４．「優れたUX」には「優れたUI」が必要である
２．UI/UX設計で考えるべきこと
２－１．UI/UXとストレス
２－２．UI/UXとユーザビリティ
３．まとめ
１．UI/UXとは何か
１－１．UIの定義
UIとはUser Interface（ユーザー・インタフェース）の略称です。
人間とサービスの接点のことを指し、ユーザーがサービスや商品を利用するときに触れるもののこと、と理解するといいでしょう。
この場合の「触れる」とは、手で触れるもの以外に目に触れるものも含みます。つまり、物理的に接触するもの以外にも、グラフィックやフォントといった外観的な要素も含まれるのです。
ユーザーは、インターフェースに触れることでサービスを体験します。
サービスや商品などのために作られて、かつ顧客やユーザーが実際に目にするすべてのものがUI、といっても良いでしょう。
抽象的でわかりづらいと思いますが、「１－３．UIとUXの違い」で後述する具体例をみれば理解しやすくなるので、このまま読み進めてみてください。
１－２．UXの定義
UXとはUser Experience（ユーザー・エクスペリエンス）の略称です。
日本語では「ユーザー体験」とよばれています。
人間がサービスを使用したときに得られる総合的な体験を指し、その体験自体や、体験を通じて感じたことなどすべてを内包する概念です。
たびたび、「サービスやアプリケーションを利用した際の感覚」と説明されることが多いですが、実際にはそれのみに留まりません。「サービスを利用している間」だけでなく「利用する前」「利用した後」の体験や感覚も含む、時間的にも非常に幅広い概念です。
Wikipediaを参照すると、国際規格ISO 9241-210で下記のように定義されていることがわかります。
ユーザーエクスペリエンス（UXと略記されることが多い）は、ISO 9241-210において「製品、システム、サービスを使用した、および／または、使用を予期したことに起因する人の知覚（認知）や反応」と定義されており、ユーザーがある製品やシステムを使ったときに得られる経験や満足など全体を指す用語である。
ごく乱暴な言い方をしてしまえば、サービスを利用した人の主観的な評価、と表現することもできるでしょう。サービスを知る前から使用した後までの体験、つまり主観的なストーリーがUXとよばれるものです。
１－３．UIとUXの違い
UIとUXをそれぞれ定義づけたところで、具体的な違いをみていきます。
抽象的な話が続いたので、具体的な例を挙げてみましょう。
あなたは今、「なんでものびるWEB」というwebサイトを閲覧していますね。
この場合のUIとは、あなたがこのwebサイトから情報を得るために「見て」「触れる」すべての部分のことを指します。
具体的にいえば、あなたが閲覧している「グローバルナビゲーション」「ボタン」「リンク」「サイドバー」などが該当します。また、あなたが今目にしている「フォント」「余白」「アイコン」「ビジュアルデザイン」などの外観的な部分も含まれます。
では、次にUXを考えてみましょう。
UXは、UIのように「見て」「触れる」ものだけでなく、「見て」「触れた」ときの感覚や印象を含む包括的なものです。
あなたがこの記事を読みながら感じたり考えたりしていること、それはUXに該当します。「このバナー押しやすいな」「このリンクわかりづらいな」などのUIに対する感想や、記事の内容自体に対する「なるほど、そういうことか！」などの感想もUXです。
また、この記事を読み終わってwebサイトを離脱した後の感想や行動などもUXには含まれています。
つまり、あなたの「なんでものびるWEBの閲覧」という体験を引き起こすきっかけとなった行動から読後の感覚まで、そのすべてがUXに含まれるということです。
１－４．「優れたUX」には「優れたUI」が必要である
こうやって比較するとよくわかりますが、UXはUIよりも大きな概念であり、かつ「優れたUX」を作るためには「優れたUI」が必要だということがわかります。
なぜなら、「フォントが見づらい」「メニューがどこにあるかわからない」などの低品質なUIに触れれば、ユーザーの満足度は低下し、「webサイトの閲覧」という体験の質も低下するからです。
つまり、UIはUXの質を左右する要素であり、優れたUX設計のためには優れたUIが必要不可欠だということです。
しかし、優れたUXを実現するためには、優れたUIを用意するだけでは足りません。
なぜなら、UIはユーザーがサービスに触れているときにしか関係ありませんが、UXはユーザーがサービスと接していない時間の感覚も含むからです。
優れたUXを作ろうと思ったら、一つの画面といった局所的な部分だけではなく、サービス全体に対するより広範囲な視点が必要となります。
適切なペルソナ設計やカスタマージャーの作成など、「ユーザーがどのようにサービスを知り、接し、どのような行動を起こすのか」という全体的な見通しが不可欠なのです。
２．UI/UX設計で考えるべきこと
ここまで述べてきたとおり、UIとUXは異なる概念ではありますが、切り離して考えるべきものではありません。
ここからは、UI/UX設計の考え方を「ストレス」と「ユーザビリティ」という2つの視点から解説していきます。
良質なUI/UX設計のためには、まず「良質なUI/UXとはなんなのか？」を正しく理解する必要があります。優れた設計のために必ず考慮しなければならない2点について、詳しくみていきましょう。
２－１．UI/UXとストレス
ユーザーが新しい商品やサービスに触れるとき、最初に感じることは「ストレス」です。
人の脳は、新しいものに触れたとき、過去に経験した記憶を呼び出して予測を立てようとします。
たとえば「ドリル」というものを初めて触れた人は、それまで使用したことのある他器具の記憶を呼び出して、感覚的に「このボタンを押すと鋭利な先端が穴を開ける動きをするのではないか？」と予測します。この「記憶の予測」を利用することで、初見でもスムーズに使えるインターフェースを実現できるようになります。
しかし、これが「ボタンを押したら羽が生えて飛んでいった」などの予測とは違う挙動をした場合、脳は新たに異なる体験の記憶を探し出して再度予測と検証を行わなければなりません。
この「予測」→「検証」→「結果」までの道筋は、繰り返す回数が多ければ多いほどユーザーのストレスを高めることになります。
人間は新しいものに触れるとき、楽しみと同時にストレスを抱えます。
あらゆるすべてのユーザーの記憶を知ることができない以上、これは絶対だと思っておくべきです。
設計や制作に携わる者は「ストレスがあること」を前提として、そのストレスを極限まで削ぎ落とす工夫をしていく必要があります。
２－１－１．UIとストレス
それでは、UIに対してユーザーが感じるストレスを具体的に列挙してみましょう。
今回は、webサイト閲覧時のストレスを挙げてみます。
- どこに何があるか探すストレス
- 長いテキストを読むストレス
- 次の移動先を探すストレス
- ナビゲーションを利用するストレス
- 自分に必要のない情報が目に見えるストレス
このように、対象となるユーザーがどんな行為にストレスを感じるのかを明確にし、それらを極力排除できる設計が必要となります。
そのためには、先述した「記憶の予測」の活用が有効です。
ターゲット層がこれまで触れてきた商品やサービスを推測し、その経験を活かせるような設計をすることでストレスを極限まで低下させることができます。
斬新なUIはユーザーに衝撃を与え、強いイメージを植え付けます。
しかしその代償として、「わかりやすさ」や「使いやすさ」を犠牲にするケースが大いにあります。経験から予測できないUIは、先述した「予測」→「検証」→「結果」のプロセスを何度も繰り返させる結果に繋がりやすいからです。
よく、「優れたUIはその存在を感じさせない」といいます。これは「ユーザーに知らないシステムに触れている感覚や疑問を抱かせない」という意味です。
優れたUI設計のためには、ユーザーの過去の体験を予測し、それを活用して次の動作予測が行いやすいように導く必要があります。過去体験の予測には適切なペルソナ設定が必要であり、そのペルソナが抱くであろうストレスを予測して排除していくことが良質なUI設計につながるプロセスです。
参考記事：良質なペルソナを作るために必要なデータと作り方｜YATのblog
２－１－２．UXとストレス
UIで極限までストレスを削ぎ落とせたとしても、それだけでUXにおけるストレスも完全になくなるとはいえません。
インターフェースが既存のものと近い作りになっていたとしても、商品やサービス自体の役割がわかりづらければ、ユーザーのストレスは大きいものになります。
UXで考えるべきことは、ユーザーのベネフィットを明確に提示することです。
ベネフィットとは「商品やサービスを利用することによってユーザーが得られる利益」であり、それを使うと要するにどうなるのか？という究極的な結論であるといえます。
マーケティング業界には、「ドリルを買おうとしている人は、ドリルが欲しいのではなく穴を開けたいのだ」という有名な言葉があります。
設計・開発者は「より精度の高いドリル」の開発にフォーカスを当てがちですが、ドリルを購入するユーザーは「ドリル自体」が必要なわけではありません。何かを固定するためにネジが必要で、そのネジを通すための「穴」が必要なのです。
つまりユーザーは、自分の期待する穴を手に入れることができれば、その手法がドリルでなくても構わないのです。
UX設計においてもっとも重要なことは、ユーザーに必要な物は何なのか？という本質を考えることです。
どれだけ精度が高く直感的に操作できるドリルであっても、それが「穴を開けるための道具である」ということが伝わらなければ意味がありません。
そのためには、やはり「記憶の予測」を活用していく必要があります。
ドリルは「穴を開けるための道具」として一般的に認知されているので、ドリルの形状をしているものであれば、ユーザーは見ただけでそれを「穴を開けるための道具だな」と判断します。
しかし、たとえば穴を開けるための道具として「フワフワした球状の物体で、宙に浮いている」という製品が開発されたとして、あなたはそれを「穴を開けるための道具」だと判断するでしょうか。
これはまったく未知の道具であり、ユーザーはそれが「穴を開けるための道具」だとは推測できません。結果の予測がつかないのでそもそも選択してもらえず、仮に選んでもらえたとしても「予測」→「検証」→「結果」のプロセスが繰り返されることが予測されるため、全体的なユーザー体験の価値は低下します。
もちろん、機能を発揮するために「球状でなければならない」「宙に浮いていなければならない」などの必要性があれば、その形状を選択するべきでしょう。
ブランディングなどの観点からみて、あえて斬新なデザインを採用するべき場合もあります。
しかし基本的には、ユーザーが求める目的に対して一般的に認知されているデザインや形状を選択した方が、簡潔かつ合理的に情報を伝達できることを忘れてはいけません。
２－２．UI/UXとユーザビリティ
次に、UI/UXを考えるにあたって密接な関係にある「ユーザビリティ」について説明していきます。良質なUI/UX設計の裏には、必ずユーザビリティに対する配慮が隠れています。
ユーザビリティはよく使用される語句ではありますが、明確な定義づけをせずに使用している人が多い語句でもあります。
ここではまず「ユーザビリティ」の定義づけを行い、それがUI/UXとどう関係しているか説明していきます。
２－２－１．ユーザビリティとは何か
ユーザビリティとは「使いやすさ」や「使い勝手」などの意味合いで使用される言葉であり、UIとほぼ同義で使用されることが珍しくありません。
しかし、国際標準化機構によるISO 9241-11においては、下記のように定められています。
ユーザビリティ (usability): 特定の利用状況において、特定のユーザによって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、ユーザの満足度の度合い。
・有効さ (effectiveness): ユーザが指定された目標を達成する上での正確さ、完全性。
・効率 (efficiency): ユーザが目標を達成する際に、正確さと完全性に費やした資源。
・満足度 (satisfaction): 製品を使用する際の、不快感のなさ、および肯定的な態度。
・利用状況 (context of use): ユーザ、仕事、装置（ハードウェア、ソフトウェア及び資材）、並びに製品が使用される物理的及び社会的環境。
この定義を見ると、「満足度」や「利用状況」などの項目は、UIよりUXに近いものだといえます。
しかし、ユーザビリティが「製品を使用しているときの満足度」や「製品を使用しているときの環境」など製品使用中の状況を指すことに対し、UXには使用後の感覚なども含まれます。ユーザビリティは「UIより広く、UXより狭い概念」と理解しておくといいでしょう。
２－２－２．ユーザビリティとUI/UXの関連性
ユーザビリティの定義にある「有効さ」「効率」「満足度」「利用状況」という4つの指標は、UI/UX設計を考える上でも大いに役立ちます。
ユーザビリティの各指標を考えることによってUX設計の基礎部分を固められて、また、各指標の解決する具体策を掘り下げることでUI設計の目標が定まるからです。
試しに、先ほどのドリルの例で実際に考えてみましょう。
有効さ
これは「目的を達成できるかどうか」という指標であり、ドリルの例でいえば、「穴を開けたいときに希望した通りの穴を開けられるかどうか」ということになります。
ユーザーはドリルが欲しいのではなく穴を開けたいと考えているので、これが達成できなければUXの質は著しく低下します。
UXの質を高めるためには、目的を適切に達成させる必要があります。
そのためには、「確実に穴を開けられる形状」や「誰もが操作ミスをせずに扱えるデザイン」などのUIが必要になります。
効率
これは「目的を達成するためにどれだけの労力を費やしたか」という指標であり、ドリルの例でいえば「どれだけ簡単に穴を開けられたか」ということになります。
直感的に操作できない、「記憶の予測」が成立しないインターフェースの場合、ユーザーは使用法に戸惑って穴を開けるまでに多大な労力を要することになります。また、仮に使い方がわかりやすかったとしても、一人で操作できないような扱いづらい形状をしていれば、それもユーザーに手間をかけさせることになります。その結果、当然UXの質は低下します。
UXの質を向上させるためには、誰でも簡単に扱えるよう、わかりやすく扱いやすいUI設計が必要になります。
満足度
これは、有効さと効率が両立しなければ成立しない項目です。
精度の高い穴を手軽に開けることができれば、ユーザーはドリルに対して満足感を抱きます。UXの質向上につながるといえるでしょう。
ここで必要なUIには、「有効さ」と「効率」で挙げたものに加えて、外観的なデザインなども含まれます。「不快感のなさ」や「肯定的な態度」は、機能性だけに対して与えられるわけではありません。
想定しているユーザー層が望むものは、本来的な機能とは関係ない部分でも配慮する必要があります。
利用状況
これは「一般的に想定しうる環境で問題なく活用できるか」という指標であり、仮にドリルが片手で扱える大きさであれば「片手の力だけで十分取り回しがきいて操作可能かどうか」ということになります。
大きさが片手サイズであっても、指の届かない場所にボタンがあれば実質片手だけで扱うことはできません。その場合、高所や足場が不安定な場所で使うことは難しいといえるでしょう。
想定するペルソナがどんな行動をとり、どんな状況下でドリルを使用するのかを明確にし、その状況に最適化することで質の高いUXが得られます。
そのためのUIは、ペルソナ像と想定使用状況によって変動します。ペルソナがこれまでに体験してきたものやサービスを利用する状況を予測し、それを元に仮説を立て、必要とされる要素を掘り下げましょう。
このように、ユーザビリティを考慮してUXを考えていくことが、ユーザーの満足度を最大限に引き上げる大切なプロセスだといえます。
そして、そのために必要な具体策を検討していくことが、良質なUI設計にもつながります。
UIはユーザーがサービス・アプリケーションに触れるための架け橋で、この架け橋をどうするのかということが、優れたUIを生み出す事になります。
３．まとめ
UIとUXは異なる概念ですが、切り離して考えるべきものではありません。
両者は密接に関係しており、良質なUIなくして良質なUXは成立しません。ユーザーの満足度を高めるためには、片方ずつではなく複合的に考える必要があります。
まずは「記憶の予測」が想定できるように、ペルソナ設計をしっかりと行いましょう。
その仮説に基づいて「ストレス」や「ユーザビリティ」を考慮したUX設計を行うことで、必然的に適切なUI設計が可能となるでしょう。
著者：YAT
「Rish-design」という屋号で活動している、フリーランスのWebデザイナー。
ECサイトの作成運用、Webサイトの作成運用を中心に、デザイン・コーディング・プログラミング・マーケティング・広告運用などを行っています。
2009年からWeb制作者向けに「YATのBlog」を公開、デザインやコーディング、サーバーに関すること、IA、UXなど幅広く執筆。オープンソースコミュニティにも所属し、WordPressコミュニティが開催するカンファレンス「WordCamp Kansai 2016」では実行委員長を務めました。
