/marketing-demo — 製品デモレコーダー
マーケティング向けの製品デモを録画します。2つの制作パスがあります。クイック（ply + ffmpeg）はラフなデモ用、ポリッシュ（Remotion）はブランド化されたマーケティング動画用です。
読み取り対象
brand/creative-kit.md— ブランドオーバーレイ用の色、フォント、ロゴパスbrand/voice-profile.md— テキストオーバーレイのトーンガイダンスbrand/stack.md— 利用可能なツール（ply、ffmpeg、remotion）
起動時
brand/creative-kit.mdを読み取り、色、フォント、ロゴパスを取得。存在しない場合は、ブランドカラーとロゴを尋ねる。brand/voice-profile.mdを読み取り、テキストオーバーレイのトーンガイダンスを取得。存在しない場合は、明確で中立的なトーンを使用する。brand/stack.mdを読み取り、利用可能なツールを確認。存在しない場合は、ツールを直接検出する。- ツールの利用可能性を確認：
command -v ply && echo "ply: ready" || echo "ply: missing" command -v ffmpeg && echo "ffmpeg: ready" || echo "ffmpeg: missing" command -v npx && echo "remotion: available" || echo "remotion: unavailable" plyまたはffmpegがない場合は警告し、インストールを提案する。
ショット時間ルール
| デモタイプ | ショットあたりの時間 | 備考 |
|---|---|---|
| クイック概要 | 0.5〜1秒 | 高速カット、興奮を喚起 |
| 機能デモ | 2〜3秒 | 読んで理解する時間 |
| ウォークスルー | 4〜5秒 | 教育的なペース |
| ソーシャルクリップ | 1〜2秒 | 注目を集める、高速 |
デモのストーリーテリング原則
デモが失敗するのは、製品を機械的に見せるだけで、ストーリーを伝えていないからです。視聴者が見続ける理由が必要です。これらの原則は、ランディングページやソーシャルで実際にエンゲージメントを得ているものから来ています。
- セットアップではなく、結果から始める。 最初の2秒で視聴者が残りを見るかどうかが決まります。「後」の状態（データのあるダッシュボード、完成したデザイン、結果）を見せましょう。セットアップ（ログイン、読み込み、ナビゲーション）は注目を集めません。
- 1機能 = 1デモ。 30秒に5つの機能を詰め込もうとすると、すべてが忘れられます。1つの機能に絞ったデモは、急ぎ足のツアーよりも価値があります。
- マジックモーメントを見せる。 すべての製品には、ユーザーが「すごい」と思うインタラクションがあります。その瞬間を見つけて、デモの中心に据えましょう。それが人々が「試してみる」とクリックする理由です。
- テキストオーバーレイで文脈を追加する。 ソーシャル動画はミュートで自動再生されます。テキストの呼び出しがないと、視聴者はUIが変化しているのを見ても、何が起こっているのか、なぜ重要なのかがわかりません。すべてのショットには、その価値を説明する3〜6語のオーバーレイが必要です。
- ペーシング：コンセプトあたり2〜3秒。 これは速く感じますが、視聴者の注意力は厳しいものです。ショットが新しい情報で画面時間を獲得できなければ、カットしましょう。
ステップ1：デモタイプの決定
| タイプ | 時間 | 解像度 | フォーマット | ユースケース |
|---|---|---|---|---|
| ヒーローデモ | 15〜30秒 | 1280x800 | MP4 | ランディングページのファーストビュー |
| 機能ハイライト | 5〜15秒 | 1280×800 | GIF/MP4 | 機能セクション、ドキュメント |
| 完全ウォークスルー | 60〜180秒 | 1280x800 | MP4 | YouTube、営業資料 |
| ソーシャルクリップ | 5〜15秒 | 1080×1080 | MP4 | Instagram、X |
| メールGIF | 3〜8秒 | 600×400 | GIF | メールキャンペーン |
| ハウツー | 30〜90秒 | 1280×800 | MP4 | ヘルプドキュメント、オンボーディング |
ユーザーにタイプを尋ねるか、文脈から推測する。
ステップ2：ショットリストの計画
録画前に各ショットを計画する：
## ショットリスト
1. [アクション：ランディングページに移動]
- URL: https://example.com
- 待機: 読み込みに1秒
- ハイライト: ヒーローセクション
2. [アクション：「はじめる」ボタンをクリック]
- 待機: トランジションアニメーション
- ハイライト: サインアップフォーム
3. [アクション：デモデータを入力]
- タイプ: [email protected]
- ハイライト: 成功状態
各ショット = 1回の ply スクリーンショットまたは操作シーケンス。
ステップ3：制作モードの選択
モードA：クイックデモ（ply + ffmpeg）
スクリーンショットを動画に合成した、高速でラフなデモ。
スクリーンショットの撮影：
# 各ショットに移動してスクリーンショット
ply navigate "https://example.com"
ply screenshot --output marketing/demos/shot-01.png
ply click "はじめる"
ply screenshot --output marketing/demos/shot-02.png
ffmpegで合成：
# スクリーンショットからMP4（フレームあたり2秒）
ffmpeg -framerate 0.5 -i marketing/demos/shot-%02d.png \
-c:v libx264 -pix_fmt yuv420p \
-vf "scale=1280:800:force_original_aspect_ratio=decrease,pad=1280:800:(ow-iw)/2:(oh-ih)/2" \
marketing/demos/demo.mp4
# プレビューGIF（低品質、小ファイル）
ffmpeg -i marketing/demos/demo.mp4 \
-vf "fps=10,scale=640:-1:flags=lanczos" \
-c:v gif marketing/demos/demo-preview.gif
# メール用GIF（幅600px、最適化）
ffmpeg -i marketing/demos/demo.mp4 \
-vf "fps=8,scale=600:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" \
marketing/demos/demo-email.gif
# ソーシャル用正方形クロップ（1080x1080）
ffmpeg -i marketing/demos/demo.mp4 \
-vf "crop=min(iw\,ih):min(iw\,ih),scale=1080:1080" \
marketing/demos/demo-square.mp4
モードB：ポリッシュデモ（Remotion）
トランジション、テキストオーバーレイ、ブランドインテロを備えたマーケティング品質の出力用。
Remotionコンポジションの生成：
# 必要に応じて初期化
npx remotion init marketing/demos/remotion-demo
# 最終動画をレンダリング
npx remotion render marketing/demos/remotion-demo/src/index.tsx \
--output marketing/demos/demo-polished.mp4
構成構造：
src/
├── index.tsx # ルートコンポジション
├── Intro.tsx # ブランドインテロ（ロゴ、タグライン）
├── DemoScene.tsx # テキストオーバーレイ付きスクリーンショット
├── Transition.tsx # シーン間のフェード/スライド
└── Outro.tsx # CTA + URL
主要なRemotionパターン（完全なコンポーネントコードは references/remotion-examples.md を参照）：
- スクリーンショットには
<Img>を、レイアウトには<AbsoluteFill>を使用 - アニメーションには
useCurrentFrame()+interpolate()を使用 brand/creative-kit.mdからブランドカラーを取得- スムーズな再生には30fps、1280x720または1920x1080
- 機能を呼び出すテキストオーバーレイを
<Sequence>で追加
インテロシーン（2〜3秒）： ロゴを中央に、タグラインがフェードイン。背景グラデーションはブランドカラー。短く保つ — 製品が主役です。
デモシーン（ショットごと）： スクリーンショットがフレームの80%を占める。テキストオーバーレイを上部または下部に、1行の機能呼び出しを配置。interpolate() を使用して微妙なズームイン（シーン期間中に1.0→1.05）を適用し、動きを加える。
シーン間のトランジション： フェード＋軽いスライド（200ms）。派手なワイプは決して使わない — 製品の邪魔になる。
アウトロシーン（3〜4秒）： CTAテキスト（「[url]で無料トライアル」）、ロゴ、オプションのソーシャルプルーフの一文。これが唯一の販売スライド — 他のすべてのスライドは表示に集中する。
エラー回復
plyの失敗（ページが読み込めない、要素が見つからない、タイムアウト）：ショットN+1にスキップし、ショットリストに失敗を記録。すべてのショットが完了したら、スキップされたショットを確認し、1回再試行。それでも失敗する場合は、手動スクリーンショットをフォールバックとして使用。
ffmpegの失敗（コーデックが見つからない、フォーマットエラー）：ffmpeg -codecs で利用可能なコーデックを確認。libx264がない場合は、-c:v h264 を試すか、brew install ffmpeg でインストール。GIFパレットの問題が発生した場合は、フィルターチェーンを簡略化 — split/palettegen/paletteuse を削除し、基本の -vf "fps=10,scale=640:-1" を使用。
Remotionの失敗（レンダリングクラッシュ、コンポジションエラー）：ノードバージョンを確認（node -v、18以上が必要）。npx remotion render が失敗した場合は、npx remotion render --gl=angle または --gl=swangle をGPU問題に対して試す。コンポジションエラーの場合は、すべての <Img> のsrcパスが正しく、画像が存在することを確認。
ステップ4：変換と出力
すべての出力は marketing/demos/ に保存。タイプごとに命名：
| 出力 | ファイル名 | 備考 |
|---|---|---|
| MP4（デスクトップ） | demo-hero.mp4 | H.264、1280x800 |
| MP4（ソーシャル） | demo-social-1080.mp4 | 正方形、1080x1080 |
| GIF（プレビュー） | demo-preview.gif | 幅640px、5MB未満 |
| GIF（メール） | demo-email.gif | 幅600px、2MB未満 |
| MP4（ポリッシュ） | demo-polished.mp4 | Remotion出力 |
ステップ5：完了サマリー
## 作成されたデモアセット
| アセット | サイズ | フォーマット | 推奨用途 |
|-------|------|--------|--------------|
| demo-hero.mp4 | 1.2MB | MP4 1280x800 | ランディングページのヒーロー |
| demo-preview.gif | 3.4MB | GIF 640px | README、ドキュメント |
| demo-email.gif | 1.1MB | GIF 600px | メールキャンペーン |
| demo-social-1080.mp4 | 800KB | MP4 1080x1080 | Instagram、X |
すべてのアセットは `marketing/demos/` に保存されました。
ビューポート設定
| プラットフォーム | 幅 | 高さ | スケール |
|---|---|---|---|
| デスクトップ | 1280 | 800 | 1x |
| デスクトップHD | 1920 | 1080 | 1x |
| モバイル | 390 | 844 | 2x |
| 1080 | 1080 | 1x | |
| X | 1200 | 675 | 1x |
| メール | 600 | 400 | 1x |
アンチパターン
| ミス | なぜ失敗するか |
|---|---|
| ログイン/サインアップフローの録画 | 誰も認証画面には興味がありません。ログイン後に開始する。 |
| ローディングスピナーの表示 | 編集で削除するか、読み込み完了状態にスキップする。スピナーは勢いを殺す。 |
| ミュート自動再生にテキストオーバーレイがない | ソーシャル動画はミュートで自動再生される。テキストがないと、視聴者は何を見ているのかわからない。 |
| チャプター区切りなしで60秒を超えるデモ | 15秒後に注意力が低下する。長い場合は、明確なセクションタイトルを追加する。 |
| 一貫性のないビューポートサイズでの録画 | サイズが変わるショットは素人っぽく見える。録画前にビューポートを固定する。 |
| すべての機能を表示する | 最大3〜5機能に絞る。すべてを見せようとするデモは何も売れない。 |
| マウスカーソルが目的もなく動く | 各クリックを計画する。カーソルは意図を持って動くべき — ターゲットへの直線。 |
関連スキル
/creative— 広告ビジュアル、商品写真（静的アセット、デモではない）/content-atomizer— デモをプラットフォーム固有の投稿に変換/page-cro— デモで紹介するページの監査