UI / UX の違いとは？

UI / UX の違いを一言でいうなら、UIはプロダクトと顧客との「接点」、UXは顧客の「体験」を表す言葉です。まずはそれぞれの意味を、あらためて確認していきましょう。

UIとは

UI（ユーザーインターフェース）とは、ユーザーがサービスやプロダクトと触れる、すべての「接点」を表す言葉です。WEBやアプリ・印刷物・店舗や接客など、顧客と接するあらゆる対象は「UI」であると言えます。

UIが良いデザインは、ユーザーをスムーズかつ滞りなく「目的」へと導きます。例えば「通販アプリで靴を買いたい」と思ったとき、アプリ自体の写真や料金の提示・購入までの道筋がわかりやすければ、靴を買うという目的をトラブルなく快適に達成できます。

ユーザーに満足して商品やサービスを利用してもらうためには、こういった「写真や料金・手順がわかりやすい」など、優れたUIを意識することが重要です。

UX とは

UX（ユーザーエクスペリエンス）とは、ユーザーがサービスやプロダクトの利用を通じて得られる「体験」を表す言葉です。「Uber Eats」を例に挙げると、ユーザーがアプリで商品を注文してから、次回また利用したいと思うまでの一連の流れは、すべて「UX」と言えます。

【Uber EatsのUXの例】

・アプリを開いて商品を選び、注文する（シンプルな使い勝手で快適に注文できる）
・商品が届くまで待ち時間を過ごす（配達状況がスマホで確認できるため安心）
・玄関先で商品を受け取る（配達員の対応が親切で気持ちいい）
・食事する（出来立ての状態で美味しく食べられた）
・店舗をお気に入りに登録する（次回、一から探す手間がなくて便利）
・次回、またアプリを利用したいと思う（トラブルもなく使いやすくて満足）

このように顧客との「接点」をあらわすUIと「体験」を指すUXとの関係は、以下のように考えられます。

顧客の体験である「UX」は、必ず何かしらのサービスやプロダクトに接すること（＝UI）によって得られます。よってUXはUIの上位互換にあたる概念であり、UXの満足度を高めるためには、優れたUIが必要不可欠となります。

UI / UX デザインはなぜ重要なのか？

UI / UXへ配慮したデザインは、顧客の総合的な満足度を高め「またこの商品・サービスを利用したい」と思ってもらう上で非常に重要です。逆に言えば、どれだけ優れた商品やサービスを持っていても、それを消費者に提供する前後の UI / UX が良くなければ、総合的な満足度を高めることは難しくなります。

「クレジットカード会社」のUI / UX デザイン改善の具体的な事例

クレジットカードの発行から審査までをおこなう「株式会社A（以下A社）」の、WEBサイトにおける「UI / UX デザイン改善事例」をご紹介します。

アナログでおこなうカードの申し込みには、大量の書類を書いたり、窓口へ足を運んだりといった手間がかかることが以前から課題として挙げられていました。より消費者が手軽に利用できるよう、A社ではWEBサイトからのカード申し込み受付を新規で開始することにしました。A社のカードは、ポイント還元の高さや保険内容の手厚さから、利用者の満足度も高い商品です。

しかしWEBサイトからの申し込みを開始してからも、相変わらず窓口や郵送経由の申し込みが多数を占め、サイト経由での問い合わせ数に大きな変化が見られません。原因がわからないA社は専門家へコンサルティングを依頼しました。

専門家が調査したところA社のWEBサイトは、クレジットカードの申し込みを開始してから完了するまでの導線に、複数の課題点があることがわかりました。

【申し込みサイトの課題点】

・WEBサイトを開いて「どこからカードを申し込むか」がわかりづらい
・使われている言葉が、専門的すぎて理解しづらい
・ボタンやプルダウンのデザイン・配色に一貫性がなく、文字サイズの濃淡もなく見づらい
・文字が細かく、行間も詰まりすぎて読みづらい
・入力内容に誤りがあった際、途中からでなく、すべて最初からやり直しになる
・ぺージ数・工程が多く、完了までに平均20分以上の時間を要する

UIが快適でなかったことが原因で、せっかくサイトへ訪れたユーザーが「申し込みフォーム」にたどり着けず離脱したり、フォームの使いづらさが原因で記入を途中で辞めてしまったりといったロスが発生していたのです。

そこでA社は、サイト訪問から申し込み完了までの一連の「UI / UX デザイン」を、すべて簡潔でわかりやすく、利用者が快適に使用できる設計へと改善することに。結果的にサイト訪問から申し込みまでの離脱率は大幅に下がり、フォーム入力の所要時間も平均で10分ほどへ短縮できました。

今後も細やかなテストと改良を繰り返して、常に顧客にとって最適な「UI / UX デザイン」を継続したいと、A社は考えています。

このように、ユーザーの視点にたった「UI / UX デザイン」にこだわることで、競合に負けない、消費者から自然と選ばれ続けるサービス・プロダクトの提供が可能となります。

UI / UX デザインの改善フロー

UI / UX の必要性を確認したところで、実際にUI / UX デザインを改善するための手順についてみていきましょう。UI / UX デザインを効果的に改善するには、実際に消費者の視点にたって、その商品やサービスを体験してみることが重要です。

１．プロダクトを利用する「ペルソナ」を設定

はじめに、実際に製品やサービスを利用してほしい「ペルソナ」像を決めます。

ペルソナとは、自社製品やサービスを売りたい「代表的な顧客像」のことで、年齢・性別などに加え、趣味趣向や行動習慣などを細かく設定します。

　（例：25歳女性 / 事務職 / 独身 / 実家暮らし / 年収300万円 / 趣味は料理・カフェ巡り・猫 / オシャレがすき / 毎月ネイルとまつげサロンへ通う）

２．プロダクトを可視化する

改善したいアプリケーションやWEBサイトの操作画面を可視化します。

例えば「WEBサイト経由での資料請求を増やすこと」が目的であれば、サイトに訪問してから「資料請求」のページを開き、申し込みを完了するまでの全フローを書き出し図式化します。

３．全フローをスクリーンショットで撮影

フローに沿って操作画面のスクリーンショットを撮影し、さらに現状を細分化していきます。

【フローを図式化する例】

４．ペルソナになりきって、実際に操作してみる

WEBサイトを使って資料請求を申し込むまでの、一連の流れを実際に操作してみます。

このとき、より顧客心理に立って判断するため、１で定めたペルソナになりきって操作するのがポイントです。例えば顧客増が「女子大学生」ならば、より文章を平易に書き直したり、堅苦しいデザインをよりキャッチーにしたり、といった改善点が見つけやすくなるためです。

実際に操作をしながら、2・3で作成したフロー図やスクリーンショットに、UIへの気づきや改善ポイント・アイデアなどを書き込んでいきます。

５．抽出した改良ポイントをもとに改善・テストを繰り返す

洗い出した改善点に優先順位をつけ、優先度の高い順にWEBサイトやアプリケーションの改修をおこないます。

このとき「改善してリリースして終わり」ではなく、日々改善とテストを繰り返しながら、より顧客にとって使い勝手の良いプロダクトへと近づけていきます。

以上、UI / UX デザインのおおまかな改善フローとなります。

まとめ

今回は「UI / UXとは」というテーマで、その概念や重要性・改善の手順などを確認いたしました。UI / UX への理解を深めるには、体系化されたものを学ぶことに加え、日々の生活の中でUI / UXについて考える習慣を意識的にもつことがおすすめです。

【UI / UXへの理解を深める習慣】
・WEBサービスやアプリを使用する際「なぜこの位置にボタンがあるんだろう？」「なぜこの背景にこの文字色なんだろう？」など、UI / UX を観察する。

・ペルソナになりきってアプリを使用し、違和感を感じる点を書き出してみる。・企業であればチームで実際に自社のサービスを使ってみる機会を設け、改善点を出し合う。

顧客に選ばれ続けるサービス・製品であるために、UI / UXに配慮したデザイン作りと、日々の改良は必要不可欠です。本記事がUI / UXの理解に、少しでも役立てれば幸いです。

CX Value Labでは、企業様のWEBサイトや紙媒体における「UI/UXの現状」を整理し、より顧客に最適な価値提供ができる改善策をご提案します。ぜひ下記「サービス概要」よりご覧ください。

サービス概要はこちら