social-media-graphic

ソーシャルメディアのグラフィックデザイン

プラットフォームに最適な寸法、安全領域、プラットフォーム固有のデザインパターンで、ソーシャルメディア用グラフィックを生成します。デフォルトの出力は、Gemini で生成し、プラットフォームの正確なピクセル寸法にトリミングした PNG です。共通テンプレートを使った複数スライドのカルーセルや、テキスト量の多い投稿には、HTML/CSS（Step 8）を使用します。

---

Step 1：デザインコンテキストを読み込む

1. まず .agents/design-context.md を読みます。ブランドカラー（16進数）、フォント、スタイルの類型を確認します
2. ファイルがない場合は、design-context のデフォルトのフォールバックを使用し、デフォルト設定を使用したことをユーザーに伝えます
3. ソーシャルメディア用グラフィックは、ブランドイメージに強く沿う必要があります。一貫性が認知度を高めます

---

Gemini 画像生成パス

パイプライン／CLI：image-generation。プロンプトの作成、トリミング、テキストオーバーレイのフォールバックについては、graphic-design の Step 3 を参照してください。

1. 下の表にある Gemini のアスペクト比で生成し、--resize WxH で正確なピクセル寸法にトリミングします
2. プラットフォームの UI は Gemini には見えないため、安全領域の位置を伝えます（「テキストはすべて縦方向の中央 70% に配置する」など）
3. 出力 PNG を読み込み、すべての単語のスペル、スマートフォンのフィードサイズでの読みやすさ、Step 3 の安全領域を確認します。問題はフォローアップのたびに 1 つずつ修正します

対象	Gemini --aspect-ratio	--resize
IG／FB／LinkedIn の正方形	1:1	1080x1080
IG／FB／LinkedIn の縦長	4:5	1080x1350
IG フィード 3:4	3:4	1080x1440
ストーリー／リール／TikTok のカバー	9:16	1080x1920
X のフィード内画像	16:9	1200x675
リンクカード／FB／LinkedIn の横長（1.91:1）	16:9	1200x628
X のヘッダー（3:1）	21:9	1500x500
LinkedIn の個人用バナー	4:1	1584x396
LinkedIn の企業用カバー（約5.9:1）	8:1	1128x191
Facebook ページのカバー	21:9	1640x624（820x312 の2倍）
Pinterest のピン	2:3	1000x1500

プロンプト例

• Instagram の投稿：「[brand] 向けの正方形の Instagram 投稿用グラフィックを作成してください。[product] を [color] のグラデーション上の中央に配置します。太字の [font-style] で '[headline]' と表示します。すっきりとしたモダンな美しさにします。」
• Instagram ストーリー：「[brand] 向けの縦型ストーリー用グラフィックを作成してください。[product/subject] を主役として、背景に [color scheme] を使用します。上部中央に '[headline]'、下から 5 分の 1 より上に CTA の '[action]' を配置し、上部と下部の各 15% にはテキストを入れないでください。トレンド感のあるエディトリアルスタイルにします。」
• LinkedIn の投稿：「[brand] 向けのプロフェッショナルな横長の LinkedIn 投稿用グラフィックを作成してください。[topic/statistic] を [chart type or icon] で視覚化します。[font-style] で '[text]' という見出しを配置します。コーポレートブルーを基調に、すっきりとしたデータ重視のレイアウトにします。」

---

Step 2：プラットフォームと形式を特定する

プラットフォーム別寸法のリファレンス

Instagram

形式	寸法	アスペクト比	用途
フィード投稿（正方形）	1080 x 1080	1:1	標準的な投稿
フィード投稿（縦長）	1080 x 1350	4:5	フィードで最大限のスペースを確保
フィード投稿（3:4）	1080 x 1440	3:4	3:4 のプロフィールグリッドに対応（2025年以降）
フィード投稿（横長）	1080 x 566	1.91:1	パノラマコンテンツ
ストーリー／リールのカバー	1080 x 1920	9:16	全画面表示の縦型
カルーセルのスライド	1080 x 1080 または 1080 x 1350	1:1 ／ 4:5	すべてのスライドで最初のスライドの比率を使用
プロフィール画像	320 x 320	1:1	円形にトリミング

Twitter ／ X

形式	寸法	アスペクト比	用途
フィード内画像	1200 x 675	16:9	標準的な投稿画像
ヘッダー／バナー	1500 x 500	3:1	プロフィールのヘッダー
カード画像	1200 x 628	1.91:1	リンクのプレビュー

LinkedIn

形式	寸法	アスペクト比	用途
フィード投稿	1200 x 627	1.91:1	標準的な投稿
フィード投稿（正方形）	1200 x 1200	1:1	正方形の投稿
フィード投稿（縦長）	1080 x 1350	4:5	モバイルでより広い表示領域を確保
個人プロフィールのバナー	1584 x 396	4:1	プロフィールの背景
企業ページのカバー	1128 x 191	約5.9:1	企業ページ
記事／ニュースレターのカバー	1920 x 1080	16:9	記事のヘッダー

Facebook

形式	寸法	アスペクト比	用途
フィード投稿	1080 x 1350 or 1200 x 630	4:5 / 1.91:1	モバイルでは4:5が効果的です。リンクのシェアには1.91:1を使用します
カバー写真	820 x 312 (upload 1640 x 624)	2.63:1	ページのカバーです。モバイルでは640 x 360にトリミングされて表示されます
イベントカバー	1920 x 1005	1.91:1	イベントバナー
ストーリー	1080 x 1920	9:16	ストーリー形式

Pinterest

形式	寸法	アスペクト比	用途
標準ピン	1000 x 1500	2:3	エンゲージメントを最大化できます
ロングピン	1000 x 2100	1:2.1	2:3より縦長のピンはフィードでトリミングされます -- フックは上部1500px以内に配置します
スクエアピン	1000 x 1000	1:1	代替形式

TikTok

形式	寸法	アスペクト比	用途
動画カバー	1080 x 1920	9:16	プロフィールのグリッドでは、中央部分が約3:4でトリミングされて表示されます

---

ステップ3：セーフゾーンを適用する

すべてのプラットフォームには、UI要素がコンテンツに重なる領域があります。重要なテキストやビジュアルは、これらのセーフゾーン内に収めてください。

Instagramフィード投稿（1080 x 1080 / 1080 x 1350）

Safe zone: 60px padding on all sides
Profile grid shows a 3:4 center crop: on 1:1 keep key content in the central 810px width;
on 4:5 the grid trims ~34px from each side

Instagram / Facebookストーリー（1080 x 1920）

Top safe: 250px from top (~14%: progress bar, profile, close)
Bottom safe: 250px from bottom (~14%: reply bar, CTA sticker)
Left/Right safe: 60px from edges
Content zone: 960w x 1420h centered

Reels / TikTokカバー（1080 x 1920）

Top: ~220px clear   Bottom: ~420px clear (caption, audio, CTA)
Right: ~130px clear (like/comment/share rail)
Keep the headline in the center band -- it also survives the 3:4 grid crop

Twitter/X（1200 x 675）

Safe zone: 40px padding all sides
Text should be centered -- edges may crop on mobile
Keep key content in center 1120 x 595

LinkedIn（1200 x 627）

Safe zone: 50px padding all sides
Bottom-left: avoid -- engagement buttons overlap
Center the main message

Facebookカバー（820 x 312）

Desktop shows 820 x 312; mobile shows full height but crops the sides (~555px of 820 visible)
Mobile safe zone: center ~555 x 312
Profile photo can overlap the bottom-left -- keep text centered

Pinterestピン（1000 x 1500）

Keep ~80px clear top and bottom (Save button and icons overlay the corners)
Logo/branding: small, bottom-center or top-left
Headline readable at ~236px feed width

---

ステップ4：プラットフォーム固有のデザイントレンド

Instagram

• 余白をたっぷり取った、すっきりとしたエディトリアルレイアウト
• 彩度を抑えたカラーパレットに、アクセントカラーを1色
• 統一感のあるカルーセルテンプレート（同じフレームで、コンテンツを変更）
• サンセリフ書体が主流
• 写真を主役にし、テキストを重ねる場合は不透明度60～80％の背景を使用
• 内側の要素には角丸を使用（半径12～16px）

Twitter / X

• 大胆でコントラストの強いデザイン（ダークモードが一般的）
• フィードでは小さく表示されるため、読みやすい大きなテキスト
• データの可視化やチャート風のグラフィックが効果的
• スレッド形式で順を追って展開するグラフィック
• 装飾を最小限に抑え、コンテンツを中心に構成

LinkedIn

• プロフェッショナルで、企業寄りの美的表現
• 青系の色調はプラットフォームに自然になじみます
• データ、統計、インサイトをすっきりと提示
• ソートリーダーシップ向けの、顔写真＋引用の形式
• 派手な色よりも控えめなグラデーション

Facebook

• 温かみがあり、親しみやすいデザイン
• 写真を中心に、テキストを重ねる
• イベントやコミュニティを意識したレイアウト
• カバー写真はテキストがほとんどない、またはまったくない状態でも機能するようにします（従来の「テキスト20％ルール」は2020年に廃止されましたが、テキストが少ない画像のほうが今も効果的な傾向があります）
• グループやコミュニティでは、洗練されたものよりも本物らしさが好まれます

Pinterest

• 縦長形式で画面の表示領域を最大限に活用
• ライフスタイル画像にテキストを重ねる
• 手順を追って説明するチュートリアル形式
• 番号付きの項目をわかりやすく配置したリスト形式のピン
• 温かみがあり、憧れを感じさせるカラーパレット
• 小さく表示されても読みやすい、大胆なテキスト

TikTok

• 大胆で、エネルギッシュかつトレンドを意識したデザイン
• 小さな画面でも読みやすい高コントラスト
• 絵文字とカジュアルなタイポグラフィ
• サムネイルは1秒以内に内容を伝える必要があります

---

ステップ5：テンプレートの構成

引用投稿（Instagram 1080x1080）

<div class="canvas" style="width:1080px;height:1080px;position:relative;overflow:hidden;
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  display:flex;align-items:center;justify-content:center;padding:80px;">

  <div style="text-align:center;">
    <div style="font-size:72px;line-height:1.1;margin-bottom:8px;opacity:0.3;
      font-family:Georgia,serif;">"</div>
    <p style="font-family:var(--font-heading);font-size:42px;font-weight:700;
      color:#fff;line-height:1.3;text-wrap:balance;">
      The quote text goes here, keep it under 120 characters for readability.
    </p>
    <div style="margin-top:40px;display:flex;align-items:center;justify-content:center;gap:12px;">
      <div style="width:40px;height:2px;background:rgba(255,255,255,0.5);"></div>
      <span style="font-family:var(--font-body);font-size:18px;color:rgba(255,255,255,0.8);
        text-transform:uppercase;letter-spacing:0.1em;">Author Name</span>
      <div style="width:40px;height:2px;background:rgba(255,255,255,0.5);"></div>
    </div>
  </div>
</div>

告知投稿（LinkedIn 1200x627）

Layout structure:
- Left 60%: Headline (bold, 48px) + Body text (20px) + CTA badge
- Right 40%: Visual element (icon, illustration, or abstract shape)
- Top bar: Brand color accent line (4px)
- Bottom: Logo + URL in small text
- Background: White or very light neutral

ヒントのカルーセル（Instagram 1080x1080、複数スライド）

Slide 1 (Cover):
- Bold headline: "5 Tips for [Topic]"
- Subtext: "Swipe to learn more →"
- Eye-catching gradient or image background
- Brand logo bottom-center

Slides 2-6 (Content):
- Tip number: large, semi-transparent in background (like "01")
- Tip headline: 32px bold
- Tip description: 20px, 2-3 lines max
- Consistent background across all slides
- Progress indicator dots at bottom

Slide 7 (CTA):
- "Found this helpful?"
- Follow CTA + handle
- Share/save prompt
- Brand logo

ビフォー／アフター（Instagram 1080x1350）

Layout:
- Top half: "Before" label + image/state
- Divider: thin line or diagonal cut with label
- Bottom half: "After" label + image/state
- Keep dimensions equal for both halves
- Use subtle color shift (gray/muted for before, vibrant for after)

データ／統計投稿（Twitter 1200x675）

Layout:
- Large number: 72-96px, bold, gradient or accent color
- Context line: 24px below the number
- Supporting text: 18px, 2 lines max
- Source attribution: 14px, bottom-right
- Background: clean gradient or subtle pattern
- Brand mark: small, bottom-left

---

ステップ6：カルーセルのデザインシステム

複数スライドのカルーセルでは、一貫性を保ちます。

/* Shared carousel variables */
:root {
  --slide-bg: #0F172A;
  --slide-text: #F8FAFC;
  --slide-accent: #6366F1;
  --slide-padding: 80px;
  --slide-radius: 0; /* carousels are edge-to-edge */
}

/* Consistent header bar across slides */
.slide-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--slide-accent);
}

/* Progress indicator */
.progress-dots {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.progress-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
}
.progress-dots .dot.active {
  background: var(--slide-accent);
  width: 24px;
  border-radius: 4px;
}

/* Swipe hint on first slide */
.swipe-hint {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  opacity: 0.6;
}

---

ステップ7：エンゲージメントの最適化

テキストの読みやすさに関するルール

• ソーシャルメディアの見出しは、1行につき最大6語
• ソーシャルメディアのグラフィック内のテキストブロックは、最大3行
• 最小フォントサイズ： Instagramでは24px、Twitter/LinkedInでは20px
• コントラスト： 暗いオーバーレイには白いテキスト、または明るいオーバーレイには暗いテキストを使用します。中間色どうしの組み合わせは避けてください

注目を集めるテクニック

1. 非対称のレイアウト -- 視覚的な緊張感を生み出すため、グリッドを少し崩します
2. 落ち着いた配色に大胆な色を1色加えます
3. 大きな数字や単語1つを視覚的な軸にします
4. メッセージを引き立てる余白を設けます
5. 動きを生み出す斜めの要素を取り入れます
6. キャンバスの縁に枠線またはフレームを配置します（内側に8～12px）

プラットフォーム別のCTA

• Instagram：「後で見るために保存」「ストーリーズでシェア」「賛成ならダブルタップ」
• Twitter：「賛成ならリポスト」「意見を返信」「このスレッドをブックマーク」
• LinkedIn：「賛成ですか？ぜひ下で意見を共有してください」「さらに詳しい情報をフォロー」
• Pinterest：「このピンを保存」「クリックしてガイド全文を読む」

---

ステップ 8：コードの出力先

Gemini の代わりにコードを使用する場合は、自己完結型の HTML ファイルを生成します。以下を含めてください。

1. canvas 要素に正しい width と height を設定します
2. <link> タグを使って Google Fonts を読み込みます
3. design-context のすべての色を使用します
4. 調整しやすいように CSS カスタムプロパティを設定します
5. 編集可能なセクション（テキスト、色、画像）を示すコメントを入れます

エクスポート時のヒント

出力にコメントを含めます。

エクスポート後、PNG を読み込み、Gemini の出力と同じ方法で確認します。

---

品質チェックリスト

• 寸法が対象プラットフォームに正確に合っている
• テキストがセーフゾーン内に収まっている
• プラットフォームでの表示サイズでもフォントサイズが読みやすい
• ブランドカラーとフォントが一貫して適用されている
• 視覚的な階層が明確で、焦点が1つに絞られている
• テキストが多すぎる領域がない（ソーシャルグラフィックではビジュアルを優先）
• 適切な場合、CTA または行動を促すプロンプトが含まれている
• 出力した PNG を読み込み、すべての単語のスペルが正しく、スマートフォンの画面サイズでも読みやすいことを確認した
• コード出力（使用した場合）がフォントを除いて自己完結している