UI(ユーザーインターフェース)とは?UX(ユーザーエクスペリエンス)とは?違いを理解しよう!
成果が出るホームページを構築するうえで欠かせない概念の1つに「UI(ユーザーインターフェース)/ UX(ユーザーエクスペリエンス)」があります。一緒に語られることの多いUIとUXのそれぞれの単語の意味の違いについて、しっかり理解していますか?
デザイナーの方は理解されている方が多いと思いますが、デザイナー以外の方も、UI/UXについてしっかり理解しておかないと、デザイナーとのコミュニケーションに齟齬が生じてしまう可能性があります。
今回は、意味を混同してしまいがちなUIとUXの違いや改善事例を紹介します。
UI(ユーザーインターフェース)とは?=ユーザーとサービスとの接触面
UIは「ユーザーインターフェース(User Interface)」の略です。Interfaceとは「接点、接触面」という意味で、UIはユーザーと製品・サービスの接触面を指すので、「ユーザーの目に触れる部分使用する部分」はすべてUIとみなすことができます。
Webサイトの場合、パソコンやスマートフォンに表示されるデザイン、フォントなど、製品であれば製品そのものや外観など、ユーザーの視覚に触れる全ての情報が「UI(ユーザーインターフェース)」と呼ばれます。
UX(ユーザーエクスペリエンス)とは?=ユーザーがサービスを利用して獲得できる体験
よくUIと同列に語られるものとして、UXがあります。UXは「ユーザーエクスペリエンス(User Experience)」の略です。Experienceとは「体験、経験」を意味し、UXとは「ユーザーが製品・サービスを通じて得られる体験」を指します。
例えばWebサイトの場合、
- デザインがキレイ
- フォントが読みやすい
- お問い合せフォームや購入ページまでの導線がわかりやすい
といったWebページの印象で変わる表層的な部分から、
- 商品を注文したらすぐに届いた
- 対応が丁寧だった
- 商品のクオリティが高い
というようなサービスの質に関わる部分も「UX」です。サービスを利用する一連の行動の中で、ユーザーが感じたこと全てがUXになると捉えましょう。
UX(ユーザーエクスペリエンス)向上の企業事例
ここまでUIとUXの違いについて説明してきました。UIの改善にについては、Webサイトやアプリの設計の見直し、デザインなどのリニューアルなど、イメージがしやすいのではないでしょうか?一方、UXについては、改善したくても、具体的なイメージが湧きづらいかもしれません。UXが向上した企業の事例をみながら、UXについての理解を深めましょう。
味だけではなく、“お出かけ”と“コレクション”も楽しめる「CokeON」
画像引用:【導入事例】日本コカ・コーラ株式会社様 | 株式会社アイ・エム・ジェイ
赤いボトルでお馴染みのコカ・コーラをはじめ、幅広い世代に愛されている日本コカ・コーラのドリンク。コカ・コーラでは、ドリンクの“味”だけではなく、“外へ出かける”ことを楽しくするためのサービスとして、「CokeON」というアプリを提供しています。
CokeONはBluetoothを利用したスマートフォンと自動販売機の連動アプリ。ユーザーはこれを利用すると、スマートフォンだけでドリンクの購入ができるだけでなく、15スタンプでドリンクが一本もらえるポイントサービスが受けられるようになります。
スタンプは、購入したドリンクのロゴを利用したものが多く、「他の種類のスタンプも集めたい」とワクワクできる仕様。さらにアプリには歩数カウントの機能もあり、「外へ出かけてコカ・コーラの自動販売機を見つけ、購入する」ことを最大限に楽しめる工夫が散りばめられています。
ただ単にドリンクの味やボトルのデザインを改良していくだけではなく、ユーザーがドリンクを購入し、味わうまでの一連の動作=体験を楽しめるようにする。これがUXを改善するということです。
参考:
導入事例】日本コカ・コーラ株式会社様 | 株式会社アイ・エム・ジェイ
“VIPでしか味わえない体験価値”を積極的に伝えて売上を2倍にした「Oisix」
Oisixでは、受注の70%を占めるVIP会員に向けて「VIP専用売り場」を用意しています。しかし、VIP専用売り場を利用した売上はわずか14%。VIP会員の受注数に対し、閲覧数やVIPページからの受注単価は年々低下傾向にあったそうです。
そこでOisixでは、現状の課題を「VIP会員が自分がVIPだと気が付かず、特別な売り場の存在を認識していないため」だと考え、この状況の改善に動きました。
具体的には、「VIPであることに気づいてもらう」「VIPでしか得られない価値を伝える」「瞬間的に美味しそうだと思えるクリエイティブで訴求する」の3つを実施。お客様自身に“特別な存在であること”や“VIPでしか味わえない食材があること”、“VIP素材を使った特別なレシピ”などを積極的に伝えることで、VIP専用売り場の売上を2倍に伸ばしたそうです。
参考:
OisixのUX体験設計 デザインの力でECの売上が2倍にアップ! お客様の行動心理に基づいたUX改善例
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- フォーム
- フォームとは、もともと「形」「書式」「伝票」などの意味を持つ英単語です。インターネットの分野では、パソコンの操作画面におけるユーザーからの入力を受け付ける部分を指します。企業のホームページでは、入力フォームが設置されていることが多いようです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- 導線
- 導線とは、買い物客が店内を見てまわる道順のことです。ホームページにおいては、ページ内での利用者の動きを指します。 ホームページの制作にあたっては、人間行動科学や心理学の視点を取り入れ、顧客のページ内での動きを把握した上でサイト設計を行い、レイアウトや演出等を決めることが重要になります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- 単価
- 商品1つ、あるサービス1回あたり、それらの最低単位での商品やサービスの値段のことを単価といいます。「このカフェではコーヒー一杯の単価を350円に設定しています」などと使います。現在、一般的には消費税を含めた税込み単価を表示しているお店も少なくありません。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング