UXデザインとは?基礎知識から自社プロダクトのUX調査手法までご紹介

フリーランスとして企業のUIデザイナー、UXデザイナーとして様々なプロジェクトに従事している飯沢 邦之 氏を講師にお招きし、UXデザインについて解説していただきましたイベントレポートです。自社のプロダクトにUXデザインの改善が必要だと感じていて、UIとUXの違いや各デザイナーの役割、UXのスケジュール感、アウトプット方法などを明確に知りたい場合は、是非、本記事をチェックしてください。

■本記事の対象者: 対象は非エンジニア、すなわち技術者ではないものの、仕事上なんらかの形でプロダクトのUXデザインに携わる立場の方々です。本記事では特にわかりづらいUXの解説に重点を置いています。

■本記事のゴール ―UXとUIの違いなど基礎知識を身につける ―UXデザインが必要になる状況を知る ―UXデザイン改善の要件定義ができるようになる

1.そもそもUXデザインとは?

1-1. UXの定義

UX(ユーザーエクスペリエンス)は、ISO(国際標準化機構)によると「製品、システム、サービスを使用した、および/または、使用を予期したことに起因する人の知覚(認知)や反応」と定義されています。

たとえば世界的にも有名なApple社のiPhoneなどはUXデザインを用いた事例としては有名です。iPhoneを使うことで電話をするという行為以外にも商品を通じて様々なシステムを利用が可能です。

こういった製品、システム、サービスの使用前、使用中、使用後に引き起こされる感情や信念、思考、心理的・身体的な反応、これらのフィードバックすべてがUXです。

「わかりやすかった」「また使いたい」「快適だった」「使いづらい」「もう使いたくない」…といったように、何かしらユーザーの心理が動いた瞬間は、UXが働いていると考えていいでしょう。

さらにわかりやすく、旅で例えてみます。

  • 旅の計画をワクワクしながら立てる
  • 実際に現地で移動する
  • 旅のいつくかの目的を達成する
  • 旅を終えて満足する

旅行を計画し、行って帰ってくるまでのユーザーの経験した時間軸がUXです。「ユーザーエクスペリエンス」と言っている言葉のとおりの意味と理解して問題ありません。

これをECサイトの商品を購入する体験に置き換えてみましょう。

  • 自分に似合う服を買いたいと思いつく
  • 楽天市場やZOZOTOWNで値段を調べたり比較する
  • 普段利用していたECサイトで服を購入し、配送方法を決める
  • 服が手元に届き、着てみる
  • サイズが合わず返品したかったが、すでに着用してしまった
  • 返品できなかったので今まのECサイトでの購入をその後は控えるようになった

複数のサイトで価格を比較したり、商品が届いて使う段階もUXに含まれます。このECサイトでのユーザーの経験を例にUXの改善するとすれば、たとえば返品の仕組みをユーザーに合わせて最適化し、返品を無償で引き受ける、90%の価格で買い取るなどといった提案が考えられます。

1-2. UXとUI領域の違い

UIとはユーザーインターフェイスのことで、ユーザーが目的を達成するための手段と捉えることができます。つまり、ユーザーが直接サービスに触れる接点(インターフェイス)がUIです。

UIとUXの違いがわかりづらい一番の要因は、UIデザインがユーザーにとって使いやすいものだと「使いやすくて快適なサービスだ」といった様にサービスの利用体験が高まるという点にあります。

商品までのクリック数や遷移ページが少ないサイトがあったとすれば、それはユーザーにとっては画面操作が発生するのでUIデザインの領域です。ただ、サイトで迷わずすぐに使えたという事実はサービスを利用して得られた体験、すなわちUXです。

では、見た目が美しいデザインのサイトをつくるのはUIとUXのどちらの領域でしょうか? これは、インターフェイスの領域のようですが、実はブランディングに該当するのでUXです。 ただし、美しいデザインには前提として使いやすさ、わかりやすさが必要です。逆に言えば、あまり美しくないデザインであっても、使いやすければ売上やコンバージョン率が上がることはよくあります。

さて、以下の問題もUIかUX、どちらの領域か考えてみましょう。

<問題> (1)サイトの写真データを軽くして、ページの読み込みが早くなるよう改善した (2)ユーザーがサイトの申し込みボタンを探せないので、わかりやすい位置に修正した (3)決済しやすくなるように利用者が多いLINE決済を導入した (4)ユーザーのリテラシーに合わせて、サービス上で用いる言葉を変えた

<答え> (1)UX (2)UI (3)UX (4)UX

最近では(4)をUXライティングと呼んだりもしているようです。 ただし、UXの領域であってもUIデザイナーがその役割を担当することは、UIデザイナーを名乗っている私自身でも、よくあることです。

ただ、サイトで迷わずすぐに使えたという事実はサービスを利用して得られた体験、すなわちUXです。画面遷移はUIともUXともとれますし、IA(インフォメーションアーキテクチャ)にも該当する領域です。

1-3. UXデザイナーの役割

UIデザイナーの場合は使いやすいインターフェイスをデザインするのが役割ですから、その領域は想像しやすいかと思います。

では、UXデザイナーは具体的にどのような役割があるのでしょうか。「役割は多いがわかりにくい」というのが正直なところで、項目で挙げるとIT分野では以下のようなものが一例であります。

・Google Analytics分析 ・課題設定 ・指標(KPI)の設定 ・レポート作成 ・要件定義 ・ユーザーインタビュー ・ワイヤーフレーム作成 ・ユーザビリティテスト ・ワークショップの企画とファシリーテーション ・etc(その他さまざまな雑務)

近年Webマーケティングの分野でも顧客視点が重要視されていることから、UXデザイナーの業務の中にはマーケティング領域と重複する分野も多くあります。SEO施策などはUXデザイナーの専門の業務ではないものの、あとでご説明をするようなUX調査導入の成果にも影響があるため、知見を有していることに越したことはないという位置づけです。

スタートアッププロジェクトの場合、システムエンジニアの役割と兼任してUXデザイナーという役職になっている企業さんもあります。UIデザインをUXデザイナーが同時にこなすこともあるでしょう。

このようにUXデザイナーといっても調査やUXの具体的なデザインを担当するだけではなく、他の業務と実際には重複する役割を担うケースも多くあり、結果的に概念が複雑になっているというのが現状です。

1-4. UXデザインとUIデザインの領域と工程

わかりやすく工程を示すと、まず目的を決めたら調査を行い、その結果としてどんな機能が必要となるのか要件定義を行います。それを画面遷移なども含めて示したサイトマップにするまでがUXデザインの領域です。プロジェクトに直接参画している場合には仕様書の作成や、工数管理も行います。

厳密にはインフォメーションアーキテクチャ(IA)と呼ばれる情報設計の専門分野があるのですが、一般的にはUXの分野に含まれることが多いです。UIなのかUXなのか担当を明確に分けるのは難しいです。 ここから先のワイヤーフレーム、ビジュアルデザインの分野がUIデザインの領域です。

2.UXの調査手法と成果物

2-1. UX調査が必要なケースとUI改善が必要なケース

まず、プロダクトやサービスに対して抱える課題の種類を2つに大別してみましょう。

2-1-1. 短期課題 具体的にどこがわかりにくい、どんな機能がほしいと言語化できる場合は、課題が顕在化しています。必ずしもすべての事例に当てはまる訳ではありませんが、ユーザーのニーズがすでにわかっている状態においては、UI改善による課題解決を実施した方が短期的に成果を得られることが多いです。

2-1-2. 長期課題 新たな価値の探索一方、潜在的な課題、つまりユーザー自身も気づいていないような新しい価値を発見しなければならない場合もあります。サービスを利用しているユーザーはなぜ好きなのか、もしくは嫌いなのかといったことまでを普段は意識していません。具体的にどうして好きなのかを掘り下げていき、ユーザーの深い洞察をしていくとインサイトと呼ばれるユーザーを動かす隠れた心理に辿りつきます。インサイトによって得られる新たな価値を発掘したい場合は、UX調査が必要であるというわけです。

2-2. ユーザー調査の手法

さて、ではUX調査における調査手法を紹介していきます。マーケティングに携わる方には馴染みがある調査もあると思いますが、ユーザー調査は大きく定量調査と定性調査に分かれます。

定量調査…大量のデータやアンケートなど数字による評価が可能な調査 定性調査…ユーザーインタビュー、ユーザビリティテスト、行動観察など結果が数値化できない調査

UX調査においては、定量調査によって具体的に何が課題なのか仮説を立てた上で、ユーザビリティテストなどの定性調査を行うことで仮説の精度を高めていきます。定量調査のみだと、仮説は立てられたとしてもその先が経験則に基づく予想に頼らざるを得ないからです。

2-3. UX調査のアウトプット

実際にUXのアウトプットとして形になるものがいくつかあります。いずれもスタートアップなどユーザーの課題把握の共有が可能な小規模チームでは不要となる場合もあります。いくつか代表例をご紹介します。

2-3-1. ペルソナ 「仮想ユーザー」とも呼ばれますが、UXデザインではペルソナは定量・定性データが基になっています。データに年齢や性別などのキャラクター性を持たせた結果、形になった人物像がペルソナです。

マーケティング領域でもこのペルソナ手法は用いられることが多いですが、ディレクターなどの想像で設計されているケースもあり注意が必要です。蓋を開けてみると実際のユーザーが全く別の行動を取ることは珍しくありません。また、データに基づいてペルソナを設計したとしても、実際のユーザーに合うことが大切であることはいうまでもありません。

2-3-2. ストーリーボード UXデザインをした際に、ユーザーがサービスから得られる体験をストーリーに起こして、絵で表現したのがストーリーボードです。一般的にサービスの利用前から利用後までを4コマで説明します。テキストでも表現できますが、クライアントやチームにわかりやすく説明するためのアウトプットとして用います。

もしもストーリーボードの内容をユーザーが見たときに全く共感が得られないような場合は、そもそもの課題設定や解決方法がズレている可能性があります。ストーリーがユーザーの共感を得られるかどうか、テストを簡単にすることが可能なのがストーリーボードの利用方法の一例です。 ストーリーボードは見た目が漫画のようなので軽視されがちなのですが、個人的には利用頻度が高く様々な事例で成果が得られているので重宝しています。

2-3-3. カスタマージャーニーマップ カスタマージャーニーマップと呼ばれる、サービスの利用前から利用後までの体験を時間軸などで可視化したものもアウトプットの一つです。

この手法は、小規模チームよりも数十人、数百人規模のチーム、あるいは部署間を跨ぐような大規模プロジェクトの場合に有効です。少人数の場合はデータだけでも頭の中でユーザー像を共有できるのですが、規模が大きくなるとそうはいきません。多様な立場の人が関わる場合は、具体的なユーザーの像をカスタマージャーニーマップで共有し、意思疎通を図るのが効果的です。またカスタマージャーニーマップからユーザーのサービスとのタッチポイントを明らかにし、KPI設計などにも役立てます。

2-3-4. サイトマップ これは見たこともある方も多いでしょう。どんなページを何ページつくるのかであるとか、どのような画面遷移をするかを表現したものです。サービスがどれくらいの規模なのか、またどのような体験をユーザーがするのかを画面数で確認することができます。

3. UX調査が必要な時期

3-1. 既存事業を改善する場合

SEO対策といった定量的な施策はほぼ終えていて、サイトもある程度の規模になったのでリニューアルをしたいときが、UX調査を行うタイミングの一つです。 売上や利用者数が伸び悩んでいる、広告を打っても数字が頭打ちになっているといった際にも導入のタイミングであると言えるでしょう。新機能を追加したいけれど、ユーザーニーズがいまいち掴みきれていない場合もUX調査が必要とされます。追加したい機能が複数あるのなら、優先順位をつけるにも有効でしょう。

3-2. IT領域の新規事業を立ち上げる場合

新規サービスの場合は、前提としてUX調査を行わないケースも多くあります。まずはサービスを出してしまってからテストをするというのが一般的な手法です。特にBtoBの場合は、テストできるユーザーがそもそもおらず、テストし辛いという点もあります。

ただ、どのサービスから行うか優先順位をつけたいといった場合や、これまでにない画期的なアイディアが欲しいなどといった場合にはUX調査が有効です。そのほか、たとえばAIや音声認識の技術といった、課題解決に必要な手法はあるもののユーザーの課題や利用シーンを捉えてられているのかわからないといったシーズベースの事業開発の場合など、もっと具体的なニーズを把握したいといった場合にも調査が発生します。

4.UX調査に必要なスケジュール

期間は最短でも1~3ヶ月は見る必要があります。 オンライン上でユーザーを選定するリモートユーザビリティテストなど、比較的簡単に調査できるサービスを利用した場合は1週間~10日程度で行うことも可能ではありますが、BtoCのサービスの場合に限られるでしょう。

ある程度規模の大きい企業様の場合は調査から実装までに上長の判断などで時間を取られる可能性が高いため、最低でもサービス実装の半年~1年ほど前からUXデザイナーが参画する必要があります。

5.質疑応答:会場からの質問

UXについて深く知りたいという視点や、UXの専門家をお迎えしたいという企業目線で様々な質問に対して、実際に飯沢さんに答えていただきました。

【質問者】最近トレンドとなっているUX関連でのバズワードやツールなどありますか?

UIデザインのツールでは最近Figmaが注目度が上がっているようですが、現状はsketchとinVisionがメインかなぁといった感じです。 inVisionが開発しているstudioも話題になりました。 デザイン思考、サービスデザイン、カスタマージャーニーあたりがよく見かけたような気がします。 個人的にはトレンドに流されるのは避けたいなぁと思います。笑

【質問者】UIデザイナーとして、案件の中で、今後やってみたいと思うのはどのような案件でしょうか? また逆に、あまり魅力を感じないなどの案件はどのようなものでしょうか?

先進的な案件、専門性を必要とするような業界の案件、大規模プロジェクトなどです。役割があると思うので特に魅力的に感じない案件というのはありません。 ただ言われた通りにやってくれればよい的な案件はあまり魅力的には感じません。

【質問者】広く一般的にデザイナーという方はポートフォリオをお持ちかと思いますが、良いポートフォリオの見分け方があればご教示お願い致します。

自分がよいポートフォリオをまとめられてないので、厳しい質問ですが、まずデザイナーには以下の種別があるかと思います。クライアント企業が作業に特化した人やクリエーターを探しているのか、課題解決を望んでいるのかでも適性が変わるかと思います。

・グラフィックデザイナー ・アートディレクター ・イラストレーター ・デジタルキャラクターデザイン ・UIデザイナー ・UXデザイナー

このようにデザイナーといっても役割に様々な特性があります。 ですので、作家型のクリエーターなのか課題解決型のデザイナーなのかでもポートフォリオを見るポイントが違うかと思います。クリエーターの場合は作品のクオリティであることは言うまでもありません。デザイナー、ディレクターの場合に共通しているのはどのような業種が専門なのか、どのような課題を解決しているのかなどがポイントになるかと思います。成果物だけではなく、その仕事に対してどのように取り組んだかという点はデザイナーが仕事にどうやって向き合っているのか把握するのにはよいのではないかと思います。

【質問者】UIデザインの参考サイト等あればご教示頂けたら幸いです。

自分の場合はその時の案件に合わせて気がついたらキャプチャとかをとっておくようにしています。UIの参考になるものがまとまっているサイトって難しいです。

UIのビジュアルデザイン(表層)の参考になってしまうかもしれませんが、 UI Movement https://uimovement.com/

dribbble https://dribbble.com/ などです。

【質問】飯沢さんが個人的に使ったサービスでUI/UX両方の視点で良かった物はサービスはありますか? また、そのサービスのどの部分に着目すれば良いですか?

普段使っていて、いいなと思うものは、以下のサービスです。

・Todoist  様々な環境からタスク管理できてとにかくシンプルです。 ・Eight   名刺管理がとても楽です。 ・Pocket  後で読むをひたすらブックマークできるツールで、ブックマークを汚さないで済みます。 ・Pintalest  インテリアとか探すのに使っています。 ・TikTok 従来のUIではなかなか考えにくいけど、操作感良いです。今の若い人の感覚がなんとなくわかります。 ・GoodNotes  Applepen使うのに良いです。 ・bitbank  仮想通貨確認するのによいです。最近現物のみになって約定しやすくなったと思います。(これもUXなんだと思います) ・バンドル(VISA) クレカ持ちたくない人がネット決済するのに使えます。(たまにプリペイドだとダメなサイトあるけど) ・Youtube  やっぱり王道です。 ・NETFLIX ユーザー視点でとても良いです。

飯沢さん 本記事は、飯沢 邦之 氏に研修を行なっていただきました内容を掲載しております。 貴重なお話、有難うございました!

UXについては、社内で行うとはじめに何から整理して良いのか、なかなか難しいことがあります。 その場合は、UXのプロフェッショナルへ依頼するということをお勧めいたします。

<本記事の講師> 飯沢さん 飯沢 邦之 氏 上流から下流までを一気通貫して制作を受託するフリーランスとして活動。近年は企業のUIデザイナー、UXデザイナーとして様々なプロジェクトに従事している。
flexy経由では、UXのプロフェッショナルにお仕事のご相談をすることが出来ます。 お問い合わせ UXのみではなく、IT関連のプロフェッショナル、CTOをはじめとした技術顧問、エンジニア、AIの専門家などなど、あらゆるITのプロのご紹介が可能です。お気軽にお問い合わせください。flexyは、株式会社サーキュレーションが運営しています。


関連記事:

LINEでフリーランスの案件情報や最新Tipsを受け取る

FLEXYとはABOUT FLEXY

『FLEXY』はエンジニア・デザイナー・CTO・技術顧問を中心に
週1~5日のさまざまな案件を紹介するサービスです