ここ数年でUXデザインという言葉をよく耳にするようになりました。僕自身はこれまで企業のWebサイトやサービスを運用する仕事を中心にやってきたので、言葉の意味を調べると、それが何を指しているのものかは掴めるのですが、同時に、言葉だけで聞くと難しいという印象を受けるので、UXデザインの全体的な流れと、UXデザイナーが何を考えているのか？を共有したいと思います。
僕はそもそも、UXデザインという名称を知ったのが6,7年前の事で、周りもこの名称に対しての認知が無く、僕が自己紹介する場合「Webデザイナーです」「Web担当者として仕事しています」と自己紹介してきました。
しかしその場合、やっている仕事の範囲が広すぎるということや、Web担当者にしては仕事の範疇を超えている。という意見を頂く事が多く、今思えば、この名称が自分のやっていた仕事にマッチしていたなという印象です。
目次
- UXデザインのフロー
- ワイヤーフレーム、プロトタイプ作成で考える事
- UI（ユーザーインターフェース）の設計で知っておくユーザーの心理
- ユーザー体験とストレスの関係
- ユーザー体験を活かすUI
- 顧客調査・市場調査とペルソナ
- ユーザーの感情変化を捉えるカスタマージャーニーマップ
- 最後に
UXデザインのフロー
UXデザインのフローは下記のようになります。これは僕がこれまでやってきたやり方であり、不足点や不要点があるかもしれません。ですので、一例として捉えていただけると恐縮です。
- リリースしようとしているサービスの市場調査
- ユーザーを仮説立てるペルソナの作成
- ペルソナの感情変化を捉えるためのカスタマージャーニーマップ作成
- カスタマージャーニーマップを元にワイヤーフレームの作成
- クライアント（僕の場合は社内で）とのディスカッション
- プロトタイプの作成(UIのすり合わせ)
- デザインの作成
- プロトタイプの作成(前述のプロトタイプにデザインを取り込んだもの)
- クライアント（社内）とのディスカッション
- ワイヤーデザイン及びの修正
- プロトタイプの修正
- 製品版の作成
- プレリリース
- ユーザー調査
- ペルソナの作成・ユーザーテスト
- リリース
- 運用開始
- アナリティクスによる数字からのペルソナ作成
- 運用側、エンドユーザーからの課題調査
- あがった課題から、パーツ単位でのリニューアル
- 検索ワードを利用してもらえてるかの調査（クライアントの要望とエンドユーザーのニーズの誤差確認のため）
サービスリリースの際に行うのはこれぐらいです。
工程としては調査することが多く、制作会社であればディレクターが担う部分も多いと思います。
デザインやコーディング、フロント、バックエンドのプログラムを書くことも多いですが、UXデザイナーの仕事と考えると、一般的にはフロントの動作部分デザインまでという人も多いのではないでしょうか？
仕事の内容をフローとして書くと
- 市場調査
- ペルソナ、カスタマージャーニーマップの作成
- ワイヤーの作成
- デザインの作成
- プロトタイプの作成
- 製品版の作成
- リリース
- 運用
です。デザインの作成とプロトタイプの作成を分けていますが、同フェーズの場合もあれば、順番が逆の場合もあります。
ペルソナやカスタマージャーニーマップを元に、ワイヤー、デザイン、プロトタイプを検証し、PDCAで回して先のフェーズへ進めます。
PDCA
PDCAサイクル（PDCA cycle、plan-do-check-act cycle）は、事業活動における生産管理や品質管理などの管理業務を円滑に進める手法の一つ。Plan（計画）→ Do（実行）→ Check（評価）→ Act（改善）の 4 段階を繰り返すことによって、業務を継続的に改善する。
そして、製品をリリースすれば運用フェーズとなり、実際の運用の中でPDCAを回してくのが実務となります。
UXデザインのフローは以上となります。UXデザイナーが行う仕事の肝はおそらくペルソナ、カスタマージャーニーマップの作成と、ワイヤー、プロトタイプの作成の部分だと思うのですが、もっとも重要なのはUXを考える部分になるので、そのあたりを掘り下げていきたいと思います。
ワイヤーフレーム、プロトタイプ作成で考える事
ワイヤーやプロトタイプを作成するのは
- エンドユーザーが使いやすいと感じるのはどういうものか？
- クライアントが見せたい情報はどこにあるのか？
- 市場ではどういったデザインが採用されているのか？
これらの要因をまずまとめ、そのサービスの在り方を決めるためです。
その上で、クライアントとの認識のズレが無いか？のすり合わせを行い、デザインのフェーズへと移行することが目的で、それを実現するためであれば、ワイヤーやプロトタイプはそのプロジェクトごとに異なります。
ワイヤーフレームの作成について
ワイヤーフレームの作成では、要素をどこにどう置くか？が要点として捉えられるよう、なるべくシンプルに作成しておいて分かりやすいようにします。
そうでなければ、ワイヤーの時点で余白やフォントサイズ、色味などに意識をとられてしまい。本来決めるべき部分と異なる部分で議論が始まってしまうからです。
それを避け、ユーザーがサービスを閲覧した時どう捉えられるか？の部分に着目して話し合えるようにします。
プロトタイプの作成について
プロトタイプの作成では、UIがどういう動きをするか？をクライアント（社内）とすり合わせる為に使います。
ワイヤーで要素の確認をとり、プロトタイプでUIの動きやフォントサイズ、色味や余白などを確認しながら話し合い、決定すればデザインのフェーズへ移行するといった流れになります。
ここで決まらなければ、プロトタイプ→ワイヤーフレームへとフェーズを戻し、決定が出るまで繰り返します。
この時の決定は
・ユーザーにどれだけストレスを与えないか？
・クライアントの伝えたいものはしっかり伝えられるか
が課題であり、これらを考えるために市場調査や顧客調査、ペルソナ・カスタマージャーニーマップの作成をこのフェーズで行います。
プロトタイプの作成時、僕が社内運用の仕事をやっていた頃は、絵コンテで説明したり、コードを書いて実際の動きを確認してもらったりしていました。コードを書くと時間がよりかかってしまうのですが、
最近ではProttのように、サイトの遷移のプロトタイプが比較的簡単に作れるサービスが登場し、非常に便利になりました。
UI（ユーザーインターフェース）の設計で知っておくユーザーの心理
新しいサービスを開発したり、UIをデザインする際に考えるのは、それに触れるユーザーが使いやすいか？であり、その為に設計やワイヤーフレームでのやり取りをしっかり行います。
そもそも、その使いやすいUIとは何でしょうか？
皆さんもこんな経験がありませんか？
- WindowsからMac、もしくはその逆にしたら、アプリケーションのをどこから起動するのかわからなくて困った。
- 新しいグラフィックツール、開発ツールが気になるので触ってみたが、どこをどうすれば何が出来るのかわからない。
- 今まで使っていたアプリケーションのバージョンがあがり、今までそこにあったはずのメニューが無くなってしまって、どこから探せば良いのかわからなくなった。
これらはこれまで自分が使ってきたもので脳内に培った情報が、新しいものでは通用しない為に起こる弊害で、非常に大きなストレスですよね。
しかしこの時、使うことを諦めた人は少ないのではないでしょうか？（使い続けた上で、合わないとして使うのを辞めるケースは省きます。）
これらの場合、使う物自体が変わったとしても、過去に利用したものに似たものであれば、例え一瞬わからなくても、自分の勘で探し当てたり、検索やマニュアルを読んで調べることで問題を解決できたと思います。
この解決に至るためのプロセスは下記となります。
- 脳が過去の経験から問題を解決できると予測されるものを呼びだす。
- それを利用し、検証する
- 解決しない場合、最初に戻る。
人間の脳は、これを瞬間的に繰り返し、使えるか、使えないかの判断を下します。
先程の例でいえば、下記の行動が例となります。
- スタートメニューがどこにあるか？ Windowsなら左下、Macになると左下にない。→他の画面隅にあるのではないか？→結果どうなったか
- グラフィックツール、開発ツール自体は変わったが、メニューはどこにあるのか？→上部にある？→結果どうなったか
- メニューが無くなってしまったが、自分が見たい項目は存在するのではないか？→検索を使ってみる→どうなったか
これらの行動はUXよって引き起こされる行動で、全ては脳内にインプットされている情報が鍵を握っています。
UX
ユーザーエクスペリエンスとは 製品、システム、サービスを使用した、および／または、使用を予期したことに起因する人の知覚（認知）や反応
パソコンに関する例は、どれも仕事のような「それに触る必要がある前提の物」ばかりです。このケースであれば、利用者にとって必要不可欠なものが題材になっているため、興味が薄い者に比べ、長時間うけるストレスでも我慢して問題解決まで動作を繰り返すことができます。
しかし、触る人にとって興味が薄くなるサービス等の場合、下記のような問題が出てきます。
- 過去のユーザー体験から情報を引き起こすのが容易ではない
- 興味関心が低ければ低いほど、ユーザーは少しのストレスで離脱してしまう。
人間は一定のストレスを感じるとその場から逃げようとします。
本能的にストレス＝危険なものと知っているからですね。
サービスに触れることがどう危険か？というと、人は生きている中で非常に沢山の事柄を体験して成長し、生きています。
しかし、興味の薄いものにまで時間をとられていると、自分が本当に必要な事をする時間を失ってしまうので、本能的にそこから逃げようとします。
その為、UIをデザインする場合、ユーザーがまずそのサービスについて知らないということを常に意識し、知らないということはどういうことか？知っておく必要があります。
ユーザー体験とストレスの関係
人間は例え初見のものであっても、脳内から過去の情報を取り出し、どうすればよいのか？を予測して、検証します。
しかし、密な関連性を持った物が存在しない場合は、予測しようにもその範囲が広くなり、検証すること自体が困難になってきます。
思い出してみてください。
あなたが初めてパソコンを触った時、容易に使うことができたでしょうか？
おそらく、多くの人がノーであるものの、結果については差があったと思います。
- 何をどうするのかさっぱりわからないまますぐ触らなくなった
- アイコンを開いてデータを見ることができた
- とりあえずインターネットはできた
これらの差は、パソコンに触れるという状況に至るまでに体験してきた事や、環境などで大きく変わります。
「勘が働く」という言い方がありますが、これは、それに触れるまでに蓄積してきた情報が、目の前の問題を解決するのに必要な情報に近いものを、どれだけ持っているかが関係し、より近いものを持っている人ほど、勘が働くということになります。
そして、勘が働きやすい人ほどストレスを感じづらく、勘が働きにくい人ほど、使いづらい・わかりづらいといったストレスを感じやすくなります。
さらに、自分にとって興味の薄いものに対しては、ストレスに対する耐性が低くなりますので、勘が働きづらく、且つ、興味の薄いものは離脱率がどうしても高くなります。
利用する上での離脱率上昇を抑えるには
- そのサービスのユーザーがどういうターゲットになるのかを掘り下げる
- そのユーザーが過去に体験したであろう予測を立てる
- その予測で想定されるレイアウトを採用する
- 勘が働くようにする
などを意識し、なるべくユーザーがストレスを感じないようにすることが重要で、ユーザー体験とストレスの関連性は密にあるといえます。
ユーザー体験を活かすUI
UIとはユーザーインター・フェースの事で、サービスとユーザーとが情報をやり取りするためのインターフェースです。
パソコンであれば、ディスプレイ、マウス、キーボード、タッチパネル、タブレット、マイク、スピーカーなどがそれにあたります。
UXは触って感じ取る知見と定義されていますが、UIは実際に触れるための部分であり、サービスとユーザーとの架け橋のようなものです。
Webサイトは非常に多く存在し、そのデザインは様々な形がありますが、UIの部分はパターン化されているものが多いです。
これはデザインをする際に、ユーザーが迷わず使えるようにという配慮から、多くのデザイナーがデザインパターンを利用することを選択しているからです。
ユーザーが迷わない為には、すでに体験している記憶を呼び起こさせれば良いわけですから、パターンを活用することは非常に理にかなうアイデアです。
もし、キーボードやマウスが全く違う形、ボタン配置になると使うときにためらいが出るはずです。
そうならないよう、ユーザーが持っている過去からの知識をなるべく利用することが、ユーザー体験を活かすUIといえます。
顧客調査・市場調査とペルソナ
UXはそれを採用するサービスの市場調査を行い、ユーザーとなりうるペルソナを想定します。ペルソナとは、ユーザがどのような心理をもち、どういった行動をもつか？サービスに対してどのような期待値を持つか？などを仮説立て、問題点・改善点を見出して改善するためのものです。
ペルソナを立てるには、他者にサービスを使ってもらう想定を立ててインタビューを行ったり、実際に触ってもらってフィードバックを得たりする方法や、そのサービスに関するデータを元に立てる方法など、立て方は様々です。
5/28にIA/UXプラクティス モバイル情報アーキテクチャとUXデザイン
の発刊イベントが 日本ディレクション協会 主催でとり行われ、そこで著者である坂本 貴史さん(@bookslope)も同様の事をおっしゃっていました。
僕はもともと坂本さんのファンで、実際に参加しお話を聞いたり、ワークショップで隣の人にインタビューをしてペルソナを実際にたてたりしました。
僕は前職まで、企業のWebサイト運用を仕事にしてきていたので、非常に馴染み深く興味の強いセッションだったのですが、フリーランスで制作の仕事をメインにしてる今、ペルソナを立てるケースが現状だとあまり無い為、久しぶりに普段と違う脳みそを使ったので非常に楽しかったです。
質疑応答の時間で、リニューアルを依頼される場合もペルソナを立てなおしたりしますか？という質問をさせていただいたのですが、坂本さんは「リニューアルやその企業に数字がある場合は、それらを活用してペルソナを立てるのはごくごく普通に行います。」という答えをくださいました。
僕がこれを聞きたかったのは、これまでの仕事でペルソナを立てる、立て直すことは普通にしてきていたのですが、それが他の人もやっていることなのか？
数字を活用することもペルソナを立てると言っていいのかが疑問を持っていました。
しかし今回、このように解答を頂くことでそれを解決できたのは素直に嬉しかったです。
坂本さんは以前の著書である IAシンキング Web制作者・担当者のためのIA思考術
それとサインを頂いて一緒に写真をとってくださったことは何より嬉しかったです。ありがとうございました！
あ、脱線しました、続けます。
UXを考える時、人とサービスの交わりをとにかく考えます。その為、顧客の調査や市場の調査は欠かせないものであり、そこを考えていかなければ、UXは成立しません。
UXをデザインするという事は、そのサービスや企業の在り方をしっかりと認識し、何が課題となるのか？を見つけてそれを改善することが重要なポジションとなります。
ユーザーの感情変化を捉えるカスタマージャーニーマップ
前項にて顧客及び市場調査を行いペルソナを立てました。ペルソナでは様々な課題を見つけることができ、それを解消するにはどうすればよいか？を知ることができます。
しかしペルソナだけではユーザーの感情、改善点が端的に見えてしまうので、感情の移行までが見えません。
ユーザーがサービスを利用する場合、端的ではなく行動として流動的に感情が変化するので、そこを捉える為にはペルソナを用いたカスタマージャーニーマップの作成が有効です。
カスタマージャーニーマップとは、ユーザーの行動フローを時系列にしたマップのことで、商品の購入でいえば、サイトへのアクセス→画面の遷移→商品情報の閲覧→レビューの調査→商品の注文→顧客情報の入力→メールの受信→商品到着といった一連の動作を指します。
このマップがあれば、ユーザーがいつ感情に変化が現れ、その感情が正の感情なのか、負の感情なのか？ 何をすればより良いサービスを提供できるのかが見えてきます。
>
カスタマージャーニーマップは数字だけでは追えない、ユーザの思考や感情を時系列に捉えることができるので、改善すべき点をよりイメージしやすくなるのがメリットです。
最後に
冒頭でお伝えしたとおり、UXという言葉やUXデザインという言葉をよく耳にします。
しかしこの言葉が出る以前から、サービスを考える時、多くの人がそれを意識せず、自然と行ってきたことが殆どだと思います。
ペルソナをたてることも、実際に立てては居なくてもユーザーのことは想定してきたでしょうし、カスタマージャーニーマップについても、ユーザーの感情変化も、そのサービスをより良くするためにを考えていけば自然と意識する部分だと思います。
今Web制作者の中でUXの事が話題になるのは、近年スマートフォンの登場とそれの普及によって、過去のやり方だけでは太刀打ち出来ない課題が多く出てきたことに有ります。
広く認知されたフローやプロセスなどは、それをわざわざ置き換えることに時間を費やすことは少ないですが、自身の経験だけで対処できない事が出てきた時、誰しもそこに時間を費やし、努力します。
おそらくそれがここ数年間のWeb業界全体における流れではないでしょうか？
今回の記事は非常にボリュームが多いものになりましたが、UXデザインで考えることは非常に多く、今回紹介しただけでは到底収まりきりません。
今後必要なものを少しづつ紹介していきますので、これからも当ブログをよろしくお願いいたします。
本記事でお伝えしたツールや、UXの参考に。
- UX Archive
- カスタマージャーニーマップを正しく活用するには「おもてなし」と「カスタマーエクスペリエンス」の理解から
- UXデザイナーって何するの？:Webクリエイターボックス
- 誰でもできるペルソナの作り方〜マーケティングの現場で活用できる良質なペルソナを作る手順:KAIROS
- カスタマージャーニーを理解・活用する 3スライド＋5サイトまとめ:LISKUL
- Prott
- UX Recipe カード化して、ジャーニーマップの一要素として扱える
お役に立てたらお願いします🙇
Comments