ページリールの作成

概要

ページにはすでに最良の映像、すなわち実際に動作するモーション自体が存在します。作業は、それを忠実にキャプチャし、パスを選択し、結果を検証することです。

中核となる原則: 実際のアニメーションを記録し、決して再現しない。編集は感覚ではなく、測定に基づいて行う。

ページの録画はウォークスルーです。そのように伝えてください。ブランドフィルムは別の仕事であり、ストーリーボードに沿ったデザイン・アニメーション化された映像です。このスキルは「私たちが構築したページがどのように見え、動くか」を伝えるためのものです。

録画前に決定すること

リールが証明すること。 一文で。「新しいページは設計通りに自己構築され、スクロールする。」
どのバージョンを撮るか。 実際にリリースされ、レビュー環境に公開されているバージョンを録画すること。まだリリースされていないバージョン（未発表のプロダクトページ、ドラフト）や、変更途中のプロトタイプは決して録画しないでください。ステージング環境を録画し、ローカルビルドは使用しないでください。
フォーマット。 16:9の1920x1080がネイティブなデスクトップキャプチャであり、最も安全です。チームがQAしていないポートレートレイアウトを勝手に作成しないでください。
長さ。 短く。15〜20秒でページ全体の機能を示せます。5秒で1つの動きを示せます。リールに何が必要かを判断してください。
表示してはいけないもの。 顧客のロゴ、名前入りの引用、サードパーティのマーク、プレースホルダーテキスト、壊れた画像、未発表の主張。今すぐリストを作成してください。
解像度。 1080pでレビューすること。カットが承認されるまでは4Kマスターをレンダリングしないでください。

ステップ1: 実際のアニメーションを記録する

フレームごとのスクリーンショットではなく、ChromeのCDPスクリーンキャストを使用してください。GSAPのスクロールスクラブ、スムーズスクロール、Canvasのトレイル、タイマー付きイントロはすべて実時間で実行されます。これらを1フレームずつステップ実行すると動きが変わります。

Page.startScreencast  format jpeg, quality 100, maxWidth = viewport width, everyNthFrame 1

Appleシリコン搭載のラップトップでは、約60フレーム/秒（中央値ギャップ16.7ミリ秒）を実現します。

ロードタイムイントロ: スクリーンキャストを開始し、その後ページをリロードして、イントロが録画に含まれるようにします。リロード前のフレームはトリミングします。
スクロール: キーフレーム [秒数, 位置] からスクロールを駆動します。位置を単調3次補間（オーバーシュートなし、ホールドはフラットを維持）で補間し、各値をスムーズスクロールライブラリの scrollTo(y, { immediate: true, force: true }) で適用します。これにより、ページ自身のスクラブとスムージングが、読者の場合とまったく同じように動作します。ページの要素を決して手動でアニメーション化しないでください。
非表示にする、削除はしない: ロゴや引用には visibility: hidden を使用し、固定レイアウトをそのまま維持します。display: none はレイアウトをずらします。
クロック: ページ内で開始時刻を取得します（performance.timeOrigin + performance.now()）。これにより、スクロールキーフレームとスクリーンキャストのタイムスタンプが同じクロックを共有します。
リサンプリング: 一定のフレームレートにリサンプリングします。出力フレーム k は、k / fps の時点またはそれ以前の最新のスクリーンキャストフレームを表示します。

video/capture.mjs は、このリポジトリ内にあり、小さなJSON計画から上記のすべてを実行します。

ステップ2: 測定によってパスを選択する

感覚で選んだスクロールパスは、デッドゾーン（ホイールを動かしても画面に変化がない範囲）を残します。これらを見つける方法:

全範囲をゆっくりと一定速度でスイープした録画を1回行います。
その録画に対して video/analyze.py を実行します。フリーズしているラン（同一フレームの連続）と、フレーム間の最大変化量を報告します。
フリーズしているランをスクロール位置にマッピングします。それらがデッドゾーンであり、すばやく通過します。
スクロールスクラブされる瞬間（円が成長する、カードが構築される、カウンターがカウントする）には、ゆっくりとした読みやすい範囲を与えます。スクラブされるシーンはスクロールに追従するため、待機しても完了しません。
時間ベースのアニメーションは、しきい値を超えたときに開始され、完了に実時間を必要とします。最後のアニメーションが完了するまでクリップを終了しないでください。

次に、整形されたパスで実際のテイクを録画し、再度 analyze.py を実行します。ピン留めされたシーン内の短いフリーズランはホールドであり問題ありません。しかし、動きの途中での0.4秒のフリーズは問題です。

キャプチャ自体の健全性を確認します。使用するパート内のスクリーンキャストフレーム間の最大ギャップが約40ミリ秒未満である必要があります。これより大きいギャップはヒッチ（途切れ）であるため、再録画してください。

ステップ3: 完成した映像を選ぶ

コミットする前に、0.5〜1秒ごとにコンタクトシートを確認してください。以下は却下します:

空のカード、壊れた画像、画像があるべき場所に表示されている代替テキスト
CMSリスト内のプレースホルダーコピー
ページが描画される間の最初の1秒が空白であるもの。見出しが上昇し始める位置でトリミングします。
「表示してはいけないもの」リストにあるものすべて

セクションが未完成の場合は、それを除外し、所有者に伝えてください。壊れたカードをフィーチャーしたリールは、公開バグレポートになります。

ステップ4: カラータグを付けてエンコードする

./encode.sh <framesDir> out.mp4 <firstFrame> <frameCount> 60

スクリーンキャストフレームはフルレンジBT.601 JPEGです。エンコードはこれらをリミテッドレンジBT.709に変換し、ストリームにタグを付けるため、プレイヤーが推測する必要はありません:

scale=in_range=full:in_color_matrix=bt601:out_range=tv:out_color_matrix=bt709,format=yuv420p
libx264 -crf 14 -preset slow -x264-params colorprim=bt709:transfer=bt709:colormatrix=bt709:fullrange=off
-movflags +faststart

yuv420p と +faststart により、どこでも再生でき、即座に開始できます。結果を検証するには、数フレームをデコードしてソースと ピクセル単位 で比較します。チャンネル平均を比較しないでください。数百万のfloat32値を平均すると、存在しない色味を生み出すのに十分な誤差が蓄積されます。チャンネルあたり約3レベル以内であれば、忠実であると言えます。

ステップ5: 動画をQAする

ファイルから読み戻した、持続時間、フレームレート、サイズ、カラータグ
1秒ごとのフレームを目視確認し、さらに通常速度でのトランジションも確認
選択したフレームだけでなく、すべてのフレームにロゴ、名前、プレースホルダー、バナー、壊れた画像がないこと
フレーム内にCookieバナーや同意ウィジェットがなく、クリックもされていないこと。ページの独自CSSで非表示にするか、それらが表示されない環境で録画すること
最初のフレームがフックとなること。ページが空白で描画される場合は、それをトリミングすること
ページが完全で静止している、スクロール中のフレームではないポスターフレームを選択すること

その後、reviewing-page-design のコールドレビューアゲートを実行してください。

ステップ6: 検証できなかったことを明記する

音声（もしあれば。「聞こえません」）、プラットフォーム独自の再圧縮、テストしていないデバイスで表示されるもの。

デザインリールが求められる場合

すべてのビジュアルが時間の関数であるレイアウト内にページ映像を構成します（閉形式スプリング、1ビートに1つのオーバーレイアイデア、2〜5語のキャプション、ブランドカラーは名前とエンドカードのみ）。同じルールが適用されます。ページウィンドウは決して覆われず、テキストは360ピクセル幅で読め、ペイオフは最低1.2秒間保持されます。

レッドフラグ

スクロール駆動ページのフレームごとのスクリーンショットキャプチャ
変更途中のプロトタイプや、リリースされていないページの録画
未完成のセクションを含むリール
フレーム内の顧客ロゴや名前入りの引用
事前のスイープなしに感覚で選んだスクロールパス
チャンネル平均による色比較
カット承認前の4Kレンダリング

ページリール作成