UI/UXとは？その違いや関係性・デザインのコツを徹底解説します！

1.UI/UXとは？

UI/UXは近しい概念でデザインやプロダクト開発の世界では同時に使われることが日常的になっています。しかし、その定義はそれぞれ異なり、正確に違いを解説できる人も少ないでしょう。

本章では、UIとUXの定義をそれぞれ解説した上でUI/UXの違いについてご紹介します。

1.1.UIとは？UIの定義

UIとは「User Interface（ユーザーインターフェース）」の略で、日本語で直訳すると「顧客との接点」となります。つまり、Webサイトやサービスとユーザー（顧客）との接点を意味しており、多くは「利便性」や「使いやすさ」といった意訳をされるケースがあるのは皆さんもご存じでしょう。デザイン上の見た目の良さだけではなく、機能性や操作性といった商品サービスと顧客との接点を広く意味しています。

また、WebサービスやWebサイトにおけるUIには「CUI（キャラクターユーザーインターフェース）」と「GUI（グラフィカルユーザーインターフェース）」の2つに分けられます。CUIとはキーボードの文字入力だけで操作する機能やシーンのことで、GUIはマウスなどを使ってグラフィカルな画面を操作する機能やシーンのことを意味しており、ページデザインやHTMLメールのデザインの機能などで良く使われる言葉です。

関連記事

→UIとは？UIデザインのポイントやUXとの違いをわかりやすく解説！

1.2.UXとは？UXの定義

一方でUXとは「User Experience（ユーザーエクスペリエンス）」の略で、日本語で直訳すると「顧客体験」となります。ユーザーが商品やサービスを通じて得られた体験価値であり、表面的にデザインが良かった、操作がしやすかったというだけではなく、例えばレストランであれば「料理がおいしかった」とか、「接客の対応が素晴らしかった」といった商品やサービスの品質全般的に関わることで、顧客が何をどう感じたかといった広い範囲で使われる言葉です。

1.3.UI/UXの違い

上記の通りUI/UXは近しい関係にはあるものの、言葉の定義や意味していることは全く異なります。UIがユーザー視点で商品やサービスとの接点における利便性や操作性といった機能的な側面の意味合いが強いのに対して、UXは顧客の体験価値なので商品やサービスを通して全般的にユーザーが何をどう感じて、どう評価したのか、という側面が強いです。

UI/UXどちらも大事な概念であり、ユーザーからの満足度を高める上で最も重要な概念だと言えます。車に例えるなら両輪のようなものです。

UI/UXの違いについて意識した上で、以降の記事で、その関係性やデザインのコツなどを解説していきます。

2.UI/UXの関係性

UI/UXの違いについて理解した上で、とは言え何か関係性もありそうなことはお気づきいただいているかと思います。関係性が強いので日常会話では「UI/UX」と一括りの単語のように使われるのが定着していると考えられ、皆さんも日々の会話で違和感を感じないのではないでしょうか？

本章では、UI/UXの関係性について解説いたします。

2.1.UI/UXはどちらも「ユーザー視点」が最も重要

まず大前提として再度意識しておきたいのはUIにしてもUXにしても、どちらも「ユーザー視点」が最も重要だという事です。UIはユーザーと商品サービスとのインターフェース（接点）における満足度で、UXは商品サービスを通じてユーザーが感じた顧客体験における満足度という違いがあるにしても、どちらも「ユーザー視点」における満足度を表しています。

ともすると商品やサービスを提供する側の視点で「これがいいだろう」と考え、サービス設計したり改善したりしがちですが、UI/UXはあくまで「ユーザー視点」が大事だということを提唱している言葉であり、ユーザー中心に考えることの重要性を伝えているのです。

2.2.UI/UXは因果関係にある

またUI/UXは因果関係にあるとも言えます。必ずではないですが、UIが優れているので結果としてUXが優れているという関係性が成り立ちます。逆の言い方をするとUIが優れていないのでUXが優れていない、つまり、商品サービスの利便性や操作性といった機能面に不満を感じれば、商品サービスの体験価値は低くなるとも言えます。

良きにしろ悪きにしろ、UIが原因でUXの結果が導かれる因果関係にあると言えるでしょう。

2.3.優れたUI＝優れたUXではない

一方で「優れたUI＝優れたUX」とも言えないケースがあります。例えば、ECサイトのUIは優れているのだが、商品の到着が遅かったり、カスタマーサポートセンターの方の対応が悪かったりすると、ECサービス全体のUXが優れているとは言えません。つまり、ECサイトのUIはとても良いのだが、お買い物体験全体を通じたUXは評価が低い、ということですね。

なので、例えUIが優れていても、UXが優れているとは言えないケースが様々な商品・サービスで言えることではあります。従って商品サービスの設計や改善を検討するにあたっては、UIの意識とUXの意識は別々にして考える必要もあります。

3.UI/UXを意識したデザインのコツ

それでは、プロダクトやサービスのデザインをするにあたって、UI/UXをそれぞれどう意識してデザインするのが良いのでしょう。今まで解説したとおり、UI/UXは関係性は強いものの、定義している範囲が異なるので、デザインをするにあたっては「UI/UX」と一括りにするのではなく、それぞれで意識することを変えてデザインする必要があります。

本章では「UIを意識したデザインのコツ」と「UXを意識したデザインのコツ」について、それぞれ解説します。

3.1.UIを意識したデザインのコツ

UIの定義でもご紹介したとおり、UIとはユーザーと商品サービスの接点にあります。その前提に基づいてUIを意識したデザインのコツをいくつかご紹介します。

①カスタマージャーニーマップ

UI/UXを検討する際に使われる手法の一つに「カスタマージャーニーマップ」があります。御存知の方も多いと思いますが、カスタマージャーニーマップは横軸にユーザー行動の時間軸がフェーズ毎に整理され、縦軸に「ユーザーの行動」「タッチポイント」「ユーザーの意識・感情」「理想的な体験価値」といった項目で整理していくものです。

※カスタマージャーニーマップの例

上記の例だと色塗りした2行がUIの範囲と言えます。これをユーザー視点で定義した上で商品サービスの設計や改善を検討していくと、UIを意識したデザインができると考えて良いでしょう。

②UIデザインのゴール

また、UIデザインのゴールを意識しておくことも大事です。UIはユーザーに利便性や操作性などの商品サービスの接点を評価してもらうのが目的ですが、UIデザインのゴールは、例えばWebサイトであれば「直帰率を下げる」「滞在時間を長くする」といった接点時間を長くしたり、接点回数を増やしたりすることがゴールになります。その為のサイトの構造やデザインを考えるのがUIデザインなのですが、目的を明確にすれば自ずとUIの設計ポイントや改善点などが見えてくるはずです。

③競合商品・サービスを分析する

UIに限らず「評価」というものは相対的に決まることが多いです。いくら自社の商品・サービスのUIが優れていると考えていても、競合商品・サービスのUIの方が優れていれば、相対的に自社の商品・サービスのUIへの評価は下がります。

単純に競合商品・サービスよりも自社のUIの方が劣っている点を洗い出すだけではなく、自社UIの強みにも目を向けましょう。競合との比較で自社の何を強調するのか、という視点で自社UIを考えることも大事です。

3.2.UXを意識したデザインのコツ

続いてUXデザインのコツを解説します。

①カスタマージャーニーマップ

UXのデザインにおいてもカスタマージャーニーマップは有効な手法の1つです。ただし、検討する観点がUIとは異なります。

※カスタマージャーニーマップの例

上記の例で言うと、UXデザインは下2行の「ユーザーの意識・感情」「理想的な体験価値」といった視点でデザインします。この2点をユーザー視点で定義し商品サービスの体験を通してユーザーにどう感じてもらいたいか、どんな体験をしてもらいたいか、から検討していけば、商品サービスのUXが良くなっていくでしょう。

②UXデザインのゴール

UI同様にUXデザインにおいてもゴールを定めておくことが大事です。UXはユーザーが商品サービスの体験を通して価値を感じてもらうことがゴールですから、自社の商品サービスを通じて、どんな体験や価値を感じてもらいたいかをしっかり定めましょう。

その上で、UXデザインを検討していけば、ユーザー視点でUXの優れたデザインができるようになります。そのための手法の1つが上記のカスタマージャーニーマップであったり、「リーンスタートアップ」といった手法もあります。

③ターゲットの理解

UXデザインにおいては、ユーザーターゲットを理解することが重要です。自社の商品サービスがターゲットとしている人たちの属性や趣味嗜好を理解しなければ、ユーザーにどうしたら優れたUXを届けることができるのかは分かりません。ターゲットの理解なくして、優れたUXデザインはないのです。

性別・年齢・職業・居住地域といった属性情報を理解することは勿論のこと、ターゲットユーザーの趣味嗜好やライフスタイルといった特性を理解することも大切です。例えば、一般的にECビジネスにおいては「品揃え」や「物流（早く届く）」といった体験が優れたUXとなる、と言われていますが、ターゲットによっては別の「決済のしやすさ」とか「商品の選びやすさ」といった点の方がUXに影響するかも知れません。ターゲットをしっかり分析し理解して優れたUXをデザインしましょう。

4.まとめ

いかがでしたでしょうか。「UI/UX」は一般的に使われて久しい用語ではありますが、その本来的な目的や違いを使い分けてデザインをされている方は意外と少ないかも知れません。UIではどんな価値を感じてもらえるデザインにするのか、UXではどんな価値を感じてもらえるデザインにするのか、検討する上では本来の目的や違いをしっかり意識してデザインをするように心掛けましょう。

なお、H&KではUI/UXをしっかりと意識したWebサイト制作を得意としています。これを期にご関心のある方は是非お問い合わせください。

H&KのWebサイト制作ページはこちら