UIとUXの違い：画面の使いやすさと「体験全体」をどう考えるか｜UI・UXデザイン入門 第1回

KOUZAUI・UXデザイン入門

第1回／全8回

講師：田中 磨生（株式会社Abin 代表取締役）

この講座の目次を見る

1. 第1回UIとUXの違い：画面の使いやすさと「体験全体」をどう考えるか
2. 第2回ユーザー中心設計（HCD）：ISO 9241-210の6つの原則と4つの活動
3. 第3回情報設計とナビゲーション：迷わせない構造をつくる（カードソート・ツリーテスト）会員
4. 第4回ユーザビリティの10原則：ニールセンのヒューリスティクスで画面を点検する会員
5. 第5回ワイヤーフレームとプロトタイプ：粗く早く作り、試しながら仕上げる会員
6. 第6回入力とフォームのUX：ラベル・入力補助・エラーメッセージの基本会員
7. 第7回アクセシビリティ：WCAG・JIS X 8341-3と、誰でも使える画面の基本会員
8. 第8回ユーザビリティテストと改善：5人に試してもらい、観察し、直す（総まとめ）会員

この回で分かること：①UI（ユーザーインターフェース）とUX（ユーザー体験）が、それぞれ何を指すのか、②「使いやすい」を分解する考え方（ユーザビリティと有用性）、③目の前の問題が「画面の問題」なのか「体験全体の問題」なのかを切り分ける方法。全8回の入り口として、この講座で使う言葉と見方をそろえます。

UIとUXは、何が違うのか

「UI/UX」とひとまとめに呼ばれることが多いため、2つを同じ意味で使っている人も少なくありません。しかし、UIとUXは指している範囲が違います。

• UI（User Interface、ユーザーインターフェース）：人とサービスが接する「接点」のことです。Webサイトやアプリでいえば、画面のレイアウト、ボタン、メニュー、入力欄、文字、アイコン、表示されるメッセージなどがUIにあたります。
• UX（User Experience、ユーザー体験）：人がそのサービスや会社と関わる中で得る体験の全体です。使いやすさの研究で知られるニールセン・ノーマン・グループ（NN/g）の創業者であるドン・ノーマンとヤコブ・ニールセンは、UXを「エンドユーザーと、会社・そのサービス・製品とのあらゆる関わりを含むもの」と定義しています（参考資料1）。

つまり、UIはUXの一部です（図1）。同じ定義の中でノーマンとニールセンは、映画のレビューサイトの例を挙げています。映画を探す画面がどれほど完璧でも、データベースに小さな独立系の作品が入っていなければ、その作品を探している人にとって体験は良くならない、というものです（参考資料1）。画面（UI）は申し分なくても、中身（品ぞろえ）が足りなければ、体験（UX）は損なわれます。

架空の予約アプリで考えてみる

ここからは、美容院の予約アプリ「ヨヤクル」（架空の例）で考えてみましょう。

• UIの話：予約ボタンが画面の下に隠れていて見つけにくい。日付を選ぶカレンダーの文字が小さく、押し間違える。「確定」と「キャンセル」のボタンが同じ色で、どちらか分からない。
• UIの外側にあるUXの話：予約は簡単に取れたのに、当日お店に行ったら予約が入っていなかった。予約の変更をしたいが、アプリからはできず電話しかない。施術の料金が、アプリの表示と店頭で違った。

後者は、どれも画面のデザインを直しただけでは解決しません。お店の予約管理の仕組み、変更の受付方法、料金表示のルールといった「サービスの中身や運用」の問題だからです。それでも、利用者から見ればすべてが「ヨヤクルを使った体験」の一部です。

「使いやすい」を分解する：ユーザビリティと有用性

「使いやすい画面にしてほしい」という依頼はよくありますが、「使いやすい」はあいまいな言葉です。改善の話を前に進めるには、もう少し細かく分ける必要があります。

ユーザビリティの5つの要素

NN/gは、ユーザビリティ（使い勝手）を「人がインターフェースを使って、どれだけ簡単に目的の作業を成功させられるか」と説明し、次の5つの要素に分けています（参考資料2）。

1. 学びやすさ（Learnability）：初めて使う人が、どれだけ早く基本の作業をこなせるようになるか
2. 効率（Efficiency）：使い方を覚えた人が、どれだけ速く作業できるか
3. 覚えやすさ（Memorability）：しばらく使わなかった人が、どれだけ簡単に使い方を思い出せるか
4. エラー（Errors）：どのくらい間違いが起き、その間違いがどれほど深刻で、どれだけ簡単に立ち直れるか
5. 満足度（Satisfaction）：使っていて心地よいか

この5つに分けると、「使いにくい」という声の中身が見えてきます。たとえば、新しく入った社員が業務システムの操作を覚えられないなら「学びやすさ」の問題、毎日使うベテランが同じ操作を何度もクリックさせられて疲れているなら「効率」の問題、月に1回しか使わない経費精算の画面で毎回迷うなら「覚えやすさ」の問題です。どの要素が弱いかによって、直し方は変わります。

「使える」と「役に立つ」は別のもの

NN/gは同じ記事で、ユーザビリティとは別に有用性（Utility）、つまり「必要な機能がそろっているか」という観点を挙げ、ユーザビリティと有用性の両方がそろって初めて「役に立つ（Useful）」デザインになると説明しています（参考資料2）。

どんなに操作しやすい画面でも、利用者がやりたいことができなければ意味がありません。逆に、機能が十分にそろっていても、使い方が分からなければ使われません。改善の会議で「使いにくい」という声が出たら、「操作の問題」なのか「そもそも機能が足りない問題」なのかを最初に分けると、話が噛み合いやすくなります。

体験は時間の流れでできている

UXを考えるときに役立つのが、時間の流れで体験を見るという視点です。利用者の体験は、画面を開いている間だけで起きているわけではありません。

• 使う前：広告や口コミでサービスを知る、アプリストアの説明を読む、「これなら簡単に予約できそう」と期待する。
• 使っている間：会員登録をする、メニューを探す、日時を選ぶ、入力で迷う、予約を確定する。
• 使った後：予約の確認メールが届く、前日にお知らせが来る、当日お店で名前を伝える、変更したくなって問い合わせる、次回も使うかどうかを決める。

画面のデザインが直接関わるのは、主に「使っている間」です。しかし、利用者が「このサービスはいい」「もう使わない」と判断するのは、3つの段階の体験をまとめた印象です。たとえば、予約の操作がとてもスムーズでも、確認メールが届かずに不安になれば、全体の印象は下がります。逆に、使う前に「3分で予約できます」と期待を高めすぎると、実際は5分かかっただけでがっかりされることもあります。

この見方は、マーケティングでいうカスタマージャーニー（顧客が知ってから購入・利用し、また使うまでの道のり）とよく似ています。UXを良くする仕事は、画面をきれいにすることだけではなく、こうした流れのどこで期待とのずれが起きているかを見つけて、関係する部署と一緒に直していく仕事でもあります。

「体験」をつくるのは画面だけではない

ヨヤクルの例でいえば、UXに関わるのはアプリの画面担当だけではありません。予約データを管理するエンジニア、お店のスタッフ、問い合わせに答えるサポート担当、料金を決める担当者――。それぞれの仕事が、利用者の体験の一部を作っています。「UXはデザイナーの仕事」と考えてしまうと、画面の外にある問題が見落とされます。

この記事の監修者に相談できます

監修者の田中磨生が代表を務める株式会社Abinで、ご相談をお受けしています。

相談無料ツギノテ編集部に相談する→

よくある誤解を3つほどいておく

UI・UXという言葉が広まるにつれて、いくつかの誤解もよく見かけるようになりました。この講座を進める前に、代表的なものを整理しておきます（図4）。

誤解1：UXが良い＝見た目がおしゃれ
見た目の美しさは満足度に関わる大切な要素ですが、それだけでは使いやすさは決まりません。おしゃれでも、ボタンが押しにくかったり、文字が薄くて読めなかったりすれば、体験は悪くなります。見た目と使いやすさは、別々に確かめる必要があります。

誤解2：画面をリニューアルすれば、UXが良くなる
問題の原因が画面の外（品ぞろえ、料金、サポート、配送など）にある場合、画面をいくら作り直しても体験は良くなりません。リニューアルの前に、「利用者は、どこで、なぜ困っているのか」を確かめることが先です。

誤解3：UXはデザイナーが担当するもの
前の節で見たとおり、体験はさまざまな部署の仕事の積み重ねでできています。デザイナーは利用者の視点を持ち込む役割を担いますが、体験を良くするには、企画、開発、営業、サポートなど、関わる人全員が同じ利用者像を持つことが欠かせません。

実務ではこう使う：問題を「UI」と「UIの外」に切り分ける

現場で「使いにくい」「評判が悪い」という声が出たとき、まずやりたいのは、問題をUIで直せるものと、UIの外で直すべきものに切り分けることです。ここでは、架空のネットショップ「ツギノ雑貨店」に寄せられた声を例に、切り分けの表を作ってみます（図5）。

この表のポイントは、UIの外の問題でも、画面でできることはあるという点です。配送が遅いこと自体は画面では直せませんが、「いつ届くか」を正確に伝えれば、利用者の不安やがっかりは小さくできます。逆に、UIの問題に見えても、根本には料金や運用の決め方がある場合もあります。

切り分けができたら、それぞれの担当者と話し合います。UIで直せるものは、この講座の第3回以降で学ぶ方法で直していきます。

デザイン案を評価するときの3つの問い

制作会社やデザイナーからデザイン案が届いたとき、「なんとなく良い・悪い」ではなく、次の3つの問いで見ると、意見を言葉にしやすくなります。

1. この画面で、利用者は何をしたいのか（目的が1つに絞られているか）
2. その目的を、迷わずに、間違えずに達成できるか（ユーザビリティ）
3. その目的を達成するために、必要な情報や機能はそろっているか（有用性）

この3つは、この講座全体を通して繰り返し出てきます。

この回のまとめ

• UIは人とサービスの「接点」（画面・ボタン・文字など）、UXは会社・サービス・製品とのあらゆる関わりを含む「体験の全体」。UIはUXの一部。
• 「使いやすい」は、ユーザビリティの5つの要素（学びやすさ・効率・覚えやすさ・エラー・満足度）に分けて考える。
• 使いやすさ（ユーザビリティ）と、必要な機能があること（有用性）は別物。両方そろって「役に立つ」。
• 体験は「使う前・使っている間・使った後」の流れでできており、画面の外の要素も体験を左右する。
• 問題は「UIで直すもの」と「UIの外で直すもの」に切り分け、画面でできる手当ても考える。

確認テスト

次回予告

第2回は「ユーザー中心設計（HCD）」です。国際規格ISO 9241-210が示す6つの原則と4つの活動をもとに、「利用者を中心に置いて作る」とは具体的に何をすることなのかを学びます。

参考資料

1. Don Norman, Jakob Nielsen「The Definition of User Experience (UX)」Nielsen Norman Group（1998年8月8日） https://www.nngroup.com/articles/definition-user-experience/ （確認日：2026年11月12日）
2. Raluca Budiu「Usability 101: Introduction to Usability」Nielsen Norman Group https://www.nngroup.com/articles/usability-101-introduction-to-usability/ （確認日：2026年11月12日）