Webデザインでは最近、UXが注目を集めています。UIと名前が似ているのでよく勘違いされることも多いのですが、全くの別ものです。Web制作やデザインには重要なポイントになるので、しっかりと区別をして使っていけるようになりたいものです。
本記事では、UXの基礎知識についてまとめています。UXがどういったものなのか、UIとの違いについても取り上げながら解説します。記事の後半ではUX関連のフレームワークやツールについてもまとめているので、UX実施の参考にしていただければと思います。
UXの基礎知識
はじめに、UXデザインの基礎知識について解説していきます。UIの方がイメージしやすい方が多いかと思いますので、UIの定義から復習しましょう。
UIとは？
UI（User Interface）とは、サービスや製品を使った時にユーザーが接触する部分のこと。接触と言うと何だか難しく聞こえますが、要はユーザーの目に入ったり触れたりするもののことを言っています。
スマホを例にあげていきましょう。皆さんはスマホを選ぶ時、最初にどの部分を見ますか？本体のデザインや形状、ボタンの位置などを見ますよね。あと、持ちやすさも大事です。実際に手に持って、使いやすいか確認したりするでしょう。これらは全部、UIにあたるんです。
Webサイトの場合はどうでしょうか？まずは、ページに表示されているテキストやフォント、画像、ボタン、入力フォームなどの要素がありますね。ページの全体デザインやレイアウト、配色なんかもUIです。
目に触れるものや、手に触れるもの。そのほとんどがUIなのですね。それでは、UXとはいったい何のことなのでしょうか？
UXとは？
UIは非常に多岐に渡ることがわかりましたが、UXはどうなのでしょうか？ここからはUXについて解説していきましょう。
UX（User Experience）とは、サービスや製品を使った時のユーザー体験のことです。ちょっとわかりづらいので、いくつか例をあげてみましょう。
スマホアプリを利用するシーンで考えてみましょう。スマホアプリは指で操作するので、文字やボタンが小さいと使いづらいですよね？「タップしづらくて使いづらい」や「どう操作すればいいのかわからない」とユーザーは感じたかもしれません。これがユーザーが得た体験です。
スマホアプリを例にあげましたが、Webサイトでもそれは同じです。使いやすいデザインやレイアウトであれば、ユーザーはストレスなくサイトを使ってくれるでしょう。デザインだけでなく、ページのあらゆる要素を通して、ユーザーに良い体験をしてもらえるように工夫していきます。これが、UXなのです。
UXとUIの違い
UXとUIは、言葉が似ているのでよく混同されることが多いです。ただ、ここまでの解説を読んできた方であれば、両者の違いはなんとなくおわかりいただけたのではないのでしょうか？
UXとはユーザー体験のことですが、UXを向上するためにはUIを利用する必要があるのです。読みやすいフォントを使うことがUIで、それによってページが読みやすくなるという体験（UX）が得られるということ。
まとめましょう。UIはUXを向上するための一つの方法なのです。UXの中に、UIが含まれているのです。
UI以外にもUXを改善する手段はいくつもあって、例えばサービスの質や保守サポートなどがあります。商品そのものや、サービスで得られる価値なんかもUXの一部になります。
UXのポイント
UXを実施する時に参考にして欲しいポイントを、5つご紹介します。UXに取り組む時の参考にしていただければと思います。
目標を明確にしておく
UXの改善を考える上では、ホームページの目標をハッキリとさせておくことが必要です。ゴールとなる目標が明確でなければ、どのようにUXを改善すればいいのかも定まらないでしょう。Webサイトの目的を考慮しつつ、UXに取り組む上で目指すところは何なのか、はじめに決めておくようにしてください。
ユーザーの声を聞く
UXを改善する上で、ユーザーの率直な意見を聞くことは非常に大切。ユーザーのニーズや悩みを聞くこともできますし、実際にサービスを利用してもらった時の感触を知ることもできるからです。
ユーザーの声を聞く方法としては、アンケートやインタビューなどの方法がよくとられています。本記事の後半ではその中でも、ユーザーと1対1でインタビューを行うデプスインタビューをご紹介します。
ペルソナを設定する
ペルソナとは、マーケティング全般で使われている手法のこと。理想の顧客像を表すもので、客観的なデータを基にして設定されます。ペルソナと似たものにターゲットがありますが、ペルソナはより具体的です。
ペルソナを設定することで、Webデザインやマーケティングを的確に行っていくことができるようになるでしょう。チームなど複数人で共有しておくことで、共通認識が持てるというメリットもあります。
ペルソナの設定方法を簡単にご紹介しておきましょう。ペルソナは客観的なデータを基に作るので、まずは情報を集める必要があります。主な情報源を下にリストアップしておきましょう。
- アンケート
- インタビュー
- 口コミサイト
- レビュー
- アクセス分析
- SNS（FacebookやTwitterなど）
こういった情報を参考にしながら、ペルソナとして設定する内容をまとめていきます。一般的に、ペルソナに盛り込む情報は下のようなものです。
- 名前
- 年齢
- 性別
- 居住地
- 職業
- 家族構成
- 悩み
- 口ぐせ
- よく使うサービスやガジェット、アプリ
- 一日の過ごし方
- 人生の目標やゴール
- プロフィール写真
こういった内容をリストアップしたのち、表形式にまとめたり、文章としてつなげていきます。ペルソナは無理に1人にしなくてもよく、状況によっては複数人（といっても2〜3人くらい）設定しても構いません。
シナリオを作成する
ペルソナの設定は欠かせませんが、それだけではUXの改善には結びつきません。ペルソナがどのように行動すれば、目標が達成されるのかを考える必要があるのです。これがシナリオです。
シナリオの作り方は様々ですが、一つの方法としてカスタマージャーニーマップがあります。ユーザーの行動を図示化するためのフレームワークのことで、記事の後半でその特徴や作成方法についてご紹介しています。
フレームワークを活用する
前述したように、UXは非常に幅広い考え方です。あらゆることに対処しなければいけないのですが、だからといってむやみやたらと対策を実施していくのは非効率です。そこで活用したいのが、フレームワークです。
フレームワークとは、一言で言ってしまえば枠組みのこと。フレームワークを使うことで、効率的にデザインやWeb制作を進めていくことができるようになるでしょう。UXで使われる代表的なフレームワークについては、記事の後半でまとめています。
UXデザインのフレームワーク3選
UXデザインの代表的なフレームワークを3つご紹介します。各フレームワークの特徴についても解説していますので、導入を検討している方の参考になればと思います。
デプスインタビュー
デプスインタビューとは、マーケティングで使われている定性調査の手法のことです。通常のインタビューと比較して、よりユーザーの内面に迫ったインタビューを行うことができます。対象者とインタビュアーが1対1でインタビューを行うことが一般的で、ユーザーにサービスや商品の購入理由や競合サービスとの比較などを深掘りして聞くことができる方法です。
デプスインタビューの特徴としてもう一つあげるとするならば、ユーザーさえも気付いていない欲求がわかることがあります。実は、ユーザーは自分の欲しているものや動機についてほとんど言語化できないと言われています。つまり、アンケートや通常のインタビューでは本当のユーザーの欲求はわからないのです。デプスインタビューは、こういったユーザーさえも気付いていない部分に踏み込むことを目的としている、数少ない手法なのです。
カスタマージャーニーマップ
カスタマージャーニーマップとは、サービスや製品を通したユーザー行動をまとめたものです。商品の購入などのゴールに向けて、ユーザーとサービスとの接点（タッチポイント）を洗い出したり、サービスの改善点を見つけることに役立ちます。
例を一つあげましょう。下の例は、海外旅行を計画しているユーザーがAirbnbを使う時のカスタマージャーニーマップです。イラストやグラフなどを使って、ユーザーの行動が視覚的にまとめられている様子がわかります。
引用元： http://web-tan.forum.impressrd.jp/e/2013/11/14/16305
UXの改善には、シナリオを利用するケースが多いとも述べました。カスタマージャーニーマップはこの点でも役に立ちます。カスタマージャーニーマップを作成することで、購買に至るまでの各ステージ（認知、興味関心、比較検討、購入など）で使うべきチャネルや施策が明確になるのです。
カスタマージャーニーマップの作り方についても、簡単にご紹介しておきましょう。はじめにすることは、ペルソナを設定することです。カスタマージャーニーマップはペルソナごとに作成するので、まずはペルソナがないとはじまらないのです。ペルソナの設定方法については、前述しているのでここでは省きます。
次に、ペルソナがとる行動を仮説にしていきます。サービスを使っていく中で、ユーザーは具体的にどんな行動を取っていくのか。仮説を立てて、その行動を固めていきます。
ここまで来て、やっとマップに落とし込んでいくステップに入っていきます。カスタマージャーニーマップで使う項目を洗い出します。項目とは、カスタマージャーニーマップの分析で使う切り口のことで、マップの縦軸や横軸に記入していくものです。下にリストアップした項目を使うことが一般的です。
| ペルソナ | 理想の顧客像のこと。1つのマップに1つのペルソナを書きます。マップの欄外に書いてあるケースも多いです。 |
|---|---|
| フェーズ | ユーザーが購入にいたるまでの流れを、いくつかのステップに分けたものです。「認知」「興味、関心」「比較、検討」「購入」の4つに分けることが多いのですが、サービスや製品によって柔軟に変えてもOKです。マップでは、フェーズを横軸にあてることが多いです。 |
| チャネル、タッチポイント | ユーザーとサービスとの接点のことです。ユーザーが使うデバイス（PC、スマホ）や場所（店舗など）を、イラストなどを使って視覚的に書いていきます。 |
| 行動 | ユーザーがとった行動です。チャネルやタッチポイントと併せて、図示化することが多いです。 |
| 感情、思考 | それぞれのフェーズや行動で、ユーザーがどんな感情を抱いたのか。どんな考えを持ったたのかを書いていきます。 |
| 課題、問題点 | ユーザーがネガティブに受け取ったことや、サービスの改善点をまとめます。 |
サービス・ブループリント
3つ目に取り上げるのは、サービス・ブループリントです。その名の通り、サービスの青写真（ブループリント）をブラッシュアップするためのフレームワークのこと。カスタマージャーニーマップのように、サービスを視覚的に表現していることが特徴です。下の例は、クリニックのプロセスをまとめたサービス・ブループリントです。
引用元： http://www.servicedesigntools.org/ja/tools/161
カスタマージャーニーマップはペルソナ中心にまとめられた手法でしたが、こちらはサービスに関係するシステムや関係者もまとめて図示化します。ユーザーについてはもちろんですが、タッチポイントやその裏側（システムやサービスの運営者など）も含む、ということです。
サービス・ブループリントは、サービスの設計図ともなるツールです。ペルソナやその行動をまとめたカスタマージャーニーマップでは、どうしたらUXを高めていけるかのヒントが得られたかと思います。それをサービス・ブループリントに載せていき、UXの改善につなげていくのです。
UXデザインに使えるツール4選
最後に、UXデザインに使えるツールを4つご紹介します。
Adobe Experience Design CC（Adobe XD）
» Webサイトとアプリのプロトタイプおよび無償のワイヤーフレーム作成ツール | Adobe Experience Design CC
PhotoshopやIllustratorなどの製品でも有名な、Adobe社が提供しているUXデザインツールです。記事執筆時点ではプレビュー版で、Mac版のみ提供されています。
Adobe XDで出来るのは、Webサイトやモバイルアプリのデザインやプロトタイプ作成です。リピートグリッドなどの機能が備わっていて、効率的にデザインができることが特徴です。
Sketch
» Sketch – Professional Digital Design for Mac
Photoshopと並んで、デザインツールとして人気のSketch。UXデザインも得意としていて、Webサイトやスマホアプリにも対応しています。コンポーネントも豊富。トライアル版も用意されているので、操作感や使い勝手も事前に確認することができます。
Prott
» Prott – Prototyping tool for Web iOS Android apps
Prottは、プロトタイプやワイヤーフレームを作るためのサービスとして最も勢いのあるサービスの一つです。手書きのスケッチを読み込むことも可能で、素早く簡単にデザインを作っていくことができます。ドラッグアンドドロップなどの操作で、直感的に使えることも人気の理由になっています。
1つのプロジェクトであれば、無料のFreeプランで利用することが可能です。作成できるプロジェクト数やユーザー数によって、全部で5つのプランがラインナップされています。
Flinto
» Flinto for Mac – The prototyping tool designers have been waiting for.
FlintoはProttのようなプロトタイピングツールなのですが、アニメーションに強いことが特徴です。MacのKeynoteのように、キューブのような遷移を簡単に実装することができます。タップやスワイプ、スクロールなどのジェスチャーにも対応しています。なお、FlintoはMac専用のツールです。
あとがき
UXデザインの基礎知識についてまとめました。記事内で述べたように、UXに取り組むとなるとさまざまなことを考えなければいけなくなります。ご紹介したフレームワークやツールを活用して、効率的にUXデザインを改善していっていただければと思います。