SaaSモーションデザイン

実際の製品UIを主役とし、すべての動きが何かを説明するプロダクトフィルムを作成します。

デフォルト設定一覧

設定	デフォルト	変更する場合のみ
アスペクト比	16:9 (1920×1080)	ユーザーが明示的に9:16を要求した場合
フレームレート	60 fps	ユーザーが別の値を要求した場合
背景	オフホワイト	ユーザーが別の背景を指定した場合
色	製品自身のUIテーマから取得	色をハードコードしない
グラデーション	なし	ユーザーが明示的に要求した場合
ナレーション	なし	ユーザーが明示的に要求した場合
音楽	ユーザーが選ぶハイテンションなMixkitトラック	ユーザーが落ち着いた雰囲気を望む、適切な曲がない、または放送用の場合（オーディオ参照）

1回の実行で1つのビデオのみ生成します。 1つのアスペクト比のみをレンダリングします。16:9と9:16を同時に生成することは決してありません。9:16のカットは、ユーザーが要求した場合のみ作成します。

技術スタック

ツール	バージョン	用途
Remotion	4.0.535	すべてのシーンをReactコンポーネントとして構築、Remotion Studioでのプレビュー、スチルとレンダリングの出力
FFmpeg	最新安定版	オーディオミキシング、ナレーション下の音楽のダッキング、コンタクトシート、最終エンコード
Node.js	24	Remotionとビルドスクリプトの実行

Remotionのバージョンを固定すること。 すべての remotion および @remotion/* パッケージを 4.0.535 でインストールし、^ や ~ は使用しないでください。Remotionパッケージのバージョンが一致しないとレンダリングが壊れます。
最初にNodeを確認すること。 インストール前に node -v を実行します。v24でない場合は、先に進む前にユーザーに伝えてください。
すべてのモーションはフレームから派生させること。 useCurrentFrame() と interpolate() / Easing.bezier() を使用して、以下のイージングプリセットでアニメーションします。CSSトランジションやタイマーは使用せず、すべてのレンダリングがフレーム単位で正確になるようにします。
コンポジションを設定する デフォルトでは1920×1080、60fpsに設定し、9:16が要求された場合のみ1080×1920に設定します。
レビュー用のスチル: npx remotion still <composition> --frame=<n>
最終レンダリング: npx remotion render <composition> out/<name>.mp4 --codec=h264

ワークフロー

企画する。 ブリーフを収集し、計画とショットリストを作成します（以下の企画を参照）。ユーザーの承認を得ます。
プロダクトを読み込む。 フロントエンドコードベースがあればそれを読み込み、なければライブUIを読み込み、そのテーマを抽出します（以下のプロダクトへのアクセスとブランディングを参照）。
スクリプトを書き、ユーザーの承認を得ます（以下のスクリプトを参照）。
フィルムを構築する 以下のモーション、コレオグラフィ、カメラ、トランジションのルールに従い、インスピレーションの参考資料の精神に沿って構築します。
オーディオを追加する: ユーザーが選べるようにMixkitトラックを絞り込み（以下のオーディオを参照）、効果音を追加し、要求された場合のみナレーションを追加します。
品質チェックを実行する。
スチルを表示して待つ。 ユーザーにレビュー用スチルを表示し、質問に答え、必要な変更を行います（以下のスチルレビューを参照）。ユーザーが承認した場合のみレンダリングします。

承認ステップをスキップしないでください。各承認は、その後のステップよりも修正が安価です。

企画

スクリプトを書く前に、フィルムの目的を合意します。

1. ブリーフを収集する

自分で調べられないことだけをユーザーに尋ねます:

質問	指定がない場合のデフォルト
プロダクトは何ですか？フロントエンドコードベースを共有してもらえますか？できない場合、ライブUIにアクセスできる場所（URL、ローカルビルド、ログイン）は？	必須。尋ねること。コードベースを優先。
このフィルムは誰に向けたものですか？	見込み顧客
視聴者に覚えてほしいことは何ですか？	必須。尋ねること。
どの機能やフローを表示すべきですか？	主要メッセージを最も証明する2〜3のフロー
どのくらいの長さにすべきですか？	30〜45秒
どこに投稿されますか？テレビやラジオで放送されますか？	WebサイトとX/LinkedIn（16:9）、オンラインのみ
ナレーションはありますか？ある場合、男性・女性のどちらですか？	ナレーションなし
コールトゥアクションは何ですか？	プロダクトのURLにアクセス

2. 計画を書く

承認を得るために、ユーザーに簡潔な計画を提示します:

目標: フィルムが達成すべきことを一文で
対象者: 誰が見るのか、彼らがすでに知っていること
主要メッセージ: 視聴者が覚えるべき一文
フォーマット: 長さ、アスペクト比（9:16が要求されない限り16:9）、ナレーションの有無
ストーリーアーク: このプロダクト用に埋めた構造テンプレート（スクリプト参照）、セクションごとに一行
キャプチャするフロー: 記録する正確なUI画面とインタラクション、それぞれに必要なデータ状態（例：「12タスク、うち3つが期限超過のプロジェクトボード」）
証拠: フィルムが示すエビデンス（ある場合）— 指標、顧客ロゴ、引用、ベンチマーク、賞 — とその出典

3. ショットリストを書く

ストーリーアークをショットに分割し、ショットごとに1行:

#	セクション	ショット	モーション	時間
1	フック	プロダクトの検索バーに入力されたタイプされた質問	キャレットがタイプし、回答がストリーム表示	4秒

ショットリストは、スクリプトの「画面上の内容」列になります。

プロダクトへのアクセス

フィルムの品質は、プロダクトへのアクセス方法に依存します。優先順位:

アクセス方法	得られるもの
1. フロントエンドコードベース（最良）	正確なデザイントークン、実際のコンポーネント、実際のコピー、アイコン、ロゴファイル。UIをRemotion内でピクセル単位で再構築し、自由にアニメーション可能。
2. 実行中のアプリ（URLまたはローカルビルド、テストログイン付き）	実際のテーマとフローをブラウザからキャプチャ。忠実だが、要素ごとのアニメーションは難しい。
3. 画面録画またはスクリーンショット	最終手段。それらから画面をできるだけ忠実に再構築し、結果が精度に欠けることをユーザーに伝える。

コードベースがない場合は、より低いオプションに妥協する前にそれを要求してください。

コードベースからの作業

テーマ: CSSカスタムプロパティ、Tailwind設定、テーマファイル、デザイントークンパッケージなど、プロジェクトがデザイントークンを保持している場所から読み取ります。
コンポーネント: アプリ外でもクリーンにレンダリングできる場合は、プロダクト自身のUIコンポーネントをRemotionコンポジションで再利用します。そうでない場合は、ソースから忠実に再作成します。
コンテンツ: ラベル、空の状態、アイコン、ロゴファイルは、ソースから実際のものを使用し、発明しないでください。計画に必要なデータ状態には、シードデータまたはフィクスチャデータを使用します。
読み取り専用。 プロダクトのコードベースを編集しないでください。フィルムは自身のRemotionプロジェクトで構築します。

ブランディング

固定のブランドカラーは使用しないでください。すべての色は表示するプロダクトから取得します。

プロダクトのコアUIを読み取り、コードベースがある場合はそこから、テーマ（プライマリ/アクセントカラー、ニュートラル、サーフェスカラー、ボーダーカラー、タイポグラフィ、角丸、シャドウスタイル）を抽出します。
背景: デフォルトではオフホワイトの背景を推奨します。ユーザーが別途指定した場合を除きます。
アクセント: プロダクト自身のアクセントカラーを、強調、カーソルリング、キャレット、ハイライトに使用します。
グラデーション は、ユーザーが明示的に要求しない限り、背景、テキスト、グロー、トランジションに使用しません。フラットフィルを使用します。
タイポグラフィ: 可能な限りプロダクト自身の書体を使用し、キャプションがUIにネイティブに感じられるようにします。
ロゴとワードマーク: プロダクトの実際のアセットを使用します。再描画や近似はしないでください。

スクリプト

スクリプトはすべてを駆動します: キャプション、タイミング、そしてナレーションがある場合はそれも。承認された計画とショットリストから書き、シーンを構築する前にユーザーの承認を得ます。

フォーマット

スクリプトをテーブルとして書き、1行につき1行:

#	ライン（話されるか画面上に表示）	画面上の内容	時間
1	あなたのチームはステータス更新に週6時間を費やしています。	散らかったタスクリストの上でカウンターが6まで上昇	3秒

ルール

最初の7秒でフックする。 プロダクト名ではなく、問題、驚くべき数字、またはプロダクトの楽しい動作で始めます。
すべてのラインに絵がある。 ラインに一致する視覚的なビートがない場合は、カットするか書き直します。
平易な言葉。 短い文、1行に1つのアイデア、視聴者が解読する必要のある専門用語は使いません。
ペース: 音声の場合、約2.5語/秒。ラインの時間はワード数から見積もります。
強調は *アスタリスク* でマークし、1行に多くとも1つのキーフレーズ。
すべての主張は真実であること。 数字とベンチマークは実際のものでなければならず、必要に応じて注釈を付けます。
ブリーフで設定された長さを守る。 モーションを速くする前にラインをトリミングします。
デフォルトではナレーションなし。 ナレーションがない場合、スクリプトは画面上のキャプションとしてのみ表示されます。

人間のように聞こえること、モデルのようにではなく

すべてのラインは、実際の人間が同僚に口に出して言うように聞こえなければなりません。AI的なコピーは視聴者の注意をそらし、プロダクトを一般的に感じさせます。これはスタイルの好みではなく、厳格なルールです。

次のように書いてください:

具体的に。 プロダクトの実際の機能名、実際の数字、ユーザーが実際に行うこと（「タスクを金曜日にドラッグする」、“Effortlessly manage your workflow”ではない）。
特定の痛みを名前で呼ぶ 対象者が感じているものを、彼らの言葉で（「あなたの朝会はまた40分も続いたね」）。
短縮形と日常的な言葉を使う: 「you'll」、「it's」、「doesn't」。
形容詞より動詞を優先する。 プロダクトの良さを説明するのではなく、プロダクトが何をするかを示します。
短いラインでも良い 具体的なことを言っていれば（「ミーティングが動く」は、絵がそれを正確に示しているため機能します）。

これらは決して書かないでください:

パターン	例
対比フレーミング	「Xではなく、Y」「Xだけでなく、Y」「Xではない。Yではない。Zだ。」「Xが問題ではない。Yだ。」
3つのリズムリスト	「より速く、よりスマートに、より良く」「計画。構築。出荷。」— 3つの言葉が具体的なことを言っていない場合
積み重ねられた形容詞フラグメント	「高速で、信頼性が高く、直感的な…」
空虚なストーリーテリング	「かつて、ある中小企業が…」「それは単なるツールではありません…」
過度に詩的な表現	「データの交響曲」
受動態	「タスクは自動的に整理されます」

モーションとイージング

人間の動き、機械の動きではありません。弾み、少しのオーバーシュート、そして減速。

イージングプリセット

これらは唯一のイージング関数です。値域外で新しいものを作成しないでください。

// イージング関数
import { Easing } from 'remotion';

名前	関数	使用する場所
デフォルト	`Easing.bezier(0.22, 1, 0.36, 1)`	一般的な出現、フェード、サイズ変更 — はっきりと目立つが、急すぎない
スナップイン	`Easing.bezier(0.5, 0, 0.8, 0.2)`	カードのスワイプ、UIを閉じるアクション — 速く入り、早く止まる
わずかな反発	`Easing.bezier(0.68, -0.15, 0.27, 1.15)`	注意を引く小さな要素 — ボタンの強調、バッジのポップ、チェックマークの出現
弾む	`Easing.elastic(1, 0.2)`	楽しい出現 — 祝賀的なチェックマーク、スコアリングのアニメーション。控えめに使用
リニア	`Easing.linear`	スクロール、パン、プログレスバー

モーションルール

目的を持って動かすこと。 動きはユーザーの注意を導くか、状態変化を示すか、階層を確立するかのいずれかでなければなりません。すべてのアニメーションには価値提案が必要です。
動きを一貫させること。 コンポーネントが一度出現した方法で、再度出現させる。類似した要素は類似した方法でアニメーションする。
減速。 要素の出現の80％の時間を可視状態に費やし、20％を到着に費やします。
オーバーシュートと跳ね返りをアニメーションの終わり近くに配置する。 出入りではなく。
すべてのアニメーションとトランジションは useCurrentFrame() によって駆動する — Remotion外のタイマーやCSSトランジションはありません。

UIコレオグラフィ

UI要素がフィルムの中でどのように動き、相互作用するか。

マウスカーソル: デフォルトでは非表示。 ドラッグ操作やホバーが必要な場合にのみ表示し、その場合は円形（半径24px、オフホワイトの塗りつぶし、製品のアクセントカラーの輪郭、内側のドットはなし）。カーソルはスナップインイージングで到着する。
キャレット: テキスト入力フィールドに表示し、塗りつぶしのアクセントカラーの垂直線（2px幅）。0.5秒ごとに点滅、リニアイージング。
テキストは1文字ずつタイプされる またはブロックごとにストリームインする：簡潔さを優先。
コンポーネントの階層: 一度に注意を引く要素は1つだけ。残りは静置するか、微妙なパララックスに従う。
データの出現: チャートは左から右へ塗りつぶし、リストは上から下へフェードイン、モーダルは背景にマスクをかけてデフォルトイージングで拡大。
要素の優先順位: モーダル > ドロワー > ツールチップ > フローティングアクションボタン。上位の要素は下位の要素が閉じた後にのみ閉じる。

カメラ

フィルムの「カメラ」は、ビューポート内での動きを指します（UIを拡大したりパンしたりすること）。

パンとズームはリニアイージング。 唯一の例外。
カメラの動きは目的を持って使用する: UIのある部分から別の部分へ視聴者の注意を導く、異なる状態を比較する、データの深さを明らかにする。
頻繁にカットする。 カメラの動きをカットに置き換えられる場合は、カットします。
一度に1つのカメラアクションまで。 ズームとパンを同時に行わない。

トランジション

デフォルト: フェードスルーカラー — 色Aから色Bへの中間色を通過するフェード。

トランジション	使用する場所
フェード	セクション間のデフォルト
フェードスルーカラー	主要なエモーショナルビート、モーダル/オーバーレイの出現
スライド	静的要素から動的要素へ移動するとき（例：ダッシュボードからチャートへ）
ワイプ	決して使用しない — アプリの操作性を思い出させないこと

トランジションは300〜500ms。 セクションの変わり目では長め（500ms）、ショット間では短め（300ms）。
トランジション用の別コンポーネントを作成します Transition.tsx でトランジションタイプをpropとして受け取る。

オーディオ

音楽

選び方: Mixkitの「高エネルギー」および「テクノロジー」ジャンルをブラウズし、ユーザーに3〜5のトラックのショートリストを提示します。選択したら、そのバックリングURLをRemotionの audio コンポーネントで使用します。
配置: ビデオのオープニングがシーンにフェードインするのと同時に音楽を開始します。エンディングでは、フェードアウトの開始と同時にフェードアウトを開始します。
長さ: 必要に応じてループします。loop プロパティを使用します。
音量: 開始時は-12dB、ナレーションがある場合は-20dB（自動ダッキング）。常にナレーションより低く、声が聞き取れなくならないようにします。

効果音

すべてのインタラクションはUIサウンドによって補完されます。結果として生じるノイズの壁を避けるために控えめに使用します。

クリック: 軽いタップ、プログラム上のクリック。UIボタンやリンクが押されたとき。
成功: 上昇するチャイム。チェックマークや完了状態。
エラー/警告: 低いノートまたは穏やかなアラート。製品にそれらがある場合のみ。
ページめくり: ソフトなスワッシュ。サイドバーやメニューが開くとき。
強調: 短いリバーブを伴う単一のピアノ音。主要なモーメント — ロゴの出現や重要な数字。

ナレーション

ユーザーが明示的に要求した場合のみ:

ソース: ElevenLabs。ユーザーに希望の声を尋ね、声の名前を取得します（例：「Rachel」、「Adam」）。これらの声はテクノロジーとスタートアップのコンテンツに適しています。プロフェッショナルなトーンを優先します。他の声については、ElevenLabsボイスギャラリーをユーザーと一緒にブラウズし、彼らのElevenLabs APIキーを使用します。
生成: elevenlabs.generateVoiceover(script) を使用します。ノートとガイダンスの文字列が利用可能な場合はそれらを含めます。
ダッキング: FFmpeg自動ダッキングパターンを使用して、ナレーションがアクティブな間、音楽の音量を下げます。

品質チェック

フィルムをユーザーに表示する前に、これを確認します:

すべてのテキストが読みやすいか — キャプションとUIテキストは少なくとも20px（1080pで）。
すべてのモーションがフレームレートに対してスムーズか — ギザギザやカクつきはなし。
アスペクト比が正しいか — 16:9の動画に9:16のアセットはありません。
すべてのトランジションが適用されているか — ハードカットは意図的なものだけ。
オーディオのバランスが取れているか — 音楽がナレーションをマスクしていません。
ブランディングが正しいか — 色、フォント、ロゴはすべて製品のものです。
グラデーションがないか — 要求されていない限り。
レンダリングがエラーなく完了するか — Remotion Studioで数フレームプレビューし、npx remotion render を流して最初の数秒が出力されることを確認します。

スチルレビュー

承認されたスチルは以下の通りです:

スクリプトの各セクションから少なくとも1つのフレーム。
予想よりも多くのフレームをキャプチャする。 レビュー中に視聴者が気づくよりも、まだ氣づいていない何かを発見する可能性が高いです。
ユーザーにレビューを依頼します。 全てのスチルを表示し、彼らに変更を求めるか、承認を求めます。
全フレームをレンダリングする前に承認を得ます。

スチルをレンダリングする

npx remotion still <composition-id> out/review/<composition-id>/scene-<id>-<description>.png --frame=<frame-number>

コンタクトシート（オプション）

複数のスチルをレビュー用の単一画像に結合します:

ffmpeg -i out/review/%d.png -filter_complex "select=not(mod(n\,5)),scale=320:-1,tile=4x4" out/review/contact_sheet.jpg

出力

最終的な動画ファイル:

名前: out/<product-name>-<aspect-ratio>-v1.mp4
コーデック: H.264
解像度: 1920×1080（デフォルト）または1080×1920（9:16用）
スチル: out/review/ に配置

インスピレーション

これらの参照はフィルムのテンポ、明白な構造、機能の重みを伝えることを目的としており、スタイルやブランディングの選択ではありません:

Linear — 製品動画とランディングページ
Raycast — 製品動画とランディングページ
Superhuman — 製品動画とランディングページ

これらの製品はすべて、実際のUIを動画の主役にしています。固定のブランドカラーや派手なエフェクトはありません。

お気に入りのAIに質問する

ドキュメント