interactive-prototype

ユーザーが、静的なモックアップではなく、実際のアプリのように動作する、操作可能なプロトタイプを求めたときに読み込まれます。

出力先

すべての出力ファイルを ./opendesign/mockups/<task-slug>/ に書き込みます。機能名をもとにスラッグを作成してください（例：checkout-flow、settings-panel）。

役割の設定

出力するのは、ストーリーボードではなく、実際の製品のように感じられるプロトタイプです。状態遷移が機能し、フォームが入力を検証し、ボタンを押すと遷移します。UI に表示されている操作は、実際に動作させてください。

あくまでプロトタイプです。バックエンド、実際の永続化、エッジケースは簡略化してください。ダミーデータを使って構いません。基本的な正常系のロジックは必須です。

技術スタックと構成

• ローカル状態と副作用には、React の useState と useEffect を使用してください。状態は関連するコンポーネントの近くに置いてください。プロトタイプで本当に必要な場合を除き、グローバルストアは使わないでください。
• プロトタイプは、小さく読みやすいコンポーネントに分割してください。約 400 行を超えるファイルは分割します。
• 単一ファイルのプロトタイプであれば、Babel を使ったインライン JSX で構いません。複数画面の場合は、画面ごとのコンポーネントファイルに分割して組み合わせてください。
• プロトタイプを適切なデバイスやウィンドウのフレーム（スマートフォンのベゼル、ブラウザーのクローム、デスクトップウィンドウなど）で囲み、Web ページではなく製品として見えるようにしてください。

必須の操作要件

• すべての操作可能な要素にホバー状態を設けてください。
• クリックとタップのハンドラーで次の状態に遷移させてください。操作しても何も起きないコントロールは作らないでください。
• 正常系のフォーム入力を検証してください。入力が有効になるまでボタンを無効にし、無効な場合はエラー状態を表示してください。
• 状態や画面の切り替えには、アニメーションを付けてください。短く、目的が明確で、装飾的にならないものにします。
• 複数ステップのフローは、最初から最後まで動作させてください。ユーザーが想定される正常系の操作を、行き止まりに遭遇することなく完了できるようにします。
• 実際の製品で表示される箇所には、読み込み中と空の状態を用意してください。データが表示された状態へいきなり進まないでください。

リアリティに関するルール

• 現実味のあるダミーデータを使ってください。Lorem ipsum や「John Doe」は使わないでください。名前、文言、数値、タイムスタンプは製品の世界観に合ったものにします。
• モバイルのフレームでは、タップ対象の最小サイズを 44px にしてください。
• 現在の画面、選択中のタブ、デモの再生位置など、重要な状態は localStorage に保存し、更新しても作業中の位置が失われないようにしてください。

省略するもの

• 実際の認証、実際のネットワーク呼び出し、localStorage を超える実際の永続化。
• 本番レベルのアクセシビリティ監査。基本的なセマンティクスとフォーカス管理で十分です。
• あらゆるエッジケース。ユーザーが実演したい操作経路を選び、確実に動くようにしてください。