プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう！ | UXデザイン基礎セミナー 第4回

プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう！ | UXデザイン基礎セミナー 第4回

• 1.
  プロトタイピングとユーザビリティテストで 「UXデザイン」を練りあげよう︕ 2022年9⽉27⽇（⽕） ⽇本ウェブデザイン株式会社 / HCD-Net認定⼈間中⼼設計専⾨家 ⽻⼭ 祥樹 @storywriter 1 Zoomの チャットで いっしょに 盛りあがってね Twitterの ハッシュタグは #CR社 画⾯キャプチャ 投稿OK︕ UXデザイン基礎セミナー 第4回
• 2.
  Zoomの「チャット」で盛りあがろう︕ 2 チャット Q&Aに 投稿したものは 質疑応答で 答えます Zoom のチャットへ どんどん書いてね︕ （Twitter感覚で） Q&A 「全員」 で送信︕
• 3.
  Zoomの「チャット」で盛りあがろう︕ 3 第1回 第2回 さいしょに「Zoomのチャットに投稿する練習」をしています︕ 今回はどうしようかなと思いまして・・・ 第3回
• 4.
  4 そ の ハ ン カ チ の せ い で 悲 し さ が 伝 わ ら な い !!! も う イ ヤ こ ん な 生 活 耐 え ら れ な い !! !!
• 5.
  「全員」で送信 Zoomの「チャット」で盛りあがろう︕ 5 ぬぬぬぬぬぬぬぬ ぬぬぬぬぬぬぬぬ ぬぬぬぬ 練習 ・・・と投稿してみよう!!
• 6.
  6 ぐ ば っ !!!! そ の 男 に 人 質 の 価 値 は ね ━━━━━ !!!!
• 7.
  ⽻⼭ 祥樹 @storywriter 7 ⽇本ウェブデザイン株式会社代表取締役CEO 使いやすいプロダクトをつくる専⾨家 HCD-Net認定 ⼈間中⼼設計専⾨家 Web業界に22年、AIシステムのプロダクトマネージャーとUXデザインを5年 主な実績など 2009年 ⽇経パソコン 企業サイトランキング2009 ⽇本の主要企業696サイト中、ユーザビリティ／アクセシビリティ分野で第3位 2011年 Webユーザビリティランキング2011 企業サイト編 ⽇本の⼤⼿企業150サイト中、第4位 主な専⾨分野 ユーザーエクスペリエンス、⼈間中⼼設計、情報アーキテクチャ、アクセシビリティ、ライター
• 8.
  8 これまでのあらすじ
• 9.
  Ｕ Ｘ デ ザ イ ン の 知 識 か ？ 欲 し け り ゃ く れ て や る ぜ … 探 し て み ろ こ の 世 の 全 て を そ こ に 置 い て き た
• 10.
  10 “UXデザイン” や “UXリサーチ”とは ⾒た⽬のデザインのことではなく ユーザーインタビューやユーザビリティテストをつかって ユーザーの深い⼼理を突きとめる専⾨技術
• 11.
  11 註1: フォードはこの発⾔をしていない、という説もある。 もし私が顧客に何がほしいかを聞いていたら、 彼らは「もっと速い⾺がほしい」と答えただろう。 ヘンリー・フォード（註1） “ ” ユーザーに話を聞いていては ユーザーが本当にほしいモノは わからないってコト︕︖ じゃあなんで ユーザーの声を聞け っていうの︕︖
• 12.
  ユーザーの声を聞かない コンセプトにあう ユーザーの声だけ聞く ユーザーの声を聞いて 本当のニーズは 「A地点からB地点へ 速く移動したい」 のだと掘り下げて ⾃動⾞をつくる 「もっと速い⾺がほしい」と⾔われたらどうするか 12 「ユーザーに⾔われたままやること」と「ユーザーのニーズに応えること」は異なります。 「もっと速い⾺がほしい」と⾔われたとき、最初にすべきは「なぜですか︖」とユーザー に問いかけることです。
• 13.
  「ユーザーはほしいものを⾔語化できない」をかいくぐる 13 ユーザーは「⾺しか知らない」ので、訊いても「⾺」の話しか出てきません。本当の ニーズが「⾃動⾞」にあっても、⾔語化できないのです。会話から本当のニーズを⾒ つけるには、ほしいものを訊くのではなく、⾏動の⽬的を訊きます。 もっと速い⾺ がほしい ⾃動⾞ なぜ ですか︖ ⽬的地にもっと 早く着きたい 限られた時間で ⾏って帰りたい ここで納得しちゃダメ 時間をかけると 貨物が腐る 相⼿に早く 情報を伝えたい 冷蔵庫 電話 なぜ ですか︖
• 14.
  ユーザーインタビュー ユーザビリティテスト 発話録 親和図（抽象化） 結論 （深いユーザーニーズ） 深いユーザーニーズまでの道のり 14 深いユーザーニーズまでたどりつくためには「ユーザーインタビュー」や「ユーザビリティテ スト」で豊かな発話を集め「親和図法」 などの⼿法で分析します。
• 15.
  君 の 使 命 は ユ ー ザ ー の 深 い ニ ー ズ を 探 る こ と そ の た め に ま ず ユ ー ザ ー イ ン タ ビ ュ ー し ろ
• 16.
  猶 予 は 一 週 間 と す る
• 17.
  イ ン ビ ュ ー 三 銃 士 を 連 れ て 来 た よ 。 イ ン タ ビ ュ ー 三 銃 士 ？ 13 種 類 の 会 話 パ タ ー ン 集 だ 三 銃 士 じ ゃ な い じ ゃ ん
• 18.
  ユーザーインタビューでよく使う13の質問パターン 18 1 直接的に理由を掘り下げる 2 あいまいな⾔葉を明確にする 3時系列を確認する 4 ほかの選択肢をとらなかった理由を 訊く 5 ほかに考えたことを訊く 6 話を具体的にする/話の続きを促す 7 あえてあり得ない選択肢について質 問する 8 それがないとどうなるのか訊く 9 ⾔語化を強制する 10 ⽭盾している箇所について訊く 11 具体的な量を訊く 12 何と⽐較しているのか訊く／何を期 待していたのか訊く 13 ⾃⾝はどう思ったのかを訊く
• 19.
  ユーザーインタビューの会話の全⽂サンプル 19 今⽇の教材ダウンロード︓インプレスさんのメディア Think ITの、⽻⼭の連載 「UXデザインはじめの⼀歩 ー インタビュー技術を磨こう︕」 にて、インタビュー発話 録の全⽂サンプルを無料ダウンロード配布しています。 https://thinkit.co.jp/series/9588
• 20.
  20 ユーザーインタビューをして、あなたの⼿元には たくさんの 「ユーザーの声」 が集まりました。 そこで、はたと気がつきます。 ものすごい⼤量の発話データから ユーザーの本質的な⼼理を拾いあげるには どうすればよいのでしょうか。はて。
• 21.
  「親和図法」で分析をしよう︕ 21 すべての発話データを客観的にあつかって、ユーザーのインサイトを⾒つけるには 「定性分析（質的分析とも呼ぶ）」をします。 もっともよく使われる分析⼿法は 「親和図法」 です。
• 22.
  … フ ン … 成 程 己 の 得 意 技 を 徹 底 的 に 磨 き 絶 対 の 必 殺 技 に ま で 昇 華 さ せ る の が 新 組 の Ｕ Ｘ デ ザ イ ン の 強 さ お 前 が 最 後 ま で 頼 る の は ﹁ 親 和 図 法 ﹂ を 昇 華 し た ﹁ Ｋ Ａ 法 ﹂ か
• 23.
  さらにグループ化を くりかえし グループの関係を 線や⽮印で描く KA法の⼿順 23 KA法の基本⼿順も、概略は親和図法と同じです。 ただし細かいお作法があり、そのお作法がより確実な成果物へつながります。 発話録から ユーザー⼼理を ふせんに書き出す 似たふせんを グループにする 似たグループとグループを より⼤きなグループにする お作法 お作法 お作法 お作法
• 24.
  24 「価値マップ」 完成
• 25.
  25 この試験なら 合格できるんじゃ ないかと思う 実⽤ になる スキルを ⾝につけ たい ⾃分の スキルを 客観的に 証明したい 夢を かなえるため 資格がほしい 転職や就職を 有利にしたい 勉強の成果を すぐに実感したい 合格に結びつく 勉強⽅法が 知りたい 限られた 勉強時間で 合格したい 資格試験を受ける⼈の モチベーションの価値マップ
• 26.
  KA法（本質的価値抽出法）の⼿順と実例 26 今⽇の教材ダウンロード︓Figmaでじっさい にKA法をしたデータを配布します。商⽤・⾮商 ⽤問わず⾃由に再配布・改変いただけます。 初学者が悩みやすい「発話録のどこを、どのよ うに、ふせんに書き出すのか」など、実物の発 話録から成果物までの作業履歴もすべて追え るように残しています。 KA法（本質的価値抽出法）の⼿順と実例 「資格試験を受ける⼈のモチベーションの価値マップ」 https://www.figma.com/community/file/1142124393231568930 この教材の作成にあたりFigma公式アンバサダーの キャシさん（ @UIAlchemist） にFigmaの使いかたのアドバイスをいただきました。ありがとうございます︕
• 27.
  価値マップからユーザーの本当のニーズの解決⽅法を導く 27 勉強の成果をすぐ 実感したいのかー よし、じゃあ勉強時間 重ねるごとに 勲章をあげよう︕
• 28.
  …… 君 の よ う な 勘 の い い ガ キ は 嫌 い だ よ こ れ っ て ユ ー ザ ー の 本 当 の ニ ー ズ が わ か っ て も 解 決 方 法 が ダ メ な ら せ ん ぶ ダ メ な の で は ？
• 29.
  29 いま、あなたはユーザーの本当のニーズを⼿にしました。 しかし、本当のニーズがわかったとして あなたが思いついたその解決⽅法は 本当にユーザーのニーズを 満たすのだろうか︖
• 30.
  30 今⽇は “UXデザイン” や“UXリサーチ” の 最後のステップとして アイデアを「検証できるかたち = プロトタイプ」にし 「ユーザビリティテスト」でアイデアの成否を検証します。
• 31.
  今⽇は教材テーマに「資格取得」を使います 31 資格試験（英検、TOEIC、簿記、情報処理技術者試験・・・）は わりと多くの⼈が経験があるエピソードで、伝わりやすいので、 これをテーマに進めます。
• 32.
  32 今⽇はじっさいにユーザビリティテストを公開でおこない その効果を、あなたに体験していただきます。 ユーザー あなた これは どう使うのかな︖ モデレーター 中継 これは どう使うのかな︖
• 33.
  33 公開ユーザビリティテストをする題材として 英会話アプリ 「Langaku（ランガク）」 を運営する Mantra株式会社さまのご協⼒をいただきました︕ https://langaku.app/
• 34.
  著作権表⽰ 34 • 本Figma/FigJamのデータは英会話アプリ「Langaku」のユーザビリティテスト のために作成したものです。英会話アプリ「Langaku」の画⾯の著作権は Mantra株式会社に帰属します。 • 本Figma/FigJamのデータには英会話アプリ「Langaku」の画⾯キャプチャを 通じて、以下の漫画が引⽤されています。これらの漫画の著作権は著作者に 帰属します。 •マッシェル -MASHLE-, 甲本⼀／集英社 • SPY×FAMILY, 遠藤達哉／集英社
• 35.
  35 ユーザビリティテストとは
• 36.
  ユーザビリティテスト 36 プロダクトがすでに存在するときに有効です。いまのプロダクトをユーザーにさわっても らいながら、「タスク」をこなしてもらうことで、ユーザーの期待とプロダクトがマッチして いない箇所を⾒つけることができます。 タスク1をやってみてい ただけますか︖ はい・・・ええと・・・ 電源ボタンはどこだ︖
• 37.
  37 UXデザインの世界には という⾔葉があります。 すべてのプロダクトは「セルフサービス商品」である “ ”
• 38.
  すべてのプロダクトは「セルフサービス商品」である 38 ユーザーがじっさいに現場でプロダクトをさわるとき 操作に詳しい⼈がずっと横にいて、操作を教えてくれるなどということはありません。 むしろ、誰の助けもなく、ひとりで使うのがふつうです。 誰も助けてはくれない 詳しい⼈はそばにいない
• 39.
  プロダクトはノーヒントで使ってもらう 39 プロダクトをユーザーに⾒せるときは、できるかぎり説明をしてはいけません。 与えてよいのは、ユーザーが使うときに現実的に得られるレベルの情報のみです。 （そして、ユーザーは想像以上に情報をもっていません。ユーザーはウェブサイトの説明⽂を読まず、マニュアルを読まず、 アプリストアの説明⽂も読まず、あなたのプロダクトにふれるものです）
• 40.
  プロダクトの説明でなくタスクをわたす 40 プロダクトをユーザーに使ってもらうときは、 説明をするのではなく、タスクをわたして、そのあとは黙ってじっと⾒守りましょう。 タスクとは、たとえば次のようなものです。 • 「このアプリを使って、今晩の献⽴を考えてみてください」 • 「このサービスを使って、健康診断を予約してみてください」 •「このサービスを使って、社員のうちメンタルケアが必要な⼈を⾒つけてください」
• 41.
  思っていることをひたすら話してもらう（発話思考法） 41 プロダクトをユーザーに使ってもらうときは、思っていることをひたすらしゃべり続けても らうようにしてもらいます。これを「発話思考法」と呼びます。黙って画⾯を操作され ると、観察している僕らから、ユーザーが何を考えているかがわからないからです。 ・・・と⾔われても、ユーザーはそのような⾏為に慣れていないため、なかなかうまくで きません。そこで⽻⼭は、ユーザビリティテストのオープニングのなかで「発話思考 のデモ」と「発話思考の練習」をするようにしています（後述）。
• 42.
  ユーザーが操作に詰まってあなたに質問したとき 42 ユーザーが操作に詰まって、あなたに質問をしても 「あなたが思うように使ってみてください」としか答えてはいけません。 なぜなら、現実にユーザーがプロダクトを使うとき、あなたはとなりにいないからです。 あなたが思うように 使ってみてください どう使うのよコレ あなたが思うように 使ってみてください
• 43.
  ユーザビリティテストの⾵景 43 マイクは インタビュー対象者と モデレーターの 両⽅の⾳声を 拾えるように（重要） ⼤⼈数で⾒る場合は プロジェクタや ⼤きめのディスプレイ を⽤意する ⾳声をしっかり 聞き取れる スピーカーを ⽤意する カメラの映像とマイクの⾳声を 傍聴する部屋に送る カメラ スピーカー プロジェクタ ⼜は ⼤きめの ディスプレイ パソコン インタビュー 対象者 モデレーター 傍聴者 調査を⾏う部屋 傍聴する部屋 操作画⾯をあとからも⾒返したいときは、 同時に、画⾯の録画もしてください。 マイク パソコン カメラは、以下がしっかり映 るように︓ 1.インタビューの場合、 ユーザーの表情が映 るように。 2. ユーザビリティテストの 場合、ユーザーの操 作画⾯。 スマホのテストのときは、 ⼿元が映せるように。 調査の会場は以下のとおり設営し、あらかじめ動作確認をします。
• 45.
  本⽇のユーザビリティテストの被験者注1 45 注1: ユーザビリティテストを受けていただく⽅を「被験者」と呼んでいいかどうかは業界内で議論があります。ユーザビリティテストはあくまでプロダクト を検証するものであり、ユーザーを試すものではないためです。そのため「被験者」という表現を避け、「インフォーマント（情報提供者）」 「モニター」 「協⼒者」 などの呼び⽅をするUXデザイナーもいます。本セミナーではわかりやすさを優先し「被験者」と表記しています。 1⼈⽬2⼈⽬ ⼤柳さん 平⼭さん
• 46.
  本⽇のユーザビリティテストの被験者 46 社会⼈何年⽬ですか 14年⽬ ご⾃⾝の英会話レベ ルはどれくらいですか ビジネス英語だと中級、⽇常会話は困らない、ビジネス英会 話もできるレベル 英語を勉強する理由 はなんですか ⼩学校から英会話をしているので、もう習慣になっている。 英語をマスターしたいというより⾃然と⽣活のなかにある。 話す機会が少なくなるとしゃべれなくなるので、レアジョブで機 会をつくる。 会社の福利厚⽣でレアジョブが半額で受けられる。 中学⾃体にオーストラリアの姉妹校に2週間ほどホームステイ した。 ふだんどのように英語 を勉強していますか レアジョブを週に1〜2回。アプリで「Words onWonder」 という英語ゲームアプリ、1⽇に2〜3時間やっちゃう。 TOEICが近づいてきたら⽂法アプリ。TOEICの公式問題集。 受験が近づいたら1⽇2時間は勉強する。 仕事で英語は使いま すか ⽇常的には使わないが、海外の関連会社とコミュニケーショ ンしたり、英語で営業資料をつくったり、外資系の会社の⽅ とコミュニケーションする。 英会話の資格はお持 ちですか 英検2級、TOEIC 795点。 マンガアプリは⾒ますか よく⾒る。スマホに何種類も⼊れている。 1⼈⽬ ⼤柳さん
• 47.
  本⽇のユーザビリティテストの被験者 47 2⼈⽬ 社会⼈何年⽬ですか 20年⽬ ご⾃⾝の英会話レベ ルはどれくらいですか カタコトの⽇常会話レベル 英語を勉強する理由 はなんですか 調べ物をしているときに、海外メディアの記事にあたることが 多いので、英語を読めるようになりたい。 ビジネスや旅⾏でも英会話を使っていきたい。 仕事として海外の会社としてのやりとりもあるが避け気味。 英語学習の⽬標を明確にするためTOEIC受験する予定 （11⽉を予定）。 ⾃分のなかの英語学習の優先度は割と低め。 ふだんどのように英語 を勉強していますか TOEICの点数が低く、語彙⼒が⾜りない。単語帳（⾦のフ レーズ・銀のフレーズ）を1⽇50〜100個を1週間やり、翌 週に復讐しながら次の50〜100をする。1⽇30分くらい。 仕事で英語は使いま すか 今は避けているので使っていない。海外メディアの記事は Google翻訳で読む。 英会話の資格はお持 ちですか TOEICは過去に1回受験し500点ほど。 マンガアプリは⾒ますか とくに読まない。 平⼭さん
• 48.
  英会話アプリ 「Langaku（ランガク）」 とは 48 英会話アプリ「Langaku」 は、「週刊少年ジャンプ」 作品をはじめ、誰もが知って いる⼈気マンガ30作品以上を、毎⽇英語で楽しむことで、英語の多読学習を実 現するアプリです。マンガに特化した機械学習（AI）技術を活⽤し、さまざまな英 語レベルのユーザーが、毎⽇楽しみながら続けられるようになっています。 https://langaku.app/
• 49.
  49 ユーザビリティテストのタスクを洗い出す
• 50.
  リサーチクエスチョンを明らかにする 50 まず「今回のユーザビリティテストをつうじて明らかにしたいこと」を決めます。これをリ サーチクエスチョンと呼びます。 リサーチクエスチョンはビジネス指標などから導かれることも多い（例: このページで コンバージョンするユーザーが少ないのはなぜか）ですが、前回までのセミナーでつく りあげたユーザー⼼理全体を⾒わたすことのできる価値マップがあるときは、価値 マップと⽐較して、ビジネス指標にもとづくユーザー⼼理が現在のプロダクトでどのよう に満たされているか／満たされていないかをもとにリサーチクエスチョンを定めると、的 確なユーザビリティテストができます。
• 51.
  51 この試験なら 合格できるんじゃ ないかと思う 実⽤ になる スキルを ⾝につけ たい ⾃分の スキルを 客観的に 証明したい 夢を かなえるため 資格がほしい 転職や就職を 有利にしたい 勉強の成果を すぐに実感したい 合格に結びつく 勉強⽅法が 知りたい 限られた 勉強時間で 合格したい 資格試験を受ける⼈の モチベーションの価値マップ
• 52.
  52 この試験なら 合格できるんじゃ ないかと思う 実⽤ になる スキルを ⾝につけ たい ⾃分の スキルを 客観的に 証明したい 夢を かなえるため 資格がほしい 転職や就職を 有利にしたい 勉強の成果を すぐに実感したい 合格に結びつく 勉強⽅法が 知りたい 限られた 勉強時間で 合格したい 資格試験を受ける⼈の モチベーションの価値マップ Langakuには そもそも 資格試験 対策コンテンツは ない ケーミフィケーション要素はあるが 成⻑実感に つながっているのか︖ ユーザーは どんなときに成⻑実感を 得るのか︖ 実⽤になる スキルが ⾝についている 実感があるか︖ Langakuには そもそも 資格試験 対策コンテンツは ない 効率よく勉強できる⽅法だと思って 課⾦してもらえるか︖
• 53.
  リサーチクエスチョンを明らかにする 53 価値マップと現在のプロダクトの⽐較から、今回のユーザビリティテストで明らかにし たいことを以下のように決めました。 現在のフロダクトで検証する項⽬: 1. 効率よく勉強できる⽅法だと思って課⾦してもらえるか︖ 2. ゲーミフィケーション要素はあるが成⻑実感につながっているのか︖ 3.ユーザーはどんなときに成⻑実感を得るのか︖ 4. 実⽤になるスキルが⾝についている実感はあるか︖ プロトタイプをつくって検証する項⽬: 5. Langakuに英会話の資格試験対策の要素を⼊れられないか︖
• 54.
  画⾯キャプチャを貼ったワイヤーフローをつくる 54 ユーザビリティテストでの気づきを書き込んだり、今からのユーザビリティテストの準備 をしやすくするため、画⾯キャプチャを貼ったワイヤーフローをつくります。 今回の検証に必要そうな全範囲の画⾯キャプチャを集めて流れにします。
• 55.
  今回のワイヤーフロー 55 今回のLangakuのユーザビリティテストでは、以下のようにFigmaでワイヤーフロー をつくりました。本セミナーでは以降、このデータにリアルタイムで書き込んでいきます。 https://bit.ly/3Uxp0Pz
• 56.
  ウォークスルー評価をする 56 リサーチクエスチョンを念頭に、UXデザインの専⾨家（あなたや同僚）がひととおり アプリを使ってみて、問題になりそうなところの⽬星をつけます。 効率よく勉強できる ⽅法だと思って 課⾦してもらえるか︖ ゲーミフィケーション要素は 成⻑実感につながっているのか︖ ユーザーはどんなときに 成⻑実感を得るのか︖ 実⽤になるスキルが ⾝についている 実感はあるか︖ 備考: プロトタイピングについては後述します。
• 57.
  ユーザビリティテストのタスクを洗い出す（1/2） 57 前述の課題ポイントをもとに、ユーザビリティテストのなかで被験者になにをしてもら えばリサーチクエスチョンの答えが得られるか考えます。 1. 効率よく勉強できる⽅法だと思って課⾦してもらえるか︖ いったん無料枠を使い切るところまで使ってもらい、 課⾦を促す画⾯を⾒たときに継続意向とその理由を訊く 2. ケーミフィケーション要素はあるが成⻑実感につながっているのか︖ 4.実⽤になるスキルが⾝についている実感はあるか︖ レベルアップしたとき、どんな感触を得たか訊く／読んだワード数についてどう感じるか訊く この2つはおおむね同じ画⾯に課題が集中していた。 トッフページのレベル表⽰／読書ログ／連続ログインの画⾯を⾒てもらい、どう感じるか訊く
• 58.
  ユーザビリティテストのタスクを洗い出す（2/2） 58 前述の課題ポイントをもとに、ユーザビリティテストのなかで被験者になにをしてもら えばリサーチクエスチョンの答えが得られるか考えます。 3. ユーザーはどんなときに成⻑実感を得るのか︖ （アプリからいったん離れて） そもそも過去の体験として英会話の学習で「⾃分は成⻑した」と感じたときは どんなときだったのか訊く リサーチクエスチョン【2】 【4】の回答をもとに（アプリからいったん離れて）そもそも そのユーザーが過去の体験として英会話の学習で「⾃分は成⻑した」と感じたときは どんなときだったのかをユーザーインタビューしないとわからない
• 59.
  タスクシートをつくる 59 前述の⽅針をもとに、被験者にとって⾃然なストーリーになるようにタスクを設計し ます。タスクはシートにして、被験者がつねに参照できるようにしておくとよいです。 ユーザビリティテストの途中で迷ったり⼤きく脱線したとき、タスクを忘れてしまう被験 者がいるためです。 タスクは1つあたり思いのほか時間がかかります。1時間で5個〜6個が⽬安です。 （なお今回のセミナーでは時間が限られるため、1⼈20分前後を想定）
• 60.
  今回のタスク（1/5） 60 前述の⽅針をもとに、今回のユーザビリティテストのタスクは次のようにしました。 Langaku というアプリをインストールしてください。 いったん無料枠を使い切るところまで使ってみてください。 使い切って、課⾦を求められる画⾯が出たら、 そこで⼿を⽌めてください。 タスク1:
• 61.
  今回のタスク（2/5） 61 前述の⽅針をもとに、今回のユーザビリティテストのタスクは次のようにしました。 いま課⾦をうながす画⾯が出ていますが、 どのように感じていますか。 タスク2:
• 62.
  今回のタスク（3/5） 62 前述の⽅針をもとに、今回のユーザビリティテストのタスクは次のようにしました。 ホームにもどってみてください。 レベルアップと読んだワード数が表⽰されていますが、 どのように感じますか。 また、先ほど「連続記録: 1⽇」という表⽰が出ていたのを 覚えていますか。 覚えていたら、それを⾒たときに感じたことを教えてください。 タスク3:
• 63.
  今回のタスク（4/5） 63 前述の⽅針をもとに、今回のユーザビリティテストのタスクは次のようにしました。 ホームの「読書ログを⾒る」ボタンをタップしてください。 表⽰された画⾯を⾒たり触って、どのように感じたか 教えてください。 タスク4:
• 64.
  今回のタスク（5/5） 64 前述の⽅針をもとに、今回のユーザビリティテストのタスクは次のようにしました。 （アプリからいったん離れて） ご⾃⾝の体験として、 英会話の学習で「⾃分は成⻑した」と感じた経験があれば それを教えてください。 タスク5:
• 65.
  タスクづくりのTIPS 65 今回はしていませんが、タスクシートに「タスクが終わったと思ったら、『タスクが終わり ました』と⾔ってください」と⼀⽂を⼊れておくテクニックがあります。タスクが完了したと き、被験者によっては黙って動かなくなってしまい、あなたから⾒て、タスクが終わった と思っているのか、まだなにか悩んでいるのか、区別がつかないためです。 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ タスクが終わったと思ったら、「タスクが終わりました」と⾔ってください。 タスク1:
• 66.
  タスクがひとつ終わるごとにふりかえりインタビューをする 66 タスクがひとつ終わったら、そのタスクのなかで被験者がとった⾏動について、意図を 深掘りしたり確認したいところについて、ふりかえりインタビューをします。回顧的イン タビューと呼びます。 この画⾯でずっと 下のほうを操作していました。 画⾯上部にバナーが 出ていたことに気がついて いましたか︖ えっ︕︖ まったく 気がついて いませんでした︕
• 67.
  ユーザビリティテストのタスクで誘導しない 67 認知バイアスは、油断するとユーザビリティテストのタスクにも影響します。無意識の うちに、ユーザーに「あなたが期待する答え」を⾔わせるようなタスクをつくってしまいま す。 （あなたに都合の よい答え）
• 68.
  バイアスは前提を与えるほど加速する 68 Aという状況 におかれて はい Bという課題 があったら はい Cという製品 便利ですよね はい この訊きかたで「いいえ」と いう⼈はあまりいない。
• 69.
  そのタスクはあなたのバイアスかもしれない 69 えっ︕︖ Aという状況 先⽉に何回ありました︖
• 71.
  前提をおきまくる⼈はたいてい怯えている 71 ⽻⼭の経験だと、 • プロダクトをつくった本⼈ • 「⾃分の仮説は正しい」と思っている⼈ •偉い役職にある⼈（とくにおっさん） ほど、前提をつけた質問（= 誘導しまくりの質問）をする傾向があるようです。 「⾃分がつくっているものが間違っているかもしれない」ことに 無意識に怯えている⼈ほど、説明や前提をおいてしまうようです。
• 72.
  ユーザーにひたすら説明をする⼈をやめさせる 72 ユーザビリティテストでプロダクトをユーザーに⾒せるとき そのプロダクトや機能がなんであるかをひたすら説明してしまう⼈がいます。 これも前提をおいているのと同じです。 このプロダクトは ・・・というもので この機能は ・・・のために使います
• 73.
  73 プロトタイプ（プロトタイピング）とは
• 74.
  プロトタイプ（プロトタイピング）とは 74 リサーチクエスチョンのうち 「Langakuに英会話の資格試験対策の要素を⼊れら れないか︖」は、現在、そのような機能はありません。かといって機能を実装して ユーザーの反応を⾒たのでは、うまくいかなかったときに無駄な投資になってしまいま す。そこで、紙芝居やハリボテのサンプル（プロトタイプ）をつくり、被験者にそれを 使ってもらって、実効性を検証することをプロトタイピングと呼びます。
• 75.
  プロトタイプの粒度で得られるフィードバックが変わる 75 プロトタイプは「どのくらい具体的につくり込むか」で、被験者から得られるフィードバッ クが変わります。無意識のうちに「どこまで前提を崩してよいか」を測ってしまうため。 紙とペンの⼿描き パワポのワイヤーフレーム Figmaで実画⾯そっくり そもそもまだなにをするか 検討レベルなんだろうな この機能をつくることは 決まってるんだな この画⾯が 前提なんだな そもそも こんな機能 使いません あなたのランキング 1位 もっと ランキングリストが ⾒たいです あなたのランキング 1位 このアイコンが わかりづらいです 無意識:無意識: 無意識:
• 76.
  そこのお前！ プロトタイプは得たいフィードバックが得られるようにつくるんだぜ
• 77.
  ハリボテのプロトタイプでどうやって検証するのか 77 紙とペンの⼿描きプロトタイプのように、ハリボテ感が強いものを被験者に⾒せるとき は、モデレーターが「紙芝居」をして⾔葉で補⾜します。「オズの魔法使い法」と呼び ます。 アプリを⽴ち上げると この画⾯が出てきました。 どうしますか? ここを タップします タップしたら この画⾯になりました。 どうしますか︖ うーん・・・
• 78.
  今回にプロトタイピングする内容 78 「Langaku」には、現時点では 「毎⽇楽しく英語を読む」ことに特化されているた め、英会話の資格試験の学習にむけた機能はありません。 そこで、価値マップを⾒ながら、次のような機能をプロトタイプとしてつくりました。 プロトタイプ1 リスニング⼒アッププロトタイプ2 語彙⼒アップ マンガの名シーンを読んだら、 続けて、 アニメの該当シーンを英語で観ることができる そのマンガを読んだら、 どれくらいTOEICの語彙⼒が上がるのかわかる
• 79.
  79 この試験なら 合格できるんじゃ ないかと思う 実⽤ になる スキルを ⾝につけ たい ⾃分の スキルを 客観的に 証明したい 夢を かなえるため 資格がほしい 転職や就職を 有利にしたい 勉強の成果を すぐに実感したい 合格に結びつく 勉強⽅法が 知りたい 限られた 勉強時間で 合格したい 資格試験を受ける⼈の モチベーションの価値マップ
• 80.
  80 この試験なら 合格できるんじゃ ないかと思う 実⽤ になる スキルを ⾝につけ たい ⾃分の スキルを 客観的に 証明したい 夢を かなえるため 資格がほしい 転職や就職を 有利にしたい 勉強の成果を すぐに実感したい 合格に結びつく 勉強⽅法が 知りたい 限られた 勉強時間で 合格したい 資格試験を受ける⼈の モチベーションの価値マップ マンガのなかで TOEICの頻出単語が強調される 頻出単語の含有数がわかる ⾃分がカバーした頻出単語がわかる 海外で放映された ⽇本アニメを ⽇本語字幕/英語字幕/ 字幕なしの 3モードで観れる
• 81.
  英会話の資格試験むけの「リスニング⼒」プロトタイプ 81 リーディングだけでなく、リスニングもできるようになりたい︕ • マンガの名シーンを読んだら、 続けて、海外で放映された⽇本アニメの該当 シーンを、英語⾳声で観ることができる。 •字幕は「⽇本語/英語/字幕なし」の3モードで観れる。 https://bit.ly/3SudZga
• 82.
  英会話の資格試験むけの「語彙⼒」プロトタイプ 82 そのマンガを読んだら、どれくらいTOEICの語彙⼒が上がるのか知りたい︕ • マンガを読みはじめるときに、TOEICの頻出単語の含有量がわかる。 • 読んでいるときに、TOEICの頻出単語が強調表⽰される。 •これまで読んだマンガと合わせて、⾃分がカバーした頻出単語の数がわかる。 https://bit.ly/3SudZga
• 83.
  英会話の資格試験むけのプロトタイプの全体像 83 https://bit.ly/3UDXsrR
• 84.
  タスクシートをつくる（調整） 84 「プロトタイプ」は 「SPY ×FAMILY」 で作成するので、タスク1も調整する Langaku というアプリをインストールしてください。 アプリで「SPY × FAMILY」 というマンガを読んでみてください。 いったん無料枠を使い切るところまで使ってみてください。 使い切って、課⾦を求められる画⾯が出たら、 そこで⼿を⽌めてください。 タスク1: 追加⾏
• 85.
  プロトタイプのタスク 85 プロトタイプのタスクを⽤意します。誘導にならないよう慎重に設計します。 https://bit.ly/3SudZga にアクセスしてください。 「SPY ×FAMILY」の • 第1話（2） • 第5話 を読んでください。 途中で出てきた画⾯について、どう感じますか。 また、タップしてみて、どのように感じたか教えてください。 タスク6:
• 86.
  プロトタイプのタスク 86 プロトタイプのタスクを⽤意します。誘導にならないよう慎重に設計します。 https://bit.ly/3SudZga にアクセスしてください。 アプリのホームにもどり、バナー「TOEIC試験」をタップしてください。 ホーム画⾯が変化しました。どう感じますか。 また、「SPY ×FAMILY」の • 第1話（2） を読んでみて、どのように感じたか教えてください。 タスク7:
• 87.
  今回のワイヤーフロー（最終形） 87 プロトタイプも加えた最終的なワイヤーフローは以下になりました。 https://bit.ly/3Uxp0Pz
• 88.
  88 ユーザビリティテストのプレテストをする
• 89.
  小 便 は す ま せ た か ？ 神 様 に お 祈 り は ？ 部 屋 の ス ミ で ガ タ ガ タ ふ る え て ユ ー ザ ビ リ テ ィ テ ス ト す る 心 の 準 備 は Ｏ Ｋ ？
• 90.
  プレテスト（ユーザビリティテストの練習）をしておく 90 社内や家族で、ユーザーに似た属性の⼈にお願いして 「プレテスト（ユーザビリティテストの練習）」をしておきましょう。 次のようなミスに事前に気がつくことができます。 • ユーザーの注意がまったく予想外のものに奪われる。 • ログインするためにメールアドレスが必要になる。 •テストの途中でクレジットカードが必要になる。 など・・・ユーザビリティテストの不備を本番前に洗い出しておくことができます。 ⽻⼭の経験では、アカウント登録のためのメールがキャリアの迷惑メールフィルタに 引っかかり、先にいっさい進めなかったことがあります。 問題になる箇所に対策や代案を⽤意しておきましょう。
• 91.
  プレテスト（ユーザビリティテストの練習）をしておく 91 今回のユーザビテリィテストをプレテストしたところ、以下の問題がありました。 • 時間が想定よりかかりすぎる（セミナー中に実施なので30分が限度） • アプリのインストールは事前にしてもらうことした。 •「第1話（3）」以降は⾶ばし読みするよう指⽰を⼊れた。 • タスクで読むように指⽰したマンガを探すのに⼿間取ったので、探す⽅法は タスクの教⽰に含めた。（今回のテスト対象ではないので） • プロトタイプで「動画をスキップ」する選択をユーザーができるようにした。 • とり得るユーザーニーズの想定もれ。
• 92.
  タスクシートの最終形（1/2） 92 タスクシートの最終形は以下になりました。
• 93.
  タスクシートの最終形（2/2） 93 タスクシートの最終形は以下になりました。 https://bit.ly/3ScFcnH
• 94.
  複数回のユーザビリティテストを1⽇にするときは注意 94 もし1⽇に複数回のユーザビリティテストを詰めていたときは、さらに注意が必要です。 あなたのアプリやWebサイトの設定を初期化したり、ログアウトしてブラウザのキャッ シュを削除したりします。とくにWebブラウザで操作履歴やクリック済みリンクが⾒え てしまうと、それがユーザーへの思わぬ誘導になってしまうことがあります。 ユーザビリティテストの準備は、対⾯の会議室でのほうがたいへんです。部屋の⽚づ け、アプリやブラウザの初期化、次のユーザーに渡す謝礼や事前アンケートシートを 並べ、飲み物やお菓⼦を補充し…と、30分あっても⼤わらわになります。
• 95.
  テスト中にトラブル︕ 焦らず堂々と対応する 95 ユーザビリティテストでは、⼊念な準備をしていても思わぬトラブルが起こります。「ト ラブルが起こってほしくないときほど、トラブルは起こる」とはよく⾔ったもので、「なんで このタイミングでこの問題が!?」というようなことが起こるものです。 前々回のセミナーで紹介したAさんとのインタビュー では、インタビュー終盤で、なんと⽻⼭のPCがフ リーズしてしまいました。オンラインのインタビューな ので、⽻⼭のPCがフリーズしたらAさんの画⾯は 真っ暗です。PCの再起動をしていたら数分間か かってしまいます。
• 96.
  テスト中にトラブル︕ 焦らず堂々と対応する 96 ⽻⼭︓なるほど。ピンクの問題集の⾳声ですね。ありがとうございます。机に座ってやるのは勉強… Aさん︓あれ? ちょっといいですか。 ⽻⼭︓⾳声聞こえてますか。 Aさん︓いや、すいません。ちょっと聞こえてなかったです。 ⽻⼭︓かしこまりました。 (ここで⽻⼭のPCがフリーズ。急きょスマートフォンから接続して再開。空⽩時間は30秒ほど) ⽻⼭︓…すいません。パソコンがちょっと固まっちゃったので、今、急きょスマートフォンで⼊りました。すい ません。ちょっとお待ちください。じゃあちょっと失礼して、このままスマートフォンで最後まで続けさせていた だきます。 Aさん︓了解です。 ⽻⼭︓今おっしゃっていただいた…。まず最初に考えていらっしゃった勉強法というのが、平⽇や休⽇に 問題を解き続けるということ、継続的にするということをされようと思っていた。それは、いつぐらいまで続い たんですか。
• 97.
  テスト中にトラブル︕ 焦らず堂々と対応する 97 ⽻⼭は急きょ、スマートフォンに切り替えて再開しました。 思ってもみなかったトラブルのとき、⼤切なのは「堂々としていること」です。内⼼で動 揺していても、ユーザーの前ではトラブルすらさも想定内であるかのように振る舞って ください。ユーザーにとって場のガイドはあなたです。あなたが挙動不審になったら ユーザーも不安になります。 ⽻⼭も、ユーザーが不安にならないように状況を伝えた上で、 堂々と対処して再開しました。
• 98.
  ドタキャンされることもある 98 あまり考えたくないことですが、どれほど⼊念に準備をし ても、直前になってユーザーが「ドタキャン」したり、約束 の時間に現れないこともあります。最悪の想定は、いつ も⼼に留めておきましょう。 また、対⾯のときは、会場までの道のりでユーザーが迷 ⼦になってしまうこともあります。⽻⼭は事前に携帯番 号を渡しておき、いざというときに電話連絡できるように しています。
• 99.
  99 ユーザビリティテスト 実査
• 100.
  こ の 瞬 間 を よ ォ と き !! “ ” 待 っ て た ぜ ェ !! “ ”