Motion Skills
← Skills
無料解説

スクリーンショット・ズーム

スクリーンショットの一部に寄り、周りを暗くして示します。

Claude Code、Codex、Cursor など Skill に対応したエージェントに貼り付けてください。

必要なもの: Node.js 22+、FFmpeg、Chrome。API キー不要。

ほかのテーマと画面比率

スクリーンショット・ズーム · エレクトリック · 9:16
テーマ: エレクトリック · 9:16
スクリーンショット・ズーム · インク · 1:1
テーマ: インク · 1:1

同じテンプレートをテーマと画面比率を変えてレンダリングした最終フレームです。

5つのテーマ

  • インク
    ink
  • ペーパー · デフォルト
    paper
  • エレクトリック
    electric
  • ノワール
    noir
  • サンド
    sand

プロンプトでテーマ名を指定するだけで切り替わります。アクセント色・背景色・文字色を自分で指定することもできます。

インストール用プロンプト
https://claude-motion.com/skills/screenshot-zoom/install.md を読んで手順どおりに「screenshot-zoom」スキルをインストールし、それを使って最初の動画を作ってください。

Claude Code、Codex、Cursor など Skill に対応したエージェントに貼り付けてください。

プロンプト例
Use the screenshot-zoom skill with our screenshot assets/billing.png, url "app.ledgerly.io/billing", focus "0.05, 0.6, 0.4, 0.25", label "Invoices send themselves". Strong zoom, 9:16.
スタイルプロンプト(Claude Motion または Opus 5.5)
Make a 7-second 16:9 product scene for [who will watch, e.g. prospects], playing [where, e.g. the feature page]. Use only the screenshot and caption I give. Off-white background.

A browser window with the screenshot settles in with a soft shadow. After a beat, the camera pushes smoothly into the detail I name. The rest of the screenshot dims under a dark overlay while the detail gets an orange outline, and an orange pill caption pops in just below it. End frame: the camera keeps drifting in very slightly.

Attach: [a screenshot of your product]
Detail to zoom into: [e.g. the top-right revenue card "$48.2k"]
Caption: [e.g. "Revenue updates live"]

インストール不要:Claude Motion(Team または Enterprise)に貼り付けるか、Opus 5.5 に渡すと近い雰囲気になります。結果は実行ごとに変わります。Skill なら毎回同じ結果です。

このシリーズの他の Skill

スポットライト →