marketing-image-generation

マーケティング画像の生成

基本ワークフロー

1. アセットの種類を特定します：広告、ソーシャル投稿、ブログヘッダー、ヒーロー画像、ローンチ用グラフィック、サムネイル、メールバナー、製品モックアップ、キャンペーンビジュアルなど。
2. 不足している必須情報だけを収集します：目標、対象者、チャネル、寸法またはアスペクト比、必須コピー、ブランド上の制約、製品の背景情報、出力数。
3. 質問する前に、利用可能なコンテキストを確認します：README、DESIGN.md、ブランド関連ファイル、既存のスクリーンショット、製品のコピー、ユーザーが提供した参考画像など。
4. 生成する前に、具体的なビジュアルの方向性をまとめます：被写体、レイアウト、構図、スタイル、カラーパレット、タイポグラフィの方向性、ライティング、雰囲気、カメラ／フレーミング、制約。
5. ユーザーが画像アセットまたはビジュアルモックアップを明示的に依頼した場合にのみ、画像生成ツールを使用します。
6. ブリーフに照らして結果を確認し、コンセプト全体を書き直すのではなく、変更点を絞って調整します。

マーケティング用のデフォルト

• コラージュより、印象的な焦点を1つ設けることを優先します。
• サムネイルサイズでも、製品、利点、対象者が瞬時に伝わるようにします。
• 画像内のテキストは短くします。コピーが必要な場合は正確に維持し、見出しかラベルにとどめます。
• 製品を主役にしたアセットでは、装飾的なUIの断片ではなく、もっともらしいインターフェース、ワークフロー、またはユーザーが得られる成果を見せます。
• 有料広告では、即座に理解できること、コントラスト、明確な感情的な訴求を重視します。
• 編集記事／ブログ用のアセットでは、タイトルをそのまま繰り返すのではなく、記事の主張を支えるコンセプト重視の画像を優先します。

避けるべきパターン（AI っぽさ）

これらは、機械生成されたマーケティングデザインによく見られる特徴です。画像やレイアウトのモデルがデフォルトで選びがちな表現のため、ひとまとまりになって汎用的に見えてしまいます。目指すのは、禁止事項のリストを暗記することではありません。同じ系統の表現を見分け、次のバリエーションも避けられるようにすることです。根底にある原則は、すべての要素が意味や階層を担うことで、その場にある価値を示すことです。「デザインされているように」見せるだけの要素なら、取り除きましょう。

ユーザーが明示的に求めた場合を除き、以下は避けてください。

• 見出しの上に置く小さなピル型ラベル。 H1 の上に浮かぶ、ラベルテキスト（「✨ INTRODUCING」「NEW」「v2.0」など）が入った小さな丸角バッジです。見出しがすでに伝えている情報を補うことはほとんどなく、AI 生成レイアウトらしさを示す最もよくある特徴です。まず見出しそのものを目立たせましょう。
• グラデーション塗りや発光するボタン。 CTA に使われる多色グラデーション、ネオンのような発光、アニメーションのような光沢です。単色のアクセントカラーを使い、影はフラットかごく控えめにしましょう。ボタンは押せそうに見えるべきで、放射性物質のように光るべきではありません。
• デフォルトの紫→ピンク／バイオレット系テックグラデーション。 インディゴからマゼンタへの背景（汎用的な「AI スタートアップ」風の色合い）は、ブランドらしさではなくテンプレート感を与えます。製品本来のカラーパレットを基調にしましょう。控えめでブランドに合っていれば、グラデーションを使っても問題ありません。問題なのは、あのグラデーションをデフォルトとして選ぶことです。
• 装飾としての絵文字やきらめき（✨／🚀／⚡）。 内容ではなくデザイン要素として使う装飾的な絵文字です。全体の印象を安っぽくし、あっという間に時代遅れに見せます。
• どこにでもあるグラスモーフィズム。 機能上の理由もなく、すりガラス風の半透明でぼかしたカードを重ねて奥行きを出す表現です。ぼかした前景カードを1枚使うのは効果的な場合があります（examples/blurred-bg-foreground-component.html を参照）が、シーン全体をそうした表現で埋めるのは AI っぽさにつながります。
• 汎用的なスタートアップ画像。 文脈のないダッシュボードの浮遊表示、握手の写真、ロケットや電球の比喩、意味の曖昧な抽象的な3D表現――ブロブ、光沢のある球体、アイソメトリックの小物、何も表していないグラデーションのオーブなどです。
• 階層より装飾を優先すること。 すべての要素に強いドロップシャドウを付ける、何でも角丸を大きくする、ネオン風の発光テキストを使う、サイズやウェイトに差を付けずにすべてを中央揃えにする、といった表現です。洗練された印象は、効果ではなく明確な階層と余白から生まれます。
• 情報量の多すぎるコピー。 画像の中に詰め込んだ段落、複数の文からなるサブ見出し、機能リストの羅列です。サムネイルサイズで読めないなら、画像に入れるべきではありません。周囲のページに移しましょう。
• 信頼性を装うための偽の要素。 捏造した「信頼されている企業」のロゴ列、仮の星評価、作り上げた数字を並べた3つ組の統計などです。実際の素材を使うか、省略しましょう。

ユーザーがこれらのいずれかを希望する場合（例：「ガラスのようなグラデーションの雰囲気にして」など）は、うまく仕上げてください。このリストはデフォルトの表現に関するもので、絶対的な禁止事項ではありません。

HTML／Satori でレンダリングする素材には、同梱ライブラリを AI っぽさのないデザインの出発点として使いましょう。examples/layouts/ のレイアウトスケルトンは、小さなピル型ラベルを使わずに見出しを主役にし、単色塗りのボタンを使い、効果より階層を重視しています。examples/backgrounds/ の背景は、デフォルトの紫→ピンクのグラデーションではなく、控えめでブランドに合った色合いとグリッドを提供します。装飾を即興で加えるのではなく、それらを出発点にしてください（以下の「再利用可能なレイアウト」と「再利用可能な背景」のセクションを参照）。

プロンプトテンプレート

画像生成ツールを呼び出すときは、次の構成を使います。

Create a [asset type] for [product/company/campaign].

Goal: [conversion goal or message]
Audience: [specific audience]
Format: [dimensions/aspect ratio/channel]
Composition: [primary subject, layout, focal point, depth, framing]
Style: [visual style, medium, brand feel]
Color and lighting: [palette, contrast, mood]
Text: [exact text, or "no text"]
Brand constraints: [logo usage, typography direction, do/don't]
Avoid: [specific visual cliches, clutter, wrong objects, unsafe claims]

再利用可能な背景

HTML／Satori でレンダリングするアセット（OG カード、Vercel の ImageResponse、og-playground）では、 examples/backgrounds/ の背景ライブラリをベースにしてください。各ファイルは単一の JSX スニペットで、外側のコンテナを作成し、その中にコンテンツを配置します。カテゴリは、ダーク （ドット／ラインのグリッド、grid-glow、mesh aurora、spotlight、crosshatch、vignette）、ライト （グリッド、blueprint、grid-fade、pastel mesh、暖色／寒色のウォッシュ）、ビビッド （sunset、ocean、mesh、stripes、グラデーション＋グリッド）です。レンダリング済みのプレビューは /images/backgrounds にあります。カタログと Satori の制約（conic-gradient は使用不可、ドットパターンにはパーセント指定のカラーストップが必要、グリッド＋グローにはレイヤーごとの backgroundSize が必要、同色の放射状オーバーレイでフェードを擬似的に表現）については、examples/backgrounds/README.md を参照してください。

再利用可能なレイアウト

HTML／Satori でレンダリングするアセット向けに、examples/layouts/ には汎用のブランド要素を含まないレイアウトのひな形が 18 種類あります（プレースホルダーの文言のみ）。ヒーロー（中央揃え、分割）、特徴 3 点、統計 3 点、大きな数値、お客様の声、ソーシャルプルーフバー、ロゴ一覧、お知らせバナー、ブログヘッダー、料金カード、CTA バナー、チェックリスト、仕組みの紹介、比較カラム、製品／ブラウザーのショーケース、ターミナルウィンドウ、イベント／ウェビナーカードが含まれます。レイアウトをルート要素にし、文言／色／スクリーンショットを差し替えて、examples/backgrounds/ の背景と組み合わせてください。レンダリング済みのプレビューは /images/layouts にあります。カタログについては、examples/layouts/README.md を参照してください。

チャネル別のガイダンス

• LinkedIn または X のローンチ画像：16:9 または 1.91:1。メッセージは 1 つに絞って大胆に伝え、製品のスクリーンショットまたはコンセプチュアルなヒーロー画像を使い、フィード上でも読みやすくします。
• Instagram または TikTok のカバー：4:5 または 9:16。被写体を中央に配置し、コントラストを高く、テキストは最小限にして、強いフックを設けます。
• ブログヘッダー：16:9。エディトリアルな構成にし、必要に応じてタイトルを重ねられる余白を確保します。広告のような CTA のスタイリングは避けます。
• ランディングページのヒーロー：横長の構成にし、余白をすっきりと確保します。製品の文脈を示し、ブランドと一貫性のあるライティングとカラーパレットにします。
• 有料広告：メリットを明確にし、コントラストを高くして、製品／カテゴリを直接示す手がかりを含めます。小さすぎる UI の細部や、情報量の多い文言は避けます。

イテレーションのルール

生成画像を修正する場合：

• 構図、色、文言、製品の目立たせ方、リアリティ、形式のうち、一度に変更する変数は 1 つか 2 つにします。
• 前回の結果でうまくいった点は、明示的に維持します。
• テキストの描画がうまくいかない場合は、テキスト量を減らすか、画像に文言を詰め込むのではなく、周囲のページにテキストを移動します。
• ブランドとの適合性が低い場合は、色、タイポグラフィの雰囲気、製品のスクリーンショット、ウェブサイトのスタイル、ビジュアルリファレンスなど、具体的なブランド特性を次のプロンプトに盛り込みます。

出力

生成した画像と、以下を含む簡潔な説明を返してください。

• 想定するユースケースと形式。
• 前提とした事項。
• 明確な改善の方向性がある場合に限り、次のイテレーションの提案。