A/Bテスト用バリエーションを量産する

A/Bテストをやろうと思うたびに「バリエーション作るのが面倒」で先送りにしていた。Claude Designを使い始めてから、その言い訳がなくなった。なくなったのはいいが、今度は違う罠にハマった。

なぜClaude Designがバリエーション量産に向いているか

通常のデザインツールでバリエーションを作ると、「1枚目を編集してコピー→色変えて→テキスト調整して」という手順を踏む。これが5バリエーション必要なら5倍の時間がかかる。

Claude Designなら「同じレイアウトでCTAボタンの色を赤・青・緑・オレンジ・黒の5パターン出して」と言えば一気に出てくる。構造を維持したまま変数だけ変える、という操作が自然言語で完結する。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。※CTA: Call To Action（行動喚起）。ボタンやリンクでユーザーに次の行動を促す要素。

実際に効いたプロンプトの型

バリエーションを頼むときは**「固定する要素」と「変える要素」を明示的に分ける**のが重要だった。これを曖昧にすると、Claudeが何をバリエーションさせるか自由に解釈して、毎回レイアウトごと変えてくる。

以下の要素は全バリエーションで固定してください：
- レイアウト構造（左テキスト・右画像の2カラム）
- フォント・タイポグラフィ
- 全体の余白・サイズ感

以下の要素だけを変えた5パターンを作ってください：
- CTAボタンの色とテキスト（パターンA〜Eで以下の組み合わせ）
  A: 赤背景「今すぐ試す」
  B: 青背景「無料で始める」
  C: 黒背景「詳しく見る」
  D: グリーン背景「登録する」
  E: オレンジ背景「試してみる」

この書き方にしてから、5パターンが本当にCTAだけ違う状態で出てくるようになった。

※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。

ハマった罠：「良さげなの出して」は禁句

最初は「バリエーションを出してください」とだけ書いていた。すると確かに5枚出てくるが、レイアウトも配色も全部違う状態になる。これでは「AとBでどちらが刺さるか」のテストにならない。比べる前提が崩れている。

あとは「バリエーションを5つ」と頼んで、そのうち3枚が色違いで2枚がレイアウト変更、みたいな混在した出力が来たこともある。あとで揃えようとすると結局手動作業が増えて本末転倒になった。

コピーのA/Bテストにも使える

デザインの変数だけでなく、見出しコピーのバリエーションにも使える。

このバナーデザインをベースに、見出しコピーだけを以下の3パターンに変えた版を作ってください：
A: 「作業時間を半分にする方法」（問題解決訴求）
B: 「1日30分で成果を出すチーム」（ベネフィット訴求）
C: 「導入企業の97%がリピート」（社会的証明訴求）
レイアウト・色・フォントは変えないでください。

デザインの一貫性を保ちながら言葉だけを変えられるので、コピーライティングのテストがやりやすくなった。

出力後の運用フロー

生成したバリエーションは、そのままツール内で命名して管理するよりも、すぐエクスポートしてスプレッドシートに「バリエーションA〜E」と紐づけて管理するほうが実用的だった。

Claude Design上で「5パターン全部まとめてエクスポート」ができないケースもあるので、1枚ずつダウンロードして命名ルールを決めておく（例：cta-test-2026Q3-A.png）と、後で混乱しない。

---

正直、最初にバリエーション量産をやろうとしたとき、「固定と変更の分離」を言語化していなかったせいで2時間無駄にした。プロンプトに投資する30秒を惜しまないだけで、あとの作業がまるっと変わる。