UIとUXの違いは？発注前に知っておきたい基本を解説

Webサイトやアプリの制作を考えているとき、次のような悩みを抱える方が多いのではないでしょうか。

• 制作会社から「UI/UXも考えます」と言われたけれど、何のことかよく分からない
• 見積もりに「UIデザイン」「UX設計」と並んでいて、違いや必要かどうかが判断できない
• 依頼するときに、何をどう伝えればいいのか分からない

UIとUXはよく並べて使われますが、もともと作る側の言葉なので、発注する側からすると違いが分かりにくいですよね。この記事では、UIとUXの違いを身近な例でやさしく説明し、依頼するときの伝え方と見積もりの見方まで紹介します。

UIとUXとは？それぞれの意味を1分で整理

UIは「画面の見た目と操作のしやすさ」

UIは、ユーザーインターフェース（User Interface）の略で、使う人とサービスが接する部分のことです。Webサイトやアプリでいえば、画面のレイアウト、文字の大きさ、色、ボタン、入力欄などがUIにあたります。

UIデザインとは、こうした画面の見た目を整え、迷わず操作できるようにすることです。たとえば、申し込みボタンが目立つ場所にあるか、スマホで押しやすい大きさか、入力欄に何を書けばいいか分かるか、といった点を考えます。きれいに見えることと、使いやすいことの両方がUIの役割です。

UXは「使う前から使った後までの体験全体」

UXは、ユーザーエクスペリエンス（User Experience）の略で、日本語では「利用体験」と訳されます。サービスを知ってから、実際に使い、使い終わるまでの間に、人が感じることや起こす行動の全体を指します。

UXには時間の流れがあります。使ってみようと思えたか、思った通りに終えられたか、また使いたいと思えたかのように、使う前・使っている間・使った後のすべてがUXに含まれます。

UXデザインは、こうした体験がよいものになるように、使う人や使う場面を調べて、サービスの流れを組み立てる仕事です。画面を作る前の段階から始まるのが、UIデザインとの大きな違いです。

UIとUXの違いは？身近な例で比べる

UIとUXの違いは、飲食店のネット予約を思い浮かべるとつかみやすくなります。

UIにあたるのは、予約ページの画面そのものです。日付と人数を選ぶ欄が見やすいか、予約ボタンが押しやすいかといった、画面上の分かりやすさがUIの良し悪しを決めます。

UXにあたるのは、予約を思い立ってから食事を終えるまでの流れ全体です。お店を検索して予約し、確認のメールが届き、当日お店で名前を伝えるとすぐ席に案内される。予約してよかった、また使おうと思えるかどうかまでがUXに含まれます。

比べる点	UI	UX
指すもの	画面の見た目と操作	サービスを通した体験全体
時間の範囲	画面を使っている間	使う前から使った後まで
良し悪しの確かめ方	迷わず操作できるか	目的を果たせて、また使いたいと思えるか
予約の例	予約ボタンの大きさや位置	予約から来店までがスムーズか

UIはUXの一部

UIは、UXの中に含まれる一部です。画面はサービスと人が接する大事な入り口なので、UIが使いにくければ、体験全体の印象も下がりやすくなります。

一方で、UIを整えるだけで体験全体がよくなるとは限りません。予約画面がどれだけ見やすくても、確認メールが届かない、お店に予約が伝わっていないといったことがあれば、また使おうとは思いにくいですよね。UXの研究で知られるNielsen Norman Groupも、UIはデザインのとても大事な部分だが、UXはそれよりも広い考え方だと説明しています。

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

UIとUXを別々に考えると、どんなことが起こりやすい？

UIとUXは、どちらか一方だけを考えると、思っていた成果につながりにくいことがあります。よくあるのは次の3つです。

1. 見た目はきれいなのに、問い合わせにつながらない

見た目を整えたのに問い合わせが増えないのは、UIはよくなったものの、UXまでは考えられていないときに起こりやすいことです。たとえば、お客様が知りたい料金や流れの情報が見つけにくい、問い合わせフォームの入力項目が多くて途中でやめてしまう、といった状態です。デザインが新しくなったこと自体は前進なので、次はお客様が問い合わせるまでに何を知りたいかから見直すと、改善のヒントが見つかりやすくなります。

2. 使う人に合わせた工夫が、画面で伝わらない

使う人に合わせて工夫を考えても、それが画面で伝わらなければ、使う人には届きません。たとえば、年配のお客様が多いので、電話でも問い合わせできるようにしたとします。ところが、電話番号がページのいちばん下に小さく載っているだけだと、お客様は見つけられず、問い合わせしにくい会社だと感じてしまいます。UXで考えた工夫は、UIで分かりやすく見せて初めて、使う人に届きます。

3. 担当が分かれていて、意図が引き継がれない

担当が分かれていると、考えた意図が途中で抜け落ちることがあります。たとえば、企画する会社、デザインする会社、プログラムを書く会社が別々で、資料だけで引き継ぐような進め方です。なぜこのボタンをここに置いたのかが伝わらないまま作られると、作る途中の小さな判断で、使いやすさが少しずつ崩れてしまいます。

発注するとき、UIとUXをどう伝える？

UIやUXという言葉を知らなくても、依頼はできます。どちらの話かを区別して伝える必要もありません。

依頼の打ち合わせでは、色や雰囲気、ボタンの大きさのような見た目の話が中心になりやすいものです。見た目の要望だけだと、UXを考えるための材料が足りなくなります。見た目の好みの伝え方は、Web制作のデザインが「イメージと違う」のはなぜ？で紹介しています。

使う人や現場の事情をいちばんよく知っているのは、依頼する側です。次の3つを伝えると、制作会社がUIとUXの両方を考えやすくなります。

1. 誰が、どんな場面で使うか

使う人と場面は、UXを考えるいちばんの土台です。60代のお客様が自宅のスマホで見る、現場のスタッフが作業の合間に片手で使うのように、人と場面をセットで伝えましょう。場面が分かると、文字の大きさやボタンの置き方まで決めやすくなります。

2. 使った後に、どうなってほしいか

使った後の状態は、サービスのゴールにあたります。迷わず問い合わせまで進んでほしい、来店前に不安がなくなっていてほしいなど、使う人がどうなっていればうれしいかを伝えましょう。ゴールが決まると、画面に何を載せて何を省くかを判断しやすくなります。

3. 今いちばん困っていること

今の困りごとは、改善の出発点になります。電話での問い合わせ対応に時間がかかっている、サイトを見たお客様から同じ質問が多いのような、日々の困りごとで十分です。きれいに整理しなくても、思いつくままに話すほうが、制作会社は背景をつかみやすくなります。

見積もりのどこにUIとUXが関係する？

見積もりの項目名は会社によってさまざまですが、多くはUIにあたる作業とUXにあたる作業に分けて読めます。

UIにあたる項目

UIにあたる項目は、画面の見た目を作る作業です。画面デザイン、デザインカンプ（完成イメージの画面）、レスポンシブ対応（スマホとパソコンそれぞれの見え方の調整）などの名前で書かれることが多く、画面やページの数で金額が変わりやすい部分です。画面の数が多いサービスでは、ボタンや色などのルールをまとめて管理するデザインシステムという考え方を取り入れることもあります。

UXにあたる項目

UXにあたる項目は、画面を作る前に体験の流れを考える作業です。ヒアリング、調査、情報設計（どの情報をどの順番で見せるかの整理）、ワイヤーフレーム（画面の骨組み）などがこれにあたります。目に見える成果物が少ないので、削ってもいいのではと感じるかもしれません。ただ、問い合わせや利用者を増やしたいというゴールがあるなら、この部分が成果を大きく左右します。

項目の分け方は会社によって違う

UIとUXの項目の分け方は、会社によって違います。設計の作業が多い案件では別の項目にすることもあれば、デザイン費にまとめて見積もることもあります。項目にUXという名前がないからといって、考えていないとは限りません。名前ではなく、その費用にどんな作業が含まれているかを聞いてみましょう。

制作会社を比べるときは？UIとUXを一緒に考えてくれるかを見る

UIとUXを分けずに考えてくれる会社かどうかは、打ち合わせの進め方から見えてきます。比べるときは、次の3つを観点にするのがおすすめです。

1. 使う人や目的を一緒に掘り下げてくれるか

使う人や目的への関心は、UXを大事にしているかどうかの表れです。画面の話だけでなく、誰が使うのか、使った後にどうなってほしいのかを、打ち合わせを重ねる中で一緒に掘り下げてくれる会社は、UIとUXをつなげて考えやすくなります。

2. 途中で触って確かめられるか

途中で触って確かめられるかどうかは、使いやすさを完成前に確認できるかに関わります。静止画の画面だけでは、ボタンを押したときの画面の切り替わりのような操作のしやすさは判断しにくいものです。AIを使って試作品を早く作れるようになったいまは、どの段階で動く画面を確認できるかを聞いてみるのもよいでしょう。

3. 公開した後の相談ができるか

公開後の相談ができるかどうかは、UXをよくし続けられるかに関わります。UXは、実際に使われてみて初めて分かることも多いからです。使われ方を見て直していく相談ができるか、契約の前に方針を聞いておくと安心です。

RabeeはUIとUXをどう考える？ヒアリングから実装までの進め方

Rabeeでは、企画からUI・UXデザイン、実装（実際に動くようにプログラムを書くこと）まで、同じチームで一貫して担当しています。担当を分けないことで、使う人について考えたこと（UX）を、画面（UI）や実際に動くサービスまで一続きで形にしています。

デザインと実装を手がけるクリエイターが、直接話を聞く

ヒアリングには、デザインや実装を手がけるクリエイターが立ちます。誰がどんな場面で使うか、何に困っているか、使った後にどうなってほしいかを、普段の業務の話から一緒に整理します。UIやUXという言葉を知らなくても大丈夫です。

メンバーは全員がクリエイターで、話を聞く人と作る人が同じです。作れるかどうかや手間もその場で判断できるので、確認のやり直しが少なく済みます。実装中に気づいた使いにくさも、チーム内で連携し、デザインから見直して修正します。

動く画面を触ってもらい、使いやすさで一緒に確かめる

デザインの途中では、Figma（画面デザインを作るツール）の画面案に加えて、実際に動く試作品や開発中の画面を触ってもらいます。AIも使いながら試作品を早めに用意し、見た目の好みだけでなく、迷わず操作できるか、目的を果たせるかを一緒に確かめていきます。公開後の改善も、ご相談に応じて対応しています。

自社サービスの運営で、使われ方を見て直す経験を積んでいる

Rabeeは、お客様からの制作だけでなく、自社サービスの企画・開発・運営も手がけています。タイピング練習サービスのAnkeyはリリースから1年で月間500万PV（ページの閲覧数）を達成しました。Ankeyでは、アクセス数やユーザーの行動を分析して、次に直すところを決めて改善を続けています。献立アプリのmenubleも、企画から実装まで自社で担当しています。

フォーム作成サービスのFormeeでは、初めて使う人が迷わないよう、余計な情報を減らしたシンプルな画面を目指しました。作るものを決めてから公開まで、6週間で形にしています。

UIとUXを一緒に考える進め方は、サービスの価値がちゃんと伝わるUIをつくりたいでも紹介しています。

まとめ：画面のUIと体験全体のUX、どちらも一緒に考える

UIは画面の見た目や操作のしやすさ、UXはサービスを使う前から使った後までの体験全体を指します。UIはUXの一部なので、両方を一緒に考えることで、使う人にとってよいサービスになりやすくなります。

依頼するときは、UIやUXという言葉を使わなくてもかまいません。誰が、どんな場面で使い、使った後にどうなってほしいかを伝えれば、制作会社がUIとUXの両方を考える材料になります。

UIとUXの違いQ&Aサマリー

Q1. UIとUXの違いを一言でいうと？

UIは画面の見た目や操作のしやすさ、UXはサービスを使う前から使った後までの体験全体です。UIは、UXの一部にあたります。

Q2. UIとUXは、別々の会社や担当者に頼む必要がありますか？

必ずしも別々に頼む必要はありません。同じチームで考えると、使う人や目的についての意図が画面まで引き継がれやすくなります。

Q3. 小さなホームページでも、UXは考えたほうがいいですか？

小さなホームページでも、UXを考えることは役に立ちます。誰が見て、見た後に何をしてほしいか（問い合わせ、来店など）を決めておくだけでも、載せる情報や順番を判断しやすくなります。

Q4. 見積もりにUXの項目がないのは問題ですか？

問題とは限りません。ヒアリングや画面の骨組みづくりを、デザイン費にまとめている会社もあります。その費用にどんな作業が含まれているかを聞いてみましょう。

Q5. UIやUXのことをよく知らなくても、依頼できますか？

依頼できます。誰が使うか、何に困っているか、使った後にどうなってほしいかを伝えれば、細かいことは制作会社と一緒に決めていけます。

Rabeeは、企画からUI・UXデザイン、実装まで一貫して手がけるWeb制作・開発会社です。UIとUXのどちらから考えればいいか分からない段階でも、ぜひRabeeにご相談ください。使う人にとってよい体験を、最初の一歩からご一緒に考えます。