おかんでもわかるuxデザイン ver.0.4

UX Design for mothers おかんでもわかるUXデザイン

～ユーザーエクスペリエンスデザインって何？～

Yu Morita Director, User Experience

Turucame ltd.

CSS Nite in SENDAI, Vol.8 2014/11/22

自己紹介 • 株式会社ツルカメ代表取締役社長

• 株式会社ネコメシ代表取締役CEO

• 株式会社KDDIウェブコミュニケーションズ

顧問

• IA/UXデザインの自称専門家、森田雄です。

• Web担当者Forumにて「UX侍」連載ちう 2014/11/22 CSS Nite in SENDAI, Vol.8 2

本日の主旨 • UXという言葉が、Webサイトやアプリ制作などの現

場でよく使われるようになりました。

• そのほか、経営や事業の戦略であるとか、組織論的なものであるとか、さまざまな場面でUXという言葉を散見します。

• でもUXがどうの言われても、ちょっとピンと来ないという人もいるのでは？

• 本講ではIA/UXデザインの非専門家の方々を対象に、「UXデザインとは何か」をご説明いたします。

2014/11/22 CSS Nite in SENDAI, Vol.8 3

最近、こんな人見かけませんか？サイトか何かにダメ出しをしているようです

2014/11/22 CSS Nite in SENDAI, Vol.8

どうもねえ、 UXがねえ、足りないんだよ

あと、こんな人とかスマホアプリの使用感を述べています

何このUX！やべー、めちゃ

ヌルヌル！

ようするに • UX言いたいだけだろ案件です。

• UXという言葉を知る以前のほうが、よく

伝わるコミュニケーションがとれていたかもしれません。

唐突ですがクイズです

ニューヨークへ行きたいかー

＼お～～～～！／

UXとは何でしょう？

・・・・・・

ちなみにUser Experienceの略です

わかりました！

ユーザの体験！

やれやれ、これだから子供は

エクスペリエンスは経験だろう！

直訳しててどうすんのよ！

使い勝手とか、使い心地のことです！

うーん、なんか聞いた話だけど

おもてなし…？

さて正解は… • 製品やサービスの利用を通じて得られる

ユーザの体験の総称で、使いやすさ・使い勝手といったユーザビリティ的な要素を備え、使い心地・感動・印象・生活の変化など経験としての累積を含む。

• おもてなしだけ、違ったかな？

的な。

ものすごく簡単にいうと • ユーザの「主観」といっていいでしょう。

• いい体験だった、いい経験をした、これ

は本人にしかわかりませんね。

• すなわちUXとは、本人の主観と、それに基づいた感想や結果のことです。

UXDとは何でしょう？

・・・・・・

ちなみにUX Designの略です

わかりました！

UXのデザイン！

やれやれ、これだから子供は

デザインとは設計だよ！

直訳しててどうすんのよ！

顧客のニーズを満たすことです！

うーん、なんか聞いた話だけど

おもてなし…？

さて正解は… • UXを設計すること。特に「良い」UXを。

• ユーザが求めていることに先回りして、

結果として喜んでもらえる体験や経験を作り出すためのデザイン手法です。

• いい接待を受ければ嬉しいものですから、おもてなしも手法が明文化されていればUXDだといえますね。

少し補足 • ここでの「デザイン」とは、見た目や雰囲気

などのことではありません。

• 商業や工業といった産業の成果物（製品やサービスそのもの）をデザインするというような、大きな意味でのデザインです。

• UXDとは、「良い」UXを量産的に作り出す仕組み、それ自体をつくることです。

UXDを成果物から読み解く

まったくあんたって子は

朝までファミコンばっかり…

ＵＸＤしてるんだよ…

母ちゃん…

ここからが真の本題です

ちょー乱暴な解説 • ペルソナ

• カスタマージャーニーマップ（CJM）

• ユーザシナリオ

• この３つをやれば、UXDです。（キリッ

まず、ペルソナ • ペルソナ（persona）とは心理学の用語で

「人間の外的側面」、哲学でいうところの「理性的本性をもつ個別的実体」のことです。

• が、そんなことはどうでもよくて、UXDでは何のことを指すかというと

• 仮想的なユーザ。実在しそうだけど非実在。いてもおかしくないので、もしかしたらいる。

ペルソナをつくる目的 • それは合意のためです。

• チームメンバーで共通の指標をつくり、

同じ目的のために思考・行動できるように、ペルソナをつくります。

ユーザは20代前半の女性ですペルソナが無いチームの場合

ユーザは20代前半の女性ですペルソナが有るチームの場合

みんなのイメージが同じになりました！

• これで、メンバー各自が異なるユーザ像を想定しちゃうってことがなくなります。

• 「“誰”のためにデザインするのか」を共有することができますね。

• もちろん、今の例では一般的なターゲットユーザの範疇を出ませんので、もう少しペルソナとは何なのかを掘り下げましょう。

簡易なペルソナの作り方 1. まず基本となるデモグラフィックを用意

します。 – 顧客データを分析済みなら、それを使う。 – なければ想定しているターゲットユーザーを

ベースにする。（リリース後に実データをとり、ペルソナをアップデートする）

2. ワークショップ形式でインサイトマップを作ります。

3. それを肴に作文して、ペルソナの完成。

ペルソナは実在ユーザの代表格 • 完全に想像だけで作ったペルソナは使い物にな

りませんし、使ってはいけません。

• ペルソナを作ってみよう的なセミナーなどで、実データに基づくデモグラフィックを使わずに作ってしまう事例を散見しますが、意味がありません。

• なお、本当に実在するユーザ自体をペルソナ化してもいけません。

実データのデモグラのままだと実務的に使いにくい

このデザインは我が社のECサービスの全顧客のうち38%を占める首都圏在住で年収600万円台かつ結婚5年以内の30代後半の賃貸住宅住まいの世帯が使用した時にスムーズに使えるのだろうか。本当に効果的な購買につながると思うかい？

このデザインだと我が社のECサービスの全顧客のうちの38%を占める首都圏在住で年収600万円台かつ結婚5年以内の30代後半の賃貸住宅住まいの世帯だと、確かにちょっと使いにくいかもしれませんねえ…。

だからペルソナを作る

このデザインは「山田くん」にとっていいものだろうか？「山田くん」は効果的な購買をするだろうか？

確かに、「山田さん」にはとっつきにくいデザインかもしれませんねえ。

デモグラフィック

インサイトマップ

See Listen

Action

Pain Gain

プラグマティックペルソナ

ユーザー種別デモグラフィック

抱えている問題点コンテクスト

次に、CJM • カスタマージャーニーマップ（CJM）とは、

カスタマー（Customer）ジャーニー（Journey）マップ（Map）のことです。

• カスタマーは「顧客」、ジャーニーは「旅」、マップは「地図…というかマッピング」。

• 具体的な顧客としてペルソナを題材に、提供する製品やサービスを利用する「旅」に出てもらい、その経緯をマッピングしたものです。

CJMをつくる目的 • それは合意のためです。

• チームメンバーで共通の指標をつくり、同じ目

的のために思考・行動できるようにつくったペルソナが、具体的にどう利用しているのか、共通の指標をつくり、同じ理解で思考・行動できるようにCJMをつくります。

ユーザが製品を必要とする時 CJMが無いチームの場合

ユーザが製品を必要とする時 CJMが有るチームの場合

みんなの理解が同じになりました！

• これで、ユーザが製品を必要としているタイミングを、メンバー各自が異なる想定しちゃうってことがなくなります。

• ユーザが製品を、どこで知り、どこで理解を深め、どこで利用し、どのような結果になるかといった「旅」の経緯を書き出して、実際にどのように製品が使われているのかの理解を共有するわけです。

あれ、どこで知り…？ • つまり、製品を使うどころか、出会う前

のところから「旅」が始まっていますね。

• 実際に「UX白書」では、UXを期間で区切って整理しています。

異なる期間で生じるUXの内在プロセス

利用前

予期的UX

体験を想像する

利用中

一時的UX

体験する

利用後

エピソード的UX

ある体験を内省する

利用期間全体

累積的UX

多種多様な利用期間を回想する

いつ

なにを

どのように

Anticipated UX Momentary UX Episodic UX Cumulative UX

よく“UI/UX”といわれるのは、一時的UXの中の、画面と向き合っている時間だけ。 UXDは、利用前・利用中・利用後、そして利用期間全体を対象としたデザインです。

（UX白書 http://site.hcdvalue.org/docs より）

UXの連続性 • UXの全体期間のほとんどは、製品やサービスを

利用して「いない」期間です。

• CJMをつくる時は、デザインチームだけでなく、他の部署からも組織全体から横断的にメンバーを集め、多様な視点で検討する必要があります。

• 利用前・利用中・利用後、また利用し、利用を終え、そしてまた利用し…この繰り返しを連続的なものと捉え、利用期間全体として「良い」UXをもたらす仕組みをつくることがUXDです。

簡易なCJMの作り方 1. まず、関係者一同、ペルソナのことをよ

く理解しておきます。 – そのうえで、プラグマティックペルソナやイ

ンサイトマップを、常に見返せる状態にしておく。

2. ワークショップ形式でカスタマーのジャーニーをマッピングしていきます。 – 分岐してもいいですが、ペルソナとして腑に

落ちる範囲での分岐まで。

カスタマージャーニーマップ

そして、ユーザシナリオ

• ユーザシナリオとは、ペルソナの理想的な「旅」です。

• 理想の旅は、ペルソナ中心ではなく、どちらかといえばサービス提供者中心のストーリーです。

ユーザシナリオをつくる目的 • それは合意のためです。

• チームメンバーで共通の指標をつくり、同じ目的のために思考・行動できるようにつくったペルソナが、具体的にどう利用しているのか、共通の指標をつくり、同じ理解で思考・行動できるようにCJMをつくりましたが、これは現実の「旅」です。理想的な「旅」とのギャップが改善すべき点なのです。チームメンバーで同じゴールを見据えて思考・行動できるようにユーザシナリオをつくります。

現実の「旅」の問題点顧客はターゲットを認識できていない

理想の「旅」では、こう顧客は確実にターゲットを捕捉している

みんなの目標が定まりました！ • CJMを検討した結果、ペルソナはターゲットをうまく見

つけられないケースがあるようで、実際にカスタマーサポート部門へ問い合わせると、顧客からのクレームが多数確認されました。

• ユーザシナリオでは、ペルソナは確実にターゲットを捉えています。ここにギャップがあることがわかったわけです。

• 背中に目印をつけることで、顧客の飛び蹴り成功率が格段に向上するだろうと結論づけられました。チームメンバーは、その実現のために、具体的なデザイン作業へと突入していくのです……！

簡易なシナリオの作り方 • 前のステップで作成したCJMと同様のフォーマットで、

理想的な旅をマッピングしてみましょう。

• もしくは、作成したCJMにさらにポストイットを重ねて貼っていくのでもOK。

CJMに書き足したバージョン

CJMとシナリオのギャップ • CJMとユーザーシナリオの間には、いろいろと

ギャップがあることがわかってきますね。

• このギャップを解決するためには、どうすべきかを考える必要があります。 – UIレベルで解決できるのか？ – コンテクストを作らないとだめなのでは？ – そもそもプロモーションができていない？ – サポート体制に問題があるのでは？

ようするにUXDとは • チームメンバー、ひいては組織全体が、提供する製品や

サービスを利用するユーザの「認識」「理解」を同一のものとし、「何のために、何をどうするのか？」を明文化するための手法です。

• この後の流れは、まあふつうにプロトタイピングしたり、ワイヤーフレームつくったり、制作作業をしたりしていきます。

• ペルソナ、CJM、シナリオをつくってから、ふつうの制作をしてみましょう。それがUXDの実践の第一歩です。

以上ここまで、すべて仮説です • しかしその仮説を、成り立ちからすべて、全関係者で共

有・合意していること自体が重要なのです。

• 製品やサービスをリリース後、実データをとって分析し、最初の仮説と比較検証しましょう。

• 実際のユーザのニーズを知り、仮説をアップデートして改善していく。この繰り返しの中で、常に中心となるのがペルソナです。ペルソナを成長させながら継続的にデザインしていくことが、UXDです。

UXDというデザイン思考 • 観察→アイディア創出→プロトタイピング→ストーリー

テリングというデザイン思考のプロセスがありますが、これだけだとユーザー視点を損ないがちです。

• 特に大きな組織であればあるほど。複数の部署にまたがった関係者がいればいるほど。

• デザイン思考に実データを掛け合わせて、プロセスの透明化と共有、KPIの設定、PDCAの継続をしていくことが、「UXD」というデザイン思考のひとつの形であるともいえるでしょう。

てか、おかん突き放しすぎ…

この人…

さっきから何の話をしてるの？

今夜の献立

どうしようかしら

UXDを学ぶのに良い文献（ごく一部）

• User Experience White Paper HCDの専門家たちによる和訳：UX白書 http://site.hcdvalue.org/docs

• 誰のためのデザイン？新曜社認知科学選書／一読してほしいデザイン思考の定番的書物。

• 理解の秘密─マジカル・インストラクション NTT出版／最高です。僕の座右の書でもあります。 • コトラー＆ケラーのマーケティング・マネジメント第12版、丸善出版／鈍器になるほどの重厚感で1万円弱。ぜひ家宝に。

ご清聴ありがとうございました

今夜はカレーよ~

やったあ～

てか家族だったのか…

このスライドはコミPo!とパワポで作成しました

Presented by Yu Morita

Director, User Experience Turucame ltd.

http://necomesi.jp/blog/securecat/

https://twitter.com/securecat https://www.facebook.com/securecat

CSS Nite in SENDAI, Vol.8

http://cssnite-sendai.info/

Made with Comipo!

http://www.comipo.com/

おかんでもわかるuxデザイン ver.0.4

Design

html5とは何か? - 芸大 webデザイン演習b

0.0 – 0.4 mm

プロジェクト・デザイン合宿研修 ·...

イルミナウェビナー実験デザイン編...

g6g gfgyg0gxg g>gugdg2g geg{gfg5g=gvh …...2019/06/02 ·...

現場活かすコミュニケーション...

Привилегия 0.4

すべて「スマホで年賀状」でしか手に入らないデザインばか...

大竹夏紀 - kanaya · -the works of ai ito-」...

(fm-200) ; (fm -200) ) - : ) 0.14 —x/ 0.4 0.4 (js&.' ) (3

qsys システム・デザイン...

エキスパートから失敗を学べ ...

kingston.com quality of servicequality of service (99.99%)...

§لاستراتيجية...—4 1994 143 31 — 200 1 17 ,...

uxデザインの接しかた // ux sketch #17

デザインのチカラ、活かし方...power of design...

魅力的なアプリuiデザインとは何か...

“せっかくマーケティング”...

asp.net 0.4

ちろん、その「答え」が正しいかどうかて、正解に近いデザインを追求していく...