本サイトの Claude Motion Skills は、動画になる小さな Web プロジェクトと考えると理解しやすくなります。コーディングエージェントがソースの作成と修正を手伝い、HyperFrames がレンダリングの基盤を担当します。役割は別です。その受け渡しを理解すると、問題が伝える内容、動き、出力ファイルのどこにあるか判断しやすくなります。
1. 依頼を場面の順序にする
新しい検索機能を知らせる 12 秒の動画を想定します。承認済みの文言、実際のスクリーンショット、対象視聴者、画面比率をエージェントに渡します。0～3 秒で課題を示し、3～9 秒で役立つ変化を見せ、9～12 秒で次の行動を示す三場面に分けます。これは編集案の一例であり、必須のテンプレートではありません。トランジションを磨く前に順序を決めましょう。要点のない文章は、高解像度で動かしても明確にはなりません。
2. 内容と配置を編集できる状態に保つ
ダウンロードするソースキットには、アニメーションとローカルで作業を続けるためのファイルが入ります。HyperFrames では HTML が構成、CSS が見た目、JavaScript が動きを記述できます。画像、フォント、音声はプロジェクトと一緒に保持し、消える可能性のある外部素材への依存を避けます。場面には problem、search-demo、next-step のような名前を付けます。見出しが変わったら、全場面を書き直すのではなく、その場面を調整して折り返しを確認するよう依頼します。
3. どの時刻にも直接移動できるようにする
レンダラーは特定時刻の画面を直接要求できる必要があります。HyperFrames はシーク可能な構成を使い、ブラウザーのアニメーション API にも Animation.currentTime などの時間制御があります。毎秒 30 フレームなら、この例は 360 フレームで、時刻ゼロから 1/30 秒刻みで取得します。実時間の時計だけに依存した動きは、再生では正常でもシークで失敗することがあります。同じ時刻を二度要求して比較してください。特に粒子、乱数、非同期メディアでは重要です。
4. 時間のかかる本番レンダリング前に確認する
ブラウザープレビューで物語とテンポを確認します。各場面の冒頭と末尾で停止し、3 秒と 9 秒付近の切り替えを調べましょう。画像の重要部分は十分大きいでしょうか。読む必要がある時点までに見出しの登場は完了していますか。字幕は別の要素に隠れていませんか。HyperFrames の文書には技術検証用の lint と check があります。プロジェクトに同梱された、導入済みバージョンに合うコマンドを使ってください。成功しても、内容の分かりやすさまでは判断できません。
5. 書き出して視聴し、ソースを残す
本サイトの MP4 制作は、ダウンロードしたキットから HyperFrames、Chrome、FFmpeg を使ってローカルで行います。予定したフレームを取得してエンコードするので、プレビューの再生の滑らかさを録画する仕組みではありません。実際の MP4 を開き、最初と最後のフレーム、ナレーション全体、寸法、長さを確認します。納品動画と一緒にソースフォルダーも残してください。後日一語変わっても、画素から全構成を再現せず、プロジェクトを更新して再出力できます。
次のステップ
プレビューで物語を判断し、時間情報を持つソースで動きを制御し、書き出した MP4 で納品を確認します。この三つをつなげて管理しましょう。
制作ワークスペースを見る出典と参考資料
出典は公式資料や制作者の公開ページです。提供状況は変わるため、契約やインストールの前にリンク先を確認してください。
- Claude Motion SkillsClaude Motion Skills
- How a HyperFrames project worksHeyGen
- Animation: currentTime propertyMDN Web Docs
- Finish and share a videoHeyGen