Playwright × Antigravity (AI) でアプリストア掲載画像の作成を自動化した話

Posted at 2026-05-02

はじめに

個人開発者にとって、アプリストア（App Store / Google Play）の掲載画像作成は地味に重いタスクです。
一般的には、FigmaやPhotoshop等のデザインツールを使うのが「手軽」とされていて、以下のような手順になります。

スクリーンショットを撮る
デバイスフレームにはめ込む
キャプション（宣伝文句）を入れる
端末サイズごとにリサイズする
文言やスクショが変わるたびにツールを開き直す...

「デザインセンスに自信もないし、繰り返し作業には耐えられない！」

そんな悩みを、Playwright と AIアシスタント Antigravity を使って解決した話を紹介します。

完成した画像がこちら

CSSだけでデバイスフレームを構築し、高級感のあるグラデーション背景と合成しています。

解決策：Web技術をデザインエンジンにする

今回構築したのは、「HTML/CSSでデザインし、Playwright（Headless Chrome）でスクショを撮る」という仕組みです。

なぜこの構成か？

CSSの表現力: グラデーション、シャドウ、タイポグラフィ、レイアウト（Flexbox/Grid）が自由自在
再現性とバージョン管理: git diff でデザインの変更履歴を追える
自動化: Pythonスクリプトで、複数の文言・スクショを一括生成できる
AIとの相性: AIはデザインツールを操作するのは苦手ですが、「プレミアムな雰囲気のCSSを書いて」という依頼には秒速で応えてくれます

構築のポイント

1. 「デザイン」はAIと一緒にHTML/CSSで書く

私はデザインの専門家ではありませんが、AIアシスタントのAntigravityにこう依頼しました。

「Playストア掲載用のスクリーンショット＋キャプションの画像を作成したいです。assetsフォルダのスクリーンショットに調和するデザインでお願いします。」

返ってきたのが、このCSSの一部です。デバイスフレームはCSSだけで作る点や、Google FontsのOutfitを使う点はAntigravityが自動的に補ってくれました。

:root {
    --bg-gradient: radial-gradient(circle at 50% 100%, #2a2a2a 0%, #111111 100%);
    --frame-color: #0d0d0d;
    --corner-radius: 40px;
}

.phone-frame {
    width: 720px;
    height: 1480px;
    background: var(--frame-color);
    border-radius: var(--corner-radius);
    padding: 12px;
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15); /* 高級感のある極細の縁 */
}

画像ソフトでチマチマとレイヤーを重ねる代わりに、数行のプロンプトで「プレミアム」なテンプレートが手に入りました。

2. Playwrightでピクセルパーフェクトに保存

ブラウザ操作自動化ツールの Playwright を使用します。Jinja2 でテンプレートに値を流し込み、目的の解像度でキャプチャします。

ここで一つの工夫として、レンダリングしたHTMLを一度 一時ファイル（temp.html）として書き出してから読み込む ようにしています。

async def generate_screenshot(caption, screenshot_path, output_name, template_path, subcaption=""):
    # 1. Jinja2でレンダリング
    with open(template_path, "r", encoding="utf-8") as f:
        template = Template(f.read())
    
    # 画像パスを絶対パス（file:///）に変換
    abs_screenshot_uri = Path(screenshot_path).resolve().as_uri()
    
    html_content = template.render(
        caption=caption,
        subcaption=subcaption,
        screenshot_path=abs_screenshot_uri
    )

    # 2. 一時ファイルとして保存（ローカル画像のパス解決のため）
    temp_html = Path("output/temp.html")
    temp_html.write_text(html_content, encoding="utf-8")

    async with async_playwright() as p:
        browser = await p.chromium.launch()
        # ストア指定の解像度 (例: 1080x1920) を設定
        page = await browser.new_page(viewport={"width": 1080, "height": 1920})
        
        # ファイルを開く
        await page.goto(temp_html.resolve().as_uri())
        
        # フォントや背景画像の読み込みが完了するまで待機
        await page.wait_for_load_state("networkidle")
        
        await page.screenshot(path=f"output/{output_name}", full_page=True)
        await browser.close()
    
    temp_html.unlink() # 後始末

なぜわざわざ一時ファイルを作るのか？それは、ブラウザのセキュリティ制限により、文字列として流し込んだHTML（set_content）からはローカルの画像ファイルへのアクセスが制限される場合があるからです。file:// プロトコルでHTML自体を開くことで、スクショ画像をスムーズに表示させています。

3. バッチ処理で「量産」する

あとはデータ（文言とスクショのパス）のリストを作るだけです。

data = [
    {
        "caption": "馬券を「投資」へ。",
        "subcaption": "収支を分かりやすいグラフで表示",
        "screenshot": "assets/screenshots/home.png",
        "output": "01_home.png"
    },
    {
        "caption": "収支履歴を一覧化",
        "subcaption": "中央も地方も、これ一冊。",
        "screenshot": "assets/screenshots/history.png",
        "output": "02_history.png"
    },
]

これをループで回せば、数秒で一連のストア画像が完成します。文言を「もっと刺さるコピー」に変えたい時も、このリストを書き直してスクリプトを叩くだけ。画像ソフトを立ち上げる必要はありません。

実際にやってみて感じたメリット

「AI × Playwright」なら誰でも簡単

デザインツールを使いこなすのは学習コストが高いですが、フロントエンドに詳しくないエンジニアであっても、今回の方法なら何も悩むことなく自動化できると思います。さらに、足りないデザインセンスをAI（Antigravity）が補ってくれることで、デザインの知識がなくても満足度の高い画像を生成することができます。