サムネイルのセーフエリアと比率 2025 — CTR を落とさない実務トリミング

はじめに

同じ画像でも表示環境で見切れが起きます。CTA や顔・テキストを安全に収める「セーフエリア」を定義しましょう。

本稿では主要比率ごとの安全域、SNS/検索/カード UI での切れやすい領域、テキスト可読の物理サイズ目安、そして実ワークフローを提示します。CTR や保存率に直結するため、初期案は自動化でも最終は人手レビューを推奨します。

関連記事: 伝わるトリミング設計 — アスペクト比・注視点・SNSサムネの最適化 ／ OGPサムネイル設計 2025 — 見切れない、重くない、伝わる

比率と配置

• 1:1: 正方サムネ。中央寄せ、安全域は上下 12–15%
• 16:9: 横長。テキストは左/中央 40–60% に寄せると安定
• 4:3: 説明図や人物写真にバランス

余白とF字・Z字視線

視線は F/Z パターンで走ります。テキストや顔を“左上〜中央”に寄せると初速が出やすい傾向があります。右下は視線の減衰域になりやすいので、ロゴのみ配置など「軽い要素」に限定します。

推奨セーフエリアの目安（比率別）

以下は「切れにくさ優先」の初期値。ブランドや媒体特性で微調整してください。

実務フロー

1. 画像トリミング で比率プリセットを選択
2. 重要要素を安全域内に配置（ガイドを自作でも OK）
3. SNS/OGP は OGPサムネイル作成 で最終調整

自動化と人手のハイブリッド

• 第1案: 顔検出/サリエンシーを使うスマートクロップ（人物・商品軸）
• 第2案: ルールベースでセーフエリアへ再配置（コピーやロゴ）
• 最終: デザイナー/編集が 30 秒レビュー -> OK/修正の2択に集約

この運用で「速度×事故率」のバランスが良くなります。

プラットフォーム別の注意

• YouTube サムネ（16:9）: 上下 10–15% は見切れを想定。中央 60% に顔/メインコピー

• X（旧Twitter）カード: 自動トリムで左右が詰まりやすい。中央寄せ + 上下安全域を厚めに

• 検索結果の画像カード: 可視領域が小さいため、文字面積は 20–30% に抑制

• Instagram フィード: 1:1 が基準。縦長クロップ時も 1:1 サムネで中央 50–60% に要点

• Facebook/LinkedIn OGP: 1200×630 近辺。上下 12% の“見切れバッファ”を意識

• ショッピングカード: 価格/バッジ領域が被る前提で、被写体とテキストを中央へ寄せる

数学メモ（安全域ガイド線）

画像幅を W、高さを H とすると、上下 12% のガイドは y = 0.12H と y = 0.88H。左右 10% は x = 0.1W, 0.9W。

// 例: 1200x630（OGP 近似）
const W = 1200, H = 630;
const guides = {
  left: 0.1 * W, right: 0.9 * W,
  top: 0.12 * H, bottom: 0.88 * H
};

人物の視線方向に対しては、進行方向側の余白 e を 0.1W 以上確保すると安定します。複数人物のときは主役の視線を優先し、残りはセカンダリ領域（右上/右下）に退避。

object-position を活かしたカバーフィット

<div class="aspect">
  <img src="hero.jpg" alt="" />
</div>

.aspect { width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.aspect img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 45%; }

• 主被写体がやや左上なら object-position: 40% 45% のように補正
• ブレークポイントで object-position を切り替えても OK

QA チェック

• [ ] 重要要素が上下左右 10–15% 内側に収まる
• [ ] モバイルでの切れがない（実機確認）
• [ ] 文字は最小 14–16px 相当で可読

追加チェック:

• [ ] 明度/彩度コントラストが十分（WCAG AA 目安）
• [ ] 顔・目線方向に十分な余白（左右 10% 以上）

A/B テストの簡易設計

• メインコピー 6–9 語 / 補助 0–6 語で2案
• 被写体スケール 90% vs 75%
• 1 週間 / 1,000imp で CTR × 保存率の総合指標を比較

FAQ

• Q: 自動トリミングと手動、どちらが良い？
• A: 初期案は自動でも、最終は手動確認が安心です。サムネは CTR に直結します。
• Q: 文字サイズの下限は？
• A: 物理 3.5–4mm 相当が一つの目安。CSS px 換算はデバイス依存なので、主要端末での実機確認が最終判断です。
• Q: 角丸で切れます。
• A: カード UI の角丸半径 r を見込み、四隅の 6–8% は“絶対に置かない”ゾーンにします。

まとめ

比率ごとの安全域を決めておくと、制作がぶれず事故も減ります。まずは安全域を明文化しましょう。

付録: セーフエリアの CSS ガイド表示

<div class="thumb">
  <img src="thumb.jpg" alt="thumb" />
  <div class="safe"></div>
</div>

.thumb { position: relative; width: 600px; aspect-ratio: 16/9; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb .safe {
  position: absolute; inset: 12% 10%; /* top/bottom 12%, left/right 10% */
  outline: 2px dashed rgba(0,0,0,.35);
}

付録: シンプルなセーフエリア計算ユーティリティ

type Guides = { left: number; right: number; top: number; bottom: number };

export function createGuides(width: number, height: number, xSafe = 0.1, ySafe = 0.12): Guides {
  return {
    left: xSafe * width,
    right: (1 - xSafe) * width,
    top: ySafe * height,
    bottom: (1 - ySafe) * height,
  };
}

export function isInsideSafeArea(x: number, y: number, g: Guides): boolean {
  return x >= g.left && x <= g.right && y >= g.top && y <= g.bottom;
}