「新たな広告キャンペーンのバナーデザイン、どのように構成するか悩んでいる…」「ChatGPTで広告バナーのデザインを考えることができるの？…」そう思う方もいるのではないでしょうか。
実は、ChatGPTを利用すれば、広告バナーのデザインを考えるうえで新たな視点を提供してくれます。
今回PROMPTYでは、ChatGPTを用いて広告バナーのデザインを作成する方法、その具体的な方法と例をご紹介していきます。
プロンプト
あなたは企業のデザイナーです。
#制約条件に従って最高の広告バナーのデザイン案を考えてください。
#制約条件
*#広告情報を基にデザイン案を作成すること
*#広告情報を基に魅力的なバナー上の文言を考える
*#バナー仕様に従ったデザイン案を作成すること
*デザイン案とバナー文言をそれぞれ3つずつ提案すること
#広告情報
{自由記述}
#バナー仕様
・バナーサイズ: {自由記述、縦横のピクセル数など}例①：情報メディアの広告バナー
例として、架空の情報メディア「Auto Pablo」の広告バナーのデザイン案を作成してもらいます。
広告情報には企業名やサイトのテーマ色、サービス内容などの情報を入力しています。
入力文：
あなたは企業のデザイナーです。
#制約条件に従って最高の広告バナーのデザイン案を考えてください。
#制約条件
*#広告情報を基にデザイン案を作成すること
*#広告情報を基に魅力的なバナー上の文言を考える
*#バナー仕様に従ったデザイン案を作成すること
*具体的なカラーコードを指定すること
*具体的なフォントを指定すること
*写真や画像を配置する場合は、「何の画像か」明確に指定すること
*写真や画像を配置する場合は、具体的なサイズを指定すること
*デザイン案とバナー文言をそれぞれ3つずつ提案すること
#広告情報
・サービス名は「Auto Pablo」です。
・サイトのテーマ色は #4287f5 ですが、モノクロと青色を基調としたデザインを採用しています。
・画像生成AIを使った情報メディアの生成をサポートするサイト
・テクノロジー業界だけでなく、デザイナーやアーティストなど幅広い層にAIの活用を提案したい。
・300件以上の画像生成サンプルを掲載しています。
・テーマ、目的別に整理されています。
・AIが生成した画像のサンプルから、実際の使い方を理解できます。
・画像のパラメータを調整し、自分のニーズに合わせてカスタマイズすることが可能です。
・お気に入りの画像生成設定をブックマークできます。
・AIとデザインの初心者を対象とし、AIを使ったメディア作成の中級者になることを目指す。
・会員登録なしで、インターネットブラウザから無料で使えます。
・開発したのは、Art Tech abc社です。
・今後も掲載する画像生成サンプルは増えていきます。
#バナー仕様
・バナーサイズ: 横 500px、 縦 200px GPT-4の出力：
#デザイン案1
バナーサイズ: 横500px、縦200pxの広告バナー
デザインは次の通りです。
バックグラウンドカラー: #F0F0F0 (モノクロの一部)
テキストとアクセントカラー: #4287f5 (サイトのテーマ色)
フォント: Roboto, サンセリフ。タイトルは大きさ 24px、メッセージは16px
画像: AIが生成した抽象的なアート画像を用い、左側に配置。サイズは200px x 200px
#デザイン案2
バナーサイズ: 横500px、縦200pxの広告バナー
デザインは次の通りです。
バックグラウンドカラー: #4287f5 (サイトのテーマ色)
テキストカラー: #FFFFFF (ホワイト)
フォント: Open Sans, サンセリフ。タイトルは大きさ 24px、メッセージは16px
画像: AIが生成したモノクロの技術的なアート画像を用い、右側に配置。サイズは200px x 200px
#デザイン案3
バナーサイズ: 横500px、縦200pxの広告バナー
デザインは次の通りです。
バックグラウンドカラー: #000000 (ブラック)
テキストとアクセントカラー: #4287f5 (サイトのテーマ色)
フォント: Arial, サンセリフ。タイトルは大きさ 24px、メッセージは16px
画像: AIが生成した青色のアート画像を用い、中央に配置。サイズは200px x 200px
#バナー文言1
"Auto Pabloで、あなただけのメディアをAIに生成させてみませんか？無料で試してみてください！"
#バナー文言2
"300件以上の画像生成サンプルをチェック！AIによる画像生成を体験してみましょう！"
#バナー文言3
"画像生成の世界へようこそ。AIとデザインの初心者から中級者まで、Auto Pabloがサポートします。"3つの異なるデザイン案が出力されました。それぞれバナーサイズ、バックグラウンドカラー、テキストとアクセントカラー、フォント、画像の配置とサイズについて具体的に記載されています。
さらに、それぞれのデザイン案に対応する3つのバナー文言も提案しています。これらの文言は、サービスの特徴や利用者へのメリット、サービスの対象者を強調しています。
例②：企業の広告バナー
もう一つの例として、架空のメーカー「テック・レーザー」の広告バナーのデザイン案を作成してもらいます。
広告情報には、ブランドカラーや製品情報、カスタマーサポートなどの情報を入力しています。
入力文：
あなたは企業のデザイナーです。
#制約条件に従って最高の広告バナーのデザイン案を考えてください。
#制約条件
*#広告情報を基にデザイン案を作成すること
*#広告情報を基に魅力的なバナー上の文言を考える
*#バナー仕様に従ったデザイン案を作成すること
*具体的なカラーコードを指定すること
*具体的なフォントを指定すること
*写真や画像を配置する場合は、「何の画像か」明確に指定すること
*写真や画像を配置する場合は、具体的なサイズを指定すること
*デザイン案とバナー文言をそれぞれ3つずつ提案すること
#広告情報
・企業名は「テック・レーザー」です。
・企業のブランドカラーは #0091D5 で、ブルーを基調としたクリーンで技術的なデザインを採用しています。
・精密機器装置の高品質な製造を行っている会社です。
・主に工業、研究所、大学などを対象としていますが、レーザー技術の利用範囲を広げたいと考えています。
・当社の製品を使えば、精密な作業が容易になり、必ず便利さに気づいていただけると思います。
・自社で設計から製造までを一貫して行っており、顧客のニーズに合わせたカスタマイズが可能です。
・レーザー技術の初心者を対象とし、信頼できるパートナーとしてサポートします。
・ウェブサイトから製品の詳細情報を無料で閲覧できます。カスタマイズや購入についての問い合わせも可能です。
#バナー仕様
・バナーサイズ: 横 360px、 縦 120px GPT-4の出力：
広告バナー1
バナーサイズ: 横360px、縦120px
デザインは以下の通りです：
バックグラウンドカラー: #FFFFFF (ホワイト)
テキストとアクセントカラー: #0091D5 (ブルー)と#000000 (ブラック)
フォント: ロゴには"Helvetica", バナー本文には"Arial"
画像: レーザー装置の精密な部品（サイズ: 60px x 60px、右側に配置）
バナー文言1:
"テック・レーザー - 高品質で信頼性のあるレーザー技術を手に入れましょう！"
広告バナー2
バナーサイズ: 横360px、縦120px
デザインは以下の通りです：
バックグラウンドカラー: #0091D5 (ブルー)
テキストとアクセントカラー: #FFFFFF (ホワイト)
フォント: ロゴには"Roboto", バナー本文には"Open Sans"
画像: 工業的なレーザー機器全体のシルエット（サイズ: 80px x 80px、左下に配置）
バナー文言2:
"レーザー技術の初心者も安心、テック・レーザーが全力でサポートします！"
広告バナー3
バナーサイズ: 横360px、縦120px
デザインは以下の通りです：
バックグラウンドカラー: #000000 (ブラック)
テキストとアクセントカラー: #0091D5 (ブルー) と #FFFFFF (ホワイト)
フォント: ロゴには"Verdana", バナー本文には"Futura"
画像: 製品を使って精密な作業を行う手（サイズ: 100px x 100px、中央に配置）
バナー文言3:
"テック・レーザーの製品で精密作業を容易に。詳細はウェブサイトでご確認ください先ほどの例と同様に、バックグラウンドカラー、テキストとアクセントカラー、フォント、そして使用する画像の詳細を含んだデザインが提案されました。一方、実際のデザイン要素の配置や視覚的なバランスについての提案は限定的でした。
バナーに掲載する文言も、それぞれのデザインに適したものが提案されました。１と２は広告バナーの文言として適切な長さで、目を引く言い回しとなっています。
まとめ
今回PROMPTYでは、ChatGPTで広告バナーのデザインを考える方法を紹介しました。
ChatGPTを活用することで、デザインのアイデアの源泉が広がり、より魅力的で効果的なバナーを作成することができます。
今回の例を参考に、皆さまもChatGPTを使って、広告バナーのデザインを考える新たな視点を探求してみてはいかがでしょうか。
