無料
Solenne · 16:9
このSkillで書き出した映像
プロダクトローンチ・モーション v1.0.0
アプリやWebサイトのための Dribbble 級ローンチ動画。カットなしで変形し続ける1つのUI、すべてを操作するカーソル、スプリング、回転する数字、ビートに合わせた効果音。
まだ評価はありません 0 ダウンロード
- フォーマット
- 動画 · 16:9
- 尺
- 0:30
トップモーションデザイナーのようにローンチ動画を演出するオープンソースの Skill。1つの要素がボタンからスライダー、トグル、チャートへとカットなしで変形し、カーソルがすべての変化を起こし、数字はオドメーターで回り、クリックやウーッシュ音はすべて音楽のビートに乗ります。エージェントがストーリーを書き、HTMLで映像を組み、モーションブラー付き60fpsでレンダリングして MP4 を渡します。
2026年11月2日 更新
得られるもの
- 完成したローンチ動画（H.264 MP4、1920×1080、モーションブラー付き60fps）
- 全フレームが時間の関数になっている、そのまま編集できるHTML映像
- ビートごとのコンタクトシートと1秒ごとのストーリーボード
- 音楽とビートで合わせてミックスした合成効果音
向いている用途
- アプリ、SaaS、Webサイトのローンチ
- 機能リリースやプロダクトアップデート
- ブランドスティングやUIモーションリール
向いていない用途
- 顔出しや実写の動画
- ナレーション台本のある解説動画
このSkillについて
依頼の例
/product-launch-motion localhost:3000 のアプリ用に30秒のローンチ動画を作って。1つの形がカットなしで変形：カードがスライダー、トグル、ステータスピル、ダッシュボードになる。この120 BPMの曲を使って、登録者数をドロップに合わせて見せて。
エージェントにWebサイトやアプリを渡してください。顧客の課題からストーリーを組み立て、ローンチ動画を演出します。見出しが一語ずつ着地し、リクエストがタイプされ、あとは1つの形がデモ全体を担います。カーソルがクリックやドラッグをするたびに、カードがスライダー、トグル、ステータスピル、ダッシュボードへと変形していきます。カメラは寄って各状態を画面いっぱいに見せ、引いてスケールを見せ、最後は数字が回り上がり、ロゴが曲のドロップに合わせて着地します。
仕組み
- まず演出プラン：エージェントがプロダクトを読み、短いクリエイティブプランを書きます。ストーリーと見せ場、ブランドの扱い、音楽、そしてビートごとのシーンリスト。クリエイティブの判断は自分で下し、一つずつ書き出すので、どれでも一言で覆せます。
- 音楽が先：numpy で曲のビートグリッドを測り、すべてのシーンをそれに合わせます。毎ビート何かが起き、いちばんの見せ場はドロップに来ます。
- 1本のHTML映像：すべてのフレームが時間から計算されます。閉形式のスプリング、トグルやタブの前端と後端がずれて伸びる動き、ブラーを伴う中身の切り替え、傾き・押し込み・波紋のあるカーソル、そして数字を見せるオドメーター。
- サウンド：UIの効果音はゼロから合成し、それぞれの音のピークをビートに合わせて配置します。
- チェックとレンダリング：ビートごとの静止画をコンタクトシートにして修正し、Playwright が1フレームあたり4サブフレームをレンダリング、FFmpeg がそれを重ねて本物のモーションブラー付き60fpsに仕上げます。
コツ
- 盛り上がりとドロップのある120 BPM前後のロイヤリティフリー曲を用意するか、エージェントに探させてください。
- 形に変わってほしい状態を8〜12個挙げるか、「おまかせ」と伝えてください。
- 実際の数字を渡してください。大きな数字は事実のまま使い、どの細部を創作したかを教えてくれます。
- Claude Opus 5.5 で使うのがおすすめです。高級感はディテールから生まれます。
オープンソース
Product Launch Motion は Muhammad Abubakr（AbubakrChan/product-launch-motion）が作り、MIT ライセンスで公開しています。ダウンロードは GitHub で公開されている Skill そのままで、作者が Cheerful のために作ったサンプル動画は含みません。
始める前に必要なもの
- 用意するもの
- あなたのWebサイトやアプリ、見せたいストーリーや状態、実際の数字とロゴ。任意で120 BPM前後のロイヤリティフリー曲。
- 依存関係
- Node.js 20 以降 — 必須 · Playwright Chromium — 必須 · FFmpeg — 必須 · Python 3.9 以降 — 必須
- 外部コスト
- なし。映像はあなたのマシンで組み立ててレンダリングし、効果音は合成です。APIキーや有料サービスは使いません。
- 最終テスト
- v1.0.0 —
ユーザーレビュー
まだレビューはありません。インストールして最初に評価しましょう。
よくある質問
「1つの形、カットなし」とは？
デモ全体が1つの要素で、サイズ、角丸、色を変えながら、中身は短いブラーで切り替わります。ボタンがローダー、スライダー、トグル、チャートへと変わるので、視線が迷いません。
音楽は必要？
盛り上がりとドロップのある120 BPM前後のロイヤリティフリー曲がいちばん合います。自分で用意しても、エージェントに探させて見せ場に合わせて盛り上がりとドロップを組ませても構いません。
レンダリング後に変更できる？
できます。映像は1つのHTMLファイルで、全フレームが時間から計算されるので、文言、色、タイミング、シーンごと変えて再レンダリングできます。
なぜ無料？
Product Launch Motion は Muhammad Abubakr によるオープンソースの Skill です。そのまま掲載し、サンプルは自社のスマートホームアプリ Solenne で実際に動かして作りました。
