thumbnail-design

サムネイルデザイン

クリック率と小さいサイズでの読みやすさを最適化した、インパクトのあるサムネイルを作成します。YouTube のサムネイル、記事のヘッダー、OG 画像、動画カバーに対応しています。

---

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

1. まず .agents/design-context.md を読み込みます。ブランドカラー（16 進数）、フォント、スタイルの類型を確認します
2. ファイルがない場合は、design-context のデフォルトの代替設定を使用し、その設定を使用したことをユーザーに伝えます
3. サムネイルでは、ブランドガイドラインの厳密な遵守より、読みやすさとインパクトを優先します。ただし、ブランドカラーはチャンネルの認知度向上につながります

---

Gemini 画像生成の手順

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

1. ステップ 2 の表に記載された Gemini の比率で生成し、--resize WxH でトリミングします（例：--aspect-ratio 16:9 --resize 1280x720）
2. 実在の人物を使う場合は、その人物の写真を --image で渡し、「この人物の顔と本人性を変えずに保つ」と指示します。実在の人物に似せた画像を捏造しないでください
3. 出力された PNG を読み込み、縮小した画像も確認します。python -c "from PIL import Image; Image.open('thumb.png').resize((168,94), Image.LANCZOS).save('thumb_small.png')" を実行してから、thumb_small.png を読み込みます。テキストが読み取れ、顔の表情が見える必要があります。修正は、後続のやり取り 1 回につき 1 つの問題に絞ります

プロンプトの例

• YouTube サムネイル：「YouTube のサムネイル（16:9）を作成してください。[subject] を左側に配置し、[expression/pose] を表現してください。右側に [color] の太字テキスト「[title]」を、濃い色の縁取り付きで配置してください。[background style]。コントラストを高くし、小さいサイズでも読みやすくしてください。」
• 記事ヘッダー：「横長の記事ヘッダー画像を作成してください。[color palette] の抽象的なグラデーション背景。タイトル「[headline]」を白の太字サンセリフ体で中央に配置してください。幾何学模様を控えめに加えてください。すっきりとしたエディトリアルな印象にしてください。」
• OG 画像：「[brand/site] の横長 Open Graph 画像を作成してください。すべてのテキストを中央の 80% の範囲内に収めてください。ロゴを左上に、タイトル「[text]」を大きく中央に、その下に軽めのウェイトでタグラインを配置してください。[brand color] のグラデーション背景。プロフェッショナルで共有しやすいデザインにしてください。」

---

ステップ 2：形式とサイズを特定する

形式	サイズ	アスペクト比	Gemini の比率	備考
YouTube サムネイル	1280 x 720	16:9	16:9	幅は 640px 以上。JPG／PNG、2 MB 未満。168x94 でも読み取れること
YouTube Shorts カバー	1080 x 1920	9:16	9:16	一覧では中央がトリミングされるため、テキストはフレームの中央に配置します
記事ヘッダー／ヒーロー	1200 x 630	1.91:1	16:9 + crop	ブログ記事のヘッダー
OG 画像（Open Graph）	1200 x 630	1.91:1	16:9 + crop	FB、LinkedIn、Slack、X でのリンクプレビュー
X の大きな画像カード	1200 x 628	約 1.91:1	16:9 + crop	X では 2:1 に近い比率でトリミングされることがあるため、余白を確保します
ポッドキャストカバー	3000 x 3000	1:1	1:1 (4K)	Apple：正方形で 1400～3000px、JPG／PNG、RGB
コースのサムネイル	1280 x 720（Udemy は最小 750 x 422）	16:9	16:9	Udemy、Skillshare
Vimeo サムネイル	1280 x 720	16:9	16:9	YouTube と同様

---

ステップ 3：サムネイルの構図の原則

3 秒ルール

サムネイルは 3 秒以内にメッセージを伝える必要があります。一目でテーマを理解できなければ、そのサムネイルは失敗です。

小さいサイズでの読みやすさ

YouTube のサムネイルは、サイドバーでは最小 168x94 ピクセルで表示されます。すべてのデザインがそのサイズでも見やすいか、頭の中で確認してください。

ルール：

• テキストは最大 5～7 語
• フォントサイズは最小 60px（1280x720 の場合。サイドバーのサイズでは約 8px 相当）
• 細いフォントは使わず、太字またはブラックのウェイトのみを使用します
• テキストと背景のコントラストを常に高くします
• 縮小すると見えなくなるような細かい要素は入れません

要素は最大 3 つ

優れたサムネイルの視覚要素は、最大 3 つです。

1. 顔または焦点となる画像
2. 太字のテキスト（2～5 語）
3. 補助的な視覚要素（アイコン、矢印、絵文字、製品）

3 つを超えると、ごちゃごちゃした印象になります。

---

ステップ 4：クリックされやすい構図のフレームワーク

好奇心を引き出す

興味をそそるだけの情報を見せつつ、内容の核心は明かしません。続きを知るには、視聴者がクリックする必要があります。

Layout:
- Left side: Expressive face (surprise, shock, excitement)
- Right side: Bold text with ONE missing piece
- Example: "I tried [PRODUCT] for 30 days..." with shocked face
- Use "?" or "..." to create open loops

ビフォー／アフター

変化を見せます。対比がクリックにつながります。

.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}
.before {
  background: #E5E7EB; /* muted, desaturated */
  filter: grayscale(30%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.after {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
}
.divider-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 64px;
  z-index: 10;
  /* Large arrow pointing right: → */
}

数字／リスト

数字は注目を集めます。「7つのヒント」、「$10K」、「100日間」。

Layout:
- Giant number: 120-200px, bold, gradient or accent color
- Supporting text: 36-48px next to or below number
- Background: clean gradient, not busy
- Optional icon related to the topic

リアクション／感情

感情を表す人の顔は、サムネイル要素の中で最も高い効果を発揮します。

Layout:
- Face/headshot: 60% of frame, positioned left or right
- Expressive emotion: surprise, excitement, disbelief, joy
- 2-3 words of text on the opposite side
- Colored border or glow behind the face to separate from background

対決／比較

2つのものを並べ、その中央に「VS」を配置します。

.versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
}
.vs-badge {
  font-size: 72px;
  font-weight: 900;
  color: var(--accent);
  text-shadow: 0 0 30px rgba(var(--accent-rgb), 0.5);
  z-index: 2;
}
.side-a { background: linear-gradient(135deg, #1a1a2e, #16213e); }
.side-b { background: linear-gradient(135deg, #2d1b00, #462300); }

---

ステップ 5：サムネイルのテキスト処理

最大限のインパクトを与えるテキスト

/* Primary thumbnail text */
.thumb-text {
  font-family: 'Inter', 'Arial Black', sans-serif;
  font-size: 80px;
  font-weight: 900;
  color: #FFFFFF;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.02em;

  /* Always add stroke + shadow for readability over any background */
  -webkit-text-stroke: 3px rgba(0, 0, 0, 0.8);
  paint-order: stroke fill;
  text-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.9),
    0 0 20px rgba(0, 0, 0, 0.5);
}

/* Accent word highlight */
.thumb-text .highlight {
  color: var(--accent);
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.9);
}

テキストの背景テクニック

/* Solid pill behind text */
.text-pill {
  display: inline-block;
  background: var(--primary);
  padding: 8px 24px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 48px;
}

/* Angled highlight bar */
.text-bar {
  display: inline-block;
  background: var(--accent);
  padding: 8px 20px;
  transform: skewX(-5deg);
}
.text-bar span {
  display: inline-block;
  transform: skewX(5deg); /* counter-skew for straight text */
}

/* Blurred backdrop */
.text-backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  padding: 12px 24px;
  border-radius: 8px;
}

---

ステップ 6：顔と感情のテクニック

光彩を付けた顔の切り抜き

.face-container {
  position: relative;
  z-index: 2;
}
.face-container img {
  /* Remove background in advance or use object-fit */
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 0 30px rgba(var(--primary-rgb), 0.6));
}
/* Glow ring behind face */
.face-container::before {
  content: '';
  position: absolute;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--primary-rgb), 0.4), transparent 70%);
  z-index: -1;
}

絵文字のアクセント（顔写真がない場合）

写真がない場合は、大きな絵文字を視覚的な軸として使います。

.emoji-accent {
  font-size: 120px;
  position: absolute;
  /* Slight rotation adds energy */
  transform: rotate(-10deg);
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,0.3));
}

---

ステップ 7：サムネイルの色彩心理

色	連想	最適な用途
赤 (#EF4444)	緊急性、興奮、危険	速報、警告、強い意見
黄 (#EAB308)	注目、楽観、活力	ヒント、前向きなコンテンツ、見どころ
青 (#3B82F6)	信頼、穏やかさ、プロ意識	チュートリアル、教育、テクノロジー
緑 (#22C55E)	成長、成功、お金	金融、成果、前向きな結果
オレンジ (#F97316)	活力、創造性、温かさ	クリエイティブなコンテンツ、DIY、料理
紫 (#8B5CF6)	高級感、神秘、知恵	高級品、深掘り、上級者向けトピック
黒 (#000000)	力強さ、優雅さ、洗練	劇的な発表、高級感のあるコンテンツ
白 (#FFFFFF)	清潔感、ミニマル、現代的	ミニマリスト系チャンネル、Apple風

目を引くコントラストの組み合わせ

• 濃い青の背景に黄色のテキスト
• 深い赤または紫の背景に白いテキスト
• 明るい黄色の背景に黒いテキスト
• 暗い背景にシアンのアクセント
• 濃いグレー／チャコールの背景に赤のアクセント

---

ステップ 8：YouTube 向けの最適化

サイドバーでの視認性テスト

サムネイルはサイドバーで約 168x94px のサイズで表示されます。このサイズでは：

• 太字でコントラストの高いテキストだけが読めます
• 表情がわかるよう、顔を十分大きくする必要があります
• 細部は見えなくなるため、シンプルに保ちます
• 周囲のサムネイルと明確に区別できる配色にする必要があります

オーバーレイ領域

YouTube では、動画の長さが右下隅に（白いテキストの濃い色のピル型表示）、再生済みの動画には赤い再生進行バーが下端に、ホバーアイコン（後で見る、キューに追加）が右上に重ねて表示されます。この3つの領域すべてに重要なコンテンツを置かないでください。

/* Duration overlay safe zone */
.youtube-safe {
  /* Avoid content in this area */
  position: absolute;
  bottom: 0;
  right: 0;
  width: 120px;
  height: 40px;
  /* This zone is covered by YouTube's duration badge */
}

チャンネルの一貫性

繰り返し使う要素を取り入れたサムネイルの仕組みを作成します：

• シリーズごとに統一した背景色またはグラデーション
• すべてのサムネイルで同じフォント処理
• 繰り返し使うレイアウト構成（左に顔＋右にテキスト、またはその逆）
• ブランドカラーを特徴的な要素として使用（色付きの枠線、テキストのハイライト）

---

ステップ 9：記事ヘッダー／OG 画像のデザイン

OG 画像の要件

• 寸法：1200 x 630（ほとんどのプラットフォームが推奨）。og:image:width / og:image:height メタタグで指定します
• ファイルサイズ：読み込みを速くするため、1MB 未満（プラットフォームの上限はさらに大きく、例：5-8MB）
• og:image には絶対 HTTPS URL を使います。X 用には twitter:card = summary_large_image を追加します
• テキスト：一部のフィードで半分のサイズに縮小された約 600x315 でも読めるようにします
• 外側の余白 10% にはテキストを配置しないでください（切り取られる場合があります）

記事ヘッダーのレイアウト

.article-header {
  width: 1200px;
  height: 630px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 60px 80px;
  background: linear-gradient(135deg, #0F172A, #1E293B);
  overflow: hidden;
}

.article-header .title {
  font-family: var(--font-heading);
  font-size: 56px;
  font-weight: 800;
  color: #F8FAFC;
  line-height: 1.15;
  max-width: 700px;
  text-wrap: balance;
}

.article-header .meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  font-size: 18px;
  color: rgba(248, 250, 252, 0.7);
}

.article-header .brand {
  position: absolute;
  bottom: 40px;
  right: 60px;
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
}

/* Decorative accent */
.article-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

---

ステップ 10：出力とエクスポート

寸法を固定した自己完結型 HTML として生成します：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@700;800;900&display=swap" rel="stylesheet">
  <style>
    body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center;
           min-height: 100vh; background: #1a1a1a; }
    .thumbnail {
      width: 1280px;
      height: 720px;
      position: relative;
      overflow: hidden;
      /* ... design styles ... */
    }
  </style>
</head>
<body>
  <div class="thumbnail">
    
  </div>
</body>
</html>

次に PNG を Read し、Gemini の出力と同じ 168x94 縮小テストを実行します。

---

品質チェックリスト

• 出力した PNG を原寸で Read し、168x94px に縮小しました。テキストの綴りは正しく、読みやすくなっています
• テキストは最大 5～7 語
• 視覚要素は 3 つ以下
• コントラストの高いテキスト（安全のために縁取り＋影を追加）
• トピックを伝える明確な焦点
• 右下隅、下端、右上に何も置かない（長さのバッジ、再生進行バー、ホバーアイコン用）
• プラットフォームの UI と区別できる色（純白や YouTube の赤は避ける）
• シリーズ内の他のサムネイルとのブランドの一貫性
• 感情に訴える要素（顔、数字、好奇心をかき立てる要素）
• 適切な場合は、デザインコンテキストの色とフォントを適用