AIエージェントでデザインテンプレートを量産した話 ── バナー・サムネイル・Instagram 9種を1日で作る方法

フリーランスのデザイン案件で「LP制作」だけに絞っていると、なかなか受注が伸びません。バナーやサムネイル、Instagram投稿テンプレートといった小規模案件は単価こそ低いものの、数が多く、実績を積みやすい領域です。この記事では、AIエージェント（Claude Code）を使ってデザインテンプレートを9種類、1日で制作した実際のフローを解説します。

背景: LP制作だけでは案件が取れない

クラウドソーシングでLP制作の案件を探すと、応募者が数十人を超えるのは珍しくありません。実績の少ない段階では、提案が埋もれてしまいます。

一方で、バナー制作やYouTubeサムネイル、Instagram投稿画像の案件は、LP案件ほど競合が集中しません。1件あたりの単価は数千円から数万円程度ですが、短時間で納品できるため時間単価はむしろ高くなることもあります。

ただし、これらの案件に応募するには「バナーを作れる」「サムネイルを作れる」という実績が必要です。実績がないから受注できない、受注できないから実績が作れない。このループを突破するために、AIエージェントを使ってテンプレートを量産し、ポートフォリオとして掲載する方法を取りました。

制作フロー: HTML/CSS + Playwright書き出し

なぜCanvaではなくHTML/CSSなのか

テンプレート制作にはCanvaを使う方法もあります。しかし、今回はHTML/CSSを選びました。理由は3つあります。

1つ目は再現性です。HTML/CSSはコードなので、AIエージェントが生成・修正しやすく、テイスト違いのバリエーションを高速に展開できます。Canvaの場合、GUI操作が必要になるため、AIとの連携に手間がかかります。

2つ目はサイズ展開のしやすさです。CSSのviewportを変えるだけで、同じデザインを1200x628px（バナー）から1080x1080px（Instagram）に調整できます。レイアウトの微調整はFlexboxやGridで対応します。

3つ目はフォント崩れのなさです。ローカル環境でレンダリングするため、フォントの差し替えや文字化けが起きません。Google Fontsを指定すれば、どの環境でも同じ見た目になります。

Playwrightでスクリーンショット書き出し

HTMLファイルをブラウザで開き、Playwrightでスクリーンショットを撮る方式でPNG画像を書き出します。仕組みは非常にシンプルです。

# render.py の概要
import asyncio
from playwright.async_api import async_playwright

async def render_html_to_png(html_file: str, output: str, width: int, height: int):
    async with async_playwright() as pw:
        browser = await pw.chromium.launch()
        page = await browser.new_page(viewport={"width": width, "height": height})
        await page.goto(f"file://{html_file}")
        await page.screenshot(path=output, full_page=False)
        await browser.close()

このスクリプトにHTMLファイルのパスと出力先、幅と高さを渡すだけで、指定サイズのPNG画像が出力されます。9種類のテンプレートすべてを、このフローで書き出しました。

複数テンプレートをまとめて書き出す場合は、以下のように一括処理します。

# render_all.py の概要
import asyncio
from pathlib import Path

TEMPLATES = [
    ("banners/banner-template-simple.html",  "out/banner-simple.png",   1200, 628),
    ("banners/banner-template-brand.html",   "out/banner-brand.png",    1200, 628),
    ("thumbnails/thumbnail-impact.html",     "out/thumb-impact.png",    1280, 720),
    ("instagram/instagram-text.html",        "out/ig-text.png",         1080, 1080),
]

async def main():
    for html, out, w, h in TEMPLATES:
        await render_html_to_png(str(Path(html).resolve()), out, w, h)
        print(f"Rendered: {out}")

asyncio.run(main())

テンプレートの追加は TEMPLATES リストに1行追加するだけです。AIエージェントにテンプレートを追加させる場合も、このリストへの追記を指示するだけで対応できます。

AIエージェントへの指示の出し方

要件定義をCLAUDE.mdに書く

Claude Codeでは、プロジェクトルートに置いたCLAUDE.mdファイルをエージェントが読み込みます。ここにテンプレートの要件を記述しておくと、毎回の指示が簡潔になります。

具体的には、以下の情報を定義しました。

• 出力サイズ（1200x628px / 1280x720px / 1080x1080px）
• カラーパレット（メイン色・アクセント色・背景色のHEXコード）
• フォント指定（見出し用・本文用のGoogle Fontsファミリー名）
• テイスト名と概要

3テイスト分割の考え方

テンプレートを「テイスト」で分割すると、バリエーションを体系的に増やせます。今回は、カテゴリごとに3つのテイストを設定しました。

Webバナーには「シンプル」「ブランド」「訴求」の3テイストを用意しました。シンプルは余白を活かした落ち着いたデザイン、ブランドはコーポレートカラーを前面に出した信頼感のあるデザイン、訴求はセールやキャンペーン向けの視認性重視のデザインです。

YouTubeサムネイルには「インパクト」「信頼感」「情報整理」の3テイストを設定しました。インパクトは太字と高コントラストで目を引くデザイン、信頼感は教育コンテンツに適した落ち着いた配色、情報整理はランキングやまとめ動画に使う構造化されたレイアウトです。

Instagram投稿には「テキスト主体」「ビジュアル」「ミニマル」の3テイストです。テキスト主体は情報投稿やTips系に適したデザイン、ビジュアルは商品やブランドの写真を活かすレイアウト、ミニマルは名言や引用、サービス告知に使うシンプルなデザインです。

作成した9種テンプレートの概要

実際に制作した9種類のテンプレートを以下にまとめます。

カテゴリ	テイスト	サイズ	用途
Webバナー	シンプル	1200x628px	SNS広告・ブログヘッダー
Webバナー	ブランド	1200x628px	コーポレート広告
Webバナー	訴求	1200x628px	セール・キャンペーン
YouTubeサムネイル	インパクト	1280x720px	チャンネル登録促進
YouTubeサムネイル	信頼感	1280x720px	解説・教育コンテンツ
YouTubeサムネイル	情報整理	1280x720px	ランキング・まとめ
Instagram	テキスト主体	1080x1080px	情報投稿・Tips
Instagram	ビジュアル	1080x1080px	商品・ブランド紹介
Instagram	ミニマル	1080x1080px	名言・引用・サービス告知

各テンプレートはHTML/CSSで作成し、Playwrightで書き出したPNG画像をポートフォリオに掲載しています。テキストやカラーコードを差し替えるだけで、クライアントの要望に合わせたカスタマイズが可能です。

応募Botへの組み込み: デザイン種別ルーター

テンプレートを作っただけでは案件は取れません。次のステップとして、案件の自動応募Botにデザイン種別の判定ロジックを追加しました。

キーワードによる案件分類

案件のタイトルと説明文からキーワードを抽出し、「バナー」「サムネイル」「Instagram」「LP」のどれに該当するかを判定します。

DESIGN_TYPE_KEYWORDS = {
    "banner": ["バナー", "SNS広告", "Web広告", "1200x628"],
    "thumbnail": ["サムネイル", "YouTube", "動画用"],
    "instagram": ["Instagram", "インスタ", "1080x1080"],
    "lp": ["LP", "ランディングページ", "ホームページ"],
}

def detect_design_type(job: dict) -> str:
    text = (job.get("title", "") + " " + job.get("description", "")).lower()
    scores = {t: sum(1 for kw in kws if kw.lower() in text)
              for t, kws in DESIGN_TYPE_KEYWORDS.items()}
    best = max(scores, key=lambda k: scores[k])
    return best if scores[best] > 0 else "other"

この判定結果に応じて、応募文のテンプレートを切り替えます。バナー案件には「バナー制作の実績」を強調した応募文を、サムネイル案件には「YouTubeサムネイルの制作実績」を強調した応募文を自動で選択します。

応募文テンプレートの切り替え

デザイン種別ごとに、強調する実績やスキルセットを変えた応募文テンプレートを用意しています。案件が検出されると、種別に応じた応募文が自動生成されます。これにより、応募の対象範囲がLP案件だけでなく、バナー・サムネイル・Instagram案件にまで広がりました。

成果と次のステップ

制作の成果

HTML/CSS + Playwright書き出しのフローで、9種類のテンプレートを1日で制作できました。AIエージェントにテイストとサイズを指示するだけで、HTMLの雛形が生成されます。配色やフォントの調整、レイアウトの微修正を人間が確認し、最終的なPNG書き出しまで含めて1テンプレートあたり1時間程度で完了しました。

応募Botへのデザイン種別ルーターの組み込みにより、バナー・サムネイル・Instagram案件にも自動で応募できるようになりました。これまでLP案件に限定されていた応募範囲が、大幅に広がっています。

次のステップ

制作したテンプレートは、ポートフォリオページに掲載してクラウドソーシングのプロフィールから参照できるようにする予定です。また、テンプレートのバリエーションをさらに増やし、業種別（飲食店向け・美容院向け・ECサイト向けなど）のテンプレートセットも整備していきます。

まとめ

テンプレートの量産、実績の構築、自動応募の仕組みづくり。この3つを組み合わせることで、フリーランスとしての受注力を底上げできます。

AIエージェントの役割は「設計と生成」です。テイストの定義、HTML/CSSコードの生成、バリエーション展開といった作業をAIに任せることで、人間はデザインの方向性の判断と最終確認に集中できます。手を動かす時間を圧縮し、判断の時間に充てる。これがAIエージェントを使ったデザイン制作の本質的な価値です。

---

関連記事

• AIで業務ルーティンを自動化する実践ガイド
• AIフリーランスのポートフォリオ戦略
• AIビジュアルインスペクター: 画像品質チェックを自動化する