Claude CodeとRemotionで、記事の最後のCTAが動くようになりました

記事のいちばん最後に置く、
「スキしてもらえたらうれしいです」の動画。

私のCTAは、これまでも動画でした。
ただ、動画を作るAIは
1本ごとにクレジットがかかります。

だから作れたのは、数枚だけ。
その数枚を、ずっと使い回していました。

記事ごとに作り直すのは、
正直ちょっと面倒で。
CTAのためにそこまでは、いいかなって。

※この記事の動画は、noteに貼るために
5秒以内のGIFにしています。音はありません。

これは、Remotionという道具で作ったCTAです。
絵は、私のイラスト。
文字と動きは、Claude Codeに
コードで付けてもらいました。

Remotionは、個人なら無料で使えます。
この記事では、試作を5本作って、
このCTAにたどり着くまでを書いています。

noteの急上昇で見つけた「Remotion」

Remotionを知ったのは、
dotsにnoteの急上昇を
見てもらっていたときです。

11月6日の急上昇の13位に、
「Remotion」がありました。

dotsに急上昇を見てもらうようになった
最初の3日間のことは、こちらに書いています。

文字や図形を、コードで動画にする道具。
いつも使っているClaude Codeと、
組み合わせられるそうです。

先に、公式のページで料金を確かめました。

• 💰 個人は、仕事に使う場合も含めて無料

• 💰 3人以下のチームも無料

• 💰 手元での書き出しに、1本ごとの料金はない

Claude Codeは、いつもの契約の中で使いました。
Remotionのために払ったお金は、0円です。

PCには、何も入れていません

公式の手順は、
PCにNode.jsという道具を
入れるところから始まります。

ここで少し身構えたのですが、
私が使っているクラウドのClaude Codeには、
最初から入っていました。

公式の手順どおりに進めてもらうと、
プロジェクト作りが約55秒。
10秒の動画の書き出しが、約9秒でした。

……これが、最初の1本です。

狐は猫になり、カードはめくれなかった

せっかく試すならと、
雰囲気の違う試作を
何本か作ってもらいました。

コードの線だけで描いた、ネオンの狐。
最初は、どう見ても猫でした😇

耳を外に開いて、あごを尖らせて、
やっと狐になっています。

タロットのカードは、
めくれる動きを付けたはずなのに、
いつまでも裏のまま。

カードにかけた光のにじみが、
立体の表示をつぶしていたそうです。

コードの線だけでは、
私の描く狐娘には届かない。
そう分かったところで、方向を変えました。

絵はイラスト、動きはRemotion

絵は、描いてもらわない。
私のイラストを、そのまま使う。
Remotionには、動きだけを任せる。

タロット工房の「月」のカードが、
くるっとめくれます。

紅葉の狐娘は、顔のあたりから
光が広がっていく形にしました。

絵そのものは動かさないので、
AI動画のように崩れる心配がありません☺️

ここで、これはCTAに使えるかも、
と気づきました。

絵ごとに、文字の声を変えたCTA

CTA用に、文字を描かない絵を4枚用意しました。
Claudeにプロンプトを作ってもらって、
GPT Image 2.5で描いた、
片側を文字のために空けた絵です。

言葉と書体は、絵ごとに変えています。

冒頭の星空の窓辺は、やさしい丸文字。
手の中のハートが、とくん、と脈打ちます。

月明かりの階段は、物語の明朝体。
金色の文字の上を、光がすべっていきます。

夜の作業部屋は、手書き風の文字。
ノートに打ち込むように、出てきます。
これは、この記事のいちばん最後に置きました。

ネオンの夜は、ネオン管の文字。
ちらついてから、灯ります。

絵は1枚のまま、
言葉だけを記事ごとに差し替えられます。

⚠️ 作っていて、気になったところ

• フォントが読めずに、書き出しが止まった
  （フォントを先に手元に置いたら通った）

• 文字を絵と同じ色にしたら、読めなくなった
  （芯は白、色はにじみだけにしたら読めた）

• そのままGIFにしたら、1本11〜16MBあった

さすがに無理でした。

ブラウザだけで変換できる
「Movie to GIF」に通したら、
試作は1本400KB前後になっています。

💡 クレジットで止まっていたなら

動画は、クレジットを払って
生成するもの。
私も、ずっとそうしていました。

でも、動かしたいのが
文字と光くらいなら、
こういう作り方もあるみたいです。

絵は、もう持っているもので大丈夫です。
文字を描いていない1枚があれば、
言葉を変えて、何種類でも作れます。

同じCTAを使い回すのに、
少し飽きてきていたあなたへ。
よかったら、試してみてください🌙

この記事の最後のCTAも、今回作ったものです。

───────────────

📖 次はこれをどうぞ

今回のCTAの絵は、GPT Images 2.5で描きました。

同じGPT Images 2.5で、
記事を貼るだけで図解やマンガを作る
テンプレートを、有料記事にまとめています。

CTAの作り方ではなく、
記事の中に置く画像の話です。
記事の画像づくりも楽にしたい方へ🌙

───────────────

道具と仕組みの話を、もう少し読みたい方へ

「コードが書けない私の、創作の裏側」には、
AIと道具に助けてもらいながら作ってきた、
その裏側の記事を集めています。

動かなかった夜も、そのまま書いています🌙