プロダクトモーションデザイン
無関係な魅力的なカードのスライドショーではなく、連続したストーリーを作りましょう。視聴者の注意の対象を、意図 → アクション → 結果 → プロダクトバリュー → ブランドという流れで維持します。
開始地点を選ぶ
該当する例のREADMEを読み、次にそのソースを読んでください。パスはこのスキルを基準に解決し、前のセッションのファイルが存在するとは想定しないでください。
| タスク | ここから始める |
|---|---|
| iOS風ホイール、回転する数字、セグメント、ルーラー | examples/controls/README.md |
| キネティックタイポグラフィ、歪んだUIエントランス、カーソル主導のショーケース | examples/relay/README.md |
| 大型コンポーザー、タイピングに連動したカメラ、送信 → 生成結果 | examples/composer/README.md |
| 短い9:16のTrue-3Dデバイススピン | examples/device-studio/README.md |
| フル22秒のモバイルローンチ | examples/milo-launch/README.md |
| MIDI作曲、サンプリングされた楽器、ミキシング | examples/midi-score/README.md |
ステージングとタイミングについては references/direction.md を、ビデオエクスポート前には references/deterministic-rendering.md を、アセットの公開または再配布前には references/asset-rights.md を読んでください。公式のサードパーティインスピレーションリンクは references/gemini.md にあります。これらのビデオは参考用であり、バンドルされたオープンソースアセットではありません。
ショットを確立する
- すでに提供されている製品、オーディエンス、アスペクト比、継続時間、トーンを再利用します。作業内容を変更する不足情報のみを質問してください。架空の製品の場合は、すべての詳細を質問するのではなく、一貫性のあるコンセプトを選んでください。
- 製品に関する主張を行う前に、実際の製品/ブランド資料を検査してください。能力、メトリクス、推薦文、プロダクションスクリーンショットを決して作り出さないでください。
- 新しいビジュアルディレクションの場合、フルフィルムが明示的に要求されていない限り、完成した2～3秒のHTMLショット1つから始めてください。拡張する際は承認された振付を維持してください。
- デフォルトでは自己完結型のHTML/CSS/JavaScriptプロトタイプを使用します。HTMLリクエストは、高コストなビデオレンダリング、アップロード、またはクラウド公開の許可ではありません。必要な場合、または要求された場合にのみスタックを変更してください。
- コーディング前に、アクションとカメラのハンドオフのシーケンスを簡単に述べてください。各ショットの焦点オブジェクトを明確に保ってください。
モーションを演出し、装飾しない
- 実際のフォントがロードされた後に単語を測定します。新しい単語が到着したら、前の単語をリフローし、コンポジションの中心を維持します。
- 位置、不透明度、ブラーのカーブを分離します。モーションを早い段階で可視化し、最終オーバーシュートの前にブラーをクリアします。デフォルトのフェードアウトではなく、意図的に終了をアニメーション化します。
- 短く読みやすいオーバーシュートとセトリングを使用します。すべてのオブジェクトを揺らさないでください。
examples/relay/scripts/motion-core.mjsには、テスト済みのテキスト/カメラスプリング、ベジェ、および円筒ワープ関数が含まれています。 - 曲率が重要な場合は、複数の水平ストリップでパネルをワープします。単一のフラット回転は曲がった面ではありません。1つの進行値から両軸の対角移動を駆動します。
- 読めないほど小さいダッシュボードを表示するのではなく、実際のアクションにズームインします。ホットスポット補正を含め、カーソルとUIを同じ変換座標系で移動します。
- ホバー → プレス → リリース → 実際の状態変化を表示します。ドラッグには、ピックアップ、移動、着地、および更新された関連状態が必要です。結果は、それを引き起こしたアクションに従わせます。
- シェーダー時間をシーンクロックに合わせます。WebGLがフォールバックする場合を明示し、静的グラデーションを実行中のシェーダーと呼んではいけません。
インタラクティブコントロール versus 記録モーション
バンドルされたコントロールを使用し、ビデオごとに物理を再構築しないでください。
setValue(value)はインタラクティブです。現在のプレゼンテーション位置と速度からスプリングを統合します。入力を許可して割り込み可能にします。renderAt(value)は決定論的です。フラクショナルコンポーネント値を即座に設定します。ビデオでは、この値をフレーム/fpsから導出します。キャプチャ中にライブスプリングやウォールクロックループを実行しないでください。- ホイールの場合、固定された中央選択ウィンドウと、リストの中央にある両側に2つの湾曲したオプションを表示します。中央からのフラクショナル距離から位置、傾き、スケール、不透明度を計算します。
- ポインターキャプチャでドラッグを1:1で追跡します。リリース時に、運動量を投影し、有効なアイテムにスナップし、速度をセトリングに引き継ぎます。進行性の境界抵抗を適用します。
- ホイール/トラックパッド、キーボード、フォーカス、アクセシブルな名前/現在値、狭いビューポート、モーション削減をサポートします。意図的な要件なしに、サウンドや触覚を再生しないでください。
- 外部デモタイムラインを直接操作で停止します。2つのクロックが同じコンポーネントを競合してはいけません。
コンポーザーとカメラ
フィールドが空の間は両方の丸い端を表示します。タイピング中に有限フィールドを拡張します。テキストと送信位置を測定します。加速とブレーキで最初から成長するテキストを追跡し、送信で停止します。別のテキスト領域を保護して、文字がボタンの下を通過しないようにします。送信後、独立してステージングされた結果とその内部の意味のあるアクションを表示します。入力を出力に変形しないでください。振付には一般的なCanvas Labの例を使用し、実際のモデルの動作やレイテンシーに関する主張として使用しないでください。
True-3Dデバイスショット
PNGフレームやフローティングDOM画面ではなく、実際のGLBと元のディスプレイメッシュを使用します。画面とボディを1つのリグに保ちます。スタジオのソフトボックス反射、分離された金属/ガラス/光学マテリアル、より長いレンズのカメラ、イーズされた回転、および読み取り可能な前面ホールドを使用します。タッチインジケーターが遠近法に従うように、画面テクスチャ内でアプリアクションをアニメーション化します。ビデオ用にDOMタイポグラフィとWebGLを一緒にキャプチャします。
参考用のiPhone GLBは含まれておらず、MITライセンスでもありません。ユーザーの別途ライセンスされたコピー、または明示的にライセンスされた代替品が必要です。異なるモデルを使用する前に、メッシュ名、ディスプレイ法線、UV、スケール、フレーミングを確認してください。決して例を公式Apple CAD、公式Appleレンダリング、またはパストレーシングと呼んではいけません。
サウンド（要求された場合のみ）
references/music.md を読んでください。MIDI/楽器が要求された場合は、オリジナルのマルチトラックMIDI → 別途入手したライセンス済みSoundFont → レンダリングされたステム → ミックスを優先してください。有料のニューラルAPIを必須にしないでください。まばらなサウンドアクセントを実際のピクチャーキューに結び付けます。音楽、SFX、スピーチは個別に編集可能に保ちます。リスニング/ユーザーレビューなしで、スコアが良いまたは承認済みと主張しないでください。測定値とキューシートは、完成した試聴済みトラックではありません。
ライブHTMLの場合、オーディオをジェスチャーゲートし、ビジュアルクロックをオーディオの resume() プロミスや停止したオーディオクロックから独立させてください。オーディオの失敗でアニメーションがフリーズしてはいけません。オフラインビデオの場合、ライブブラウザオーディオストリームを唯一のマスターとして録音するのではなく、サンプルをタイムラインに合わせてください。
検証とデリバリー
- 該当する数学的/機能的テストを実行します。直接、逆、任意、および反復シークをチェックします。カーソルヒット、状態因果関係、キーボード/ドラッグ割り込み、390pxレイアウト、およびJSエラーをチェックします。
- ビジュアルレビューのためのユーザーのスコープを尊重します。レンダリングやメタデータチェックがビジュアルインスペクションであると主張しないでください。ビジュアルQAが要求された場合は、実際に代表的なエントランス/中間/インタラクション/終了フレームを検査し、重複、クリッピング、読めないコピー、不正なレイヤーを修正してください。
- MP4の場合、実際にレンダリングして、継続時間、寸法、fps、フレーム数、デコード、オーディオの有無を確認してください。手順を提供してエクスポートされたビデオと呼んではいけません。
- 要求されたHTMLまたはMP4と、再現可能なソース、正確な設定、アセット権利に関する注意、および正直な制限事項を提供してください。暗黙のうちに音楽を追加しないでください。
- プライベートな資格情報、セッションURL、OSアセット、ダウンロードした商用モデル、および埋め込まれた制限付きアセットを含む生成バンドルを公開リポジトリから除外してください。ルートMITはオリジナルのコード/ドキュメントをカバーし、すべての依存関係や外部アセットをカバーするわけではありません。