こんにちは。UXエンジニアの高馬です。

え？意匠制作部のサブマネやってる人じゃないの？

そう思った方は今すぐに前回の記事を読んできてください。そしてその中で僕が説明をほったらかしにしている単語たちがあるので、それを拾い上げてから戻ってきてください。今回はその話をしますから。

前回、「UXエンジニア」なる職種について説明するためにUIやらUXやらユーザビリティやら似たような言葉をたくさん使っていましたが、そもそもそれが何なのか？を説明してなかったので、かなり不親切な記事になってしまいました。（そのせいで離れてしまった方がいましたら、どうぞ戻ってきてください）

なので、今回は改めてUIとUXの関係性やその違い、さらには混同しがちなユーザビリティについても語っていきたいと思います。自分自身の備忘録も兼ねて、かなり初歩的なところから初めていくので、上級者の方はおさらいのような気持ちで読んでいただければ嬉しいです。（今回も大長編になってしまった…）

ではいってみましょう。

そもそもUI・UXって？

まずは「UI・UXって何なのか？」というシンプルな疑問から解消したいと思います。WEB業界で働く方々からすれば「そこからかよ」という内容かもしれませんが、それでも細かいところの認識は人によって違ったりするので、確認の意味も込めて。

ユーザーの思考を理解するための概念

UI・UXとは、モノやサービスをつくる際に用いられる、「ユーザーの思考や行動を細かく理解するための概念」です。もちろん、商品をつくるときに「いいものをつくろう」と思わない人はいませんよね。けど、それが誰にとっていいものなのか？という視点でモノをつくれている人は、今の時代ですらあんまりいない印象です。

そのユーザーの思考や行動を細かく理解するために、ユーザーと接する部分や、ユーザーがサービスを通して抱く感情、行動などにフォーカスして考えようとしたときに、それぞれのことを総称したものが「UI・UX」です。つまりはユーザーと商品・サービスをつなぐ部分、またはそのもの、といった意味合いですね。

そして、表記が似ている・響きが似ているといった点から、この二つがまるで対立しているものだったり、同じようなものだと思っている人もごくたまに見かけますが、実際はもちろん違います。今日はそこを深掘っていきます。

UI（ユーザーインターフェース）とは

UIとは、ユーザーインターフェースの略で、直訳すると“ユーザーとの「境界線」や「接点」”という解釈ができます。有形のものと無形のもので若干のニュアンスは変わりますが、基本的な考え方は同じです。

例えば、パソコンという有形のものでいうとキーボードやディスプレイなどユーザーが直接触れる部分、WEBサイトやアプリでいえばナビやボタンなどの各要素やそのサイズ、色、フォントなど、モノや要素そのもののことを説明します。

ただ、この記事を読んでいる人や僕が関わりの深いWEB業界においては、それらに加えて⾒た⽬のデザインや、要素そのものを操作したときの使いやすさ、 情報が整理されているかなどのわかりやすさといった意味も含めた「UI」という言葉を使っている印象です。

UI＝手段

よく表現されるわかりやすい考え方で「UI＝手段」というものがあります。

例えば、「服を買う」という目的に対して「何（どこ）で買うのか」の「何（どこ）」の部分がいわゆるUIにあたります。実際にお店にいって買ってもいいし、ネットで買うこともできるし、アプリなんかもそうですね。そしてその「何（どこ）」の使いやすさ・わかりやすさがIT/WEB業界におけるUIということになります。

ユーザビリティとは

ユーザビリティとは、「use」と「ability」（〜することができること）を合わせた造語で、多くは「有用性」「使いやすさ」「使い勝手」と訳されます。これは、ユーザーとの接点に関する⾒た⽬や使い勝⼿の満足度を表す概念のことです。…難しいですね。

UIとの違いは？

簡潔にいうと、UIがボタンや要素そのものなのに対して、ユーザビリティはその指標です。UIをWEBサイトにおけるボタンとすると、ユーザビリティはそれが押しやすいかどうか、認識しやすい色か、わかりやすい場所にあるか、といった「指標」を意味します。

ISO 9241-11による定義

とはいえ、ユーザビリティについても考え方や定義が数多く存在しています。一般的には、ISO（国際標準化機構）により、1998年に定められた国際規格がよく知られています。

■ ユーザビリティ (usability): 特定の利用状況において、特定のユーザによって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、ユーザの満足度の度合い。

・有効さ (effectiveness): ユーザが指定された目標を達成する上での正確さ及び完全性。
・効率 (efficiency): ユーザが目標を達成する際に、正確さと完全性に費やした資源。
・満足度 (satisfaction): 製品を使用する際の、不快感のなさ、および肯定的な態度。
・利用状況 (context of use): ユーザ、仕事、装置（ハードウェア、ソフトウェア及び資材）、並びに製品が使用される物理的及び社会的環境。

http://www.usability.gr.jp/whatis/definitions/　より引用

と定義されています。

まあこれもなかなかややこしいことを言っているのですが、注目して欲しいのはところどころに「特定の」と付けられているところです。これは、ユーザビリティはUIの指標ではありますが、万人に対して有効なものではない、とも解釈できますよね。

どんなユーザーが、どんな目的のために、どんな状況下でそれを利用するかでその指標は変わってくる

そう捉えることができます。

つまり、ただ使いやすいものをつくればいいのではなく「ユーザー一人ひとりのことをしっかり考えてUIを設計しなさいよ」という風にも聞こえてきますね。なるほど確かに、これは次で説明するUXにも繋がっているような気がします。

UX（ユーザーエクスペリエンス）とは

UXとは、ユーザーエクスペリエンスの略で、ユーザーがサービスや商品を通して得られる体験のことです。これは、利⽤前、利⽤時、利⽤後すべての体験を指し、ここまでで説明した概念の中でも一番広い概念になります。

例えば先程のUIであげた例【服を買う】という体験であれば、お店で丁寧な接客を受ける体験や、インターネットで買うことによる便利さやそれによる失敗の体験などがUXに当たります。

そしてこれをWEBサイトで表すとすれば、

・かっこいいデザインだな
・字が読みにくいな
・読み込みが速くて気持ちいいな

など、WEBサイトに訪問することによって生み出されるすべての感想がUXとなります。

UIがユーザーとの接点や⼿段を指していたのに対して、UXはそのサービスを通して得た「体験」という比較的大きな括りになっています。どこまでを商品と捉えるか、どこまでをサービスと捉えるかによってその定義が変わるのが特徴です。

UIとUXの関係

UIとUXの違い

「UI UX 違い」なんてワードで調べているといろんな事例が出てくるのですが、個人的には米国のHeinzというメーカーのケチャップボトルの例が一番わかりやすかったので、紹介しておきます。

上の図の左がUIデザイン、右がUXデザイン、とされていますが皆さん違いはわかりますか？

左の方はスマートに作られていて、お洒落なレストランなんかに並んでいるとかっこいいですよね。けどこれだと底に溜まったケチャップが出にくく、最後まで使い切りたい！という目的の人にはただ不便なだけかもしれません。

そういったユーザーの体験を考えて作られたのが右のボトルです。蓋の部分に常にケチャップが溜まってくれるので、ケチャップを最後まで使いたいというニーズの人にはこちらの方が魅力的なわけです。
（これはこれで勢いよく開けたときにケチャップが吹き飛ぶ、などユーザビリティの問題もありますが…）

上記の二つはどちらが良い悪いではなく、ユーザーのニーズや利用環境によって求められるものは変わってくる、といういい実例ではないかと思います。

事実、Heinzは現在も両方の形を販売していますし、このボトルを開発するために繰り返し実験に基づいた調査を行ったと聞きます。課題はまだまだ残っていますが、より良い優れたユーザー体験を提供するためには必要な思考・試みだといえます。

UI・ユーザビリティはUXを高めるための手段

上記までの内容をまとめると、この三つの関係性としてはこのようになります。

UX ＞ユーザビリティ =＞ UI

ユーザーにとって優れた体験（=UX）を提供するためには、やはり優れたUIは必要不可欠で、優れたUIとは、ユーザー一人ひとりの目的や利用環境を考慮したユーザビリティに長けたUIでないと実現不可能です。

つまり、UXは全てを包括していて、UIやその指標であるユーザビリティはUXという体験を高めるための手段・要素のひとつだということになります。

“UI/UX”という表記

では、よく見かける“UI/UX”という表記は間違っているのでしょうか。この表記だと確かに対立していたり、並列の関係のような印象を受けますし、これらが間違いだと書かれている記事もよくみます。

冒頭でもお伝えしたように、確かにそれがただの理解不足や認識の違いの場合ももちろんあります。ですが、時代が進むにつれいろんなものが進化した現代においては、そうでない場合もあると思っています。

というのも、ことWEBサービスにおいては、昔はユーザーとサービスを繋ぐのはPCのみでした。それに比べ今はスマートフォンやタブレットなどの普及により、いつでもどこでもサービスにアクセスできる時代です。つまり、ただUIデザインをするだけにしても、ユーザーの利用環境や状況などを考えざるを得ないようになってきているということです。

そういった背景から、UIとUXが混同されるようになっているんじゃないかと、個人的には考えています。なので、“UI/UX”という表記が間違っているかどうかについては、結論ケースバイケースだと思います。

例えばスマホゲームなどを制作するときなんかは、その体験と呼ばれる部分は前後関係に関わらずほぼゲームをしている最中になるので、UIデザインを考える≒UXも考えている、みたいな構図も十分にあり得るからです。

いずれにせよ、商品やサービスをつくるに当たって、その先にいる人のことを考えるのはもはや当たり前ということですね。

UI・UX・ユーザビリティの具体例

さて、ここまではどちらかというと概念的な話でしたが、やはり具体的な例がないとわかりづらい部分もあったので、この章では実際によくある体験を例に出して、それぞれでいうところの何がUI・UX・ユーザビリティなのかを説明していきます。いろんなサイトで紹介されている事例もありますので、参考にしてください。

体験1：スタバでノートパソコンで仕事

これは本当によくある例ですが、紹介していきます。

スタバは「体験を売っている」と謳っているくらいなので、味はもちろんスタバという空間で得られる体験そのものをどう改善していくかを考えて設計されています。

例えば、「今⽇はいつもと違う環境で仕事したい」「オシャレな店で仕事をしてモチベーションを上げたい」「仕事場所を探していたら、看板をみて今月は苺のドリンクだと知り、今年はまだ飲んでないなあ」なんて思いながらスタバに入ります。

思いのほか店内は混んでいましたが、店員さんが駆け寄ってきて一緒に席を探してくれます。そして、列に並んでいるときも事前にメニューを渡してくれて、注文時にはスムーズに進めることができました。

また、ドリンクを受け取る際は取っ手をこちらに向けて差し出してくれ、「熱いのでお気をつけください」なんて声をかけてもらいます。

数時間後、ずいぶん長く滞在したにもかかわらず退店時には笑顔で⾒送って頂き、またここで仕事がしたいなあと思って帰ります。

ついでに加えると、忘れ物に気付いて電話してみると、先程の店員さんが座っていた場所まで覚えていてくれて、しっかり保管してくれていました。最後まで丁寧な対応で受け取りも気持ちよく済ませることができました。

以上の一連の体験すべてがUXです。

利用前、利用中、利用後すべてがUX

UXは商品やサービスを通してユーザーがする体験すべてです。それは何も利用中に限った話ではなく、どんなユーザーがどんな感情で店にやってきてどんなサービスを求めているのか、また来たいと思ってもらえるためにユーザーのどんな課題を解決できるのか。ここまで考えてようやくUXについて考えられていると言えるでしょう。本当に奥が深い…！

ちなみに、UIやユーザビリティでみると、利用中におけるメニューの見やすさであったり、カップが持ちやすいように取⼿の⽳が⼤きくつくられている、右利き⽤が多くつくられている、どこにでもコンセントがあり充電に困らない、などがそれに当たります。

これらのうちのどれかがしっかり設計されてなければ全体の体験の質、つまりUXの質は落ちてしまうので、やはりUIやそのユーザビリティはUXの中の一部というのがしっくりきますね。

体験2：アプリで宅配ピザを注文

こちらはWEBやアプリでのサービスの体験事例になりますが、こういったところにもUXは関係してきます。

たまには外食したいなあなんて思っていた週末ですがあいにくの雨。どうしようなんて思っていると一通のメールが届いて、近くの宅配ピザが雨の日サービスで割引中だと知ります。これはちょうどいいやと早速注文しようとしますが、リンクを押すとアプリではなくWEBサイトに飛ばされ、ログインが面倒だなと感じます。

ようやくアプリへのリンクを見つけると、違うサービスとのアカウント連携をしていたのですぐにログインできました。ようやく注文に進みます。

注文が完了し、待っていると調理状況がわかる画面になったり、バイクにGPSがつけてあり今どのあたりまで来ているかなどすぐにわかるようになっていました。

雨のせいもあり配達は少し遅れてしまいましたが、そういったときにお渡しする割引クーポンがあるようで、そのおかげもあってか遅れたことへの不満は解消されました。

特定のユーザーの状況だけでなく、人の感情の動きや外的要素も考慮する

さて、上記の例でいうとUXとはどこからどこまででしょうか。

答えは言うまでもなく「すべて」ですが、実はもっと前からこういった事態を予測してサービスを考えていないとこれらのサービスは成り立ちません。

例えば、週末にピザを注文するという感情は多くの人が抱く可能性があるので、そこに合わせて広告のメールをあらかじめ送っておき、雨ならさらにサービスを実施する、なんていうのも、雨の日に出かけたくないという人の心理をついたいいサービスだといえます。

また、待っている時間の退屈さを解消するためにGPSをつけたり、雨の日の遅れを想定して割引券を用意しておく、といった対処は、大衆の心理や起こりうる事態をしっかり考慮できていないとできないことです。

このように、WEBやアプリのサービスだとどうしても不特定多数の人が相手になるので、ときには特定のユーザーだけでなく、大衆としての人の心理や行動などを汲み取った設計も必要になります。もちろん今回の場合は受け渡しの際に個人に対しての気遣いなども含まれますが、やはり注力すべきは前者になります。

ちなみに、さらっといきましたがここでいうアプリやサイトの使いやすさがUIです。どこにボタンがあるのか、押しやすい大きさになっているか、注文の流れは簡単で直感的に進められるかなど、サービスの主たる部分なのでかなり重要な部分になります。

ただ、それでもログインする人は何を手間と捉えているのか、宅配を注文する人はどういった場所にボタンがあればいいか、GPSはしっかりリアルタイムで反映されるか、などはやはりUXの領域ですので、UXありきのUI・ユーザビリティということになります。

UX改善により成功したサービス事例

ここまでで、UXはUIやユーザビリティを包括した概念であると説明しましたが、実際にそういったところを意識して改善、向上されて生まれたサービスにはどんなものがあるのでしょうか。実は意識して探してみると、僕たちの生活に今や当たり前に存在しているサービスだったります。

LINE

あまりに身近すぎて「？」となった方もいるかもしれませんが、LINEはUXデザインの成功事例として挙げられる代表的なサービスの一つです。

LINEが登場するまではメッセージのやり取りはメールが主流でした。ちょっとの返事にも文章を打ったり、誰かとのやりとりを見返したいときは検索したり遡ったりと、今思えば何かと不便でしたよね。けど、それが当たり前だったので、誰も気づいていませんでした。

そういう、誰もが無意識の中で不便と思っているのに当たり前だと諦めてるところに目をつけたのはさすがとしか言いようがありません。

一人一人個別のトークルームで簡単に見返せるし、「スタンプ機能」によって説明のめんどくさい感情や、淡白にならない、かつ手軽な返答ができるようになったり。これこそ、メールでのやりとりという体験の中に隠れていたユーザーの感情に目を向けたことによって誕生したUXデザインの成功事例だといえます。

クックパッド

これも今や当たり前となっていますが、あらゆる世代、性別問わずたくさんの人に「料理をする」という体験を身近なものに変えた成功事例です。

これまで料理をするとなれば料理本や教室で学ぶ、しかなかったのが、誰もが写真や動画付きのお手本をみながら簡単に美味しい料理を作れるようになった。さらに自分でつくったものを上げて記録していくことで、実績を可視化、さらには共有し見てもらうことで満足感にもつなげることができる。

これも、「料理をすること、できるようになるまで」の体験の中にあった煩わしさやハードルを一気にとっぱらった事例の一つです。

メルカリ

こちらは僕もかなりお世話になっているサービスです。

これまで「安く物を買う/売る」というと古着屋やフリマに足を運ばないといけなくなったり、安いといっても店舗の基準での質と価格なので、買う側としては「もっと汚くてもいいから安く買いたい！」という需要もあったでしょう。

ということは、同じように「とにかく安くてもいいから売りたい！」という需要もあったはずです。店舗では買い取ってくれないような商品でも、お互いが納得すれば売り買いが成立する。

これは、モノの売り買いという体験のなかに新たなマーケットを確立した成功事例だと思います。

Netflix

Netflixに限らず、近年爆増しているビデオオンデマンドサービスも「映画館に足を運ぶ」という体験をより身近にしてくれたサービスじゃないでしょうか。

新しい映画が観れない、という不安はサービス開始当初あったようですが、人々の需要はどうやらそこではなかったようです。いつでも手軽に好きなだけ過去の映画を観ることができる、この体験は、今までレンタルビデオ屋さんに行くしかなかった人々の手間や面倒を一気に払拭しました。

ユーザーがどんなものを求め、必要としているのか

どのサービスも今や当たり前にあるものですが、それがなかったときのことを考えると信じられないものばかりですよね。これらに共通してるのは、それがどんな時代でもユーザーが何を求め、どんなことを必要としているかを第一に考え、考案されたサービスだといえます。

こういった当たり前の体験のなかに潜む改善点をみつけだし、向上させていく気遣いや共感力こそがUXデザインを成功させる第一歩な気がしてきますね。

トゥモローゲートがUI・UX向上のためにやっていること

もちろん、弊社でもWEBサイトなどのサービスをつくっていく上で、まだまだではありますが少しずつそういった考えや取り組みも進めています。この章では、ほんの少しではありますがそれらを紹介したいと思います。

ユーザーテスト

WEBサイトを作る上でこちらは欠かせません。

事業の特性上、一般の消費者を呼んでテストを実施することは難しいのですが、なるべくWEBに知見のない新卒社員などに実際にサイトを操作してもらい、使いにくい点などのFBをもらい、別案件での制作物に生かせるよう改善に取り組んでいます。

これには、こだわり持ってデザインしたデザイナーや動きをつけたエンジニアが撃沈するようなFBをもらうこともあり、勉強になることばかりです。（実際にサイトを使うユーザーは厳しいものです）

また、弊社の採用サイトなどではエンドユーザーに当たる就活生、つまりは毎日来てもらっているインターン生たちにも触ってもらうような取り組みも今後していきたいと考えています。

ワイヤー/プロトタイプの作成

トゥモローゲートではWEBサイト構築の際、ワイヤーでどこまで実際の完成したサイトを想像できるかをかなり意識して作成しています。

XDを使って実際のリンクをしっかりつけてサイトを操作するかのように確認できるようにするのはもちろん、レイアウトや仕様、写真の構図など見せ方の部分でもしっかりクライアントに伝わるよう、デザイナーがワイヤーを作成する、といった動きも少しずつですが取り入れています。

通常の制作会社などでは情報や仕様まとめとしてのワイヤーという立ち位置が多いですが、どれだけ完成を想起できるワイヤーにするかを意識した方が結果クライアントとも認識のズレなく進めることができています。

ペルソナの設定と圧倒的な共感力

WEBサイトにおいては学生やクライアントの顧客などがエンドユーザーとなりますが、弊社において難しいのが自社サービスをつくっているわけではないということです。

その上で最適化されたサービスやWEBサイトをつくっていくには、まずは顧客のことを理解し、次にその顧客のことも想定してものづくりをしなければなりません。UXを意識し、相手のことを考えるという観点でみたとき、その“相手”のなかに含まれる人が通常よりも多いのは、弊社の特徴です。

また、企業のブランディングをメインとしてる弊社では、クライアントに本気で向き合い、一緒に理念を構築するほどの共感力は必須のスキルで、ここに関してはお世辞抜きに抜群に兼ね備えた社員ばかりだと思っています。

そういった視点で考えると、顧客が理想とする学生やエンドユーザーへの理解度はどこの企業よりも長けているんじゃないかと思っています。強い共感から生まれるペルソナはとても具体的で、この学生はどういったことにささるのか、などといった弊社独自の価値基準に対しても鮮明に設定し、企画提案することができます。

おわりに

いかがでしたか？

今回はUI・UX・ユーザビリティの違いと関係性について、基礎の基礎から細かく調べてみました。初めて聞いた方はもちろんのこと、既に理解しているよって方にもいいおさらいになったんじゃないかと思います。

成功事例でもお話ししたように、やはり第一に大切なのはいかに自分のサービスや商品を通してユーザーがより良い体験をできるかを考えることで、そこに必要なのは気遣いや思いやり、共感力であることはいうまでもありません。

しかし、いくら気遣いがあっても、それをビジネスに落とし込んで設計するスキルがないとうまくいきません。そういった部分を綺麗に補完し、言語化していけるフレームワークも世の中には山ほどあります。

また、今回は三つの概念とその関係性についてお話ししましたが、全体を網羅するUXはもちろん、UIやユーザビリティ単体についてまだまだ掘り下げるべき要素があります。

今後はそれらについてもっとフォーカスしていきますので、ちょっぴり楽しみにしてもらいながら、一緒に成長していければと思います。

今回もかなり長編になってしまいましたが、最後までお読みいただいた皆さん本当にありがとうございました。次回の記事でまたお会いしましょう。

では。