UIとUXの違いを、デザインで直せる範囲から見分ける

「UIとUXって、結局なにが違うんですか？」独学中にいちばん多く出てくる質問だと思います。

言葉の意味を並べた説明を読んでも、たぶんスッキリしません。読んだあとで作るものが変わらないからです。
このレッスンでは、UIとUXを「担当する範囲の違い」として整理します。使いにくい画面に出会ったとき、それがUIの問題なのかUXの問題なのか、自分で仕分けられるところまで持っていきますね。

UIとUXは指している範囲が違う

UIは User Interface（ユーザーインターフェース）の略です。人と製品が接する場所そのものを指します。画面ならボタン、文字、色、レイアウト、入力フォーム。目に見えて指で触れるところが全部UIです。テレビのリモコンや券売機のパネルもUIですよ。

UXは User Experience（ユーザー体験）の略。その製品を使った人が受け取った体験のことです。すぐ見つかった、途中で迷った、買えた、もう使いたくない。良い方も悪い方も全部UXに入ります。

LINEで考えると分かりやすいです。トーク画面の入力欄、送信ボタン、スタンプの並びがUI。送った内容がすぐ相手に届いて、返事が来た。この結果のほうがUXです。

2つは並んでいません。UXという広い範囲の中に、UIが部品として入っています。UXには、広告を見た瞬間、サイトの表示速度、届いたメール、問い合わせの返信、届いた商品の箱まで含まれます。画面はそのうちの一部です。

UIは「触れる場所」、UXは「その結果どう感じたか」。範囲が違うので、比べるものではありません。

UIが良くてもUXが悪いことはある

範囲が違うので、片方だけ良い状態が普通に起きます。ここが分かると、仕分けが一気に楽になります。

たとえば予約サイト。画面はきれいで、ボタンも押しやすい。でも予約完了メールが届かず、キャンセルは電話だけ。UIは良くてもUXは最悪です。
逆もあります。見た目が20年前のままの乗換案内でも、3秒で目的の電車が分かるならUXは良い。使う人は見た目より結果を覚えています。YouTubeでも、再生画面の使いやすさがUI、見たい動画にたどり着いて最後まで見られたかがUXです。

Google検索のトップページも分かりやすい例です。置いてあるのは入力欄とボタンだけで、UIの部品は最小限。それでも探し物にはたどり着けます。見た目の華やかさとUXの良し悪しが別だと分かります。

同じ買い物でも比べられます。ほしい商品を1つ決めて、Amazonでも楽天でも探してみてください。

どちらが好きかで意見が割れるのは、UIの好みとUXの結果が人ごとに違うからです。自分の制作では、UIの好き嫌いだけで判断しないようにしてください。

だから「デザインを新しくしたのに評判が悪い」が起きます。直したのがUIだけで、UXを悪くしていた原因が別の場所にあったパターンです。原因が手続きの多さや情報の古さなら、色を変えても解決しません。

UIデザインとUXデザインでやることが違う

範囲が違うと、仕事の中身も変わります。UIデザインとUXデザインの違いを表にしました。

求人で見かける「UI/UXデザイナー」は、この2つをまとめて担当する人です。ただ、配分は会社ごとに違います。画面を作る比率が高い会社もあれば、調査と設計が中心の会社もあります。求人を見るときは肩書きではなく、業務内容の欄を読んでくださいね。

個人で作るときも、順番だけは同じです。先にUX（誰が何のために使うか）を決めて、あとからUI（どう見せるか）を作る。逆にやると、きれいな画面ができたあとで「この項目いらなかった」となって、まるごと作り直しになります。

ミニ実践：使いにくい画面の不満を仕分ける

15分ほど。道具は紙とペンだけです。自分が実際に使って困ったサービスを1つ選んでください。ネットショップ、予約サイト、行政の手続きページ、どれでも大丈夫です。

迷ったときの判定は、この3つで足ります。

2列に分けたあと、UI起因のほうが少なければ、そのサービスの課題はデザイン以前にあります。この見立てができると、制作の相談を受けたときに「見た目を変えても効かない」と根拠をもって言えるようになりますよ◎

よくある質問

UIとUXの違いは何ですか？

指している範囲が違います。UIは人が触れる場所そのもの（ボタン、文字、色、レイアウト）。UXは、その製品を使った人が受け取った体験の全部です。UXという広い範囲の中に、UIが部品として入っています。だから画面がきれいでもUXが悪いことは普通に起きます。

UIとUXは何の略ですか？

UIは User Interface（ユーザーインターフェース）、UXは User Experience（ユーザー体験）の略です。Interfaceは「接する面」、Experienceは「体験」。英語の意味そのままで、UIは接点、UXは体験を指します。

UIとUXの基本として、まず何を押さえればいいですか？

順番です。誰が何のために使うか（UX）を先に決めて、それから画面（UI）を作る。この順番を守るだけで、作り直しがかなり減ります。あとは、不満を見つけたときに画面の中の問題か外の問題かを分ける習慣をつけてください。この2つが基本です。

未経験からだと、UIとUXのどちらを先に学ぶといいですか？

UIを先にしてください。画面を作れる人のほうが仕事につながりやすく、成果物も見せやすいからです。UXの設計は、画面を何枚か作ってからのほうが理解が早く進みます。作ったものを人に使ってもらい、詰まった場所を直す。この経験がそのままUXの練習になります。

次に学ぶこと

UIは触れる場所、UXは使った結果の体験。UXの中にUIが入っている、という関係だけ覚えて帰ってください。作るときは、UX（誰が何のために）を決めてからUI（どう見せるか）へ。この順番が守れていれば大丈夫です。

次はユーザビリティとアクセシビリティへ進みましょう。今回「使いやすい」と書いた部分を、確認できる形まで具体化する回です。

画面の部品名があいまいな方はUIパーツの名前と役割を先に読むと、この先が楽になります。全体の並びはデザイン基礎コースの目次から確認してくださいね。