create-onboarding-video

オンボーディング動画を作成する

Remotionで、機能が動作する様子を見せる短く、印象的なiOSオンボーディング動画を制作します。出力は、その機能が動作することを証明する瞬間にズームしたApp Storeプレビューのようなものです。チュートリアルでも、画面録画でも、マーケティング動画でもありません。

制作するもの

• **長さ：**短め。オンボーディング画面ごとに3～8秒で、つなぎ合わせます。動画全体が約30秒を超えることはほとんどありません。
• **スタイル：**UIを中心にし、画面全体は決して見せません。各ビートでは、機能の一部が動作する様子を見せます。ボタンを1つタップする、トグルが切り替わる、行の順序が変わる、シートがスライドして表示される、グラフが埋まっていくなどの動きを、UIらしい自然なトランジション（スプリング、スライド、拡大縮小、クロスフェード、マスクによる表示、共有要素の切り替え）でアニメーション化します。
• **「一部」とは：**提供された静止画から、関連するコンポーネントだけを切り抜く、マスクする、または抽出します。カード、入力フィールド、タブバー、空の状態から入力済みの状態への変化などが該当します。UIの残りの部分は省略するか、ぼかすか、色を付けた背景で暗示します。見せるのはアプリ全体の見た目ではなく、機能で何ができるかです。
• **トーン：**要点を絞ります。各ビートで、機能ができることを1つ伝えます。
• **出力：**MP4にレンダリングできるRemotionプロジェクト（App Storeプレビュー向けの縦型バリエーションは任意）。

ワークフロー

この手順に従ってください。**素材の確認を省略しないでください。**画面の流れを推測すると、ありきたりな動画になります。

1. 素材の確認 — 静止画と意図を尋ねる

ユーザーが取り上げたいオンボーディング画面ごとに、以下を集めます。

1. 静止画（スクリーンショット） — 各画面につき、操作状態を見せられるよう2～4枚の静止画を依頼します。
   • 通常の状態
   • 操作中（ボタンを押した状態、フィールドにフォーカスした状態、途中まで表示されたシートなど）
   • 結果の状態（データ読み込み済み、成功、次の画面）
   • 見せる価値のあるバリエーション（空の状態と入力済みの状態、ライトとダークなど）
2. 機能の内容 — この画面でユーザーが何をできるのか、何が心地よく感じられるのかを1～2文で説明してもらいます。これをもとに、ズームする詳細を決めます。
3. 順序 — オンボーディングの画面遷移の順序。
4. **任意：**ブランドカラー／アクセントカラー、標準以外のフォント、ターゲットのアスペクト比（iOS向けのデフォルトは縦型の1080×1920）、エンドカードのテキスト／CTA。

ユーザーの説明が曖昧な場合は、AskUserQuestionを使用してください。すべての画面について静止画と意図が揃うまでは、レンダリングを開始しないでください。

2. ショットを計画する

画面ごとに、機能が動作することを証明する機能の一部分を1つ特定します。タップされるボタン、進捗に応じて満ちるリング、スワイプされる行、自動入力されるフィールドなどです。また、それが次のビートへどう遷移するかも決めます。**画面全体は決してアニメーション化しないでください。**コンポーネントを書く前に、タイムライン（注目要素 → 動き → 結果 → 次の注目要素）をスケッチします。以下を優先してください。

• 関連するコンポーネントを静止画から分離、切り抜き、マスクし、色を付けた背景に配置する
• 静的なレイアウトだけでなく、操作そのもの（タップ時の波紋、ドラッグ、フォーカス、状態の変化）を見せる
• ビート間で共有要素を使ったトランジションを行う（ビート1のボタンがビート2のヘッダーになるなど）
• レイヤー化した要素に控えめな視差／奥行きを付ける
• 線形イージングより、スプリングベースの動きを使う

3. Remotion で構築する

Remotion のコードを書く前に、必ず remotion-best-practices スキルを呼び出してください。 呼び出す際は、以下のガイダンスをプロンプトに含めてください。

短い iOS アプリのオンボーディング動画を作成してください。画面全体は決してレンダリングしないでください。各ビートでは、機能の動作の一部を見せてください。機能の内容を実演する操作に合わせてアニメーションする、独立した、トリミングされた、またはマスクされた UI コンポーネント（ボタン、カード、行、シート、フィールド、チャートなど）を表示します。すっきりとした色付きの背景に配置し、それ以外のアプリのクロームは省略するか、存在を暗示します。ビート間の移行には、スプリング、マスクによる表示、共有要素のモーフィング、クロスフェード、視差効果など、UI のような洗練されたトランジションを使用してください。線形補間よりも spring() を優先し、<Sequence> を使ってビートをつなぎ、各ビートは短く保ってください（30fps で 90～240 フレーム）。静止画は public/ に置き、staticFile() で読み込みます。CSS の clip-path、overflow: hidden、絶対位置指定を使ってトリミングし、焦点となる要素を切り出してください。

プロジェクトの規約：

• 静止画のソースは public/<screen-name>/<state>.png に配置します。
• オンボーディングフローごとに <Composition> を 1 つ、その中の画面ビートごとに <Sequence> を 1 つ使用します。
• コンポーネントは src/scenes/ に、共有トランジションは src/transitions/ に配置します。
• デフォルトは 30fps、1080×1920 の縦向きです。同じシーンを横向きでもレンダリングできるよう、幅と高さを props として公開してください。

4. 反復する

プレビューをレンダリングしてユーザーに見せ、どのビートを遅くするか、速くするか、演出し直すかを尋ねてください。最初のレンダリングはドラフトとして扱います。

運用ルール

• 静止画が必要です。 ユーザーからスクリーンショットが提供されていない場合は、作業を止めて依頼してください。説明から UI を創作してはいけません。
• UI 全体ではなく、一部分を見せます。 全画面のモックアップを描画しようとしていることに気づいたら、作業を止めて、その場面の要点を伝えるコンポーネントに切り抜いてください。視聴者に見せるのはアプリの紹介ではなく、機能が実際に動作する様子です。
• 動画 1 本につき機能は 1 つです。 ユーザーが無関係な機能を 5 つ説明した場合は、動画を 5 本に分けることを提案してください。
• 説明するのではなく、見せてください。 ナレーションも、機能を説明する大きなテキストオーバーレイも使わず、UI の動きで伝えてください。各ビートに短いキャプションを付けるのは問題ありません。
• キャプションはビート全体を通して表示します。 各ビートの補助キャプションは、ビート開始から約 10～14 フレーム以内にフェードインし、シーケンス全体を通して表示します。ビートの途中までキャプションの表示を遅らせたり、ビートの終了前にフェードアウトさせたりしないでください。焦点となる UI が画面に表示されている間、視聴者が常に文章を読めるようにします。ビート間のキャプション切り替えは、シーンレベルのクロスフェードに任せてください。
• キャプションは下から上がってきます。 表示位置より約 60px 下、かつ不透明度 0 の状態から始め、上にスライドしながらフェードインします（例：Easing.bezier(0.16, 1, 0.3, 1) のような、強めの UI 向けイーズアウト）。キャプションをその場に突然表示したり、上から落とし込んだりしてはいけません。上向きの動きはビジュアルアイデンティティの一部です。
• キャプションは常に同じ画面上部の位置に配置します。 すべてのキャプションを画面上部の固定位置（例：上端から約 100px、横方向は中央）に配置し、すべてのビートで同じ位置を使ってください。決して焦点となる UI の下に配置したり、ビートごとに位置をずらしたりしないでください。上部に一貫した「キャプション帯」（約 200～240px）を確保し、その下に焦点となる部分を配置します。単一の TopCaption ラッパーコンポーネントを作成して、すべての箇所で使用してください。シーンごとにキャプションの位置をインラインで指定してはいけません。
• キャプションは大きくします。 幅 1080 のキャンバスでは、フォントサイズのデフォルトを約 54px、ウェイトを 700 とし、長い行が画面からはみ出さずに折り返されるよう maxWidth を指定します。字幕サイズのラベルではなく、見出しサイズのコールアウトにしてください。
• つながりのあるビートでは、同じキャプションをそのまま表示し続けます。 連続する 2 つのビートが同じ場面を構成し、まったく同じキャプションテキストを共有する場合（例：一方のビートでは日付をタップし、次のビートではフォームが開く。どちらにも同じ見出しが当てはまる）、カット時にキャプションを再アニメーションさせてはいけません。最初のビートで一度だけ上昇しながらフェードインさせ、その後に続くビートでは staticEntry（または同等の方法。即座に完全な不透明度と所定の位置で表示し、スライドさせない）で描画します。シーンのクロスフェード中に 2 つのキャプションが完全に重なり、視聴者にはカットをまたいで一つのキャプションが続いているように見える必要があります。ちらついて見えてはいけません。これを使うのは、テキストが完全に同じ場合に限ります。ビート間でキャプションが少しでも変わる場合は、新しいキャプションを通常どおり上昇しながらフェードインさせ、変化が伝わるようにしてください。
• すべてのタップをカーソルが先導します。 ビートでタップ、クリック、または選択を見せる場合、表示されるカーソル（Pointer）を必ず登場させ、経路に沿って移動させ、タップのリップルが発生する前に対象へ到達させてください。瞬間移動や、ジャンプカットのようなタップは禁止です。次の操作が起こる場所を視聴者に伝えるのはカーソルの動きです。タップのリップルだけでは不十分です。純粋に説明的なビート（機能をグローリングで強調する、静的な状態をアニメーションさせる、結果が表示される様子を見せる）では、カーソルは不要です。代わりにグローや動きで視線を誘導してください。ビートごとに判断します。操作を見せる場合はカーソルが先導し、説明的な場合はカーソルを使いません。 カーソルコンポーネント自体とコピーして使える使用例については、タップを含むビートを作成または変更する直前に限り、resources/cursor-component.md を読み込んでください。
• カーソルは中央でフェードインし、対象まで一直線に移動します。 ビート内の最初のインタラクションでは、必ず次の手順に従います。
  1. 焦点となる領域の視覚的な中央（切り抜きの中央／コンテナの中央など、そのビートで視聴者の視線が向いている位置）でフェードインします。ポインターはその場に現れ、画面外から入ってくることはありません。
  2. その中央から操作対象へ、一直線に 1 回だけ移動します。方向は自由です。垂直、水平、斜めのいずれも問題ありませんが、単一の直線区間にしてください。x と y は同時に変化してもかまいません（斜め移動が許されるのはこの場合のみです）。単一の減速イーズ（例：Easing.bezier(0.16, 1, 0.3, 1)）を使い、カーソルが投げ出されるのではなく、誘導されているように見せてください。
• 同じ UI 上で複数回タップする場合、ポインターは表示されたまま次の対象へ滑らかに移動します。 1 つのビート内で同じ UIを 2 回以上操作する場合（例：同じフォーム上でセグメントをタップしてから［作成］ボタンをタップする）、タップの間にポインターをリセットしてはいけません。ポインターは中央で一度だけフェードインし、最初の対象まで一直線に移動してタップした後、その対象から次の対象へ直接、途切れることなく一直線に移動してタップします。その後も同様に続けます。フェードアウトするのは最後の操作の後だけです。同じ UI 上でのタップの間に、フェードアウトして中央から再びフェードインさせてはいけません。そうすると、ユーザーが一連の操作を行っている感覚が途切れます。連続する操作の間の各移動も、それぞれ単一の直線にしてください（方向は自由で、進入時と同様に斜め移動も可能です）。
• 別の UI／新しい画面ではリセットします。 次の操作対象が別の UI（新しい画面、別のフォーム、またはまったく別のビート）にある場合は、ポインターをフェードアウトさせ、次の操作では中央から改めてフェードインさせます。このリセットによって、視聴者に「今度は別の場所にいる」と伝わります。
• 禁止事項： 画面外の端から入ること、1 回の移動を複数区間に分けること、曲線、ジグザグ、軌跡を曲げる中間キーフレーム、同じ UI 上でのタップの間にポインターをフェードアウトして再度フェードインさせること。動きは、ユーザーの指が視線がすでに向いている場所に現れ、各操作へ順にまっすぐ滑らかに移動するように見せます。手が画面外から入ってくるようにしたり、同じフォームでのタップのたびにカーソルが消えたりしてはいけません。
• アプリのデザイン言語に合わせます。 提供された静止画の色、角丸、書体を使用し、別のデザインに変更しないでください。
• remotion-best-practices に委ねます。 Remotion コードの作成方法については、これを唯一の情報源としてください。コンポジション、シーン、トランジションを作成または変更する直前には、必ず読み込んでください。

迷ったときは

迷ったら質問してください。10秒で確認すれば、意図から外れたレンダリングに2分かけずに済みます。