📖 テーマ設定
🔊 音声設定
1.2
1.0
1.0
▶️ 再生コントロール
🎵 BGM設定
0.3
🔔 効果音設定
0.3

プロトタイプ作成(後半)と相互レビュー

概要

  • 日程: Day 10 / セッション 3
  • 時間: 11:10-12:40(90分)
  • 形式: 実習(ハンズオン実習、AIサポートあり、相互レビュー)
  • ゴール:
    • 行動: 画面遷移図の通りに遷移するプロトタイプを完成させ、他チームのレビューで指摘を得て改善点を特定できる
    • 条件: 他チームに「ペルソナになりきって」操作してもらいながら
    • 基準: 90分以内に、(1)全主要画面が遷移で繋がっている、(2)他チームから指摘1件以上を得る、(3)改善タスクをかんばんに登録する
  • 学習形式: AI協働型(ハンズオン実習、相互レビュー)

導入(5分)

前のセッションで、画面の枠組みができました。ここからやることは2つ。

  1. 画面遷移図の通りに「繋ぐ」 — ボタンを押すと次の画面に行く、という動きを実装
  2. 他チームに見せてレビューをもらう — 自分たちでは気付かない盲点を発見

特に2番が大事。自分の作ったものは、自分には欠点が見えません。料理を作った本人は味見しすぎて「もう何が美味しいか分からない」状態になります。プロトタイプも同じ。他者の目を通すことで、初めて改善点が見えます

合言葉。

「ペルソナになりきって、迷う場所を記録する」

本編(10分)

1. 遷移の繋ぎ込み手順

各ボタン・リンクに「どの画面に行くか」を設定していきます。

flowchart LR A["画面遷移図""uot;"] --|確認|--> B["各画面のボタンを抽出"]を抽出"] B --|1つずつ繋ぐ|--> C["ボタンに遷移先画面を設定"] C -- "繋いだら通し操作" --> D["想定通りか確認"]

ツール別の繋ぎ方の概念。

ツール 遷移の繋ぎ方
figma プロトタイプモードで、要素から要素へ矢印を引く
Atomic / Fluid インタラクション設定でリンクを定義
NinjaMock ボタンに「リンク先ページ」プロパティを設定
ページの隅に「次は#3ページへ」と書いてめくる
Bubble ワークフロー設定で「Go to page」アクションを追加

ここがポイント

遷移を全部繋ぐ前に1本通す。最も重要な経路(ペルソナがCJM上で必ず通る経路)を最初に繋ぎ、動くことを確認してから残りに広げます。


2. 相互レビューの進め方

レビューはペアまたは小グループで行います。本研修では2チーム1組のペアにします。

flowchart TD A["レビュー開始(チームA→チームB)"] --> B["タスク提示(チームAから)"] B --> C["無言観察(チームBが操作)"] C --> D["振り返り質問"] D --> E["フィードバック交換"] E --> F["役割交代(チームB→チームA)"]

各ステップの時間と内容。

ステップ 時間 内容
① タスク提示 2分 「ペルソナの〇〇さんとして、〜したいので操作してください」
② 無言観察 5分 操作してもらう間、作り手は一切口出し禁止。困っている様子を観察
③ 振り返り質問 3分 「どこで迷いましたか?」「次に何をしようと思いましたか?」
④ フィードバック 5分 良い点・改善点を伝える
役割交代 (15分1セット) 次は逆方向

ここがポイント

最大のコツは**「無言観察」の5分**。作り手はつい「あ、それは右上のボタンです」と言いたくなります。言ったら負け。黙って観察するからこそ「ここで迷う」がわかります。

コラム

ユーザビリティテストの第一人者ヤコブ・ニールセンは、「5人ユーザに使ってもらえば、ユーザビリティ問題の85%が見つかる」と言っています。何十人も呼ぶ必要はなく、少人数で良いから観察することが大事。本研修の相互レビューも、同じ思想です。1ペアの観察でも、自分たちでは見つけられなかった問題が驚くほど出てきます。


3. レビュー記録テンプレート

観察結果はテンプレートで記録します。

画面ID ペルソナの操作 迷い度 何で迷ったか 改善案 優先度
S003 予約一覧から1件選ぶ どこをクリックすれば詳細に行くか不明(行全体?日付?) 「詳細を見る」ボタンを明示
S005 予約をキャンセル キャンセルボタンが見つからない(画面下) ボタンを上部に移動
S004 新規予約を入力 日付入力がカレンダーかテキストか分からない カレンダーアイコンを追加

ここがポイント

優先度をつけて**「全部対応する必要はない」**ことを明確に。Day14中間発表までに改善する余裕は限られています。高優先度から対応。中・低は実装スプリント中に取り組みます。


4. レビュー時の伝え方

「人ではなく成果物にフィードバックする」「良い点も必ず伝える」の原則を守ります。

NG例 OK例
「君のこの画面はわかりにくい」 「この画面で、次にどこをクリックすればよいか迷いました」
「ここダメだね」 「ここはこういう改善案があると、もっと使いやすくなりそうです」
(改善点だけを伝える) 「全体的にシンプルで使いやすかった。特にホーム画面は分かりやすかったです。一方で、詳細画面では…」

ここがポイント

レビューはチームの実力差ではなく、成果物の改善余地を見つける場。お互いに敬意を持って、事実ベースで伝えましょう。


5. AIによるセルフレビュー

他チームに見せる前に、AIにペルソナ役を演じてもらってセルフレビューします。

AIへの依頼例。

「あなたは私たちのペルソナ『田中花子(30代女性、子育て中、平日昼間に時間がある)』です。これから私たちのプロトタイプの画面遷移を説明しますので、彼女の立場で『迷う場所』『使いにくい場所』を指摘してください」

セルフレビューで明らかな問題を潰してから、他チームレビューに臨むとより深い指摘が得られます

実習・演習(70分)

全体の流れ

時間 やること
0-25分 画面遷移の繋ぎ込み(前半セッションの続き)
25-30分 AIによるセルフレビュー
30-35分 自チーム内で通し動作確認、明らかな不具合を修正
35-65分 他チームとの相互レビュー(15分×2セット)
65-70分 フィードバックをかんばんのタスクに変換

課題

課題1: プロトタイプの完成

画面遷移図の通りに、すべての主要画面が遷移で繋がっているプロトタイプを完成させる。

課題2: 相互レビューの実施

他チームとペアになり、相互にレビューを実施。各チーム最低1件以上の指摘を受ける/出す。

課題3: 改善タスクの登録

得たフィードバックを、優先度をつけてかんばんに「改善タスク」として登録する。

成果物

  • 画面遷移図の通りに遷移するプロトタイプ(一連の操作が止まらずに最後まで動く)
  • レビュー記録(テンプレート形式、最低1件のペルソナの迷いを記載)
  • かんばんに追加された改善タスク(最低1件、優先度つき)

ヒント

  • 最重要経路を最初に繋ぐ。CJM(To-Be版)の主要シナリオが動けば、最低限のプロトタイプとして成立
  • 繋ぎ込み中にミスした遷移は、付箋に書いて後で直す(中断して直さない)
  • セルフレビューで「明らかな迷い箇所」を先に潰す
  • 相互レビューはペルソナの設定をきちんと共有してから始める(「30代女性、IT初心者」など)
  • 受け取ったフィードバックを全部対応しようとしない。優先度の高いものに絞る勇気

AIへの問いかけ例

  • 「あなたはペルソナ〇〇さんです。次の画面遷移を見て、どこで迷うかを指摘してください」
  • 「相互レビューで他チームから『〜が分かりにくい』と言われました。よくある改善パターンを3つ教えてください」
  • 「明日からの実装スプリントで、レビューで出た改善タスクの優先順位の付け方を教えてください」

レビューチェックリスト(受ける側)

  • ペルソナ設定を相手に説明した
  • 操作タスク(〜したい)を明示した
  • 操作中は口出ししなかった
  • 観察した「迷い」を記録した
  • 良い点も必ず伝えた
  • レビュー記録テンプレートに記入した
  • 高優先度の改善タスクをかんばんに追加した

まとめ(5分)

このセッションでは、プロトタイプを完成させ、相互レビューを通じて改善点を発見しました。

明日からの実装スプリント(Day11-17)で意識すること。

  • このプロトタイプが「動く設計書」。実装の北極星になる
  • レビューで出た改善タスクは、かんばんに入って通常タスクと同じ優先度判断にかける
  • プロトタイプを更新したら、画面仕様書も更新する(ドキュメントドリフト防止)

22日間の研修のうち、ここまでが「設計と試作」のフェーズです。明日からはいよいよコードを書いて動くものを作ります。プロトタイプは捨ててOKですが、プロトタイプで得た学び(特にレビューでの気づき)は実装に活かしましょう。

最後に、完成したプロトタイプをチームで通し操作してみてください(話す&行う)。「最初の画面から最後まで、止まらず操作できる」ことを全員で確認できれば、Day10は成功です。

🔄 振り返りチェック

以下の問いに答えられるか確認してみましょう。

  • プロトタイプの相互レビューで「無言観察」が重要なのはなぜですか?
  • 良いフィードバックの伝え方には、どんなコツがありますか?
  • レビューで出た指摘をすべて対応しないのはなぜですか?

答えに自信がない場合は、該当部分を読み返すか、AIに質問してみてください。

補足資料

  • 関連用語: ユーザビリティテスト、ヤコブ・ニールセン、ヒューリスティック評価
  • 発展課題: 同じプロトタイプを、別のペルソナ視点でもう一度レビューしてみる(「ITが苦手な60代」「忙しいビジネスパーソン」など)
  • 参考: 明日からの実装スプリント(Day11-17)で、このプロトタイプを設計書として使います

学習ガイド

想定される質問と回答例

質問 ヒント
全画面の遷移を繋ぐ時間がありません 最重要経路(CJMで最も使うルート)から繋ぐ。残りは実装スプリント中に繋いでも可
他チームから厳しい指摘をたくさん受けました。落ち込みます 厳しい指摘は「価値ある情報」。本番リリース後にユーザに言われたら手遅れですが、今なら間に合います。むしろ感謝の機会
レビューで自分たちの指摘がうまく伝わりません 「事実」「感想」「提案」を分けて伝える。「ボタンを2回押した(事実)→分かりにくく感じた(感想)→ラベル変更を提案します(提案)」
プロトタイプと実装がずれそうです プロトタイプを「変更ログ」とともに更新する。変更があるたびに画面仕様書も更新(合意した内容の変更は事前報告)
改善タスクが多すぎてどれをやるか決められません 「ペルソナがゴールに到達できるか」を基準に取捨選択。装飾的な改善は後回し

つまずきやすいポイント

つまずきポイント ヒント
遷移の繋ぎ込みに集中しすぎてレビュー時間が削られる 「Doneより検証」の発想に切り替える。最重要経路だけ繋いでレビューに進む
レビュー中に作り手が口を出してしまう 隣の人が監視役になり、口を出しそうになったら止める。観察に徹する
ネガティブな指摘ばかりになる 良い点を最低1つ言ってから改善点に入るルールを設ける
全フィードバックに対応しようとして実装スケジュールを圧迫 優先度高のみ対応、中以下は「実装後の改善候補」リストへ
プロトタイプを実装の正解だと思い込んで動かなくなる プロトタイプは仮説。実装中に「やはり違う」と気付いたら、設計書ごと更新する勇気を
読み上げを開始します...

AIに質問する