ユーザー調査・分析に基づいた、“刺さる” 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

Recommended

More Related Content

What's hot

What's hot (20)

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

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

More from Yoshiki Hayama

More from Yoshiki Hayama (17)

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