ソーシャル動画フォーマッター

ソーシャル動画フォーマッター は何をしますか？

あなたは、すでに正しい動画（ストーリー、モーション、ブランドが完成しているもの）を受け取り、それをフィードで効果的に表示するようにします。これは動画を作ることとは異なる仕事です。ラップトップで見栄えのするランドスケープデモも、縦型フィードではレターボックス表示で細い帯のようになり、キャプションはUIボタンの下に隠れ、最初のフレームは黒で、ループもしません。このスキルは、これら5つの問題をプラットフォームごとに修正し、メカニクスパックが必要とする正確な仕様を出力します。

これは「テイスト」のレイヤーです。remotion-video-productionパックと組み合わせて使用します。ここでリフレーム、セーフエリア、キャプションスタイル、ループを決定し、その後、具体的な仕様をremotion-compose（新しい<Composition>の幅/高さを作成しキャプションを焼き込むため）およびremotion-render（プラットフォームごとに書き出すため）に渡します。ここではコンポジションコードを書いたりレンダリングを実行したりせず、仕様を定義して委任してください。

リフレーム、リサイズ、クロップ、縦型化、キャプション追加、字幕追加、「ソーシャル用にフォーマット/書き出し」、または特定のプラットフォーム名（TikTok、Reels、Shorts、X/Twitter、LinkedIn）がリクエストされた場合、あるいは単に「これをモバイルで使えるようにして」と言われた場合でも、積極的に起動してください。

ワークフロー

以下の順序で実行してください。キャプションの前にリフレームを行います（キャプションのセーフエリアは新しいアスペクトに依存します）。最初のフレームとループは、レンダリングに引き渡す前に設計します。

ステップ 1 - ターゲットプラットフォームを特定し、その仕様を取得する

どのプラットフォームに公開するかを尋ね、references/platform-specsのテーブルから各プラットフォームのハードな制約を取得します。プラットフォームごとに4つの数値が必要です: アスペクト比、解像度、最大長、そしてセーフエリアのインセット（プラットフォームが独自のUIで覆うピクセル領域 - ユーザー名、キャプション、アクションレール、プログレスバー）。これらを推測してはいけません。アクションレールのガター内にあるキャプションは、デバイス上では見えず、プレビューでは問題なく見えることがあります。1つのソース動画は通常、2～3つの書き出しに分岐します（例：TikTok/Reels/Shorts用の9:16マスターと、LinkedIn/X用の1:1または16:9）。

ステップ 2 - リフレーム戦略を選択する (9:16 ↔ 16:9)

クロッピングによって生き残るピクセルが変わるため、被写体は新しいフレーム内に収まる必要があります。書き出しごとに戦略を選択します - references/reframe-strategiesを参照:

• 再レイアウト（最良）. 16:9のピクセルをまったくクロップしません。新しいキャンバスに合わせてシーンを再構成します。横並びだったものを縦に積み重ね、テキストを拡大し、被写体を縦方向の中央に移動します。これはremotion-composeの変更（新しい幅/高さ、同じコンテンツ）であり、常にクロップより優れています。ターゲットの寸法を引き渡します。
• センタークロップ. 16:9フレームの中央のカラムを9:16用に保持します。高速ですが、外側の3分の1を破棄します - 被写体が中央にある場合のみ安全です。
• パッド/ブラーバー. 16:9フレーム全体を9:16に収め、上下をぼかした拡大コピーで埋めます。 talking-head やスクリーンレコーディングには許容範囲ですが、モーションデザイン作品では手抜きに見えます。
• パンチ＆トラック. 被写体にクロップし、時間の経過とともにクロップウィンドウを移動してアクションを追跡します。最も強力な結果が得られますが、最も労力がかかります。remotion-compose用のキーフレームを指定します。

9:16 → 16:9も同じロジックを逆に適用します。縦型クリップをランドスケープの帯にピラーボックス表示するのではなく、新しい水平方向の余白を活用するために再レイアウトします。

ステップ 3 - 新しいフレームにセーフエリアをマッピングする

書き出しごとに、プラットフォームのセーフエリアインセットを重ね合わせ、すべての必須要素（キャプション、ロゴ、CTA、主要被写体）を安全な長方形の内側に配置します。右/下のガター（アクションレール + キャプションブロック）は、9:16で通常問題となる部分です。以下のsafe_area.jsを実行して、パーセンテージのインセットを正確な解像度のピクセルボックスに変換し、それらの数値をレイアウト境界としてremotion-composeに渡します。読み取られる必要がある要素については、安全でない帯を立ち入り禁止として扱います。

ステップ 4 - プラットフォームネイティブな最初のフレームを設計する

最初のフレームはサムネイルであり、スクロールを止める役割を果たします。自動再生はミュートで始まるため、フレーム0は音声なしで意味を伝えなければなりません。黒、ロゴスティング、フェード途中で開始してはいけません。読みやすいフック（結果の見せ場、太字のキャプション行、すでに画面に表示されている被写体）で開始してください。これはremotion-composeによるイントロシーンの編集（または1～2秒のフックを先頭に追加）です。フレーム0が何を表示するかを正確に指定します。

ステップ 5 - 焼き込みキャプションを指定する

ミュート再生を前提とします。キャプションは必須であり、オプションではありません。また、焼き込み（ピクセルにレンダリング）する必要があります。アップロードする.srtサイドカーファイルはプラットフォーム間で一貫性がなく、スタイル設定もできないためです。remotion-composeに対して以下の項目を指定します: 位置（セーフエリア内、通常は下3分の1だがキャプションブロックのガターより上）、スタイル（大きく、高コントラスト、セミボールド、あらゆる背景で視認性を確保するためのストロークまたは中実の背景付き）、タイミング（テキストの壁ではなく、発話に同期したフレーズ単位のチャンク）、そして画面上では最大で約2行。単語ごとのアニメーションキャプションについては、モーションデザインをkinetic-typographyに委任し、ここではセーフエリアボックスとタイミングのみを指定します。

ステップ 6 - ループを設計する

フィードはクリップを即座に再生します。そのため、クリーンなループは視聴時間を倍増させます。以下のいずれかを決定します:

• シームレスループ - 最終フレームが最初のフレームと一致する（同じ構図、位置、色）ため、再再生が認識されません。短いアンビエント/ブランドループに最適です。
• フックバックループ - 視聴者を開始に戻すような行で終了する（「…それがステップ1です」）。再視聴を意図的にします。
• ハードストップ - 明確なCTAエンドカード。ループが不自然に感じられる長めのナラティブ作品に適しています。

シームレスループの場合、開始と終了はremotion-composeの制約（フレーム0と最終フレームを一致させる）です。ループタイプと一致させるフレームを指定します。

ステップ 7 - 書き出し仕様を出力し、引き渡す

以下のexport-specテンプレートに記入します（プラットフォームごとに1ブロック）。この仕様がメカニクスパックへの指示書です: remotion-composeは、セーフエリアレイアウト、最初のフレーム、焼き込みキャプションを備えたアスペクト別の<Composition>を作成します。次にremotion-renderがそれぞれを書き出します（9:16の書き出しは、remotion-renderの縦型プリセットに従い、1080×1920で作成されたCompositionです）。ここではレンダリングせず、仕様を提供します。

品質基準

以下のすべてが満たされた場合のみ、書き出しはA+です:

• すべてのプラットフォーム書き出しが、実際のアスペクト、解像度、最大長、そしてセーフエリアボックスを指定していること - 仕様テーブルから取得し、推測ではないこと。
• ターゲットプラットフォーム上の安全でないガターに、必須要素（キャプション、ロゴ、CTA、被写体）が配置されていないこと。safe_area.jsのボックスに対して検証済みであること。
• リフレームが、被写体が失われる可能性がある場合に再レイアウトまたは追跡クロップであること - モーション作品に対する盲目的なセンタークロップや手抜きのブラーバーパッドではないこと。
• フレーム0が音声なしで意味をなすこと: フック、結果、または被写体 - 黒、裸のロゴ、フェード途中ではないこと。
• キャプションが焼き込まれ、セーフエリア内にあり、フレーズ単位でチャンク化され、2行以下で、高コントラストであること。
• ループタイプが意図的に選択され、シームレスループの最初/最後のフレームが一致するように指定されていること。
• 出力がremotion-compose / remotion-renderに渡される仕様であること - このスキルはコンポジションコードを作成せず、レンダリングも実行しなかったこと。

禁止事項

• プロジェクトのスキャフォールディング、コンポジションコードの作成、またはレンダリングの実行をここで行わないでください。仕様を定義し、remotion-setup / remotion-compose / remotion-renderに委任してください。
• 被写体が中央にない場合、16:9のソースを9:16にセンタークロップしないでください。被写体を切り取ることになります。代わりに再レイアウトまたはトラックを行ってください。
• プラットフォームのアクションレールやキャプションブロックで覆われる右/下のガターに、キャプション、CTA、またはロゴを配置しないでください。
• ソーシャル用にアップロードする.srt/.vttサイドカーキャプションに依存しないでください。ピクセルに焼き込み、常にレンダリングされ、スタイルを制御できるようにしてください。
• 黒、ロゴスティング、またはフェードで開始しないでください。フレーム0はサムネイルです。
• 1つの16:9ファイルをすべてのプラットフォームに配信しないでください。縦型フィードはレターボックス表示で帯のようになります。アスペクトごとに書き出してください。
• プラットフォームの最大長を超えて「それでも投稿できるだろう」と期待しないでください。切り詰められるか拒否されます。カットで制限内にトリミングしてください。
• 単語ごとのキャプションアニメーションをここで設計しないでください。それはkinetic-typographyの役割です。ここではセーフボックスとタイミングのみを指定します。
• ストーリーボードやショットの順序をここで計画しないでください。動画がまだ存在しない場合、それはvideo-storyboardの役割です。このスキルはすでにカットされた動画をリフレームします。
• 要素の動き方（イージング、スペーシング、フォロースルー）をここで調整しないでください。それはmotion-design-principlesの役割です。このスキルは新しいキャンバスと境界のみを指定します。
• リフレームのパレット、コントラスト、照明をここで選択しないでください。それらの決定はmotion-color-and-lightに委ねてください。
• プロダクトデモのコンテンツや画面上の振り付けをここで指示しないでください。それはproduct-demo-directorの役割です。このスキルはコンテンツが確定していることを前提とします。
• スコア、ビート同期、またはサウンドをここで設計しないでください。キャプションはミュートの自動再生を前提としますが、オーディオはsound-and-music-syncの役割です。

関連スキル

これはビデオパック内の1つのクラフトスキルです。リクエストが他のスキルの関心事である場合は、そのスキルに委任し、フォーマット仕様をメカニクススキルに渡してください:

• video-storyboard - 動画が存在する前にビートとショット順序を計画する。このスキルの前に実行されます。
• product-demo-director - デモコンテンツと画面上の振り付けを指示する。
• motion-design-principles - アニメーションのイージング、スペーシング、動きのクラフト。新しいアスペクト用にフレームを再レイアウトする際に活用します。
• motion-color-and-light - パレット、コントラスト、照明の決定。
• kinetic-typography - 単語ごとのアニメーションキャプションのモーション（セーフボックスとタイミングを指定し、アニメーションをデザインします）。
• sound-and-music-sync - スコアとビート同期。このスキルが意図的に触れないオーディオレイヤー。
• remotion-compose / remotion-render - このスキルの書き出し仕様を消費して、アスペクト別の<Composition>を作成しMP4を書き出すメカニクス。

計算機

自己完結型のNodeスクリプト。safe_area.jsとして保存し、node safe_area.jsで実行します。各プラットフォームのパーセンテージベースのセーフエリアインセットを、そのプラットフォームの解像度に応じたピクセルボックスに変換するため、正確なレイアウト境界をremotion-composeに渡すことができます。依存関係はありません。仕様が変更された場合はplatformsブロックを編集してください。

// Social safe-area calculator. Run: node safe_area.js
// Insets are the % of each edge the platform UI covers (top/right/bottom/left).
// Right + bottom are large on 9:16 because of the action rail and caption block.
const platforms = [
  { name: 'TikTok',         w: 1080, h: 1920, top: 6,  right: 11, bottom: 17, left: 3 },
  { name: 'Reels',          w: 1080, h: 1920, top: 7,  right: 12, bottom: 18, left: 3 },
  { name: 'Shorts',         w: 1080, h: 1920, top: 5,  right: 12, bottom: 13, left: 3 },
  { name: 'X (in-feed)',    w: 1080, h: 1080, top: 4,  right: 4,  bottom: 12, left: 4 },
  { name: 'LinkedIn',       w: 1080, h: 1350, top: 4,  right: 4,  bottom: 10, left: 4 },
]

function box(p) {
  const insetX = (pct) => Math.round((pct / 100) * p.w)
  const insetY = (pct) => Math.round((pct / 100) * p.h)
  const x = insetX(p.left)
  const y = insetY(p.top)
  const safeW = p.w - insetX(p.left) - insetX(p.right)
  const safeH = p.h - insetY(p.top) - insetY(p.bottom)
  return { x, y, safeW, safeH }
}

for (const p of platforms) {
  const b = box(p)
  console.log(
    p.name.padEnd(14),
    `${p.w}x${p.h}`.padEnd(11),
    'safe box -> x:' + String(b.x).padEnd(4),
    'y:' + String(b.y).padEnd(4),
    'w:' + String(b.safeW).padEnd(5),
    'h:' + b.safeH
  )
}

実行結果の例

TikTok         1080x1920   safe box -> x:32   y:115  w:929   h:1479
Reels          1080x1920   safe box -> x:32   y:134  w:918   h:1440
Shorts         1080x1920   safe box -> x:32   y:96   w:918   h:1574
X (in-feed)    1080x1080   safe box -> x:43   y:43   w:994   h:907
LinkedIn       1080x1350   safe box -> x:43   y:54   w:994   h:1161

読み取り方: TikTokでは、すべての必須読み取り要素を x 32→961、y 115→1594 の範囲内にレイアウトします。右のガター（アクションレール: いいね、コメント、共有）は最後の約119pxを消費し、下部（ユーザー名 + キャプション）は約326pxを消費します。Studioのプレビューでは問題なく見えても、デバイス上ではこれらの領域は覆われています。これらの値をレイアウト境界としてremotion-composeに渡します。1080×1920の縦型Compositionでは、キャプションとCTAを生のフレーム端ではなく、このボックス内に配置します。

テンプレート: export-spec

プラットフォームごとに1ブロック記入します。これはremotion-composeとremotion-renderが消費する指示書です。safe_area.jsからセーフエリアの数値を貼り付けてください。

SOCIAL EXPORT SPEC. [FILL: video name]. Source: [FILL: 16:9 master, 1920x1080]

PLATFORM: [FILL: TikTok / Reels / Shorts / X / LinkedIn]
  Aspect / resolution:   [FILL: 9:16 / 1080x1920]
  Max length:            [FILL: e.g. <= 60s in-feed]
  Safe box (px):         x:[FILL] y:[FILL] w:[FILL] h:[FILL]   (from safe_area.js)
  Reframe strategy:      [FILL: re-layout / center crop / blur-pad / punch-and-track]
    -> remotion-compose: [FILL: new Composition WxH + layout notes / crop keyframes]
  First frame (frame 0): [FILL: the muted hook shown at 0 - never black/logo/fade]
  Captions:              burned-in, [FILL: position in safe box], <=2 lines,
                         phrase-chunked, [FILL: style - size/contrast/backing]
  Loop:                  [FILL: seamless / hook-back / hard stop]
    -> if seamless:      frame 0 matches last frame at [FILL: position/color]
  Render:                remotion-render [FILL: preset, e.g. 1080x1920 H.264 MP4]

(repeat the block for each target platform)

references/platform-specs

出荷前に各プラットフォームの最新のクリエイター向けドキュメントと照合してください。これらは安定した形状ですが、制限は変動します。アスペクトとセーフエリアは、正確な最大長よりも重要です。

• TikTok - 9:16, 1080x1920。フィード内での最適な長さは短め（約60秒未満）ですが、アップロードはそれよりかなり長くできます。右側のアクションレールが大きく、下部のキャプションブロックも高いです。重要な読み取りコンテンツは上部中央に配置してください。サウンドオンの文化ですが、アクセシビリティとミュート自動再生のためにキャプションは依然として必要です。
• Instagram Reels - 9:16, 1080x1920。最大約90秒。TikTokと同様の右/下のUIに加え、下部にプロフィール/オーディオ行があります。グリッド内でのクロップは1:1であるため、中央部分が正方形のサムネイルとしても読める必要があります。
• YouTube Shorts - 9:16, 1080x1920。最大60秒（ただし、プラットフォームの制限は変動する可能性があります...）。