AI活用 / プロンプト設計
「いい感じのバナーを作って」ではなく、上級者は指示の作り方そのものを設計しています。今日から使える具体的な型を紹介します。
広告バナーやWebサイトのヘッダー画像を作るとき、これまではデザインソフトを開いて一枚ずつ作業するのが当たり前でした。ところが今は、Claudeに文章で指示を出すだけで、サイズもレイアウトも整った画像やHTMLバナーの土台がその場で仕上がる時代になっています。
ただし、多くの人がここでつまずきます。「かっこいいバナーを作って」と一言だけ送っても、出てくるのはどこかで見たような平凡なデザインです。実は、Claudeを使いこなしている人たちは、指示の出し方そのものに明確な型を持っています。この記事では、海外の実践事例をもとに、初心者でもすぐに真似できる指示出しのコツをお伝えします。
Claudeは非常に賢いAIですが、指示があいまいなときは「一番無難で平均的な答え」を返す性質があります。デザインの分野を扱う海外の解説記事でも、一文だけの短い指示は汎用的で退屈な結果になりやすいと繰り返し指摘されています。バナー制作でも同じことが起きます。ターゲットや使う場所、伝えたいトーンを伝えないまま「バナーを作って」と頼むと、Claudeは無数にある可能性の中から、当たり障りのない一枚を選んでしまうのです。
反対に、必要な情報をあらかじめ渡しておけば、Claudeはその情報を手がかりに驚くほど具体的で使えるアウトプットを返してくれます。つまり課題は「Claudeの能力」ではなく「こちらの伝え方」にあります。
Claudeでのデザイン指示を数多く検証している海外の解説サイトでは、質の高い出力を得るための指示は「役割」「文脈」「制約」「出力形式」という4つの要素で成り立っていると説明されています。この型に沿って情報を渡すだけで、出てくるバナー案の完成度は大きく変わります。
| 要素 | 伝える内容 | 具体例 |
|---|---|---|
| 役割 | Claudeにどんな立場で考えてほしいか | 「あなたはコンバージョン重視のバナーを作るシニアデザイナーです」 |
| 文脈 | 誰に、どこで、何を見せる画像か | 「30代の子育て世代向け、Instagramのフィード広告用」 |
| 制約 | 守ってほしいルールやサイズ | 「サイズは1200×628px、文字は2書体まで、ロゴは左上」 |
| 出力形式 | 最終的にどんな形で受け取りたいか | 「HTMLとCSSを1つのファイルにまとめて、画面上でそのまま確認できる形で」 |
特に見落とされがちなのが「制約」です。制約というと窮屈に聞こえますが、実はデザインの質を底上げする一番の近道です。制約がないと、Claudeは選択肢が多すぎて平均的な答えに寄ってしまいます。反対に、サイズや文字数、色数といった枠組みを先に決めてあげると、その枠の中で最大限に工夫された案を返してくれるのです。
海外の広告制作の現場では、AIに画像や広告クリエイティブを指示するとき「被写体」「雰囲気・見た目」「カメラの視点」「技術的な条件」という順番で情報を並べると、狙いどおりの画像が出やすいという知見が共有されています。バナー制作にもそのまま応用できる考え方です。
1. 被写体:何を主役にするか(例:新商品のスキンケア容器) 2. 雰囲気:どんなトーンにするか(例:やわらかい朝の光、清潔感) 3. 視点:どんな構図で見せるか(例:正面から、余白は右側に大きく) 4. 技術条件:サイズ、書き出し形式、コントラスト比などの実務要件
さらに、実際にバナー専用の指示を数多くテストしている海外のガイドでは、崩れにくいバナーを作るための実務的なルールとして、次のような点がまとめられています。文字が読みにくいバナーや、スマホで見ると崩れてしまうバナーを防ぐための、いわば安全基準です。
- 重要な文字やロゴは、バナー全体の中央70〜80パーセントの範囲に収める(端は切れやすいため)
- 使う書体は多くても2種類まで。ボタン(CTA)は1つに絞る
- 文字色と背景色のコントラスト比は4.5対1以上を確保し、遠目でも文字が読める状態にする
- 1回の指示で3〜5パターンの案を出してもらい、比較しながら選ぶ
これらは特別なテクニックではなく、Claudeに「守ってほしいルール」としてそのまま日本語で伝えるだけで反映されます。指示文の中に組み込んでおくことで、毎回一定の品質のバナーが出てくるようになります。
実際に、うまくいかない指示と、上級者が使う指示を並べて比べてみましょう。同じ「セール告知バナーを作りたい」という目的でも、伝える情報量でここまで差が出ます。
セールのバナーを作ってください。目立つ感じでお願いします。
あなたはコンバージョン重視のバナーデザインを専門とするシニアデザイナーです。 【文脈】アパレルECサイトの夏セール告知用。ターゲットは20〜30代女性。掲載先はサイトのトップページ右側。 【制約】サイズは300×250px。書体は2種類まで。ボタンは「今すぐ見る」の1つだけ。背景色と文字色のコントラスト比は4.5対1以上を確保すること。重要な要素は中央70〜80パーセントの範囲に収めること。 【出力形式】HTMLとCSSを1つのファイルにまとめ、そのまま画面上でプレビューできる形で3パターン出してください。それぞれ狙いの違いも一言で説明してください。
後者のように具体的に伝えることで、Claudeは単なる「それっぽい画像」ではなく、使う場所・見る人・守るべき条件をすべて踏まえた提案を返してくれます。何度か試すうちに、自分の業種やブランドに合った「型」ができあがっていくはずです。
- 一言だけの指示では、Claudeは無難で平均的なバナーしか作れない
- 「役割」「文脈」「制約」「出力形式」の4つを伝えるだけで質が大きく上がる
- 中央70〜80パーセント配置、書体2種まで、コントラスト比4.5対1以上は基本ルールとして毎回指示に入れる
- 1回で3〜5パターン出してもらい、比較しながら選ぶのが上級者の使い方
バナー制作は、もはや専門ソフトを使いこなせる人だけの仕事ではなくなりつつあります。大切なのはツールの操作スキルではなく、Claudeに何をどう伝えるかという「指示の設計力」です。今日紹介した4つの要素と実務ルールを、まずは一つのバナーで試してみてください。指示の質が変わるだけで、出てくる案の説得力がまったく違うことを実感できるはずです。






コメント