クリーク・アンド・リバー社は、UI/UXデザインのノウハウを紹介するセミナーを開催しています。9/14に開催された第1回目のセミナーでは、Zoomによるウェビナー形式で『初めてのUI/UX』をテーマに、LINE株式会社 岡崎氏に登壇していただきました。

その中でも、「UIとUXの違い」についてお話ししたパートのサマリーを、ご紹介します。

UIとUXの違いって?

近年、Web業界では、職種やポジションを問わず、UI/UXを理解していることを求められるようになってきました。採用面接などでもUI/UX に関する知識・意識を問われることが増えてきています。UI/UXに関する様々な書籍が出版され、セミナーも数多く開催されていますが、何となく理解している、対応している、というクリエイターの方々も多いのではないでしょうか。

・UI=User Interface
・UX=User Experience

「UI」と「UX」は、字面も語感も似ているため混同されがちですが、それぞれが指し示すものは大きく異なります。「UI」はサービスの扱いやすさを示す言葉であり、「UX」は、サービスを通じて得られる全体の体験を示す言葉です。さらに、混同される要因のひとつとして、「UI」は「UX」の一部の要素だということです。

ここからは、実際の事例を交えてご紹介します。例えば、ユーザーが、モバイルバッテリーが欲しいと思った場合。スマートフォンで検索をかけて購入〜使用までに至るまでで触れる「UI」と「UX」について、説明していきます。

ユーザーは、具体的に検索→確認→購入→配送→使用のプロセスを踏みます。それぞれ、ユーザーが期待することをデザインする必要があります。

では、ユーザーが期待することとはなんでしょうか?少し掘り下げて、各プロセスごとに、まとめてみました。

上記は、モバイルバッテリーを買う流れの中でユーザーが期待することです。これらは全て、ユーザーの体験に基づくため、「UX」と定義されます。つまり、どれか一つ欠けても、「UX」が下がってしまうということなのです。この期待度を満たすことの積み重ね=UXデザインの良さに繋がります。

先ほど、「UI」は、「UX」の一部とお伝えしましたが、「UI」は、どこを指しているのでしょうか。以下にまとめました。

見ていただいてわかるように、「UX」の中で「UI」が関わるのは、本当にごく一部です。主に、今回の場合は確認と購入のプロセスに関連します。

確認プロセスでは、ページがモバイル対応しているかどうか、ナビゲーションが分かりやすいかどうか、高解像度な商品写真が複数載っているかというで適切な「UI」デザインが必要となり、購入プロセスでは、購入ボタンの見つけやすさ、購入までのステップがシンプルかつ短くデザインすることが「UI」デザインの良さに繋がっています。

このように、「UI」は「UX」を形成する部分での、ごく一部でしかありません。反対に、検索〜使用まで、ユーザーのいろんな体験を含んだことを表すものが「UX」だと言えます。

まとめ

  • 「UI」はサービスの扱いやすさを示す言葉である
  • 「UX」は、サービスを通じて得られる全体の体験を示す言葉である
  • 「UI」は「UX」の、ごく一部の要素である
  • ユーザーの期待度を満たすことの積み重ね=UXデザインの良さに繋がる

解説者

岡崎 晶彦氏
LINE株式会社 マネージャー/フロントエンドエンジニア/1級ウェブデザイン技能士

ぐるなび、NTTレゾナントを経て、2015年からLINE株式会社でフロントエンドエンジニアとして活躍。LINE公式アカウントやLINE広告のマネージメントポータルのデザイン/フロントエンド開発に従事。現在は、LINEの保有する膨大なデータを管理・視覚化するツールの開発を統括、Bootstrap日本語サイトのウェブマスターも務める。技術カンファレンス等でのUI/UX関連の講演実績も多数。

LINE株式会社 岡崎 晶彦氏

クリーク・アンド・リバー社(C&R社)は12月7日(火)に、 UI/UXセミナー第3弾として「押さえておきたい情報アーキテクチャ(IA)の基礎」を開催します。


期間限定で岡崎氏のアーカイブ視聴をプレゼント!

クリーク・アンド・リバー社に新規で会員登録された方、すでに登録された方で、履歴書・職務経歴書をマイページに新規アップまたは最新版に更新された方に、
期間限定で岡崎氏の
・「初めてのUI/UX」(9月14日実施)、
・「UX向上のためのアクセシビリティとユーザビリティ」(10月26日実施)

アーカイブ視聴をプレゼントいたします!

LINE株式会社 岡崎晶彦氏Webinar UX向上のためのアクセシビリティとユーザビリティ

【1】
■新規会員登録はこちらから>>https://cri-professional.com/mypage/guest/registration/edit.xhtml
※登録時マイページの備考に視聴希望される講座名+視聴希望をご記入ください

■既存会員の方:マイページはこちらから>>https://cri-professional.com/mypage/guest/login.xhtml

【2】
新規会員登録または登録情報の更新が完了後、以下プレゼント応募フォームよりお申し込みください。
「初めてのUI/UX」(2021年9月14日実施)アーカイブプレゼント応募フォーム
ご応募はこちら

「UX向上のためのアクセシビリティとユーザビリティ」(20201年10月26日実施)アーカイブプレゼント応募フォーム
ご応募はこちら