UIとUXの違いとは？バナーとLPの具体例でわかるWebデザインの考え方

「UI/UX」という言葉を見るたびに、自分にはまだ早いと感じる…
Webデザインにも関係があるのはわかったけど、自分が作るバナーやLPと実際にどう関係するのか分からない…

横文字が続くと、それだけで難しそうに見えますよね。見た目をきれいに作ることがデザインだと思ってきた方ほど、「UXまで考えないといけないの？」と不安になるかもしれません。

UIは見た目と操作の接点、UXは見た人が得る体験の全体のこと。この2つはバナー、LPどちらにも必要な考え方です。

UIとUXの違いを一言でいうと

UI（ユーザーインターフェース）
見た人が目で見て操作する部分です。ボタン・文字・配色・配置などがUIにあたります。

UX（ユーザーエクスペリエンス）
そのUIを通して見た人が得る体験の全体のこと。「分かりやすかった」「途中で迷った」「申し込んでよかった」といった感じ方まで含みます。

UIを整えるだけではUXは決まらない

Nielsen Norman Groupの解説によると、UXは「エンドユーザーが企業・サービス・製品と関わるすべての側面」を指します。

同じ解説では、映画レビューサイトを例に、UIとUXを分けて考える大切さが説明されています。作品を探す画面のUIが完璧でも、データベースに大手スタジオの映画しか無ければ、小さな独立系作品を探している人にとってのUXは悪くなる、という例です。

UIはとても大事な要素ですが、体験全体のうちの一部です。画面を整えるだけでは、体験の良し悪しまでは決まらないわけです。

違いを表にまとめると、次のとおりです。

比べるポイント	UI	UX
指すもの	見た目と操作の接点	見た人が得る体験の全体
バナーでの例	文字の大きさ・色・ボタンの形	クリックした先で、期待どおりの情報に出会えたか
LPでの例	ファーストビュー・申し込みボタン・フォームの入力欄	読む順番に迷わず、不安が解けて申し込めたか
良し悪しの見え方	画面を見れば判断しやすい	見た人の行動や感想で分かる

スマホの通販アプリで試してみる

違いは、手元のスマホですぐ確かめられます。よく使う通販アプリを開いて、次の2つを見てみてください。

• 「カートに入れる」ボタンの色や大きさ、文字の読みやすさ（UI）
• 欲しい商品にたどり着くまでに迷わなかったか、届く日がすぐ分かったか（UX）

前者は画面を見れば答えられます。後者は、使ってみた自分の感じ方でしか答えられません。この差が、UIとUXの違いです。

バナー1枚で見るUIとUX

UI：一瞬で読める文字と、押したくなる見た目

バナーは、スクロールの途中で一瞬だけ目に入るものです。だからUIでは、短い時間で読めるかが問われます。

どれも、見る人が考えなくても内容と次の行動が分かるようにするための工夫です。デザインの4原則（近接・整列・反復・対比）も、このUIを整えるための考え方にあたります。

UX：どんな場面で見て、クリックした先がどうだったか

バナーのUXは、見る人の状況から考えます。

どの場面でも、相手はバナーをじっくり読んでくれません。そのうえで大事なのが、クリックした先がバナーの約束どおりかという点です。

例えば、バナーでは「初回限定でお得」と安さを打ち出したのに、リンク先のページで価格がなかなか見つからない。

これはバナーのUIをいくら整えても、UXが悪い状態です。バナーを作る手順とサイズは、以下の記事で詳しく説明しています。

LP1枚で見るUIとUX

LP（ランディングページ）は、商品やサービスの申し込みに向けて、1枚の縦長ページで説明していくページです。ページが長いぶん、UIもUXも出てくる場所が増えます。

UI：見出し・ボタン・入力欄

LPのUIで見るのは、次のような部分です。

• 最初に表示される範囲（ファーストビュー）の見出しが、何のページか一目で分かるか
• 申し込みボタンの形と色が、ほかの装飾に紛れていないか
• フォームの入力欄に、何を書けばよいかが添えてあるか

ファーストビューで何のページか伝わらなければ、その先は読まれにくくなります。ボタンや入力欄は、申し込もうと決めた人が最後に触れる部分です。ここで手が止まると、それまで読んでもらった内容が申し込みにつながりません。

UX：読む順番と、不安が出る場面

LPのUXは、上から読み進める中で決まります。読む順番が自然かどうかは、その代表です。目の動きに合わせて情報を置く方法は、以下の記事で詳しく説明しています。

もう1つは、読む人が不安になる場面で答えが用意されているかです。例えば、次のような不安です。

• 結局いくらかかるのか、料金が見つからない
• 申し込んだ後に何が起きるのか、流れが分からない
• 入力項目が多くて、途中で面倒になる

不安が解けないまま読み終えると、ボタンがどれだけ目立っていても申し込みにはつながりません。

LPのUXは公開した後も直せる

公式サイトは信頼のため、LPは売上のために作ります。役割が違うので、LPは「申し込みまでたどり着けたか」で良し悪しを見ます。

Webのよいところは、公開した後もすぐ直せる点です。

公開後に見た人の動きを確かめて、読まれていない部分を削るのもUXの改善です。

見る項目は、次の2つです。

• ページのどこまで読まれたか
• どのボタンやリンクが押されたか

「UIは整っているのにUXが悪い」が起きる理由

初心者の制作物で起きやすい例

UIが整って見えても、見た人の体験が悪くなる例は、初心者の制作物でもよく見かけます。

• おしゃれな細い文字を選んだら、スマホの小さな画面では読めなかった
• ボタンを飾りに合わせたら、押せるものだと気づいてもらえなかった
• 写真を大きく見せたら、伝えたい情報がページの下へ押しやられた
• 入力項目をすべて並べたら、途中でやめる人が出た

共通しているのは、作る人の目線で決めている点です。

作業中はパソコンの大きな画面で、自分の作品をじっくり見ています。見る人はスマホの小さな画面で、ほかの用事をしながら数秒だけ目を向ける。この差が、UIとUXのずれになります。

どれも、作った本人は画面を見て「きれいにできた」と感じやすいものです。最初は気づけなくて当然ですし、落ち込む必要もありません。見る人の立場で見直す習慣がつけば、こうしたずれは見つけられるようになります。

先にUXを考え、それを形にするのがUI

ここまでの話をまとめると、UIとUXの関係は次のように言えます。

UIはUXの一部。
まず「見た人にどんな体験をしてほしいか」を決め、それを形にするのがUIです。

「UIとUXはどちらが大事？」と聞かれることがありますが、どちらが大事かではなく考える順番の話です。体験を決めないまま見た目から作り始めると、整っているのに伝わらない1枚になりやすいからです。

作る前にUXを考える3つの問い

UXを考えるといっても、難しい調査が要るわけではありません。バナーでもLPでも、作り始める前に次の3つを考えます。

1. 誰が、どんな状況で見るのか
2. 見たあと、何をしてほしいのか
3. その人が途中で迷う・不安になるのはどこか

1つめが決まると、文字の大きさや色の強さが決まります。2つめが決まると、ボタンに何と書くかが決まります。3つめは、LPで料金や申し込みの流れをどこに置くかの判断材料です。

3つの問いをバナー1枚に当てはめる

例えば、近所のパン屋さんから「新しく始めた朝の焼きたてセットを、Instagram広告で知らせたい」と頼まれたとします。3つの問いに答えると、次のようになります。

• 誰が見るか：近所に住む人が、朝の支度や通勤の合間にスマホで見る
• 何をしてほしいか：店の場所と営業時間を確かめて、朝に寄ってもらう
• どこで迷うか：何時から買えるのか、店がどこにあるのかが分からない

ここまで決まれば、バナーに入れる情報が絞れます。「焼きたて」の写真を大きく見せ、開店時間は小さくてもすぐ読める位置に置く、という判断ができるわけです。

クリックした先のページに、地図と営業時間がすぐ出てくるか。そこまで確かめて、はじめてこのバナーのUXを考えたことになります。

依頼を受けたとき、最初にこの3つを依頼者に聞くようにしましょう。答えがあいまいなまま作ると、修正が何往復も続きやすいからです。聞いた答えは、見た目を決めるときの根拠にもなりますよね。

見た目を作るだけがWebデザイナーの仕事ではありません。仕事の中身と働き方は、以下の記事で詳しく説明しています。

UIとUXの違いが分かったら、次は何から手を動かすかです。学ぶ順番は、以下の記事で詳しく説明しています。

まとめ

1、UIは見た目と操作の接点、UXは見た人が得る体験の全体で、UIはUXの一部
2、バナー1枚・LP1枚の中にも両方があり、UIを整えても約束と中身がずれればUXは悪くなる
3、作る前に「誰がどんな状況で見るか」「見たあと何をしてほしいか」「どこで迷うか」の3つを考える

参考にした情報源

• Nielsen Norman Group「The Definition of User Experience (UX)」https://www.nngroup.com/articles/definition-user-experience/

※2026年10月時点の内容です。