【デザイン学生必見!】
ポートフォリオをゼロから作ろう!

UIとUXの違いを具体例を交えて徹底解説!【UIデザイナー必見】

記事内にプロモーションを含む場合があります
Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

最近よく聞くようになったUIUXといった用語があります。

企業の募集職種にも「UI・UXデザイナー」というキーワードを目にすることもあります。
聞いたことはあるけど、どんな意味なのかを知っている方は意外と少ないかもしれません。

今回はUIとUXの意味や違い、考え方について解説してみたいと思います。

UIについて

UIとはUser Interface(ユーザーインターフェース)の略称です。

ユーザインタフェース(英: User Interface, UI)または使用者インタフェースは、機械、特にコンピュータとその機械の利用者(通常は人間)の間での情報をやりとりするためのインタフェースである。


Wikipediaより
例えば多くの方が日常的に利用されているパソコンやタブレット、スマホの画面や操作、パソコンのOSやアプリの画面や操作方法等がUI(ユーザーインターフェース)に相当します。

みなさん実はUIに触れる機会が結構多いのです。

UXについて

UXとはユーザーエクスペリエンス(User Experience)の略称です。

Experienceは「体験・経験」を意味する英語です。ユーザー体験と表現される場合もあります。
つまりUXとは「ユーザーが対象を通じて得られる体験」を意味します。

例えば通販サイトだと…

  • デザインがスッキリしてきれい
  • 情報が見やすい
  • 求めている商品がすぐ見つかる
  • 商品の情報が豊富
  • 支払方法が豊富
  • 注文して商品がすぐに届いた
  • 商品に不具合があったが、迅速丁寧に対応してくれた
  • 買った商品がとても美味しかった

…等々、対象のサービスや商品等を利用することによってユーザーが得た体験全てがUXに該当します。

UIデザイン、UIデザイナー

UIデザインとはその名の通り、UIをデザインする事です。
UIデザイナーはUIをデザインする人の事を指します。

企業の募集職種にもありますね、「UI・UXデザイナー募集!」とか。
ゲーム業界、WEB業界でよく見られる職種です。

UIデザイナーとはどんな仕事?

例えばスマホのホーム画面には様々なアイコンが並んでいます。アイコンをクリックするとアプリが立ち上がります。

そういったアイコンのデザインをしたり、アプリの画面レイアウトやデザインを行う方の事を総じてUIデザイナーといいます。

ゲーム会社だと例えばステータス画面、アイテム合成画面、チュートリアル画面、ガチャ画面、販促素材…
Web会社だとサイトデザインだったりDTP全般も手掛ける場合もありますし、業種、業界によって仕事内容は様々です。

スマホゲームUIの作り方
Photoshopを使ったスマホゲームUIの作り方を解説します。自身が描いたキャラ絵を素材に架空のゲームUIを作り、ポートフォリオに掲載してみませんか?

デザインだけ作ってたらいいの?

会社のやり方によるので一概には言えませんが、具体的なデザインを制作する「制作業務」だけでなく、画面の仕様や設計を行う事も「UIデザイナー」の業務の一つです。

Web制作ならデザインカンプ(デザインの仕上がりイメージ)を作成する前にワイヤーフレームを作成します。(ワイヤー作成の前にも色々ありますが…)


ワイヤーを作るツールは紙と鉛筆、パワーポイント、Adobe XD等、他人に上手く伝えられるのであれば基本的に何を使っても良いです。
複数画面で構成された複雑なUIならば、Adobe XDが圧倒的に便利なので導入されてみませんか?

会社の体制や担当者の守備範囲、制作物によって変動しますが、画面設計はデザイナー以外の方(主にディレクター)が担当する場合が多々。

しかし、クライアントや制作物の意図を反映した画面設計を行い、それを元にデザインを行う事はUIデザイナーにとって重要な事です。
画面設計を自分が行わなかった場合でも、画面設計した方と綿密な意思疎通の必要があります。

使い手にストレスをかけず、スムーズに目的の情報に辿り着ける画面設計を行い、骨を作る。
そして世界観に適したデザインで肉付けやメイクをしてあげる…といったイメージでしょうか。
肉付けの前の基礎部分が大切になるので、設計はよく考えて行います。

相手によりわかりやすく伝えるためのデザインというのは大切ですからね。
見た目のデザインだけでなく、その前の段階に意識を向けると、より優れたUIデザイン制作に繋がるかと思われます。

UIとはUXの要素の一つ

よく「UI・UX」とワンセットで表記されているものを見かけますが、UIとUXは単純にワンセットのものではありません。
ユーザー体験(UX)の質を高める為には、質の高いユーザーインターフェース(UI)が必要不可欠です。

ECサイトを例にすると、UIの見た目のデザインがいくら優れていても、画面設計が悪く、ユーザーに目的の商品に辿り着くまでに不要な操作が多数発生するようであればUI(ユーザーインターフェース)・UX(ユーザエクスペリエンス)共に優れているとは言えません。

画面設計、デザイン(UI)がいくら良くても、商品の到着まで遅い、それもUX低下の要因の一つです。
商品の品質が悪い、購入後の対応が悪い…そういった要素もUX低下につながります。

…という風に、UIとはあくまでUXを構成している要素の一つであり、UIとUXは同じものではありません。

UXを本格的に考慮する…となると、見た目的な事だけでなく、サービスそのものを深く理解し、改善方法を提案する事に繋がります。

いわゆるデザイナが想像している「UIデザイン」業務の範疇を超えてきます。


「なぁ、Aくん、このECサイトのUI、使いにくいから何とかしといて」
「え?設計したん自分やん。俺に丸投げ?」
「んじゃよろしくね~」
「…」


なんて事、Web制作の現場ではよくありそうですね。

ターゲットを意識した設計

UI・UXは様々なものが当てはまります。

例えばウェブサイト、ウェブコンテンツ全般、PCやスマホのOSやアプリ、ゲーム等々…
見た目の美しさや使い勝手といったUI(ユーザーインターフェース)部分だけでなく、利用ユーザーのUX(ユーザーエクスペリエンス)をいかに高められるかが重要になってきます。

コンテンツを利用するユーザーにどのような体験をしていただくかまでを意識してコンテンツの設計を行う必要があります。

そのためにはまず、対象となるユーザー、すなわちターゲットを明確にする事が大切です。
ターゲットを意識したUI(ユーザーインターフェース)でないと、ユーザーはすぐに離脱してしまいます。

例えばカッコいいスポーツカーを売りたいのにパステルカラー満載のガーリーな世界観で構築すると…買う気が失せますね。

UXはターゲットをしっかりと見据えることが大切です。
同じ商品、サービスでも各ユーザーによって得られるUX(ユーザー体験)はまちまちです。

自身がターゲットとするユーザーを、何を基準にして「良いとみなすか」、そこを明確に意識する必要があります。

オススメの書籍
UIデザインのについて詳しく書かれた書籍を読んでより深くUI・UXについて学んでみるのは如何でしょうか?下記書籍はUI・UXに関するイロハが分かりやすく網羅されています。

商用利用可能な高品質テンプレート

商用利用ができる高品質なデザインテンプレートを厳選しました!
制作時間を大幅に短縮でき、尚且つ品質の向上が可能な優秀な素材ばかりです。

制作の手間を格段に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。


例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします!
厳選!ポートフォリオ用テンプレート40選


紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差をつけてより高みを目指してみませんか?
デジタル媒体向けポートフォリオテンプレ素材35選


デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い!
相手に舐められない名刺テンプレート50選


バナーはフォトショップの練習をする上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選


AI形式で作られた高品質なフライヤーのテンプレート50選です。画像と文字を差し替えるだけ、超短時間でハイクオリティなフライヤーが作成可能!
様々なフライヤーのテンプレート50選


制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬!
様々なモックアップテンプレート50選


良質な素材をもっと見る
上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください!

おわりに

以上、混同しがちなUIとUXの違いについて解説してみました。

業務だと制作する前にターゲットが誰でどんな使い方をして、こうだからこんな画面設計にして…と細かく想定してデザインカンプを作成する事が多いです。

ただ、あまり考えすぎると頭でっかちになって、直感に従ったデザインができなくなる可能性もあるので、感覚派の方は「ふーん、なるほどね」くらいでもいいと思います。
何事も塩梅ってものが大切ですが、加減が難しいですね。

個人的にはこういった知識は知識として持っておいて、各々好きに作るのが一番かなと思っています。
考え方とかマニュアルに縛られすぎると、面白い発想やモノが生まれないですからね。

ある程度は適当でいいと思いますよ!


ではまた!

商用利用可能な高品質素材

ポートフォリオテンプレート

ポートフォリオ用の高品質なテンプレート34選
デジタルポートフォリオ用のテンプレート35選
InDesign形式の高品質なポートフォリオテンプレート77選
AI形式の高品質なポートフォリオテンプレート25選
PSD形式のポートフォリオ用テンプレート12選
【InDesign】 A4横のポートフォリオテンプレート15選
【InDesign】 A4縦のポートフォリオが簡単に作れるテンプレート15選

印刷物のテンプレート

【名刺テンプレート】 高クオリティな名刺テンプレート50選
【名刺Part.2】高品質なミニマルデザインの名刺テンプレート18選
高品質な三つ折りパンフレットのテンプレート76選
【神速チラシデザイン】商用利用可能なフライヤーのテンプレート50選
【イラレ初心者でも自作可】商用可能で高品質なクリスマスカード素材53選
【商用利用可能】高品質な便箋のテンプレート50点を厳選

Web制作にオススメ

高クオリティなロゴのテンプレート50選
高品質なバナーテンプレート50選
Webサイトのデザインカンプ用テンプレート35選

その他のテンプレートや素材

ゲームUIに使える高品質なテンプレート48選
ゲームやイラストの背景素材66選
1枚絵として成立するクオリティの和風背景素材20選
【デザインモックアップ】様々な素材の高品質なモックアップ50選
イラスト初心者の為の便利なテンプレート
【商用OK!】フリーフォントと一味違う超高品質でユニークなフォント20選

最強素材リストの目次一覧
SCROLL
目次一覧
ゼロから始めるシリーズ

現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう!