UIとUXの違いとは？Webサイト改善で使い分ける考え方を解説

UIとUXは、どちらも「使いやすさ」に関わる言葉ですが、指している範囲が違います。混同したまま議論すると、改善の対象がぶれます。この記事では、違いと使い分けを整理します。

一言でいうと

UI（ユーザーインターフェース）：人が触れる接点そのもの。画面、ボタン、文字、配置、操作の反応。見て触れる部分です。

UX（ユーザーエクスペリエンス）：利用を通じて得られる体験全体。接点だけでなく、その前後も含みます。

UIはUXの一部です。 ただし、UXにはUI以外の要素も含まれます。

具体的な違い

対象：UIは画面と操作。UXは、知る・調べる・使う・問い合わせる・利用後まで。

範囲：UIはサイトの中。UXは、広告を見た瞬間から、問い合わせ後の対応、実際のサービス体験まで。

関わる人：UIはデザイナーと実装者。UXは、営業、サポート、現場のスタッフも含みます。

測り方：UIは操作の完了率、迷った箇所、エラーの発生。UXは、成果件数、再訪、紹介、解約率。

直す方法：UIは画面を変えれば直せます。UXは、業務や体制の見直しが必要になることがあります。

混同すると何が起きるか

「UXを改善したい」と言いながら、画面のデザインだけを変える：最も多い例です。問い合わせ後の返信が遅い、対応が分かりにくい、といった問題は画面では解決しません。

「UIが悪いから成果が出ない」と決めつける：内容に判断材料がない、料金が書かれていない、といった問題はUIの範囲外です。

担当が決まらない：UXは複数の部署にまたがります。「UX担当」を1人置いても、権限がなければ動かせません。

測る指標が合わない：画面の変更を、成果件数だけで評価すると、他の要因と切り分けられません。

Webサイトで具体的に見る

UIの領域：文字の大きさと読みやすさ、ボタンの位置と押しやすさ、入力欄の分かりやすさ、エラー表示、現在地の分かりやすさ、階層とナビゲーション。

UXの領域：探している情報にたどり着けるか、判断材料が揃っているか、問い合わせた後にどうなるか、返信までの時間、対応の分かりやすさ、次に何をすればよいか。

両方に関わる領域：表示の速さ、スマートフォンでの見え方。これらは操作の快適さであり、体験全体にも影響します。

公式ドキュメントが示す観点

Google 検索セントラルの「ページ エクスペリエンス」では、自己評価の質問が示されています。これらはUIとUXの両方にまたがる観点です。

ページの Core Web Vitals は良好な状態か。

ページは安全な方法で配信されているか。

コンテンツはモバイル デバイス上で適切に表示されているか。

主要なコンテンツを妨害したり注意をそらしたりするほどの大量の広告を掲載することを回避できているか。

煩わしいインタースティシャルの使用が避けられているか。

メイン コンテンツとその他のコンテンツを簡単に区別できるように設計されているか。

同じドキュメントには、Google のコア ランキング システムは、優れたページ エクスペリエンスを提供するコンテンツを高く評価するように設計されていること、ページ エクスペリエンスの限られた要素のみにとらわれないようにすることが必要であることが説明されています。

測れる部分と測れない部分

Google 検索セントラルの「Core Web Vitals」では、ページの読み込みパフォーマンス、インタラクティブ性、視覚的安定性に関する実際のユーザー エクスペリエンスを測定する一連の指標であると説明されています。

指標として示されているのは次の3つです。Largest Contentful Paint（LCP） は読み込みパフォーマンスの尺度で、ページの読み込み開始から2.5秒以内が推奨されています。Interaction To Next Paint（INP） は応答性の尺度で、200ミリ秒未満が推奨されています。Cumulative Layout Shift（CLS） は視覚的安定性の尺度で、0.1未満が推奨されています。

これらは数値で測れる部分です。 一方で、「探している情報にたどり着けたか」「安心して申し込めたか」は、数値だけでは分かりません。実際に人に使ってもらって観察する必要があります。

社内での言葉の決め方

言葉の定義をそろえます。 定義が違うまま議論すると、話が噛み合いません。

改善の対象を明示する：「画面の話か、体験全体の話か」を毎回確認します。

担当と範囲を決める：UIは制作の担当、UXは複数部署にまたがるため、まとめ役を決めます。

測る指標を決める：画面の変更には操作の完了率、体験全体には成果件数と再訪。

言葉にこだわりすぎない：「UIかUXか」の分類より、「何を直すのか」が明確であることが重要です。

改善の進め方

第1段階：測れる部分を確認する：表示の速さ、スマートフォンでの表示、エラーの有無。

第2段階：実際に使ってみる：自分で申し込む、社外の人に触ってもらう。制作した人以外が試すことに意味があります。

第3段階：止まっている箇所を特定する：どこで迷い、どこでやめたか。

第4段階：1つずつ直す：同時に複数を変えると、効果を切り分けられません。

第5段階：画面の外も見る：問い合わせ後の対応、返信までの時間。ここが原因のことがあります。

どちらの言葉を使うべきか

議論の場面では、言葉より「何を直すか」を先に決めます。

画面の話をするとき：「ボタンが押しにくい」「文字が小さい」。UIという言葉を使わなくても伝わります。

体験の話をするとき：「料金が分からない」「問い合わせ後に連絡がない」。こちらもUXという言葉は必須ではありません。

言葉が必要になるのは、範囲を区切るときです。「今回は画面の改善に絞る」「今回は問い合わせ後の対応まで含める」。担当と予算を決めるために使います。

外部に依頼するときの整理

依頼の範囲を明示します。 「UX改善」とだけ伝えると、認識がずれます。

画面の改善を依頼する：対象のページ、直したい箇所、判断の基準。

体験の設計を依頼する：どこからどこまでを対象にするか。サイトの外を含むか。

調査を依頼する：観察の実施、問題の洗い出し。改善の実施は別契約になることがあります。

成果物を確認します。 レポートだけなのか、改善案まで含むのか、実装まで行うのか。

この記事のまとめ

UIは人が触れる接点そのもの、UXは利用を通じて得られる体験全体です。UIはUXの一部ですが、UXにはUI以外の要素も含まれます。

混同すると、画面だけを変えて体験の問題が残る、担当が決まらない、指標が合わない、といったことが起きます。

Core Web Vitals のように数値で測れる部分と、実際に使ってもらわないと分からない部分があります。改善は、測れる部分の確認、実際の利用、止まっている箇所の特定、1つずつの修正、画面の外の確認という順で進めます。

出典と注記

ページ エクスペリエンスの自己評価の観点とランキングとの関係は Google 検索セントラル「ページ エクスペリエンスと Google 検索結果への影響」に基づきます。Core Web Vitals の定義と各指標の推奨値は同「Core Web Vitals と Google 検索の検索結果について」に基づきます（いずれも確認日 2026年8月20日時点）。ドキュメントは更新されるため、実務では最新の記載を確認してください。 UIとUXの整理、社内での使い分け、改善の進め方は当社が支援の現場で用いている考え方です。成果を保証するものではありません。