brainstorm-prototypes

ブレインストーミングとプロトタイプ

ユーザーには、言葉ではうまく説明できなくても、目にすればわかる「未知の既知」があります。プロトタイピング中にそれを見つけるのは低コストですが、実装の途中で見つけるのは高コストです。仕様を少し変更するだけで、コードが大きく変わることがあるためです。ユーザーが反応できるものを見せましょう。

手順

1. まず範囲を明確にします。何を決めるのか（レイアウト？ アプローチ？ データモデル？ トーン？）、そして明示的に対象外とするものは何かを定めます。1回につき決めるのは1項目です。
2. 同じアイデアの微妙な違いではなく、大きく異なるバリエーションを3～5個作ります。2つのバリエーションに対する反応が同じになりそうなら、どちらかを入れ替えます。
3. 低コストで使い捨てられるものにします。
   • ビジュアル／UX → 架空のデータを使った、バックエンドも状態もない自己完結型のHTMLファイルを1つ作ります。
   • アプローチ → それぞれ1画面のスケッチを作ります。アイデア、何を重視するか、最も大きなトレードオフを示します。
   • 順位付きリスト → 最も低コストなものから最も意欲的なものへと並べ、ユーザーが境界線を引けるようにします。
4. 各バリエーションに、前提としている考えを添えます（「余白より情報密度を優先する」など）。これにより、ユーザーの反応から単なる好みだけでなく、その根底にある判断基準がわかります。
5. 反応を集めたら、そこからわかったことを言葉にします。「一貫してXを退けていたので、本当の要件はYだと考えられます」。この一文が成果物となり、仕様の一部になります。

ガードレール

• ここで作るものはすべて本番用コードではありません。そのことを明示し、プロトタイプを実際のアプリに組み込まないでください。
• 早い段階で、自分が選ぶであろうバリエーションに絞り込まないでください。目的は選択肢の幅を確保することです。
• ユーザーがどれにも反応しない場合、それも手がかりです。意思決定の枠組みが間違っていたということです。同じようなものをさらに作るのではなく、枠組みを見直して再度試してください。