はじめまして。CyberSS所属の水野 寛と申します。普段はディレクター/HCD専門家として、Webサイトの分析や改善を担当しています。
Webサイトやアプリ制作の現場では、UXを向上させるにはどうすればよいか、試行錯誤が求められます。しかし、そのUXについて、いまいち捉え方がわからないと感じられている方が多いのではないでしょうか。
そこで今回は、ズバリ「UXとは何か」について、ご説明させていただきます。さらに、今すぐ制作に活かせる考え方として「UXをデザインするためのポイント」「UXを検証するための視点」について、事例を交えてご紹介いたします。
国際規格であるISOには、UXが次のように定義されています。
ちょっとわかりづらい表現ですよね。言い換えると、UX(ユーザーエクスペリエンス)とは、ユーザーがサービスの利用を通して感じる気持ちの動きです。
※以降、本文中の「サービス」はWebサービスに限定して説明を進めることにします。
■UXは目的でUIは手段
よく制作の現場では、言葉の表現として「UX/UI」のように、UI(ユーザーインターフェース）と一緒に用いられることがありますが、この２つは本質的に意味が異なります。
・サービスを通してユーザーに良いUXを提供する(目的)ために、
・どのようなUIにするか(手段)を考える
このように、作り手から見た場合のUXとUIは、「目的」と「手段」の関係です。
例えば写真投稿SNSのInstagramを例にすると、次のように説明ができます。
・UX＝日常の瞬間を印象的に残して、友達同士で共有できる体験
・UI＝撮った写真に味わいのあるフィルタをかけて、簡単にシェアできる写真投稿画面
サービスを通してユーザーにどんな体験をしてもらいたいかを描き出す。そして、描き出した体験(UX)を届けるために、UIを含めてどうやってサービスを提供すればよいかを設計する。この一連の作業をUXデザインといいます。
描き出された体験の全体像は、制作の道標として、プロジェクトの様々な局面で機能します。
例えば、一緒に手を動かすチームの間でも、ユーザーについての共通認識をもてる。その結果、自分たち本位でUIを考えてまったり、UIの方向性が迷走する、といった事態を防ぐことができます。
■UXに影響を与える3つの要素
提供するUXを明確にするには、UXをとりまく周辺の要素を把握しておくことが重要です。その要素とは、ユーザー・UI・コンテキストの3つです。
まず、ユーザーとUIの関係をみていきます。
ユーザーは何らかの「目的」をもってサービスを使いはじめます。例えば、1pixelブログを見に来るユーザーは「制作業務に活かせるノウハウを継続的にチェックする」といったの目的をもっています。
サービスの利用は、PCサイト等のUIを介して行います。そのやりとりの結果として、良いUX(達成感や充足感)を感じるわけです。
一方で、UIとユーザの間には、コンテキスト（文脈）が介在します。コンテキストは、一連の行動に制約を与える外部要因。具体的には、ユーザがいる場所、時間帯、心理状況があります。1pixelブログを例にすると「会社のオフィスでの昼休み中に見ているけれど、あまり十分な時間がとれない」といった状況がコンテキストです。
UXデザインは、ユーザー・UI・コンテキストの3つの要素をはっきりさせることから始めます。これらの要素をヌケモレなく検討するには、「5W1H」の枠組みで考えると効果的です。先ほどの図にプロットすると、次のようになります。
今回は、社内のUX勉強会で「音楽SNSアプリ」のモックアップを制作した事例を通して、「5W1H」でUXの要件を整理する流れをご紹介したいと思います。
※ 制作したアプリは勉強会用の成果物なので、サービスリリースはしていません。
■ユーザーを定義する(Who/Why/What)
まずは、誰が、どんな理由で、何をしようとしているか、はっきりさせます。
今回は、社内インタビューによる現状把握を行いました。そこから分析できた洞察にもとづいて、ターゲットとなるユーザー像をまとめています。
Who（ユーザーの属性）
インタビュー結果からユーザーのニーズを分析
勉強会では、ユーザの目的とゴールを描けたタイミングで、実際に提供するサービスの大枠をブレストしました。
いろいろ出てきたアイデアの中から、「自分の生活のシーンや気分にぴったりの曲を、気軽に見つけられる音楽SNS」という構想を考えてみました。特徴は次の2つです。
・気に入った曲を投稿する：ミュージックアプリを聴いているときに自分の感情が動いたら、その曲の内容と、その時の気分を添えて投稿することができる
・気分にピッタリの曲を探せる：他の人が投稿した曲のなかから、今の気分にあった新しい曲を探せる
■コンテキストを想定する(When/Where)
次は、ユーザーとサービスの接点（タッチポイント）を特定し、具体的なサービスの利用場面をイメージします。利用場面は複数あるのが普通ですが、すべてを網羅的に洗い出すのではなく、ユーザとの接触頻度の高い主要な場面に絞り込むようにします。
今回はその中の一場面を例としてあげてみます。
When（時間）
■アクティビティからUIを考える(How)
ユーザーとコンテキストが特定できたら、サービスを使ってどんなアクティビティ（行動）をとるか、を考えます。アクティビティにそってユーザーが満足するはずの手順をイメージすることで、自ずと必要な機能やコンテンツがみえてきます。次ののように、シナリオの形式でまとめると、具体的なシーンが想起されやすくなります。
How（アクティビティ）
アクティビティシナリオ(上)と対応するUIスケッチ(下)
各場面ごとに、ユーザーがどのような行動をとるか、できるだけ詳細に描くことがポイント。簡単なイラストがあると、さらにイメージが想起されて、アイデアが出やすくなります。
行動のステップはユーザーのタスクに分割します。このタスクに基づいて必要な画面上の要素を考えます。これによって、コンテキストに沿ったUIを検討することができます。
以上の手順を踏むことで、作ろうとするサービスが提供するUXを明確にしながら、要件を詰めていくことができます。
実際に制作に入ったら、ユーザーが求めるUXを提供できているか、制作の要所でチェックしましょう。
UXには、時間軸に応じた3つの段階があり、それぞれの段階で満たすべき要件が違ってきます。順番に見ていきます。
① 一時的・瞬間的UX
UIを操作する際に直接的に感じる時の印象が、「一時的・瞬間的UX」です。例えば、1画面の中でのわかりやすさや、デザインの良さ、気持ちいいと感じられる操作感といった、表現やインタラクションに関わる反応。サービス完成前でも、UIのスケッチ、ビジュアルデザイン、実装前のモックアップの段階でそれぞれ検証できます。
完成した音楽SNSのデザイン
しかし、この観点だけを追求してしまい、コンテキストを考慮することを忘れてしまうことがあります。例えば、見た目はキレイだけど必要な機能がみあたらない、といった問題が出てしまいます。これを防ぐために、次のエピソード的UXを意識します。
② エピソード的UX
あるコンテキストに置かれたユーザーが、サービスの一連のアクティビティを通して感じる印象が「エピソード的UX」。アクティビティをエピソードとして捉え、ユーザーがサービス側の想定通りに行動し、満足感を得られるかをチェックします。
この段階のUXを検証するには、5W1Hで作成したシナリオに沿って、試しに、ユーザーになりきってサービスを利用してみると効果的です。「一時的・瞬間的なUX」の観点では気づかなかった、思わぬ問題点を見つけることがあります。
アクティビティシナリオを用いて一連の体験を検証する
③ 意味的・累積的UX
サービスは、ユーザーに繰り返し利用してもらわないと、ヒットサービスに成長しません。そのために、「また使いたい！」という利用後の必要性を感じてもらわなければいけません。
一方で、サービスを初めて知った時に、「使ってみたいかも」と利用前の期待感をもってもらえなければ、そもそも利用すらしてもらえません。
このような、サービスを使う必要性や、事前の期待感は、ユーザーにとってのサービスを使う意味とも言い換えることができます。これが「意味的・累積的UX」です。この段階のUXは、２つの視点でチェックします。
・サービスのキャッチコピーに魅力があるか
・キャッチコピーの内容がサービス全体に適用されているか
キャッチコピーは、サービスの提供価値をあらわしたものです。作るサービスのキャッチコピーには、競合サービスには無い差別化ポイントや、魅力を感じられる特徴がちゃんと落とし込まれているでしょうか。そして、ユーザーの気持ちでサービスを利用してみた場合、キャッチコピー通りの実感が得られるかを確認しましょう。
音楽SNSのキャッチコピー例
良いサービスを生み出すには、ユーザーについての十分な理解が欠かせません。そうは思っていても、いつのまにか、作り手本位で要件を考えてしまうものです。もちろん、作り手の発想や思いを中心に考えていくことは重要ですが、サービスの価値は最終的にユーザが判断をします。
UXデザインを制作フローに組み込むことにより、制作側の視点をユーザへの「共感」に向けさせてくれます。制作の道標を見失ってしまった際は、ぜひ5W1HをつかってUXの要件を整理してみてください。
最後までお読みいただいて、ありがとうございました。
Webサイトやアプリ制作の現場では、UXを向上させるにはどうすればよいか、試行錯誤が求められます。しかし、そのUXについて、いまいち捉え方がわからないと感じられている方が多いのではないでしょうか。
そこで今回は、ズバリ「UXとは何か」について、ご説明させていただきます。さらに、今すぐ制作に活かせる考え方として「UXをデザインするためのポイント」「UXを検証するための視点」について、事例を交えてご紹介いたします。
1.UXとは何か
国際規格であるISOには、UXが次のように定義されています。
製品やシステム、サービスの利用、および／もしくは予想された使い方によってもたらされる人々の知覚と反応。 (ISO 9241-210)
ちょっとわかりづらい表現ですよね。言い換えると、UX(ユーザーエクスペリエンス)とは、ユーザーがサービスの利用を通して感じる気持ちの動きです。
※以降、本文中の「サービス」はWebサービスに限定して説明を進めることにします。
■UXは目的でUIは手段
よく制作の現場では、言葉の表現として「UX/UI」のように、UI(ユーザーインターフェース）と一緒に用いられることがありますが、この２つは本質的に意味が異なります。
・サービスを通してユーザーに良いUXを提供する(目的)ために、
・どのようなUIにするか(手段)を考える
このように、作り手から見た場合のUXとUIは、「目的」と「手段」の関係です。
例えば写真投稿SNSのInstagramを例にすると、次のように説明ができます。
・UX＝日常の瞬間を印象的に残して、友達同士で共有できる体験
・UI＝撮った写真に味わいのあるフィルタをかけて、簡単にシェアできる写真投稿画面
サービスを通してユーザーにどんな体験をしてもらいたいかを描き出す。そして、描き出した体験(UX)を届けるために、UIを含めてどうやってサービスを提供すればよいかを設計する。この一連の作業をUXデザインといいます。
描き出された体験の全体像は、制作の道標として、プロジェクトの様々な局面で機能します。
例えば、一緒に手を動かすチームの間でも、ユーザーについての共通認識をもてる。その結果、自分たち本位でUIを考えてまったり、UIの方向性が迷走する、といった事態を防ぐことができます。
■UXに影響を与える3つの要素
提供するUXを明確にするには、UXをとりまく周辺の要素を把握しておくことが重要です。その要素とは、ユーザー・UI・コンテキストの3つです。
まず、ユーザーとUIの関係をみていきます。
ユーザーは何らかの「目的」をもってサービスを使いはじめます。例えば、1pixelブログを見に来るユーザーは「制作業務に活かせるノウハウを継続的にチェックする」といったの目的をもっています。
サービスの利用は、PCサイト等のUIを介して行います。そのやりとりの結果として、良いUX(達成感や充足感)を感じるわけです。
一方で、UIとユーザの間には、コンテキスト（文脈）が介在します。コンテキストは、一連の行動に制約を与える外部要因。具体的には、ユーザがいる場所、時間帯、心理状況があります。1pixelブログを例にすると「会社のオフィスでの昼休み中に見ているけれど、あまり十分な時間がとれない」といった状況がコンテキストです。
2.UXをデザインするためのポイント
UXデザインは、ユーザー・UI・コンテキストの3つの要素をはっきりさせることから始めます。これらの要素をヌケモレなく検討するには、「5W1H」の枠組みで考えると効果的です。先ほどの図にプロットすると、次のようになります。
今回は、社内のUX勉強会で「音楽SNSアプリ」のモックアップを制作した事例を通して、「5W1H」でUXの要件を整理する流れをご紹介したいと思います。
※ 制作したアプリは勉強会用の成果物なので、サービスリリースはしていません。
■ユーザーを定義する(Who/Why/What)
まずは、誰が、どんな理由で、何をしようとしているか、はっきりさせます。
今回は、社内インタビューによる現状把握を行いました。そこから分析できた洞察にもとづいて、ターゲットとなるユーザー像をまとめています。
Who（ユーザーの属性）
ライトな音楽好き、30歳前後の男性。日常的にスマホで音楽を聞いている。音楽は生活の中に自然にあるもので、感情を調整できる手段だと思う。Why（目的）
ほぼ毎日音楽を聞いているものの、昔から聞いている特定のジャンルやアーティストに限定されてしまっていて、ちょっと飽き気味。幅広くいろいろな音楽と出会いたいと思っている。そのために、時間やお金は掛けたくない。What（ゴール）
自分にぴったりの音楽を見つける。
インタビュー結果からユーザーのニーズを分析
勉強会では、ユーザの目的とゴールを描けたタイミングで、実際に提供するサービスの大枠をブレストしました。
いろいろ出てきたアイデアの中から、「自分の生活のシーンや気分にぴったりの曲を、気軽に見つけられる音楽SNS」という構想を考えてみました。特徴は次の2つです。
・気に入った曲を投稿する：ミュージックアプリを聴いているときに自分の感情が動いたら、その曲の内容と、その時の気分を添えて投稿することができる
・気分にピッタリの曲を探せる：他の人が投稿した曲のなかから、今の気分にあった新しい曲を探せる
■コンテキストを想定する(When/Where)
次は、ユーザーとサービスの接点（タッチポイント）を特定し、具体的なサービスの利用場面をイメージします。利用場面は複数あるのが普通ですが、すべてを網羅的に洗い出すのではなく、ユーザとの接触頻度の高い主要な場面に絞り込むようにします。
今回はその中の一場面を例としてあげてみます。
When（時間）
会社からの帰宅途中。Where(場所/環境)
電車の中。へこんでいたり、応援してほしいと思った時。気分をあげるために曲を探そうと思った。
■アクティビティからUIを考える(How)
ユーザーとコンテキストが特定できたら、サービスを使ってどんなアクティビティ（行動）をとるか、を考えます。アクティビティにそってユーザーが満足するはずの手順をイメージすることで、自ずと必要な機能やコンテンツがみえてきます。次ののように、シナリオの形式でまとめると、具体的なシーンが想起されやすくなります。
How（アクティビティ）
場面：帰宅中の電車の中。気分の上げる曲を見つける
シナリオ：癒し系の曲と言うよりは、自分を応援してくれるソウルフルな曲を探したい。ついでに、まだ出会ったことの無いアーティストが見つかるといいな。このサービスを使うと自分の『憂鬱な気分』と『今の時間帯』で曲をリクエストできる。リクエストすると、自分と音楽の趣味が近くて、かつ同じ状況におかれたから人から紹介されたおすすめ楽曲を、いくつか確認できた。
アクティビティシナリオ(上)と対応するUIスケッチ(下)
各場面ごとに、ユーザーがどのような行動をとるか、できるだけ詳細に描くことがポイント。簡単なイラストがあると、さらにイメージが想起されて、アイデアが出やすくなります。
行動のステップはユーザーのタスクに分割します。このタスクに基づいて必要な画面上の要素を考えます。これによって、コンテキストに沿ったUIを検討することができます。
以上の手順を踏むことで、作ろうとするサービスが提供するUXを明確にしながら、要件を詰めていくことができます。
3.UXを検証するための視点
実際に制作に入ったら、ユーザーが求めるUXを提供できているか、制作の要所でチェックしましょう。
UXには、時間軸に応じた3つの段階があり、それぞれの段階で満たすべき要件が違ってきます。順番に見ていきます。
① 一時的・瞬間的UX
UIを操作する際に直接的に感じる時の印象が、「一時的・瞬間的UX」です。例えば、1画面の中でのわかりやすさや、デザインの良さ、気持ちいいと感じられる操作感といった、表現やインタラクションに関わる反応。サービス完成前でも、UIのスケッチ、ビジュアルデザイン、実装前のモックアップの段階でそれぞれ検証できます。
完成した音楽SNSのデザイン
しかし、この観点だけを追求してしまい、コンテキストを考慮することを忘れてしまうことがあります。例えば、見た目はキレイだけど必要な機能がみあたらない、といった問題が出てしまいます。これを防ぐために、次のエピソード的UXを意識します。
② エピソード的UX
あるコンテキストに置かれたユーザーが、サービスの一連のアクティビティを通して感じる印象が「エピソード的UX」。アクティビティをエピソードとして捉え、ユーザーがサービス側の想定通りに行動し、満足感を得られるかをチェックします。
この段階のUXを検証するには、5W1Hで作成したシナリオに沿って、試しに、ユーザーになりきってサービスを利用してみると効果的です。「一時的・瞬間的なUX」の観点では気づかなかった、思わぬ問題点を見つけることがあります。
アクティビティシナリオを用いて一連の体験を検証する
③ 意味的・累積的UX
サービスは、ユーザーに繰り返し利用してもらわないと、ヒットサービスに成長しません。そのために、「また使いたい！」という利用後の必要性を感じてもらわなければいけません。
一方で、サービスを初めて知った時に、「使ってみたいかも」と利用前の期待感をもってもらえなければ、そもそも利用すらしてもらえません。
このような、サービスを使う必要性や、事前の期待感は、ユーザーにとってのサービスを使う意味とも言い換えることができます。これが「意味的・累積的UX」です。この段階のUXは、２つの視点でチェックします。
・サービスのキャッチコピーに魅力があるか
・キャッチコピーの内容がサービス全体に適用されているか
キャッチコピーは、サービスの提供価値をあらわしたものです。作るサービスのキャッチコピーには、競合サービスには無い差別化ポイントや、魅力を感じられる特徴がちゃんと落とし込まれているでしょうか。そして、ユーザーの気持ちでサービスを利用してみた場合、キャッチコピー通りの実感が得られるかを確認しましょう。
音楽SNSのキャッチコピー例
最後に
良いサービスを生み出すには、ユーザーについての十分な理解が欠かせません。そうは思っていても、いつのまにか、作り手本位で要件を考えてしまうものです。もちろん、作り手の発想や思いを中心に考えていくことは重要ですが、サービスの価値は最終的にユーザが判断をします。
UXデザインを制作フローに組み込むことにより、制作側の視点をユーザへの「共感」に向けさせてくれます。制作の道標を見失ってしまった際は、ぜひ5W1HをつかってUXの要件を整理してみてください。
最後までお読みいただいて、ありがとうございました。