ローンチ動画とビジュアルアセット
このスキルは、製品ローンチのためのビジュアルおよび動画アセットの作成をカバーします。これらはあなたが作成する中で最も影響力の高いアセットです。優れたデモ動画やGIFはスクロールを止め、テキストよりも速く価値を伝え、共有されます。一方、質の悪いものは、製品を混乱させたり未完成に見せたりすることで、ローンチを積極的に損なう可能性があります。
メディア階層
ほとんどのローンチにおいて、何を作成するかの判断は次の順序に従います:
- デモ動画 — 製品の動作をコンテキストとともに紹介します。何かがどのように機能するかを説明するのに最適です。
- アニメーションGIFまたは画面録画ループ — 短く、ソーシャル上でインライン自動再生されます。特定のインタラクションを表示するのに最適です。
- 注釈付きスクリーンショット — 静的で、素早く作成でき、特定の状態や機能を示すのに適しています。
- 図またはイラスト — アーキテクチャ、概念、またはスクリーンショットが取れないものに使用します。
一般的に: フローが重要な場合は動画を、単一のインタラクションで価値が伝わる場合はGIFを、特定の状態がポイントである場合はスクリーンショットを使用します。
デモ動画
プラットフォームごとの長さ
| プラットフォーム | 目標時間 | 最大時間 |
|---|---|---|
| Product Hunt | 60〜90秒 | 3分 |
| ランディングページのヒーロー | 60〜90秒 | 2分 |
| X/Twitter（埋め込み） | 30〜45秒 | 2分20秒 |
| 45〜90秒 | 10分 | |
| YouTube（フルデモ） | 3〜5分 | — |
プラットフォームの最大時間制限は技術的なものだけではありません — それを超えるとエンゲージメントは急激に低下します。4分のProduct Hunt動画は、実質的に動画が無いのと同じです。
スクリプト構成（短編デモ向け）
これを5〜7ビートに抑えます:
- 問題（5〜10秒） — 解決する問題を述べます。一文で。長い前置きは不要です。
- ソリューションの紹介（5〜10秒） — 製品名と中核となる価値提案を示します。
- デモ: ハッピーパス（30〜60秒） — 主要なユースケースを最初から最後まで表示します。これが動画の核心です。
- 主要機能（10〜20秒） — セカンダリ機能を示す2〜3のクイックカット。手早く行います。
- 証明ポイント（5〜10秒） — メトリクス、顧客の引用、またはベンチマーク。1枚のスライドまたはナレーション行。
- CTA（5秒） — 1つのアクション。「[URL]で無料トライアル」または「[URL]でサインアップ」。
避けるべきこと: 長いイントロ、アニメーションロゴ（視聴者はクリックして離れます）、遅い製品起動画面、および製品が何かをしていることを示さないものすべて。
録画のヒント
- 本番環境ではなくデモ環境を使用します。 クリーンなデータ、恥ずかしい顧客情報なし、信頼性の高い状態。
- 意図的な操作はゆっくりと行います。 人々は通常の作業速度ではなく、意図的に移動させたカーソルの動きをよりよく追従します。
- 目標解像度の2倍で録画します。 2880×1800または1440×900（Retina）で録画し、配信用にダウンスケールします。これによりズーム領域が確保され、より鮮明になります。
- 余計なものはすべて隠します。 Slackの通知を閉じ、ブラウザのブックマークバーを非表示にし、クリーンなブラウザプロファイルを使用します。録画内の気が散るものは信頼を損ないます。
- 使用する以上にキャプチャします。 完全なワークフローを録画し、後で編集でカットします。ビートを逃したために録り直すよりも速いです。
ナレーション vs. 無音
どちらも機能します。選択はコンテキストに依存します:
- ナレーション: より温かみがあり、説明的で、YouTubeやランディングページで効果的です。クリーンな録音環境と良好な音質が必要です。音質が悪いと、音声なしよりも悪い結果になります。
- テキストオーバーレイ付き無音: ミュート付き自動再生のコンテキスト（ソーシャルフィード）でより効果的です。制作が速くなります。明確な画面上のラベルが必要です。
迷った場合: デモを無音で録画し、主要な瞬間にテキストオーバーレイを追加してから、プラットフォームに基づいてナレーションを追加するかどうかを決定します。
ツール
- 画面録画: Loom（手軽）、Screen Studio（洗練された出力、マーケティング向き）、QuickTime（生）、OBS（フルコントロール）
- 動画編集: CapCut（高速、簡単）、DaVinci Resolve（プロ向け、無料）、Final Cut Pro、Adobe Premiere
- モーションデザイン/ロゴアニメーション: After Effects、Motion（Mac）、Jitter（ウェブベース）
- キャプション/字幕: Descript（トランスクリプトによる編集にも優れています）、Captionsアプリ、Rev
- プログラム動画: Remotion（Reactベース — 以下のセクションを参照）
Remotionによるプログラム動画
迅速に出荷し、ローンチのたびにモーションデザイナーを待つ必要がないチームにとって、プログラム動画を使用するとReactコンポーネントを作成し、MP4ファイルとしてレンダリングできます。動画はコードです: バージョン管理され、パラメータ化され、タイムラインエディターなしで反復可能です。
プログラム動画を使用すべき場合
以下の場合に適しています:
- ソーシャルメディア向けのローンチ告知クリップ（15〜45秒）
- UIの動作を表示する製品ウォークスルー動画
- テキストオーバーレイとスクリーンショットを含む機能ハイライトリール
- データ駆動型動画（ベンチマーク比較、成長メトリクス）
- ローンチ間で再利用するテンプレート化された動画（コンテンツを入れ替えるだけ）
以下の場合にはあまり適していません:
- 複雑なモーションデザインを必要とするシネマティックなブランド動画
- ライブ映像を含む創業者ナラティブ動画
- 広範なカスタムイラストや3Dを必要とする動画
主要なTier 1ローンチでは、アプローチを組み合わせることもできます: ソーシャルクリップにはプログラム動画、ヒーロー動画にはプロのモーションデザイナー。
Remotionのセットアップ
npx create-video@latest my-launch-video
cd my-launch-video
npm start # Remotion Studioをプレビュー用に開く
主要な概念:
- Composition: 動画は、定義された長さ（フレーム数）とフレームレートを持つReactコンポーネントです
- useCurrentFrame(): 現在のフレーム番号を返すフック — アニメーションの駆動に使用します
- Sequence: 子要素を時間的にオフセットするコンポーネント — シーンの順序付けに使用します
- spring(): 自然な動きを実現するアニメーションユーティリティ（イーズイン/アウト）
- Assets: 画像、スクリーンショット、オーディオは
public/フォルダに配置します
シーン計画テンプレート
コードを書く前に、動画をシーンごとに計画します:
| フィールド | 説明 |
|---|---|
| シーン# | 連番 |
| 長さ | 秒（例：「3s」） |
| 目的 | このシーンが伝えること（一文） |
| テキスト内容 | 画面に表示される正確なテキスト |
| ビジュアル要素 | スクリーンショット、アイコン、コードスニペット、図 |
| アニメーションスタイル | フェードイン、左からスライド、タイプライター、拡大など |
| 遷移アウト | このシーンの終了方法（フェード、カット、スライド） |
コードパターン
シーケンス化されたシーン:
<Sequence from={0} durationInFrames={90}>
<HookScene />
</Sequence>
<Sequence from={90} durationInFrames={120}>
<DemoScene />
</Sequence>
<Sequence from={210} durationInFrames={90}>
<CTAScene />
</Sequence>
テキスト表示:
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 20], [0, 1], {
extrapolateRight: 'clamp',
});
return <h1 style={{ opacity }}>ここに主要な価値提案を記述</h1>;
反復ワークフロー
- シーンを計画する — 上記のテンプレートを使用
- アセットを収集する — スクリーンショット、ロゴ、製品画像 →
public/フォルダ - 初稿を書くかプロンプトする — 構造とコンテンツを正しくする
- Studioでプレビューする — 全体を視聴し、タイミングと視覚的な問題を確認
- 反復する — タイミング、アニメーション、コンテンツを調整。通常2〜4ラウンド
- レンダリングする —
npx remotion render src/index.ts MyComposition out/video.mp4 - プラットフォーム仕様を確認する — 解像度とファイルサイズがターゲットプラットフォームで機能することを確認
GIFと短いループ
GIFはほとんどのプラットフォームで自動再生され、単一のインタラクション — UIの状態変化、CLIコマンドの出力、API応答など — を示すのに理想的です。動画よりも高速に制作でき、ソーシャル投稿ではより効果的であることがよくあります。
GIFと動画の使い分け
以下の場合にGIFを使用:
- 価値全体が3〜8秒で伝えられる場合
- ワークフローではなく、単一のUIインタラクションを示す場合
- アセットがツイートやREADMEに埋め込まれ、動画再生の信頼性が低い場合
以下の場合に動画を使用:
- 価値を伝えるためにコンテキスト（問題→解決策）が必要な場合
- インタラクションのデモに8秒以上かかる場合
- オーディオが必要な場合
GIFの録画
- 2倍でキャプチャし、目標解像度にダウンスケール
- ウェブパフォーマンスのために5MB未満に保つ（パレット削減またはフレーム数を減らす）
- シームレスにループ — 開始状態と終了状態が一致し、ループがぎくしゃくしないようにする
- ツールオプション: CleanShot X（Mac推奨）、Kap、Giphy Capture、Gifski（動画クリップの変換用）
GIFファイルサイズの最適化
- カラーパレットを減らす（多くのUI録画では256→128または64色）
- フレームを落とす（UI録画では30fps→15fpsはほとんど気にならない）
- 積極的にクロップする — 画面全体ではなく、変化している部分だけを表示
- プラットフォームが対応している場合は、GIFの代わりに自動再生/ループ付きMP4に変換（MP4は同等のGIFより約10分の1のサイズ）
スクリーンショット
スクリーンショットはローンチで過小評価されています。適切に構成され明確な注釈が付いたスクリーンショットは、段落よりも速く機能を伝えます。
構成
- 意味のある状態の製品を表示 — 空の画面、読み込み中の状態、機能が見えにくいダミーデータで埋め尽くされた画面は避ける
- クリーンな環境を使用 — タブのないブラウザ、一貫して適用されたダークモードまたはライトモード、個人データを表示しない
- 関連領域を強調 — コールアウトボックス、矢印、ハイライトで注意を重要な部分に向ける
注釈ツール
- CleanShot X（Mac） — キャプチャ、注釈付け、エクスポートを1つのフローで実行
- Skitch — シンプルな注釈
- Figma / Sketch — カスタムスタイリングによる、より洗練された製品ショット向け
ブラウザフレーム
ウェブ製品の場合、ブラウザフレームを使用してスクリーンショットを生のままではなく意図的に見せます。Screely、Browserframe、またはカスタムFigmaテンプレートなどのツールがブラウザのクロームオーバーレイを追加します。
フィーチャーグリッド用の複数スクリーンショット
ランディングページやProduct Huntギャラリーでは、製品のさまざまな側面を示す3〜5枚のスクリーンショットが必要になることがよくあります。これらをセットとして計画します:
- 各スクリーンショットは異なる機能を示す
- 一貫したビジュアル処理（同じズームレベル、同じブラウザテーマ、同じ注釈スタイル）
- 進行を示す: エントリー → 主要アクション → 結果
ティア別アセットチェックリスト
Tier 1
- デモ動画（60〜90秒、PHおよびランディングページに適している）
- 短いソーシャルカット（同じ録画から30〜45秒）
- ランディングページおよびPHギャラリー用の注釈付きスクリーンショット3〜5枚
- ソーシャル投稿用のGIF1〜2つ（主要なインタラクションを示す）
- ブログ投稿およびソーシャルリンクプレビュー用のOpen Graph画像
Tier 2
- 1〜2つのGIFまたは短い画面録画
- ランディングページセクション用のスクリーンショット2〜3枚
- Open Graph画像
Tier 3
- 1枚のスクリーンショット
- オプション: 変更が視覚的な場合は短いGIF
Open Graph画像
リンクとして共有されるすべてのコンテンツ（ブログ投稿、ランディングページ、チェンジログエントリ）には、カスタムOpen Graph（OG）画像が必要です。OG画像は、リンクがTwitter、Slack、iMessage、またはLinkedInに貼り付けられたときに表示されるものです。
- サイズ: 1200×630px
- コンテンツ: 製品名 + 主要な価値提案。看板のように扱う — 小さなサイズでも読みやすい
- 一貫性: テンプレートを使用して、すべてのローンチコンテンツに統一感を持たせる
- ツール: Figmaテンプレート、Vercel OG（コード生成）、Bannerbear（自動化）
プラットフォーム別動画仕様
| プラットフォーム | 解像度 | 最大長さ | フォーマット | 備考 |
|---|---|---|---|---|
| X/Twitter | 1280×720 または 1920×1080 | 2:20 | MP4 (H.264) | ミュート自動再生 — キャプションを追加 |
| 1920×1080 | 10分 | MP4 (H.264) | フィードでは正方形（1080×1080）が効果的 | |
| Product Hunt | 1920×1080 | 90秒 | MP4 | 50MB未満に保つ |
| ウェブサイトヒーロー | 1920×1080 | 制限なし | MP4/WebM | 自動再生ループ（音声なし）を検討 |
関連スキル
- launch-strategy — ローンチティアに必要なアセットを決定
- launch-tweet — GIFや動画をツイートに添付（リンクではなく）
- launch-landing-page — デモ動画とスクリーンショットをページに配置
- launch-distribution — プラットフォームごとのフォーマット要件