Opus 5.5の横長製品動画を、読みやすい縦型動画に作り直す

使える縦型動画にするには、縦横比だけでなくレイアウトを変える必要があります。 Opus 5.5/Remotionのプロジェクトでは、ストーリーと元素材はそのままに、見出し、スクリーンショット、字幕を新しい縦型コンポジションに配置し直します。実際の画面は視聴者に必要な部分を中心にトリミングし、デスクトップの画面をスマートフォン型の枠に押し込まないでください。

このチュートリアルでは、30秒の製品概要動画を1280 × 720から720 × 1280に変換します。実際に書き出した2本の動画と、編集可能なプロジェクトを用意しています。新たに扱うのは、スクリーンショットの切り取り方、テキストの配置、出力の確認です。コードからMP4までの全体のワークフローは、Opus動画のメインガイドで解説しています。

実際に書き出した2本を比べる

ナレーション付きの横長版を視聴・ダウンロードし、縦型版と比べてみてください。

Remotionで実際にレンダリングした720 × 1280の動画です（30 fps、映像900フレーム）。英語の参考用ナレーションと文単位の字幕は横長版と共通です。これは公開ページの概要紹介であり、APIリクエストを完了する様子を録画したものではありません。

プロジェクト一式と縦型MP4を入手できます。アーカイブには1280 × 720の実際の元キャプチャと最終的なトリミング座標が残っているので、変換の内容を確認・変更できます。

最初のReact/Remotionのソースは、ファーストパーティのClaude Codeで実際にclaude-opus-5-5を呼び出して作成しました。この呼び出しで渡したのは素材の説明文とサイズで、スクリーンショットのピクセルは渡していません。実際の画像はこちらで用意し、出力を確認して編集上の修正を加え、ローカルでレンダリングしました。OpusがこのMP4を直接出力したわけではなく、参考用の音声はeSpeak NGで別に生成しています。

レイアウト変更、トリミング、新規撮影から選ぶ

横長のスクリーンショットには、ナビゲーション、中央のページ、サイドバーを並べて表示できるだけの横幅があります。縦型のフレームでは、通常この3つを読めるサイズのまま残すことはできません。どこまでズームするかを決める前に、どの部分がナレーションの文を裏付けるのかを決めてください。

今回の縦型版は、レイアウト変更と本物の画面のトリミングを組み合わせています。サイトのモバイルレイアウトを示すものではありません。ドキュメントのショットは左側の導入部分に寄った表示にし、APIのショットではメインの概要と表を残しています。元のキャプチャ自体は変更していません。

これらの素材の選び方は、スクリーンショットからデモを作るチュートリアルで説明しています。実際のモバイル画面があるなら、デスクトップの一部を拡大するより、それをキャプチャしたほうが良い場合があります。その場合は別の元素材になるので、URL、ビューポート、キャプチャ日時を別途記録してください。

ストーリーは1つ、コンポジションは2つ

プロジェクトを実行する前に、Node.jsとnpmをインストールしてください。後述するターミナルでのメディア確認（任意）には、ffprobeを含むFFmpegを別途インストールする必要があります。npm ciではこのシェルコマンドはインストールされません。任意の確認コマンドを使わなくても、同梱のnpmスクリプトでレンダリングできます。

ダウンロードしたプロジェクトから始めます。

npm ci
npm start

DemoNarratedを選び、次にDemoPortraitを選びます。どちらも同じシーン区間、画像、ナレーションのスケジュールを使っており、違うのはlayoutプロパティだけです。だからこそ比較に意味があります。視聴者が読める内容の違いは、別の台本に差し替えたせいではなく、レイアウトとトリミングによるものです。

映像だけを書き出したい場合に備えて、無音のDemoLandscapeコンポジションも残しておきます。これはアーカイブ内の3つ目の成果物で、別の絵コンテではありません。

src/index.tsxでは、SCENESが4、11、18、25秒のカットを管理しています。Rootはコンポジションのサイズを登録し、Demoはレイアウトを選び、ShotSceneは各画像の配置を決めます。Rootだけを変えても、実際のデザイン作業の大部分は手つかずのままです。

縦型レイアウトを実際のピクセルで決める

縦型コンポジションでは、x=48からx=672までの横方向の領域を使います。720ピクセルのキャンバスの左右に48ピクセルずつ余白を残し、スクリーンショットの幅は624ピクセルです。メインのコンテンツはy=110付近から始まります。スクリーンショットはy=330、チャプター行はy=860から始まり、字幕ボックスはy=936からy=1060までです。

これらはこのプロジェクトのデザイン座標であり、すべてのSNSアプリに共通する公式のセーフゾーンではありません。ボタン、説明文、端末の表示枠は公開先によって異なります。公開前に公開先の最新のプレビューを確認してください。このチュートリアルのローカルテストは、プラットフォームへのアップロードテストではありません。

ローカルでの実際のプレビューです。スクリーンショットは、見出しや字幕とは独立して配置しています。画面と例の動画は英語で、別の言語に見せるために画像を書き換えてはいません。

見出しが2行に折り返しても、スクリーンショットが字幕の領域まで押し出されることはありません。この点は、「Explore the catalog」より長い「Find the documentation」で重要になります。別のタイトルを使う場合は、フォントサイズが同じならブロックの高さも同じだと思い込まず、実際に折り返したときの高さを確認してください。

APIのトリミングは、このバージョンで最も縦に長い画像です。高さは約479.3ピクセルで、y=809.3付近で終わります。キャプチャのラベルは、その約22ピクセル下から始まります。チャプター行の手前にはほとんど余裕がないため、そのシーンを確認し直さずに、画像の高さやラベルのフォントサイズを安易に大きくしないでください。

画面をゆがめずにトリミングを計算する

トリミングには、x、y、幅、高さという4つの元座標が必要です。拡大縮小には、縦横共通の倍率を1つだけ使います。最終的な元画像のトリミングは次のとおりです。

すべてのトリミングは、元の1280 × 720のファイルの範囲内に収まっています。カタログのトリミングでは、その下にある変動する価格のセクションを意図的に除外しています。ドキュメントとAPIのトリミングは実際のピクセルをそのまま使っており、文字やコントロールを作り直してはいません。

表示幅Wとトリミング(x, y, w, h)に対しては、次の式を使います。

scale = W / w
viewport height = h × scale
image width = source width × scale
image height = source height × scale
image left = -x × scale
image top = -y × scale

APIのシーンでは、624 / 690 ≈ 0.90435、530 × 0.90435 ≈ 479.3となります。画像はoverflow: hiddenの表示領域の背後で、対応する負のオフセット分だけ移動します。幅と高さには同じ倍率を使うので、円は円のままで、文字も引き伸ばされません。

ただし、実用上の限界があります。トリミングを拡大しても、元のキャプチャにない細部は取り戻せません。ドキュメントのトリミングでは、元画像の580ピクセル分を出力の624ピクセルで表示しています。このわずかな拡大は元画像からの計算で分かるもので、高解像度でページをキャプチャし直したものではありません。小さな文字がチュートリアルの中心になるなら、該当部分を適切な解像度でキャプチャし、スマートフォンの表示サイズで改めて確認してください。

最初のレンダリング後に変えたこと

モデルの初期出力では、ドキュメントとAPIのスクリーンショット全体を縦型レイアウトに配置していました。レンダリング自体は動作しましたが、画面の大部分が小さすぎて役に立ちませんでした。そこでシーンの順序は維持したまま、上に示した2つのトリミングを導入しました。これが、初期版と最終版の縦型動画の主な見た目の違いです。

また、字幕から2行のCSS clampを削除しました。clampを使うとボックスは整って見えますが、後半の単語が切り捨てられる可能性があります。長すぎる字幕はレビュー中に気づけるようにし、意図的に短くする、分ける、スペースを広げるほうが安全です。同梱の英文は確認したバージョンには収まっていますが、差し替える場合は改めて確認が必要です。

最後に、字幕は参考音声のスクリプトが生成するsrc/captions.jsonから読み込むようにしました。フレームの丸めを経て、各文の開始と同時か、その直前に表示されます。このスケジュールと意図的な読むための保持時間については、ナレーションと字幕のチュートリアルで説明しています。このプロジェクトの字幕は文単位であり、カラオケのような単語単位の同期ではありません。

横長版のデザイン要素を、すべてそのまま流用しないでください。横長版では、ドキュメントとAPIのタイトルがスクリーンショット全体の下の帯を共有しています。縦型版では、タイトル、スクリーンショット、キャプチャのラベル、チャプター行、字幕がそれぞれ別の縦位置を占めます。同じストーリーを使った、別のコンポジションです。

確認しやすい縦型への調整をOpusに依頼する

次のプロンプトは、自分のプロジェクト向けの調整用として使ってください。今回役立った制約をまとめたもので、考えられるすべてのバリエーションを実行したという主張ではありません。

この既存のRemotionプロジェクトに縦型のコンポジションを追加してください。
横長のコンポジションと承認済みの元素材は維持すること。
ターゲット：720x1280、30 fps、同じシーン境界と総フレーム数。

見出し、スクリーンショット、字幕はそれぞれ独立した縦のブロックとして配置すること。
次の元画像のトリミングを使うこと：[承認済みの各画像の x, y, width, height]。
画像の幅と高さには同じ倍率を1つだけ使うこと。
画面を描き直したり、スクリーンショット内のラベルを変えたりしないこと。

このプロジェクトのデザイン範囲：x=48..672、重要なコンテンツは y=90..1080。
これはプロジェクトの余白であり、どのプラットフォームのセーフゾーンについての主張でもない。
字幕には独立した帯を使うこと。はみ出しをline-clampで隠さないこと。
単語のタイムスタンプを捏造したり、ナレーションを黙って短くしたりしないこと。

変更したファイル、トリミングの計算、確認すべきフレームを返すこと。
タイトル、キャプチャのラベル、字幕が収まらなくなったシーンがあれば指摘すること。

モデルがトリミングを提案したら、実際の素材と照らし合わせて確認してください。見た目の良い領域でも、その画面を理解するのに必要なラベルが抜けていることがあります。フォントを小さくする提案なら、想定する視聴サイズで確認します。合格の基準は、すべての要素が技術的にキャンバスに収まるかどうかではなく、意図したメッセージを視聴者が理解できるかどうかです。

すべてのシーンを確認し、両方のバージョンを書き出す

カタログ、ドキュメント、APIの各シーンについて、150、390、600などの代表的なフレームにシークします。オープニングとエンディングも確認してください。製品のシーンがすべて問題なくても、最後に示す遷移先の文言が長いとはみ出すことがあります。

Remotion Studioのフレーム選択を使い、両方のコンポジションで同じ瞬間を確認します。どのページか分かるか、字幕の全文が表示されているか、トリミングの端、見出しの折り返し、キャプチャのラベル周りの余白を見ます。トランジションの開始と終了も確認し、springやカメラの動きでコンテンツが意図した領域から押し出されていないことを確かめます。

npm run render:narrated
npm run render:portrait
ffprobe -v error -show_entries stream=codec_name,width,height,r_frame_rate,nb_frames \
  -show_entries format=duration -of json out/portrait.mp4

縦型動画で期待されるストリームは、H.264、720 × 1280、30 fps、映像900フレームです。AACの音声トラックには、30秒の映像タイムラインをわずかに超えるエンコード上の末尾が付くことがあります。コンテナの丸められた長さだけでなく、実際の文のタイミングを比べてください。

今回の確認は、ローカルのブラウザープレビューとレンダリングしたファイルで行ったもので、実機やSNSプラットフォームでの公開テストではありません。キャンペーンを始める前に、視聴者が実際に見るサイズで最終書き出しを確認し、アップロードしたバージョンも確認してください。この記事が5言語で公開されていても、言語ごとに5本の動画を制作したわけではありません。

編集可能な2形式のセットを納品する

書き出した2本に分かりやすい名前を付けて保存し、対応する元プロジェクトを残し、プラットフォーム固有のレイアウト変更を記録しておきます。そうすれば、後で字幕や製品画面を更新するときにも経緯をたどれます。ナレーションを差し替えたら、両方のレイアウトを見直してください。横長で収まる文でも、縦型では改行位置を変える必要があるかもしれません。

Opus 5.5のモデルページは、プロジェクトのコードを生成・修正する用途に関係するページです。記録した呼び出しにはファーストパーティのClaude Codeを使っており、ローカルのレンダラーと参考音声の合成エンジンは別のツールです。この例は、Ofoxにワンクリックで縦型に変換する編集機能があることを示すものではありません。

制作全体の流れは、Opus動画のメインガイドに戻って確認してください。元のストーリーに手を入れる必要があるときは製品デモのチュートリアル、新しい形式でタイミングの問題が見つかったときはナレーション・字幕のチュートリアルを使います。これらの作業を分けておくと、修正ごとの検証がしやすくなります。