OGPサムネの安全域：1200×630の“欠けない”デザインと自動検品レシピ
OGPはSNSの自動クロップに左右されます。端に置いた文字や顔が切れる事故は、見た目だけでなく クリック率にも響きます。そこで安全域10%をルール化し、テンプレ＋自動検品で再現性を高めます。
先に結論
- ベースは1200×630（1.91:1）。上下左右10%を安全域。
- 文字/ロゴ/顔は安全域内に収め、背景は外側で大胆に。
- 検品は安全枠の焼き込みで自動化（バッチで一括）。
要点（TL;DR）
- 安全域10%でクロップ差を吸収。複数プラットフォーム想定なら12–14%。
- 文字サイズの目安：1200×630ならタイトル48–72px、補足24–36px。
- 色は sRGB固定、画像は Progressive JPEG で“先に見える”。
1. デザイン指針（見やすさの作法）
- コントラスト比：文字は背景に対して 4.5:1 目安。ドロップシャドウより面で分ける。
- 視線の導線：顔/視線/矢印は内側に向けると視線が抜けにくい。
- 情報量：テキストは最大2行＋短いタグに留める。
2. 最短フロー（テンプレ運用）
- テンプレPSD/FIGで安全域レイヤを用意。
- 書き出し後、スクリプトで安全枠を重ねてチェック。
- 色は sRGB、容量は Progressive JPEG で最適化。
3. 実装レシピ（コピペOK）
3.1 安全枠画像の自動生成
// scripts/ogp-safe-overlay.ts
// 依存: npm i -D sharp tsx
// 1200x630を想定。上下左右 margin% を安全域として半透明で可視化。
import sharp from "sharp";
const W = Number(process.env.W ?? 1200);
const H = Number(process.env.H ?? 630);
const MARGIN = Number(process.env.MARGIN ?? 0.10); // 10%
async function main() {
const base = sharp({ create: { width: W, height: H, channels: 4, background: { r:0, g:0, b:0, alpha: 0 } } });
const safeW = Math.round(W * (1 - MARGIN * 2));
const safeH = Math.round(H * (1 - MARGIN * 2));
// 安全域の矩形（半透明）
const overlay = await sharp({
create: { width: safeW, height: safeH, channels: 4, background: { r: 255, g: 255, b: 255, alpha: 0.2 } },
}).png().toBuffer();
await base
.composite([{ input: overlay, left: Math.round(W * MARGIN), top: Math.round(H * MARGIN) }])
.png()
.toFile("ogp-safe-overlay.png");
console.log("→ ogp-safe-overlay.png");
}
main().catch(e => { console.error(e); process.exit(1); });3.2 フォルダ一括検品
// scripts/ogp-batch-verify.ts
// フォルダ内のOGPに安全枠を焼き込み、/verified へ出力
import fs from "node:fs/promises";
import path from "node:path";
import sharp from "sharp";
const IN = process.env.IN ?? "ogp";
const OUT = process.env.OUT ?? "verified";
const overlay = "ogp-safe-overlay.png"; // 先に生成
async function main() {
await fs.mkdir(OUT, { recursive: true });
const list = (await fs.readdir(IN)).filter(f => /\.(png|jpe?g)$/i.test(f));
for (const f of list) {
const src = path.join(IN, f);
const out = path.join(OUT, f.replace(/\.(png|jpe?g)$/i, "_checked.png"));
await sharp(src).composite([{ input: overlay, gravity: "centre" }]).png().toFile(out);
console.log("→", out);
}
}
main().catch(e => { console.error(e); process.exit(1); });3.3 CSS（アスペクト維持）
/* OGPサムネのアスペクトを維持するユーティリティ */
.ogp-frame { aspect-ratio: 1200 / 630; }4. 公開前チェック
- 安全域からのはみ出しがない（自動検品OK）。
- コントラストと文字サイズが十分。
- sRGB固定・容量・キャッシュ設計（SWR）。
5. まとめ
OGPは安全域設計＋自動検品で事故ゼロに。テンプレ化すれば誰でも品質が再現できます。