stageshow は何をしますか？
ミニチュア製品UI：信頼性のあるインターフェースを、その空間に収め、1つの静止画、または1つの動作が起こる短いアニメーションとして表現します。見る人は画面を認識し、その動作を理解します。
たった一つのアイデア
それは、実際の製品として読まれ、視聴者が必要とするものだけに簡略化され、意図を持ってフレームされ、すべての動きに理由があることです。
失敗する5つのパターン：
- やりすぎ。 すべての行に実際のテキスト、あらゆる場所に数字、すべてが詰め込まれている。詳細が多ければ多いほど、生成されたように見えます。
- ワイヤーフレーム。 灰色の2つの塊とボタン。小さすぎる、または認識可能だった要素が削ぎ落とされている。
- 箱詰め。 ウィンドウ全体が均等な余白でカードに縮められている：貼り付けられたスクリーンショットであり、プロダクトショットではありません。
- 平面的。 すべてのオブジェクトが同じ枠線のカード内で同じ重みを持つ。視線の着地点がありません。
- 退屈。 灰色のウィンドウにカーソル、要件が何であれ。要件のルック＆フィール（青写真、色上のガラス、Dynamic Island、マスコット）が肝心です。それを取り入れてルールに従って構築しましょう。
examples/hero-demoが、タイプされるポップアップとターミナルサテライト（サテライトとは、レシート、電話、詳細カードなど、ヒーローの端にまたがる、より小さな2つ目のオブジェクトです）で行っているように。
修正方法：静かなグレーで構成された、完全で構造化された画面。ストーリーの対象となる部分にのみ実際の単語を使用し、残りはプレースホルダーの行。余白を持たせ、視線をストーリーに集中させるクロップ。単語を簡略化し、コンテキストは残す。空の隅、リストの下の空白、ペインを埋めるために広げられた行、プレート（その背後にある背景や色付きフィールド）に浮かぶウィンドウ：未完成であり、落ち着いていない。
これらは、ブラウザの自動化ではなく、作成者が手掛けるイラストです：a.click() はカーソルが押す動作を描き、a.set() はシーンを変更します。
どこまで作り込むか
プロダクトデザイナーが、評価されるローンチページを構築するのと同じ方法で構築します。examples/ のゴールド例が基準です。あなたの作品が最も近いゴールド例と比べて、より空っぽで、平坦で、小さければ、それが最初の修正点です。次に、あなたが知る中で最も厳しいデザイナー、つまり間違ったことをスクリーンショットして「これは何だ？」と送り返してくる人のようにフレームを見てください：アバターから外れた点、単独の行にある単位、Dynamic Islandの下のグラバー、カードに触れるコピー。そのスクリーンショットが想像できれば、次の修正点が見つかっています。
ワークフロー
品質のほとんどは、コードを書く前に決まります。最初に計画を書きましょう。どこに配置するか、焦点となるオブジェクト、アクション、結果、何を省略できるか。
- 媒体と場所。 静止画またはアニメーション（ループ、一度ビューに入ったら、またはホバー）。ページ、その背景、その幅。表示されるサイズでデザインします。コピーと並ぶヒーロー（
hero-demo）の場合は約720×340、全幅ヒーロー（linear）の場合は900～1100幅、カードの場合は400×300、1:1で表示。デモの場合は約320幅を下回らないこと。ただし、ベントータイルやサテライトカードはこれより小さくてもかまいません。電話のカラムに収まるすべてのデモは、そのカラムの幅（358）に合わせたcompactデザインを提供します。これは単なる縮小ではなく再設計です（references/framing.md、Small formats and the page）。タイルのグリッドは1つのセットとして計画します：references/bento.mdを参照。 - ルック。 製品のコードやサイトを手元に置き、そのトークンをキットのトークン（
references/looks.md）にマッピングします。開発者が独自のコンポーネントを要求した場合は、キットの小さな部品の代わりにステージ内でそれらを使用します。それ以外の場合は、テーマ（ライト、ダーク、青写真、ガラス）、パレット（アクセント、モノ）、および忠実度を選択します。minimalはすべてバー、standardは意味を持つ場所に単語、それ以外はバー、realisticはすべて実際のコンテンツ。デフォルトはライト、アクセント、standard。ヒーロースケール、名前付きの実際の製品、またはリストやページを主題とする静止画の場合はrealisticにします。フィラーはText fillerで一度書き、忠実度で決定します。製品独自のアイコン、実際のクローム、それを認識可能にするコンテンツ。スタイル（かわいい、紙、ポスターカラー）を持つ要件は、そのスタイルを完全に採用し、それでもこれらのルールに従って構築します。 - ストーリー。 その形状（
references/motion.md、Story）：使い心地、フロー、またはシステムが行うこと。3～5ビートと結果、10～16秒。説明できないカーソルの動きは禁止。データが視界内で理由なく巻き戻されることはありません。より豊かなストーリーとより落ち着いたフレームの間では、フレームを選びます。 - 例から始める。 最も近いゴールド例（下のGoldの表）を見つけ、それを録画します（
node scripts/film.mjs "<preview>/?capture=<gold>" --select '#example' --still --out gold.png；npm run devでプレビューが起動します）。そのフォルダをプロジェクトにコピーし、開始点とします。一目で書き直さないでください。最も迅速なループ：ここでexamples/<yours>/にコピーします。プレビューがそれを拾い、?capture=<yours>で録画します。その後、テストに合格したらホストに移動し、キットのインポートパスを修正します。構造を維持する：ステージサイズ、クロップとブリード、行とタイプのサイズ、スペーシング、スクリプトのビート、キットパーツ。次に、references/craft.mdをすべて読みます。短く、ゴールド例では示せない静止画ルール、あなたのゴールド例にたまたま含まれていないケースが書かれています。その後、そのルックとコンテンツを要件の製品のものに置き換えます：ステップ2からのトークン、製品独自のアイコン、クローム、単語。名前だけを変更したコピーは完成ではありません。要件の製品として読まれるべきであり、ゴールド例の製品としてではありません。どのゴールド例もあなたのストーリーを語っていない場合、2つの部分で選択します：最初にレイアウト（references/framing.mdの表から選択。各レイアウトはその例を命名しています。）、ストーリーが異なっていてもその例をコピーします。次に、ストーリーが最も近い例からあなたのビートのための動きを借用し、どちらにもないものを同じスタイルで構築します。次に、フレーミング：ストーリーが展開されるパネルにクロップし、最終的な表示クロップで判断します（references/framing.mdにルールとレイアウト表があります）。簡潔な形式：1つのガター、完全なガター、またはそれを超える。フィラーのみがはみ出す。開いたものはそのまま残る。ウィンドウは形状を保つ。ページが地面であるため、白または暗いページ上のヒーローの下にプレートはなく、四方に余白のある完全なウィンドウもない。unframedは開発者が要求した場合のみ。デッドコーナーなし。両方の幅で1枚の静止画を、ゴールド例の隣で録画します。あなたのものがより空っぽで、平坦で、箱詰めであれば、動きの前にフレームを修正します。 - 画面。 実際の文字列を数えます。通常は3～7（
references/craft.md、Restraint）：要素ではなく単語の予算。キットのトークン、Bar、Text、Rowを使用して構築します。すべてのコントロールのテキストを、それが動く前に収めます。カーソルが触れるものをdata-targetとdata-cursorでマークします。rect()で測定し、ハードコードは禁止。 - 振り付け。
ActAPI。マウントされたままに見えるものを維持し、終了アニメーションのためにトグルします（BubbleとFlyは明示的にハンドオフします）。オブジェクトだけでなく、関係性をアニメーション化します。新しい行はその下の行を運び、リサイズするサーフェスはそのテキストを引き伸ばしません。ビートはオーバーラップし、グループはスタッガーし、結果は保持され、ループは開始した場所で終了するか、目に見える原因でリセットされます。 - リハーサル。 最初に
posterを設定します。ほとんどの人はそのフレームだけを見ます（サムネイル、動作の縮小、スクリーンショット）。そのため、それはそれ自体でストーリーを語るビートであり、変更途中のものではなく、結果が画面上に残され、片付けられていないものにします（references/motion.md、Story）。次に、静止画だけでなくループも録画します。表示されている幅と390での連続写真を作成し、すべてのプレス、メニュー、モーフ、ループの継ぎ目をステップ実行します（references/rehearse.md）。静止画ではポップは表示できません。すべてのフレームを読み、最も大きな目に見える欠陥から修正します（フレーミング、次に階層、次に動き、次にポリッシュ）、再録画。次に、それを最も近いゴールド例の隣に置き、references/teaching.mdの全体構成とスタイルのペアについて、あなたの静止画に関する質問として答えます（視線が最初に着くのはどこか、そしてそれは結果か？ 1つのウィンドウ、タイル、またはデバイスが明確にリードしているか？）。「いいえ」が最も大きな欠陥です。film.mjs --gateがrehearsal passedで終了することは、必要条件であり、十分条件ではありません。次に、references/rehearse.mdの最後のパスを実行します。新鮮な目のレビュー（references/review.md）と、コンポーネントの隣にあるREHEARSAL.md（テンプレートはreferences/verify.md、Hand over）。コピーしたゴールド例、変更点、確認しなかった点。
毎回繰り返される欠陥とそのルール。引き渡す前に確認してください：
- スワップするコンテンツ 移動する代わりに（
references/motion.md、Changing text and values）。 - 視線が着く灰色のバー。 フィラーは端に属します（
references/craft.md、Restraint）。 - ウィンドウの背後にあるプレート、または四方に余白のある浮遊ウィンドウ。 ウィンドウまたは電話はステージの少なくとも3分の2を占め、端まで達しているか、エッジにかかっている（
references/framing.md、rule 5 and Small formats and the page）。 - 空の帯、カットされたコントロール、シャドウ（
references/craft.md、Restraint;references/framing.md、rule 4）。 - ストックAIやでっち上げのロゴ。 キラキラ、紫、色付きの四角の中の文字（
references/craft.md、Icons and logos）。 - 込み入った行と不均一なインセット（
references/craft.md、Restraint and Spacing and alignment）。 - 長いホールドと原因のないリセット（
references/motion.md、Loops）。 - Iビームの下にない選択範囲（
references/motion.md、Drags and selection）。 - 手描きのステータスバーやホームインジケーター。 Phoneは両方を描画します（
references/craft.md、Chrome and devices）。 - 中央揃えされた金額がその記号と共に中央揃えされている（
references/craft.md、Spacing and alignment）。
例
開始する前に最も近いものを録画します（ステップ4）。ゴールド例は品質の基準です。プロダクトスタディは、インタラクションを借用するためのものであり、決して別の製品のアイデンティティを借用するためのものではありません。標本シートはカタログであり、構成ではありません。すべてを npm install と npm run dev で実行します。teaching/ には、問題を診断するための悪い/良いペア（references/teaching.md）が含まれています。悪い半分は決して開始点にしてはいけません。
Gold
| ニーズ | 例 | 学ぶべきこと |
|---|---|---|
| 静止画または機能カード | static-card | 静かな階層、ハードクロップ、1つのサテライト、選択された顧客、その隣接、および合計にのみ実際の単語 |
| ダークな静止画 | dark-bento | 1つのシグナルを1回だけ伝える。アルバムアートが音楽アプリであることを示す |
| アニメーションヒーロー、ジェスチャー | hero-demo | 5ビート、名前付きターゲット、アノテーション、前方に出てくるターミナル |
| 振り付け、カーソルなし | payout-flow | ゆっくりと重なる到着、読み時間、保持される結果 |
| その場で変化するコンテンツ | choreography | 保持されたトラック、ソフトマスク、依存するタイミング |
| AI回答 | ai-chat | 送信された質問、思考中、高さと共にストリーミングされる回答、最後にソース。キラキラなし、紫なし |
| AIとカード | ai-cards | 回答されレコードとして保持される多肢選択カード、スレッド内で開くオプションのカード、自身のボタンから予約される |
| フォームバリデーション | form-error | 原因となったフィールドのエラー、修正によるクリア、その後ボタンが自身で確認 |
| ドラッグして並べ替え | reorder | グリップで持ち上げられた行、他の行がスペースを作り、所定の位置にドロップ |
| チャートスクラブ | chart-scrub | ポインターを追従するヘアラインとドット、その日の下でロールするヘッドライン値 |
| テーブル内の編集 | table-edit | その場で編集されるセル、その後それが供給する合計が1ビート遅れてロール |
| ローディングからコンテンツへ | loading | コンテンツ自身の形状のスケルトン、上から下に解決される行、全体を通して実際のクローム |
| ダークヒーロー | dark-hero | 黒の上でのサーフェスステップによる奥行き、1つの色付きカラー、独自のピルで変化するステータス |
| ライブ共同編集者 | presence | 各人物がどこでも1つの色、カーソルに乗る名前、ドキュメント自身のマークで示される作業 |
| システムストーリー | subscriptions | チップが行に飛び込み、MRRがロールし、2つ目のシーンがリセット |
| クローズアップ | close-up | ウィンドウのクロームと共に1.4倍の1つのコントロール、行全体、一致する大きなカーソル |
| 多くのうちの1つ | many-of-one | すべての端からはみ出す1つのもののグリッド、奥行きによって焦点が合う1つのタイル、単語を持つ唯一のもの |
| フェードクロップ | fade-crop | 端からはみ出す代わりに、フィラーの上で、その足元でフェードアウトするウィンドウ |
| 製品上のパネル | panel-annotation | 製品のマージン上の設定パネル、設定から変更されたものへの1つのリーダー |
| 重なるウィンドウ | overlap | ウィンドウの前にあるカード、その端がウィンドウのサイドバーライン上にある |
| 積み重ねられたカード | stacked-cards | 1つの幅の2つのコンポーネント、小さなギャップ、下部のものは底からはみ出している |
| 反対側の角 | opposite-corners | ベントータイル：左下にコピー、右上隅から吊り下げられた製品 |
| 傾いたスタック | tilted-stack | 紙のゆるい山、小さな交互の角度、一番上のカードのみに単語がある |
| コーナーチップ | corner-chip | ウィンドウの角に中央揃えされた小さなチップ、半分は外側 |
| モノクローム | monochrome | 他社の製品を並べたもの、グレースケール、足元でフェード |
| ウィンドウの列 | window-row | 1つの高さで並んだセッション：奥行きによる焦点、ステージによってカットされた隣接、クロップされたのはフィラーのみ |
| ウィンドウと電話 | device-pair | 1つのイベントを伝えるダッシュボードとロック画面。電話はマージンにまたがり、決してフィギュアの上にはない |
| 関連オブジェクト | story | 請求書、計画、コネクタ、ロールする合計 |
| カレンダードラッグ | calendar | 埋められた週、1つの焦点イベント、測定されたピックアップ |
| フリードラッグ | freeform-drag | グラブオフセット、測定されたグリッド、スナップするドロップスロット |
| 電話アプリ | phone-touch | カードが1つのオブジェクトとして画面に開き、ループが折り返す |
| Dynamic Island | dynamic-island | 1つの黒い形状、そのコンテンツは別のレイヤー |
| メッセージ | messages | コンポーザー、タイピング、レシート、バブルのライフタイム |
| カーソル | cursors、cursor-morph、cursor-resize | 5つのスタイル、要素駆動の種類、リサイズの端と角、カーソルなし |
| アノテーション | annotations | リーダー、寸法、フロー、動くターゲット；references/annotations.md |
| 機能グリッド | bento | 1つのヒーロー、1つのウィンドウ、1つの統計、1つのオブジェクト、1つの図 |
| ダークな罫線グリッド | ruled-bento | 共有された罫線と技術的なイメージ |
| コンシューマーグリッド | staggered-bento | オフセットタイル、グラフィックアート、物理オブジェクト |
| 画像主導のヒーローグリッド | hero-grid | 異なる背景、… |
…（翻訳のため省略）