プレミアム動画Skillがすべて使える、ひとつのプラン。いつでも解約できます。プランを見る
Maison Vey · 16:9

このSkillで書き出した映像

Shotcraft プロダクトプロモ v1.0.0

実際のWebサイトやアプリから作るシネマティックなプロモ動画。本物の画面キャプチャ、124の撮影レシピ、ビートに合わせた音楽と効果音で MP4 に。

まだ評価はありません 0 ダウンロード
フォーマット
動画 · 16:9
尺
0:27

無料 アカウント登録で無料

ログインしてダウンロード

これをエージェントに貼り付けてください。必要ならCLIを接続し、Skillをインストールします。

モックではなく、実際のプロダクト画面を撮るオープンソースの Skill。エージェントがページを2倍の解像度でキャプチャし、機能ごとに調整済みのショットレシピを選び、絵コンテを書き、Remotion でアニメーションにして、効果音と音楽をビートに合わせ、全フレームを確認して、編集を続けられる MP4 を渡します。

2026年11月2日 更新

得られるもの

  • 完成したプロモ動画(H.264 MP4、1920×1080、30 fps)
  • ショット、字幕、効果音をすべて編集できる Remotion プロジェクト
  • ショットごとの静止画と品質レビュー
  • 使用した効果音のクレジットファイル

向いている用途

  • オンラインショップ、商品ページ、新商品の発売
  • Webアプリ、SaaS ダッシュボード、デスクトップツール
  • 上質に見せたい機能アップデート

向いていない用途

  • 撮影できるWebサイトや画面がない商品
  • 人物が話す動画や実写映像

このSkillについて

依頼の例

/video-shotcraft localhost:3000 のオンラインショップで25秒のプロモを作って。商品から始めて、サイズ選択とバッグへの追加を見せ、最後はロゴで。絵コンテを先に確認したいので共同制作で。

Webサイト、Webアプリ、オンラインショップをエージェントに渡すだけ。Shotcraft は実際のページをキャプチャし、モーションデザイナーのように演出します。商品のクローズアップからカメラが上がってページ全体へ、行がひとつずつ収まり、カーソルが選択肢を選ぶと価格が切り替わり、カートがスライドして項目ごとに埋まり、最後にUIが消えてブランド名が残ります。すべてのフレームがあなた自身の画面とコピーから作られるので、シャープでブランドに忠実、そのまま編集も続けられます。

使い方の流れ

  1. プロダクトの確認:エージェントがプロジェクトやサイトを読み、見せるべきものを判断して、3つの進め方からおすすめを提案します。完成済みの Ink Press テンプレートを使う、エージェントに演出を任せる、またはブリーフ・ルック・ショットリスト・絵コンテをあなたが確認する共同制作です。
  2. キャプチャ:ローカルのサイトを起動(または公開中のサイトを開き)、各ページを2倍の解像度で撮り、要素の切り抜きとレイアウトマップを作ります。カメラが動いても文字がぼやけません。
  3. ショット:オープニング、カメラワーク、トランジション、インタラクション、タイポグラフィ、エンディングの124のショットレシピから選び、調整済みのデモコードをもとに Remotion で組み立てます。
  4. サウンド:効果音を Freesound で探し(標準は CC0)、正確なフレームに合わせます。音楽を用意すれば、すべてのカットがビートに乗ります。
  5. チェックと書き出し:ショットごとの静止画、全体のレンダリング、Skill の品質ルールによるレビューを経て MP4 に。

コツ

  • いちばん大事なページを渡しましょう:商品ページ、主な操作、その結果。
  • ショットギャラリーで気に入った演出を名前で指定すれば、その通りに作ります。
  • 実際のコピーと価格を使うか、キャプチャ前にサンプルデータへ置き換えてもらいましょう。
  • レンダリング前に絵コンテを確認したいなら、共同制作を選びます。

オープンソース

Shotcraft は Yihao 氏が制作し(Vincentwei1021/video-shotcraft)、Apache-2.0 ライセンスで公開しています。ダウンロードは GitHub で公開されている Skill で、テンプレート付属の効果音ファイルは含みません。効果音は Skill 自身が Freesound から取得します。

始める前に必要なもの

用意するもの
あなたのWebサイトやアプリ(ローカルのプロジェクトか公開URL)、見せたいページと機能。任意で音楽、ロゴ、ギャラリーで気に入ったショット。
依存関係
Node.js 20 以降 — 必須 · FFmpeg — 必須 · Python 3.9 以降 — 必須 · Remotion — npm でインストール。個人と3人までのチームは無料、それ以上の企業は Remotion の企業ライセンスが必要
外部コスト
なし。キャプチャ、アニメーション、レンダリングはお使いのマシンで行い、Freesound の効果音は無料です。API キーや有料サービスは使いません。
最終テスト
v1.0.0 —

ユーザーレビュー

まだレビューはありません。インストールして最初に評価しましょう。

よくある質問

アプリだけでなくオンラインショップにも使えますか?

はい。ページに映るものなら何でも撮れます。商品ページ、サイズ選択、カートも、ダッシュボードや設定画面と同じように扱えます。このページのサンプルは2つのオンラインショップです。

すべての段階で確認が必要ですか?

お好みで。共同制作ならブリーフ、ルック、ショットリスト、絵コンテを確認できますし、エージェントにすべて任せることもできます。

演出を選べますか?

はい。ギャラリーで124のショットレシピを見て、使いたいものを指定すれば、調整済みのデモコードをもとに作ります。

なぜ無料なのですか?

Shotcraft は Yihao 氏によるオープンソースの Skill です。そのまま掲載し、私たちの自社商品で実際に動かして作ったサンプルを添えています。

関連ガイド

How to turn your product page into a cinematic promo videoThe best product promos are filmed on the real page, not a mock-up. The shot list that works for online shops and apps, how to keep text sharp when the camera moves, and how to make one with the open-source Shotcraft Skill.

似ているSkill

すべて見る