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/phone-callouts/install.md を読んで手順どおりに「phone-callouts」スキルをインストールし、それを使って最初の動画を作ってください。

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

プロンプト例
Use the phone-callouts skill with assets/app-home.png and callouts "0.5, 0.2: Your balance, live | 0.3, 0.7: Send in two taps | 0.7, 0.7: Split with friends". Paper theme, 1:1.
スタイルプロンプト(Claude Motion または Opus 5.5)
Make a 7-second 16:9 app scene for [who will watch, e.g. new users], playing [where, e.g. the app's landing page]. Use only the screenshot and four labels I give. Deep navy background.

A black phone showing the screenshot rises into the center with a slight rotation that settles. One at a time, small violet dots appear on parts of the screen and thin violet lines draw out to white labels on the left and right. End frame: the phone floats gently with all four labels showing.

Attach: [a phone screenshot of your app]
Four labels and what each points at: [e.g. "Today's plan at a glance", "One-tap check-ins", "Streaks that stick", "Start in one tap"]

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

このシリーズの他の Skill

デバイス →