悩めるWEB担当者様のための最新ノウハウをお届け

【UI/UXとは?】UIとUXの違いとデザインの改善案

【UI/UXとは?】UIとUXの違いとデザインの改善案

はじめに

「このサイト、使いやすい!」「このサイトは使いにくいな、ほしい情報に辿り着けない…」
普段インターネットを使っている人は、こんな感想を持った経験があるのではないでしょうか?

ユーザーの方に「いいサイト」と思ってもらうにはどのようにすればよいのでしょう。

この疑問を解決するのに欠かせない概念が「UIとUX」です。
タイトルでは「UI/UX」と書いているのに、上記であえて「UIとUX」という風に表記したことには理由があります。

一般的に「UI/UX」とまとめられて表記されがちなので、対立する概念であったり、相互補完する概念であったり、と思われている方は少なくないと思います。
しかし厳密には、UIとUXはそのような関係ではありません。

この2つがどのような概念で、どのような関係なのか、見ていきましょう。

UI(ユーザーインターフェイス)とは

UIはユーザーインターフェイスの略です。

「Interface:インターフェイス」「境界面、接点」と訳せます。
つまり、UIは「人とモノ(主にデバイス)をつなぐ窓口のようなもの」だとイメージしやすいかもしれません。

例えば何かのWEBサイトをPCやスマホ、タブレットで見ているとき、その画面上で見られる情報(フォントやデザイン等)すべてがUIにあたります。

UI設計の具体例

クリックボタンを例に説明します。
クリックボタンのUIで意識されることは、「認識しやすいものにする」ということです。
クリックという何気ない行為をいかに違和感なくさせるか、その考えのもとクリックボタンのデザイントレンドはここ十数年の間に大きく変化しました。

検索ボタン1

以前はこのようなグラデージョンや立体的な表現が主流でした。

検索ボタン2

その後、ほとんどがこのようなカラーベタ塗りか、文字を四角いアウトラインで囲っただけのシンプルな表現が主流になりつつあります。

検索ボタン3

さらに、シンプルでフラットなデザインが主流の時代から、最近ではまた変化が見られます。
ベタ塗りやシンプルな表現は変わらず、上のように角を丸めたり、影を付けて立体感を表現したりと、従来の「ボタンらしいデザイン」になってきています。

このような変化が起きているのはPC主流の時代からスマートフォン主流の時代へ移行しているからです。PCに比べて小さい画面で見なければならないスマートフォンでは、いかにユーザーにボタンをクリックしてもらうか等の工夫が必要となってきます。上のようなボタンの変化はユーザビリティの向上を期待していることの表れです。

UX(ユーザーエクスペリエンス)とは

UXはユーザーエクスペリエンスの略です。

「Experience:エクスペリエンス」「体験、経験」と訳せるように、UXは「人がモノやサービスに触れて得られる体験や経験」のことです。

例えばあなたが、とあるWEBサイトを訪問したとします。先ほど説明したサイトのUI(デザインやフォント、余白など)があなたにとって見やすかったり、使いやすかったりしたら、あなたはそのWEBサイトを見てどのように感じるでしょう?

きっとこのような感想を持つのではないでしょうか。

  • デザインが美しい
  • フォントが見やすい(読みやすい)
  • なんの情報がどこにあるか分かりやすい
  • ページの読み込み速度が速くて使いやすい

これらの感想がUXです。
商品やサービスに触れて、ユーザーが感じることすべてがUXとなるのです。

UX設計の具体例

日本で年々増え続けているスマートフォンユーザーは2017年12月時点で、6500万人というデータがあります。
(参照:スマートフォンの利用者は6500万人を突破、PCのピーク時を越える~ニールセン 2017年の動向をまとめた「Digital Trends 2017」を公開~

その中で、今やスマートフォンの代表格ともいえるiPhoneを筆頭に、デバイスそのものが時代とともに変化を遂げてきました。

iPhone

上から下に行くにつれて新しいバージョンのiPhoneです。
(※下2段はiPadです)
人の使いやすさに合わせて、「より薄く、より軽く、より大きく」変化しています。
見た目だけでなく機能面においても変化が見られます。ロック画面の解除です。はじめはパスコードを設定して解除する際にそのパスワードを打ち込んでいました。

次に登場したのが「指紋認証」です。パスコードを打つ手間が省けて便利に感じた人は多いのではないでしょうか。

そして現在、iPhoneXに搭載されているのが「顔認証」です。表の画面からはホームボタンが消え、画面をタップするだけで顔認証が始まり画面のロックが解除されます。その便利さ、精度の高さにどれだけの人が感動したことでしょうか。私も感動したうちの一人です。

この感動体験こそがUXであり、指紋認証や顔認証という機能がUIにあたります。

UIとUXの違い

それではUIとUXの違いについて見ていきましょう。

そもそもなぜ同一に扱われるのか

見た目の文字が似ているという理由もありますが、根本的な理由としては「UIとUXの境界線が曖昧」であるからだと思います。

アプリやWEBサイトを例に見てみましょう。アプリやWEBサイトの操作性や利便性はアプリやWEBサイトの価値や売上に結びつきます。操作性や利便性が考えられたUIをユーザーが体感したことで得られるUXが存在します。
この文章だけでも、どこまでがUIでどこからがUXなのか、分かりづらいと思います。
良いUIによって良いUXが生まれる、その強い結びつきのせいで境界線が曖昧で混同されやすいのです。
UIデザインが大きくUXに影響を与えるような商品やサービスに関わっている人ほど、UIとUXにあまり境界線を引かずに同じようなニュアンスで捉えることが多いのではないでしょうか。

UIはUXを高めるための要素のひとつ!?

UIとUXは対立関係でもなければ、相互補完する関係でもありません。質の高いUXを作り出すには、ユーザー心理を理解したユーザー目線のUIが重要不可欠です。
ではなぜ見出しで「要素のひとつ」と表現したのか、それにはきちんと理由があります。

UXを作り出す方法はUIだけではないからです。

サイトの見た目にこだわりすぎて、コンテンツがユーザーにとって全く有意義なものでなかったら、ユーザーは感動するでしょうか。
新作iPhoneXの新機能について知りたくてWEBサイトを見ているユーザーが、WEBサイトのデザインはオシャレだが機能について一切触れていないWEBサイトを見ても満足しませんよね。

つまり、UIが先行してしまってはいけないということです。
サイトの目的やコンテンツがしっかりしていることはもちろん、よりユーザーに寄り添ったサイトにするためにUIを活用するというのが重要です。UIとUXは、相乗効果として捉えていきましょう。

UI/UXデザインの改善案

ここまで、「UIとUXのデザインはユーザーに寄り添ったものにしていくべきだ」という内容について述べてきました。
それでは、実際にどのようにUIやUXを改善できるのか見ていきましょう。

UIデザインの改善案

もう一度、「検索ボタン」を例に考えてみましょう。

検索ボタン4

仮にあなたのWEBサイトにこの検索ボタンがあったとします。
どのような工夫ができるでしょうか。
実は、すでに一つUIを意識できている点があります。それは「色」です。

色覚障害D型の方は下の図のように赤や緑が黄色や黄土色に見えます。しかし、青系の色はあまり変化なく見ることができます。そのため、WEBサイトの配色にあまり違和感を感じずに済みます。そのほかクリックボタンに模様を付けたり、色の名前を表示したり等の工夫ができます。

色覚障害の方の見え方例
※画像はイメージです。

他にもスマートフォンはPCと違って「マウスカーソルを上に乗せる」という操作ができないので、「ここは押せる」ということが直感的に理解できるようなデザインもあります。
UIデザインを設計するときは、「ターゲットにはどんな人がいるのか」広い視野を持って取り組むことが大事です。

UXデザインの改善案

UXデザインの改善方法を考える前に、まずはUXデザインを取り入れる際の流れを確認しましょう。
そうすることで、UXデザインにおいて何を改善すべきか見えてきます。

〈UXデザイン設計までの流れ〉
まず、UXデザインを設計する「目的」を定めます。
「なぜUXデザインを取り入れようと思ったのか」、「UXデザインを取り入れることで何を果たしたいのか」…これらが明確でないと、デザインの方向性が決まりません。

例えば、

  • 商品のリピート購入を目的とした既存サービスの改善(リピート率の向上)
  • 新サービスの提供(新規ユーザーの獲得)

等が挙げられます。

次に、ターゲットユーザーの分析を行います。
商材となる商品やサービスは「誰に向けてのものなのか」、「どんな人に需要があるのか」を調査して分析する必要があります。

そして、ペルソナを設定します。
先ほど考えたターゲットユーザーを、より具体化します。万人受けする商品・サービスを考えることは難しいです。そのため、ユーザーにとって需要のある商品やサービスを作るUXデザインではこの作業が欠かせません。

例えば、商材となる商品が「美顔器」のときターゲット設定は「女性・20~50代・家で出来る美容法に興味あり」のようなものになると思います。
ペルソナはというと、

  • 30代前半女性で結婚しており6歳の子供あり
  • 朝6歳の子どもを幼稚園に送り届けた後、家事に勤しむ
  • 正午にお昼ご飯を食べてから14時までが彼女の自由時間
  • 午後15時には子供のお迎えをして夕飯の支度…

(以下省略)

このようにある1人の女性を設定したら、その女性がどのような日常を送っているのか、というところまで落とし込みます。
ターゲットユーザーに比べてペルソナは詳細に設定を考えなければなりません。

家事と子育てに追われてサロンに通う時間はないから家庭で出来る美容法に興味があるわけです。
そんな背景を持つ人の心を動かすにはどうすればよいのか、そこでUXデザインという考え方が生きてくるのです。

設定したペルソナが「どのようなニーズや悩みを持っていて」、「どのような行動をするのか」を考えます。そこから、そのユーザーを喜ばせたり、感動させたりするにはどうしたらいいのかを想像します。

以上の3点は大まかな流れなので細かく見れば作業ステップは増えると思います。ですが、UXデザインの改善について考える上での前提はこの3点です。

先ほどの章の続きを例に今回も例を見ていきましょう。

色覚障害を持った方は色の判別が難しいです。仮にその人が中学3年生の男の子だったとします。
受験を控えていて、唯一苦手なのが理科です。理由は理科の実験でたくさんの色が出てくるからです。
テストで「選択肢から問題に合う色を答えなさい」となったとき、色だけでは彼は正確に回答することが困難です。ですが、下の図のように工夫されていたらどうでしょう。

選択肢

「それだけのことか」と思う方もいるかもしれませんが、これだけで彼のテストの点数は変わるでしょう。テストの点数が変われば、彼の将来も変わるかもしれません。理科の点数が悪くて第一志望の高校に行けなかったら、彼は自分の目をコンプレックスに思ってしまう可能性だってあるのです。

そう考えると、UXデザインにはたくさんの可能性がありますね。

まとめ

ここまで、UI/UXの定義や基礎、改善方法についてご紹介してきました。
確かにサイトやアプリにおいて、見た目のカッコよさや美しさは必要かもしれません。ですがそれ以上にユーザー目線に立って考えられるデザインがとても重要です。WEBサイトやアプリを設計する際には、ぜひこのことを心がけてみてください。

Ryo Ishizu

株式会社デジタルアイデンティティに2018年入社しました。
入社1年目の石津 諒です
好きなことはカメラ、食べることです
よろしくお願いします!

関連記事