ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/584/room ーーーーーーーーーーーーーーーーーーーーーーー

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

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

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

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

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

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

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

8. 8
ワークショップ1：
「ものさし」が無いと何が起こるのか？
を知る
や _̲
をどんどんいただけると、
盛り上がります！

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

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

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

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

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

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

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

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

17. 17
⽻羽⼭山による追記：
ウェブサイトを改善するには、
できるだけ、そのウェブサイトを
「⾒見見ない」ようにする。
「ものさし」が⼿手に⼊入るまでは。

18. 18
ワークショップ2：
「ものさし」が有るとどうなるのか？
を知る
や _̲
をどんどんいただけると、
盛り上がります！

19. 19
まず、体験してみましょう。
次の線分は、⻑⾧長いですか？ 短いですか？

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

21. 21
まず、体験してみましょう。
次の⾊色は、濃いですか？ 薄いですか？

22. 22
まず、体験してみましょう。
次の⾊色は、「ものさし」となる⾊色に⽐比べて、
濃いですか？ 薄いですか？
「ものさし」

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

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

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

26. 26
では、この質問は？
このウェブサイトの、受験者をさらに増やすには、
どうすればよいでしょうか？
引⽤用： ウェブデザイン技能検定 http://www.webdesign.gr.jp/

27. 27
では、この質問は？
このウェブサイトの、受験者をさらに増やすには、
どうすればよいでしょうか？
「ものさし」
ユーザー⼼心理理
引⽤用： ウェブデザイン技能検定 http://www.webdesign.gr.jp/

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

29. 29
再掲：
ウェブサイトを改善するには、
できるだけ、そのウェブサイトを
「⾒見見ない」ようにする。
「ものさし」が⼿手に⼊入るまでは。

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

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

32. 32
ワークショップ3：
「ものさし」の「使いかた」を知る
や _̲
をどんどんいただけると、
盛り上がります！

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

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

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

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

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

38. 38
よくあるケース1
えっと、
今のサイトは
こうで・・・

39. 39
よくあるケース1
クライアントの
要望は
こうで・・・
忘れてる

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

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

42. 42
よくあるケース2
これがペルソナです！
これを⾒見見て、ウェブサイトを
改善してください！

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

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

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

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

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

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

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

50. 50

51. 51
引⽤用： ウェブデザイン技能検定 http://www.webdesign.gr.jp/
公的資格である
東京、川崎、⼤大阪、福岡で
受験できる
5⽉月に試験がある

52. 52
引⽤用： ウェブデザイン技能検定 http://www.webdesign.gr.jp/
1級、2級、3級と
レベルが選べる

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

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

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

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

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

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

59. 59
東京、川崎、⼤大阪、福岡で
受験できる
5⽉月に試験がある
1級、2級、3級と
レベルが選べる
全国で受験できる
3ヶ⽉月おきくらいに
開催している
実技が科⽬目にある
3級は2時間弱で
受験できる
受験受付中である
HTML5やCSS3も
出題範囲にある
インターネット
申し込みできる
試験要項で詳細を知る
練習問題が
ダウンロードできる
じっさいの試験問題が
わかる
問題集がある
体系化された
テキストがある
⼀一部免除制度度がある 多くの受験者がいる
技能検定の位置づけが
わかる
ちゃんとした団体が
運営している
洗い出したコンテンツや機能
公的資格である

60. 60
コンテンツや機能を、⼼心理理に並べる
HTML5やCSS3も
出題範囲にある
体系化された
テキストがある
実技が科⽬目にある
じっさいの試験問題が
わかる

61. 東京、川崎、⼤大阪、福岡
で受験できる
5⽉月に試験がある
1級、2級、3級と
レベルが選べる
全国で受験できる
3ヶ⽉月おきくらいに
開催している
実技が科⽬目にある
3級は2時間弱で
受験できる
受験受付中である
HTML5やCSS3も
出題範囲にある
インターネット
申し込みできる
試験要項で詳細を知る
練習問題が
ダウンロードできる
じっさいの試験問題が
わかる
問題集がある
体系化された
テキストがある
⼀一部免除制度度がある
多くの受験者がいる
技能検定の位置づけが
わかる
ちゃんとした団体が
運営している
公的資格である

62. 62
ユーザー⼼心理理とのギャップ（不不⾜足）を⾒見見る
東京、川崎、⼤大阪、福岡
で受験できる
5⽉月に試験がある
1級、2級、3級と
レベルが選べる
全国で受験できる
3ヶ⽉月おきくらいに
開催している
実技が科⽬目にある
3級は2時間弱で
受験できる
受験受付中である
HTML5やCSS3も
出題範囲にある
インターネット
申し込みできる
試験要項で詳細を知る
練習問題が
ダウンロードできる
じっさいの試験問題が
わかる
問題集がある
体系化された
テキストがある
⼀一部免除制度度がある
多くの受験者がいる
技能検定の位置づけが
わかる
ちゃんとした団体が
運営している
公的資格である
ギャップ
（不不⾜足）
ギャップ
（不不⾜足）

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

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

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

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

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