UIとUXとは？事例つきで違いをスッキリ解説『初めてのUI/UX』セミナーレポートvol.1

クリーク･アンド･リバー社は、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関連の講演実績も多数。

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

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

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