ユーザー調査・分析に基づいた、“刺さる” WEBサービス・プロダクトデザイン

ユーザー調査・分析に基づいた、
”刺さる” WEBサービス・プロダクトデザイン
2014年年4⽉月4⽇日（⾦金金） 21:00〜～22:00
⽻羽⼭山祥樹
1
や　　　_̲
をどんどんいただけると、
盛り上がります！

2
今⽇日は「ユーザー⼼心理理」を
きちんと制作におとしこむ
プロセス
をお話します。
計画調査制作
今⽇日の主題
検証
かるく体験かるく体験
分析
（もちろん、前回の授業を受けていない⽅方も、理理解できるようになっています）

3
前回
2014年年1⽉月21⽇日
ターゲット⼼心理理をつかむ、正しいユーザー調査・分析
http://schoo.jp/class/345
たいへん好評でした！
ありがとうございます

本⽇日のアジェンダ
4
1 ⾃自⼰己紹介 1分
2 ワークショップ1
「ものさし」無しに考えるとどうなるか？
15分
「ものさし」が有るとどうなるのか？
10分
「ものさしの使いかた（ギャップ分析）」をやってみる
20分
5 質問タイム 15分

⽻羽⼭山祥樹 HAYAMA Yoshiki
vインフォメーションアーキテクト
• 使いやすいWebサイトをつくる専⾨門家
• HCD-‐‑‒Net認定⼈人間中⼼心設計専⾨門家
vWeb業界に16年年くらい
v担当したWebサイトが、雑誌のWebユーザビリティランキン
グで国内トップクラスの評価を受ける　ほか実積多数
v主な専⾨門分野
• ユーザーエクスペリエンス、情報アーキテクチャ、アクセ
シビリティ、⼈人間中⼼心設計、⼤大規模CMS、制作品質管理理
Twi$er：@storywriter
5

6
メンタルモデル
ユーザーへの共感から⽣生まれるUXデザイン戦略略
Amazonで購⼊入：
http://www.amazon.co.jp/dp/4621088068
コンピュータ・IT > インターネット・Web開発 > Web開発最⾼高「1位」
コンピュータ・IT 総合　最⾼高「9位」
今⽇日の内容は
12章〜～13章に
相当

7
例例題：
「資格試験」のウェブサイトをつくる
今⽇日の授業では、わかりやすいよう、
例例をとって、お話していきます。

8
ワークショップ1：
「ものさし」が無いと何が起こるのか？
　を知る
や　　　_̲

9
まず、体験してみましょう。
次のウェブサイトだけを⾒見見て、案を考えてください。
「試験の受験者を、さらにふやすアイデア」
ウェブデザイン技能検定
http://www.webdesign.gr.jp/

10
引⽤用：ウェブデザイン技能検定 http://www.webdesign.gr.jp/

11

12
90秒で、思いつくまま、書き出してみましょう。
「場に、たくさん、いろんな意⾒見見が出る」
ということを体験してほしいので
思いついたら、どんどん「　　」で教えてね。

13
どうでしょうか。
いろんな案がでたと思います。
そして、こう⾔言われませんか・・・？
「で、どれが重要なの？」
「それ、本当に正しいの？」

14
そうすると、社内の都合とか、
経験則とか、声の⼤大きい⼈人の意⾒見見とかで、
決まります。
それが100%悪いわけじゃないけど、
でも、それでいいんだっけ？

15
そのウェブサイトだけ⾒見見てても、
「どの案が良良いか」は判断しづらい。
だから、
プロのUXデザイナーは、こうやります。

ウェブサイトを改善するには、
できるだけ、そのウェブサイトを
「見ない」ようにする
16
ネットイヤーグループ株式会社坂本貴史⽒氏
WebSig24/7 IA分科会明⽇日から実践できるIA Vol.3, 2009年年1⽉月17⽇日

17
⽻羽⼭山による追記：
「⾒見見ない」ようにする。
「ものさし」が⼿手に⼊入るまでは。

18
「ものさし」が有るとどうなるのか？
　を知る
や　　　_̲

19
次の線分は、⻑⾧長いですか？　短いですか？

20
次の線分は、「ものさし」となる線分に⽐比べて、
⻑⾧長いですか？　短いですか？
「ものさし」

21
次の⾊色は、濃いですか？　薄いですか？

22
次の⾊色は、「ものさし」となる⾊色に⽐比べて、
濃いですか？　薄いですか？
「ものさし」

23
モノが良良いか悪いかは、
「ものさし」と⽐比べないとわかりません。

24
体験してみましょう。
次の線分は、「ものさし」となる線分に⽐比べて、
⻑⾧長いですか？　短いですか？
「ものさし」

25
モノが良良いか悪いかは、
適切切な
「ものさし」と⽐比べないとわかりません。

26
では、この質問は？
このウェブサイトの、受験者をさらに増やすには、
どうすればよいでしょうか？

27
では、この質問は？
このウェブサイトの、受験者をさらに増やすには、
どうすればよいでしょうか？
「ものさし」
ユーザー⼼心理理

28
ウェブサイトやプロダクトの「ものさし」は
「ユーザー⼼心理理」です。
ウェブサイトやプロダクトの良良し悪しは、
「ユーザー⼼心理理」と⽐比べて、
ユーザーが満⾜足できるようになっているか？
で判断します。

29
再掲：
「⾒見見ない」ようにする。
「ものさし」が⼿手に⼊入るまでは。

30
「ものさし」を無しに
ウェブサイトを⾒見見たとき、出やすい意⾒見見
たしかに、ユーザビリティの改善でも
できることは多いけれど
バナーが
⾒見見づらいんじゃ？
キャッチコピーが
悪いんじゃ？
ボタンの⾊色が
悪いんじゃ？

31
「ユーザー⼼心理理」と⽐比べると、
根本的な問題がわかる
ECサイト
決済直前まで
送料料がわからない
送料料っていくら
かかるんだろう
「ものさし」

32
「ものさし」の「使いかた」を知る
や　　　_̲

33
「ものさし」を、⼿手に⼊入れた！
（前回 1⽉月21⽇日の授業で）

34
（作成⼿手順は前回の授業を参照）
「資格を取る動機」のユーザー⼼心理理

35
ちょっと待って
「ものさし」だけでなく
「ものさしの使いかた」は⼤大丈夫？

36
ウェブ制作の現場では、
ペルソナとかジャーニーマップとか、
これって「ものさし」そのもののはず
だけど、プロジェクトの次のステップで
活かされないこともあるよね・・・

37
よくあるケース1
ペルソナできた！
次は
サイトストラクチャ
ワイヤーフレーム
だ！

38
えっと、
今のサイトは
こうで・・・

39
クライアントの
要望は
こうで・・・
忘れてる

40
なぜ忘れてしまうのか？
これは、忘れるのが悪いというより
ユーザー⼼心理理と
現状のウェブサイトやプロダクトを
「⽐比べる」というプロセスを
プロジェクトに、そもそも⼊入れ忘れている

41
注意：もっと多いケース
「ユーザー⼼心理理」をまとめてしまい、
細かいユーザー⼼心理理を忘れてしまう
30個の⼼心理理 3つにまとめた
3個の⼼心理理
30個の⼼心理理
クライアントや社内へのプレゼンの中では、わかりやすく、まとめても、
制作現場からも、丸めてしまってはいけない。

42
これがペルソナです！
これを⾒見見て、ウェブサイトを
改善してください！

43
受験料料？
キービジュ
アル？
もっと
ピンク⾊色？
けっきょく思いつきを並べただけ。

44
「ものさし」として
「ユーザー⼼心理理」を
どう使うのか、わからない！

45
プロのUXデザイナーは、
次のような「ものさしの使いかた」をします
ギャップ分析

46
「ものさし」となるユーザー⼼心理理と
ウェブサイトやプロダクトを
ひとつひとつ、ていねいに、
⽐比べていくプロセス
ギャップ分析

ギャップ分析のしかた
47
「ものさし」となるユー
ザー⼼心理理を、しっかりと
理理解する。
対象のウェブサイトやプ
ロダクトを、コンテンツ
や機能ごとに、ひとつず
つ分ける。
1 2

48
コンテンツや機能を、
ユーザー⼼心理理ごとに並べ
る。
ユーザー⼼心理理に対し、コ
ンテンツや機能が不不⾜足し
ているところを⾒見見る。
3 4
不不⾜足
（ギャップ）

49
ギャップを埋める改善案
を考えて、具体的なワイ
ヤーフレームや企画書に
する。
5
ホワイトボードで
いっしょに
やってみましょう！

51
公的資格である
東京、川崎、⼤大阪、福岡で
受験できる
5⽉月に試験がある

52
1級、2級、3級と
レベルが選べる

53
引⽤用：ウェブデザイン技能検定 http://www.webdesign.gr.jp/kentei/summery.html
全国で受験できる
3ヶ⽉月おきくらいに
開催している

54
実技が科⽬目にある
3級は2時間弱で
受験できる
引⽤用：ウェブデザイン技能検定 http://www.webdesign.gr.jp/kentei/summery.html

55
引⽤用：ウェブデザイン技能検定 http://www.webdesign.gr.jp/kentei/application.html
受験受付中である
HTML5やCSS3も
出題範囲にある
インターネット
申し込みできる

56
引⽤用：ウェブデザイン技能検定 www.webdesign.gr.jp/kentei/items.html
試験要項で詳細を知る
⼀一部免除制度度がある

57
引⽤用：ウェブデザイン技能検定 http://www.webdesign.gr.jp/kentei/measures.html
練習問題が
ダウンロードできる
問題集がある
体系化された
テキストがある
じっさいの試験問題が
わかる

58
引⽤用：ウェブデザイン技能検定 http://www.webdesign.gr.jp/kentei/faq.html
多くの受験者がいる
技能検定の位置づけが
わかる
ちゃんとした団体が
運営している

59
東京、川崎、⼤大阪、福岡で
受験できる
開催している
受験できる
HTML5やCSS3も
練習問題が
わかる
問題集がある
体系化された
⼀一部免除制度度がある多くの受験者がいる
わかる
運営している
洗い出したコンテンツや機能

60
コンテンツや機能を、⼼心理理に並べる
HTML5やCSS3も
体系化された
わかる

東京、川崎、⼤大阪、福岡
で受験できる
開催している
受験できる
HTML5やCSS3も
練習問題が
わかる
問題集がある
体系化された
わかる
運営している

62
ユーザー⼼心理理とのギャップ（不不⾜足）を⾒見見る
東京、川崎、⼤大阪、福岡
で受験できる
開催している
受験できる
HTML5やCSS3も
練習問題が
わかる
問題集がある
体系化された
わかる
運営している
ギャップ
（不不⾜足）
ギャップ
（不不⾜足）

63
ギャップを埋める改善案を考える
未経験で
ウェブ業界に
転職できた事例例
はどうかな？
ウェブ制作会社の
新⼊入研修で使われてる
エピソードとか？

64
「ギャップ分析」を、
ひとつひとつ、ていねいにやると
明確な根拠をもって、⽅方向性が⾒見見えます
これが「ものさしの使いかた」です

まとめ
65
1. 「ものさし」がないと、良良いか悪いかわからない。
2. 「ものさし」には、「ものさしの使いかた」がある。
3. そのウェブサイトやプロダクトの、コンテンツや機
能を、ひとつずつ、ユーザー⼼心理理に並べて、不不⾜足を
⾒見見つける。（ギャップ分析）

66
メンタルモデル
ユーザーへの共感から⽣生まれるUXデザイン戦略略
Amazonで購⼊入：
http://www.amazon.co.jp/dp/4621088068
コンピュータ・IT > インターネット・Web開発 > Web開発最⾼高「1位」
コンピュータ・IT 総合　最⾼高「9位」
今⽇日の内容は
12章〜～13章に
相当

宿題
67
本⽇日はありがとうございました。
ご相談や、疑問など、お気軽にご連絡ください。
• 今⽇日の感想を教えてください。
• ⾃自分のウェブサイトやプロダクトと、
ユーザー⼼心理理を、ギャップ分析してみよ
う。

ユーザー調査・分析に基づいた、“刺さる” WEBサービス・プロダクトデザイン

Recommended

More Related Content

What's hot (20)

Similar to ユーザー調査・分析に基づいた、“刺さる” WEBサービス・プロダクトデザイン (20)

More from Yoshiki Hayama (20)

ユーザー調査・分析に基づいた、“刺さる” WEBサービス・プロダクトデザイン