ユーザー調査・分析に基づいた、”刺さる”WEBサービス・プロダクトデザイン 先生:羽山 祥樹

4,087 views

Published on

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

Published in: Business
0 Comments
32 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,087
On SlideShare
0
From Embeds
0
Number of Embeds
1,928
Actions
Shares
0
Downloads
0
Comments
0
Likes
32
Embeds 0
No embeds

No notes for slide

ユーザー調査・分析に基づいた、”刺さる”WEBサービス・プロダクトデザイン 先生:羽山 祥樹

  1. 1. ユーザー調査・分析に基づいた、 ”刺さる”  WEBサービス・プロダクトデザイン 2014年年4⽉月4⽇日(⾦金金)  21:00〜~22:00 ⽻羽⼭山  祥樹 1 や      _̲ をどんどんいただけると、 盛り上がります!
  2. 2. 2 今⽇日は「ユーザー⼼心理理」を きちんと制作におとしこむ プロセス をお話します。 計画 調査 制作 今⽇日の主題 検証 かるく体験 かるく体験 分析 (もちろん、前回の授業を受けていない⽅方も、理理解できるようになっています)
  3. 3. 3 前回 2014年年1⽉月21⽇日 ターゲット⼼心理理をつかむ、正しいユーザー調査・分析 http://schoo.jp/class/345 たいへん好評でした! ありがとうございます
  4. 4. 本⽇日のアジェンダ 4 1 ⾃自⼰己紹介 1分 2 ワークショップ1 「ものさし」無しに考えるとどうなるか? 15分 3 ワークショップ2 「ものさし」が有るとどうなるのか? 10分 4 ワークショップ3 「ものさしの使いかた(ギャップ分析)」をやってみる 20分 5 質問タイム 15分
  5. 5. ⽻羽⼭山  祥樹  HAYAMA  Yoshiki v インフォメーションアーキテクト •  使いやすいWebサイトをつくる専⾨門家 •  HCD-‐‑‒Net認定  ⼈人間中⼼心設計専⾨門家 v Web業界に16年年くらい v 担当したWebサイトが、雑誌のWebユーザビリティランキン グで国内トップクラスの評価を受ける  ほか実積多数 v 主な専⾨門分野 •  ユーザーエクスペリエンス、情報アーキテクチャ、アクセ シビリティ、⼈人間中⼼心設計、⼤大規模CMS、制作品質管理理 Twi$er:@storywriter 5
  6. 6. 6 メンタルモデル ユーザーへの共感から⽣生まれるUXデザイン戦略略 Amazonで購⼊入: http://www.amazon.co.jp/dp/4621088068 コンピュータ・IT  >  インターネット・Web開発  >  Web開発  最⾼高「1位」 コンピュータ・IT  総合  最⾼高「9位」 今⽇日の内容は 12章〜~13章に 相当
  7. 7. 7 例例題: 「資格試験」の  ウェブサイトをつくる 今⽇日の授業では、わかりやすいよう、 例例をとって、お話していきます。
  8. 8. 8 ワークショップ1: 「ものさし」が無いと何が起こるのか?   を知る や      _̲ をどんどんいただけると、 盛り上がります!
  9. 9. 9 まず、体験してみましょう。 次のウェブサイトだけを⾒見見て、案を考えてください。 「試験の受験者を、さらにふやすアイデア」 ウェブデザイン技能検定 http://www.webdesign.gr.jp/
  10. 10. 10 引⽤用:  ウェブデザイン技能検定  http://www.webdesign.gr.jp/
  11. 11. 11 引⽤用:  ウェブデザイン技能検定  http://www.webdesign.gr.jp/
  12. 12. 12 90秒で、思いつくまま、書き出してみましょう。 「場に、たくさん、いろんな意⾒見見が出る」 ということを体験してほしいので 思いついたら、どんどん「      」で教えてね。
  13. 13. 13 どうでしょうか。 いろんな案がでたと思います。 そして、こう⾔言われませんか・・・? 「で、どれが重要なの?」 「それ、本当に正しいの?」
  14. 14. 14 そうすると、社内の都合とか、 経験則とか、声の⼤大きい⼈人の意⾒見見とかで、 決まります。 それが100%悪いわけじゃないけど、 でも、それでいいんだっけ?
  15. 15. 15 そのウェブサイトだけ⾒見見てても、 「どの案が良良いか」は判断しづらい。 だから、 プロのUXデザイナーは、こうやります。
  16. 16. ウェブサイトを改善するには、 できるだけ、そのウェブサイトを 「見ない」ようにする 16 ネットイヤーグループ株式会社  坂本  貴史  ⽒氏 WebSig24/7  IA分科会  明⽇日から実践できるIA  Vol.3,  2009年年1⽉月17⽇日
  17. 17. 17 ⽻羽⼭山による追記: ウェブサイトを改善するには、 できるだけ、そのウェブサイトを 「⾒見見ない」ようにする。 「ものさし」が⼿手に⼊入るまでは。
  18. 18. 18 ワークショップ2: 「ものさし」が有るとどうなるのか?   を知る や      _̲ をどんどんいただけると、 盛り上がります!
  19. 19. 19 まず、体験してみましょう。 次の線分は、⻑⾧長いですか?  短いですか?
  20. 20. 20 まず、体験してみましょう。 次の線分は、「ものさし」となる線分に⽐比べて、 ⻑⾧長いですか?  短いですか? 「ものさし」
  21. 21. 21 まず、体験してみましょう。 次の⾊色は、濃いですか?  薄いですか?
  22. 22. 22 まず、体験してみましょう。 次の⾊色は、「ものさし」となる⾊色に⽐比べて、 濃いですか?  薄いですか? 「ものさし」
  23. 23. 23 モノが良良いか悪いかは、 「ものさし」と⽐比べないとわかりません。
  24. 24. 24 体験してみましょう。 次の線分は、「ものさし」となる線分に⽐比べて、 ⻑⾧長いですか?  短いですか? 「ものさし」
  25. 25. 25 モノが良良いか悪いかは、 適切切な 「ものさし」と⽐比べないとわかりません。
  26. 26. 26 では、この質問は? このウェブサイトの、受験者をさらに増やすには、 どうすればよいでしょうか? 引⽤用:  ウェブデザイン技能検定  http://www.webdesign.gr.jp/
  27. 27. 27 では、この質問は? このウェブサイトの、受験者をさらに増やすには、 どうすればよいでしょうか? 「ものさし」 ユーザー⼼心理理 引⽤用:  ウェブデザイン技能検定  http://www.webdesign.gr.jp/
  28. 28. 28 ウェブサイトやプロダクトの「ものさし」は 「ユーザー⼼心理理」です。 ウェブサイトやプロダクトの良良し悪しは、 「ユーザー⼼心理理」と⽐比べて、 ユーザーが満⾜足できるようになっているか? で判断します。
  29. 29. 29 再掲: ウェブサイトを改善するには、 できるだけ、そのウェブサイトを 「⾒見見ない」ようにする。 「ものさし」が⼿手に⼊入るまでは。
  30. 30. 30 「ものさし」を無しに ウェブサイトを⾒見見たとき、出やすい意⾒見見 たしかに、ユーザビリティの改善でも できることは多いけれど バナーが ⾒見見づらいんじゃ? キャッチコピーが 悪いんじゃ? ボタンの⾊色が 悪いんじゃ?
  31. 31. 31 「ユーザー⼼心理理」と⽐比べると、 根本的な問題がわかる ECサイト 決済直前まで 送料料がわからない 送料料っていくら かかるんだろう 「ものさし」
  32. 32. 32 ワークショップ3: 「ものさし」の「使いかた」を知る や      _̲ をどんどんいただけると、 盛り上がります!
  33. 33. 33 「ものさし」を、⼿手に⼊入れた! (前回  1⽉月21⽇日  の授業で)
  34. 34. 34 (作成⼿手順は前回の授業を参照) 「資格を取る動機」のユーザー⼼心理理
  35. 35. 35 ちょっと待って 「ものさし」だけでなく 「ものさしの使いかた」は⼤大丈夫?
  36. 36. 36 ウェブ制作の現場では、 ペルソナとかジャーニーマップとか、 これって「ものさし」そのもののはず だけど、プロジェクトの次のステップで 活かされないこともあるよね・・・
  37. 37. 37 よくあるケース1 ペルソナできた! 次は サイトストラクチャ ワイヤーフレーム だ!
  38. 38. 38 よくあるケース1 えっと、 今のサイトは こうで・・・
  39. 39. 39 よくあるケース1 クライアントの 要望は こうで・・・ 忘れてる
  40. 40. 40 なぜ忘れてしまうのか? これは、忘れるのが悪いというより ユーザー⼼心理理と 現状のウェブサイトやプロダクトを 「⽐比べる」というプロセスを プロジェクトに、そもそも⼊入れ忘れている
  41. 41. 41 注意:もっと多いケース 「ユーザー⼼心理理」をまとめてしまい、 細かいユーザー⼼心理理を忘れてしまう 30個の⼼心理理 3つにまとめた 3個の⼼心理理 30個の⼼心理理 クライアントや社内へのプレゼンの中では、わかりやすく、まとめても、 制作現場からも、丸めてしまってはいけない。
  42. 42. 42 よくあるケース2 これがペルソナです! これを⾒見見て、ウェブサイトを 改善してください!
  43. 43. 43 よくあるケース2 受験料料? キービジュ アル? もっと ピンク⾊色? けっきょく思いつきを並べただけ。
  44. 44. 44 「ものさし」として 「ユーザー⼼心理理」を どう使うのか、わからない!
  45. 45. 45 プロのUXデザイナーは、 次のような「ものさしの使いかた」をします ギャップ分析
  46. 46. 46 「ものさし」となるユーザー⼼心理理と ウェブサイトやプロダクトを ひとつひとつ、ていねいに、 ⽐比べていくプロセス ギャップ分析
  47. 47. ギャップ分析のしかた 47 「ものさし」となるユー ザー⼼心理理を、しっかりと 理理解する。 対象のウェブサイトやプ ロダクトを、コンテンツ や機能ごとに、ひとつず つ分ける。 1 2
  48. 48. ギャップ分析のしかた 48 コンテンツや機能を、 ユーザー⼼心理理ごとに並べ る。 ユーザー⼼心理理に対し、コ ンテンツや機能が不不⾜足し ているところを⾒見見る。 3 4 不不⾜足 (ギャップ)
  49. 49. ギャップ分析のしかた 49 ギャップを埋める改善案 を考えて、具体的なワイ ヤーフレームや企画書に する。 5 ホワイトボードで いっしょに やってみましょう!
  50. 50. 50
  51. 51. 51 引⽤用:  ウェブデザイン技能検定  http://www.webdesign.gr.jp/ 公的資格である 東京、川崎、⼤大阪、福岡で 受験できる 5⽉月に試験がある
  52. 52. 52 引⽤用:  ウェブデザイン技能検定  http://www.webdesign.gr.jp/ 1級、2級、3級と レベルが選べる
  53. 53. 53 引⽤用:  ウェブデザイン技能検定  http://www.webdesign.gr.jp/kentei/summery.html 全国で受験できる 3ヶ⽉月おきくらいに 開催している
  54. 54. 54 実技が科⽬目にある 3級は2時間弱で 受験できる 引⽤用:  ウェブデザイン技能検定  http://www.webdesign.gr.jp/kentei/summery.html
  55. 55. 55 引⽤用:  ウェブデザイン技能検定  http://www.webdesign.gr.jp/kentei/application.html 受験受付中である HTML5やCSS3も 出題範囲にある インターネット 申し込みできる
  56. 56. 56 引⽤用:  ウェブデザイン技能検定  www.webdesign.gr.jp/kentei/items.html 試験要項で詳細を知る ⼀一部免除制度度がある
  57. 57. 57 引⽤用:  ウェブデザイン技能検定  http://www.webdesign.gr.jp/kentei/measures.html 練習問題が ダウンロードできる 問題集がある 体系化された テキストがある じっさいの試験問題が わかる
  58. 58. 58 引⽤用:  ウェブデザイン技能検定  http://www.webdesign.gr.jp/kentei/faq.html 多くの受験者がいる 技能検定の位置づけが わかる ちゃんとした団体が 運営している
  59. 59. 59 東京、川崎、⼤大阪、福岡で 受験できる 5⽉月に試験がある 1級、2級、3級と レベルが選べる 全国で受験できる 3ヶ⽉月おきくらいに 開催している 実技が科⽬目にある 3級は2時間弱で 受験できる 受験受付中である HTML5やCSS3も 出題範囲にある インターネット 申し込みできる 試験要項で詳細を知る 練習問題が ダウンロードできる じっさいの試験問題が わかる 問題集がある 体系化された テキストがある ⼀一部免除制度度がある 多くの受験者がいる 技能検定の位置づけが わかる ちゃんとした団体が 運営している 洗い出したコンテンツや機能 公的資格である
  60. 60. 60 コンテンツや機能を、⼼心理理に並べる HTML5やCSS3も 出題範囲にある 体系化された テキストがある 実技が科⽬目にある じっさいの試験問題が わかる
  61. 61. 東京、川崎、⼤大阪、福岡 で受験できる 5⽉月に試験がある 1級、2級、3級と レベルが選べる 全国で受験できる 3ヶ⽉月おきくらいに 開催している 実技が科⽬目にある 3級は2時間弱で 受験できる 受験受付中である HTML5やCSS3も 出題範囲にある インターネット 申し込みできる 試験要項で詳細を知る 練習問題が ダウンロードできる じっさいの試験問題が わかる 問題集がある 体系化された テキストがある ⼀一部免除制度度がある 多くの受験者がいる 技能検定の位置づけが わかる ちゃんとした団体が 運営している 公的資格である
  62. 62. 62 ユーザー⼼心理理とのギャップ(不不⾜足)を⾒見見る 東京、川崎、⼤大阪、福岡 で受験できる 5⽉月に試験がある 1級、2級、3級と レベルが選べる 全国で受験できる 3ヶ⽉月おきくらいに 開催している 実技が科⽬目にある 3級は2時間弱で 受験できる 受験受付中である HTML5やCSS3も 出題範囲にある インターネット 申し込みできる 試験要項で詳細を知る 練習問題が ダウンロードできる じっさいの試験問題が わかる 問題集がある 体系化された テキストがある ⼀一部免除制度度がある 多くの受験者がいる 技能検定の位置づけが わかる ちゃんとした団体が 運営している 公的資格である ギャップ (不不⾜足) ギャップ (不不⾜足)
  63. 63. 63 ギャップを埋める改善案を考える 未経験で ウェブ業界に 転職できた事例例 はどうかな? ウェブ制作会社の 新⼊入研修で使われてる エピソードとか?
  64. 64. 64 「ギャップ分析」を、 ひとつひとつ、ていねいにやると 明確な根拠をもって、⽅方向性が⾒見見えます これが「ものさしの使いかた」です
  65. 65. まとめ 65 1.  「ものさし」がないと、良良いか悪いかわからない。 2.  「ものさし」には、「ものさしの使いかた」がある。 3.  そのウェブサイトやプロダクトの、コンテンツや機 能を、ひとつずつ、ユーザー⼼心理理に並べて、不不⾜足を ⾒見見つける。(ギャップ分析)
  66. 66. 66 メンタルモデル ユーザーへの共感から⽣生まれるUXデザイン戦略略 Amazonで購⼊入: http://www.amazon.co.jp/dp/4621088068 コンピュータ・IT  >  インターネット・Web開発  >  Web開発  最⾼高「1位」 コンピュータ・IT  総合  最⾼高「9位」 今⽇日の内容は 12章〜~13章に 相当
  67. 67. 宿題 67 本⽇日はありがとうございました。 ご相談や、疑問など、お気軽にご連絡ください。 •  今⽇日の感想を教えてください。 •  ⾃自分のウェブサイトやプロダクトと、 ユーザー⼼心理理を、ギャップ分析してみよ う。

×