初心者にもよくわかる!UI・UXって何?

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

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

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

UIについて

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

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


Wikipediaより

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

UXについて

UXとはユーザーエクスペリエンス(User Experience)の略称です。
Experienceは「体験・経験」を意味する英語です。
ユーザー体験と表現される場合もあります。

つまりUXとは「ユーザーが対象を通じて得られる体験」を意味します。

例えば通販サイトだと…

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

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

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

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

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

UIデザイナーってどんな事をする仕事?

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

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

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

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

具体的なデザインを制作する「制作業務」だけでなく、画面の仕様や設計を行う事も「UIデザイナー」の業務の一つです。

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

手書きワイヤーフレームのイメージ

ワイヤーを作るツールは紙と鉛筆、パワーポイント、Adobe XD等、他人に上手く伝えられるのであれば何でも良いです。

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

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

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

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

Illustrator、Photoshopはデザイナー必須ソフトです。
初心者の方にも分かりやすくゼロから解説しております!

関連記事

Adobe(アドビ)のIllustrator(イラストレーター)という名前のソフト、ご存知でしょうか?グラフィック系の業務では必須ソフトの一つです。 Illustratorを使って絵、チラシ、ロゴ、ポスター…紙媒体、デジタル媒体、問[…]

関連記事

こんにちは、S.Design.Laboの中の人です。 Adobe(アドビ)のPhotoshop(フォトショップ)という名前のソフト、ご存知でしょうか?グラフィック系の業務では必須ソフトの一つです。 Photoshopを使って写[…]

UIとはUXの要素の一つ

よく「UI・UX」とワンセットで表記されているものを見かけますが、UIとUXは単純にワンセットのものではありません。

ユーザー体験(UX)の質を高める為には、質の高いユーザーインターフェース(UI)が必要不可欠です。

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

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

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

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

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

UIだけでなく、UXも考慮する

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

例えばウェブサイト、ウェブコンテンツ全般、PCやスマホのOSやアプリ、ゲーム等々…

見た目の美しさや使い勝手といったUI(ユーザーインターフェース)部分だけでなく、利用ユーザーのUX(ユーザーエクスペリエンス)をいかに高められるかが重要になってきます。

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

そのためにはまず、対象となるユーザー、すなわちターゲットを明確にする事が大切です。

ターゲットを意識する

UI・UXを設計、制作する上で、ターゲットを明確に念頭に置くことは非常に重要です。

ターゲットを意識したUI(ユーザーインターフェース)でないと、ユーザーはすぐに離脱してしまいます。

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

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

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

おわりに

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

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

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

何事も塩梅ってものが大切ですが、加減が難しいですね。

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

ではまた!

UI・UXと連動する内容でポートフォリオについて解説しております。
就活用のポートフォリオ作りで悩まれている方にとってのヒントとなれば幸いです。
関連記事

「ポートフォリオ」という言葉を聞いたことがあるでしょうか? デザイン系や制作をされている方は馴染み深い単語かもしれません。 ポートフォリオ(英語:Portfolio)とは、書類を運ぶ平らなケースを意味する。紙入れ、札入れを意[…]

関連記事

前回の記事でポートフォリオの概要とデザイン業界をターゲットにしたポートフォリオ制作に関する基礎知識ついて解説しました。 今回はポートフォリオでよくある「惜しい例」と改善例について解説したいと思います。 惜しい例1:とりあえず並べてみまし[…]

関連記事

第1回でポートフォリオの概要とデザイン業界をターゲットにしたポートフォリオの作り方、第2回で惜しいポートフォリオの例と改善例について解説しました。 今回は自身が経験した業界別(ゲーム業界、WEB業界、イラストレーター、漫画家)のポートフォリ[…]

下記はIllutratorとPhotoshopの使い方をゼロから解説する「ゼロから始めるIllustrator」と「ゼロから始めるPhotoshop」の目次リンクです。
無料のアイコン素材をそのまま使うのもいいのですが、せっかくならイラストレーターやフォトショップといったグラフィックソフトで一手間加えてオリジナリティを出してみては如何でしょうか?

本業が教えるイラレとフォトショの講座目次は下記です。
最新情報をチェックしよう!
>デザイナ必須!AdobeCC コンプリートプラン

デザイナ必須!AdobeCC コンプリートプラン

Photoshop、Illustrator、Acrobatなどの定番アプリから、Adobe XD、Dimension、Premiere Rushといった新世代アプリまで、20種類以上のアプリが全て使い放題!
また、15,000以上のフォントが使えるAdobe Fontsや1億点を超えるロイヤリティフリー素材が揃うAdobe Stock(別売)などのサービスも充実。
そんな最強制作ツールを最安値で手に入れよう!

CTR IMG