前回のポストで紹介した Anthropic マーケチームの手法、「で、実際どうやるの？」って人いそうだから、実際にやってみた
X で毎日 AI 情報を配信してるコムテです。Claude Code テクニックを中心に情報を配信しています
Claude Code のサブエージェントで広告コピーを量産して、自作の Figma プラグインでバナーを 20 パターン一気に生成するまでの全手順を書く
結論から言うと、サブエージェント作成からバナー 20 枚生成まで、15 分かからなかった
相当簡単だから、みんなもやってみ？
この記事バージョンアップするから、後で試したい人は、ブクマしておくんやで
ステップ 1 - サブエージェントで広告コピーを CSV 出力
まず .claude/agents/ にサブエージェントを 2 つ作った
1 つ目は headline-writer.md（見出し専用）。30 文字以内で広告の見出しだけを生成するエージェント
2 つ目は description-writer.md（説明文専用）。90 文字以内で説明文だけを生成するエージェント
なんで分けるかって言うと、1 つのプロンプトに「見出しも説明文も両方作って」と頼むと、文字数制限を守れなかったり品質が下がったりするんよね。Anthropic のチームも同じ理由で分けてた
サブエージェントの作り方はシンプルで、Markdown ファイルに YAML フロントマターで name、description、tools を書いて、本文にシステムプロンプトを書くだけ
こんな感じ
説明文用も同じ要領で作る。ポイントは出力形式を CSV に指定すること。後で Figma プラグインに食わせるから
そんで Claude Code に以下を指示
2 つのサブエージェントが並列で動いて、数分で見出し 20 本 + 説明文 20 本の CSV が出来上がった
見出しの例
- 「個人開発プロダクトを無料で公開しよう」
- 「あなたの技術、埋もれていませんか？」
- 「SEO最適化済みで検索に強い技術ブログ」
全部 30 文字以内。訴求ポイントもトーン（疑問形、断定形、呼びかけ形）もバラバラに散らしてくれた
ステップ 2 - Figma プラグインを Claude Code で自作
ここが一番「え、そんなことできるの？」ってなるところやね
作り方は簡単よ
Claude Code に以下を指示した
Claude Code が作ってくれたのは 3 つのファイル
- manifest.json - プラグインの設定ファイル
- ui.html - CSV をアップロードする画面
- code.js - テンプレ複製＋テキスト差し替えのロジック
仕組みはこう。Figma の Plugin API を使って、テンプレートフレーム内のテキストノードをフォントサイズで判定する。一番大きいのが見出し、次が説明文。CSV の行数だけテンプレを複製して、テキストを差し替えてグリッド配置する
エンジニアじゃなくても Claude Code がコード全部書いてくれるから、「何を作りたいか」が言語化できれば作れる。自分はコードを 1 行も書いてない
ステップ 3 - テンプレート作成 → バナー量産
まずバナーのテンプレートを 1 つ作った。今回は HTML で作って Claude Code to Figma 機能で送った
Claude Code to Figma は、CC に Figama MCP をインストールするだけ
テンプレートの構成
- 背景（グラデーション）
- ロゴ（izanami）
- 見出しテキスト
- 説明文テキスト
- CTA ボタン（「無料で始める」）
- URL（izanami.dev）
このテンプレが Figma に入ったら、プラグインを起動する
Figma デスクトップアプリで「プラグイン → 開発 → マニフェストからプラグインをインポート」で manifest.json を選択。これでプラグインが読み込まれる
プラグインを起動して、headlines.csv と descriptions.csv をアップロードして「バナーを生成」をクリック
一瞬で 20 パターンのバナーが Figma 上に並んだ
見出しと説明文がそれぞれ違うバリエーションで、テンプレの見た目はそのまま。手作業でコピペしてたら 1 時間以上かかる作業が、ボタン一発で終わった
全体の流れまとめ
.claude/agents/にサブエージェント 2 つ作成（2 分）- Claude Code で CSV 出力を指示（3 分）
- Claude Code で Figma プラグインを自作（5 分）
- テンプレート作成 → Figma に送る（3 分）
- プラグインで 20 パターン一括生成（1 分）
合計 15 分以内。コードは 1 行も手書きしてない
ポイント
- サブエージェントは
.claude/agents/に Markdown を置くだけで作れる - タスクごとに専門のエージェントを分けるのが品質を上げるコツ
- Figma プラグインの自作はハードル高そうに見えるけど、Claude Code が全部書いてくれる
- CSV の出力形式を最初に決めておくと、プラグインとの連携がスムーズ
- いきなりコードを書かない。まず全体のワークフローを設計してから Claude Code に渡す
感想
もはや、この方法使えば広告関係で困ることはないと思ったね
広告運用じゃなくても、LP のコピー、SNS 投稿画像、メールのバリエーションテストなど、同じ構造で応用できるよな
サブエージェント使って、プラグイン作れって話やね
自分のサービスの広告をこの手法で作ったけど、正直もう手動には戻れないよ
