figma-prototype-plan

Figma プロトタイプ計画スキル

Figma で何をどのようにプロトタイプ化するかを計画します。ユーザーテストに必要な範囲に絞り、すべてのインタラクションを定義し、テストシナリオを設定します。作り込みすぎを防ぎ、プロトタイプで調査の問いに答えられるようにします。

必須入力

• 調査の問い（何を明らかにしようとしていますか？）
• プロトタイプ化する機能またはフロー
• プロトタイプの忠実度（低：ワイヤーフレーム／中：機能あり／高：ピクセル単位で忠実）
• テスト方法（対面でモデレーターあり／リモートでモデレーターあり／モデレーターなし）
• テストタスクの数

出力構成

1. プロトタイプの範囲

対象範囲： [実際に操作できるフロー — 具体的な画面を列挙] 対象外： [インタラクティブに作る価値がなく、静的表示にする画面] 根拠： プロトタイプは、仮説の検証に必要な最小限のものにします。

2. インタラクション仕様

インタラクション N：［説明］

• トリガー：タップ／スワイプ／ホバー／フォーム送信
• 要素：［Figma のレイヤー名］
• 遷移先：［Figma のフレーム名］
• アニメーション：即時／ディゾルブ／左へプッシュ／右へプッシュ／上へスライド
• タイミング：［ミリ秒］
• 後でリセット：はい／いいえ

3. プロトタイプのフロー図

[Start frame]
  -> Tap "Action"
[Next frame]
  -> Tap "Complete" -> [Success frame]
  -> Tap "Cancel"   -> [Back to start]

4. テストタスクのスクリプト

タスク N：［タイトル］

シナリオ（参加者に読み上げる）： 「［クリックする経路を指示せず、状況を伝える現実的なシナリオ］」

観察すること：

• ［注目する点］

成功条件：［具体的なトリガー］

5. Figma セットアップガイド

• 開始フレーム：［名前］
• デバイスプレビュー：［デバイス］
• プロトタイプ設定：背景色、デバイスを表示、種類
• 共有：閲覧可能なリンク、参加者ごとのリセット手順

6. 作成するものと見せかけるものの表

要素	作成	見せかける	備考
主要な CTA のフロー	はい		調査の中核
二次ナビゲーション		はい	テスト対象外
エラー状態	はい		復旧をテスト

品質チェック

• 範囲を調査の問いに必要なものに限定している
• すべてのインタラクションに遷移先フレーム名が指定されている
• タスクスクリプトがシナリオ形式になっている（「X をクリックする」ではない）
• 各タスクの成功条件が定義されている
• 参加者ごとのリセット手順が定義されている

アンチパターン

• すべてをプロトタイプ化しないでください。範囲は、具体的な調査の問いに答えるインタラクションに限定する必要があります
• テストタスクのスクリプトも作成せずにプロトタイプのフローを設計しないでください。両者は完全に一致させる必要があります
• 参加者ごとのリセット手順を省略しないでください。リセットされていないプロトタイプの状態は結果を汚染します
• どのインタラクションをクリック可能にし、どれを静的表示にするかを指定せずにプロトタイプを計画しないでください。曖昧さは範囲の拡大につながります
• 答えるべき調査の問いを定義する前に、プロトタイプの範囲を決めないでください

トリガーフレーズの例

• 「［機能］のユーザーテスト用に Figma プロトタイプを計画してください」
• 「このプロトタイプでは、どのインタラクションを作成する必要がありますか？」
• 「［調査の問い］に向けた Figma プロトタイプのセットアップを手伝ってください」
• 「［機能］のプロトタイプ用テストタスクのスクリプトを書いてください」
• 「プロトタイプ化するものと、静的画面のままにするものを教えてください」