画面1枚プロトタイプ作成スキル
目的
コンセプトデザインで定義した「面白さの仮説」を最短で壊しに行くプロトタイプを作成する。
絶対に確認すること(3つだけ)
- 判断に迷いが生まれるか
- 選択→結果→学習が1分以内に回るか
- もう1回試したくなるか
プロトタイプの制約
画面に存在してよいもの
- 状態表示(HP / リソース)
- 選択肢(ボタン / カード)
- 結果表示(数値変化・ログ)
- リセットボタン
存在してはいけないもの
- マップ遷移
- 演出アニメーション
- 複数画面
- セーブ / ロード
ワークフロー
1. 状態設計
コンセプトデザインから以下を抽出:
- HP(プレイヤーの生存条件)
- 制約リソース(回数/エネルギー)
2. 選択肢設計
3〜5個の意味が明確に違う選択肢を定義。 詳細は references/action-design.md を参照。
3. 実装
assets/prototype-template.html をベースに実装。 技術選択は自由(HTML+JS、React、CLI等)。
4. 検証
プレイしながら自問:
- どの選択肢を押すか一瞬迷ったか?
- 毎回同じボタンを押していないか?
- 数値が減った理由を説明できるか?
YESが2つ以上 → 次の工程へ NOが多い → コンセプトデザインに戻る
完成基準
- 画面は1枚
- ルール説明なしでも触れる
- 5回くらい連続で試したくなる
- 3〜5分で1サイクル完了
Scan to join WeChat group