OGPサムネ完全設計：安全域・比率・可読タイポ・自動生成（Next.js）
OGP はシェアの顔。ですがテキストが切れる/潰れる/読みにくいとクリック率が落ちます。 本記事は比率（約1.91:1）・安全域・文字最小サイズ・コントラスト・容量を「運用できる設計」に落とし込み、 さらに Next.js の動的OGP（/og）実装まで最短で到達します。
先に結論
- 比率は約1.91:1（例：1200×630）基準、上下左右に安全域を確保。
- タイトルは短く太く（全角25〜30字目安）。背景と十分なコントラスト。
- 容量は過大にしない（写真ベースは AVIF/WebP、図版は PNG-8/PNG、高圧縮の検討）。
- 動的OGPでタイトル差し替えを自動化。テンプレに安全域ガイドを焼き込み。
要点（TL;DR）
- 1.91:1 基準（1200×630 想定）＋上下左右に安全域（例：80px）— “切れない”を最優先。
- 見出しは短く太く（~80英字/全角25–30字）・字間を詰めて読みやすさ重視。
- 配色はsRGB基準で十分なコントラスト（関連：sRGBとP3の使い分け）。
- 容量は必要最小限。写真=AVIF/WebP、図版=PNG系。/compressor で圧縮を確認。
- Next.js の
ImageResponseで/og を実装して、量産を自動化。
1. なぜ「安全域」が要るのか
OGPカードは媒体側の枠や角丸・テキスト重ね、表示倍率で端が欠けたり縮小されます。端ギリギリに文字や重要要素を置くと、視認性が落ちます。 そこで外周に安全域（マージン）を設け、「切れても困らない領域」を確保します。 併せて比率の揺れや端末差に耐えるデザインが必要です。
また、サムネ経由で訪れたユーザーは本文のヒーロー画像や LCP にも敏感です。サムネづくりと同時に、本文側のCLSゼロ設計 や srcset/sizes を整えると、全体の体験が揃います。
2. 最短フロー（実務）
- テンプレートを用意（1200×630、外周80px安全域、角丸想定）。ガイド線と背景のコントラストを確保。
- 見出しは短い強い言葉に絞る。副題は下段に12–28px程度で薄く配置し、可読性を損ねない。
- 画像は 写真=AVIF/WebP、アイコンや図版は PNG系 を検討。/compare で差分を確認。
- Next.js の
ImageResponseで/ogを実装し、タイトルをクエリで差し替え。CMS連携で自動化。
3. 実装レシピ（コピペOK）
3.1 動的OGP（/og）
// TypeScript / React (Next.js Edge)// app/og/route.tsx — Next.js Edge Runtimeで動的OGPを生成
import { ImageResponse } from "next/og";
export const runtime = "edge";
export const alt = "gazou-compressor.jp";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";
export async function GET(req: Request) {
const { searchParams } = new URL(req.url);
const title = (searchParams.get("title") || "タイトル").slice(0, 80);
return new ImageResponse(
(
<div
style={{
width: "1200px",
height: "630px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
background: "linear-gradient(135deg,#111,#2a2a2a)",
color: "#fff",
fontFamily: "Noto Sans JP, sans-serif",
position: "relative",
}}
>
{/* 安全域（左右80/上下80pxを目安） */}
<div
style={{
position: "absolute",
inset: "80px",
outline: "2px solid rgba(255,255,255,.14)",
borderRadius: "16px",
}}
/>
<div style={{ fontSize: 68, fontWeight: 800, lineHeight: 1.15, padding: "0 120px", letterSpacing: "-.02em" }}>
{title}
</div>
<div style={{ position: "absolute", bottom: 48, left: 120, fontSize: 28, opacity: .9 }}>
gazou-compressor.jp
</div>
</div>
),
{ ...size }
);
}3.2 安全域ガイド（CSS、プレビュー用）
// CSS/* 安全域オーバーレイ（プレビュー用） */
.safe-frame {
position: relative;
width: 1200px;
height: 630px; /* 1.91:1 付近 */
background: #111;
}
.safe-frame::after {
content: "";
position: absolute;
inset: 80px; /* 余白の目安（上下左右） */
outline: 2px dashed rgba(255,255,255,.35);
border-radius: 16px;
pointer-events: none;
}3.3 メタデータ例（OG画像に /og を紐付け）
// TypeScript (Metadata)// 例：メタデータでOGP指定（概略）
export const metadata = {
openGraph: {
images: [
{ url: "/og?title=%E8%A8%98%E4%BA%8B%E3%81%AE%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB", width: 1200, height: 630, alt: "記事のタイトル" },
],
},
};画像の色域は基本 sRGB を既定値に。同一デザインでも P3 の飽和色は環境差が出ます（関連： Webのカラーマネジメント）。
4. 応用と使いどころ
- CMS のタイトル/カテゴリ/著者名を差し込み、自動量産。
- 背景をブランドカラー（sRGB）で統一し、認知一貫性を確保。
- ヒーロー画像の切り出しを背景に敷く場合は、ぼかし/黒フチ/半透明幕で可読性維持。
5. 公開前チェック
- 比率は約1.91:1（例：1200×630）に整っている。
- 上下左右の安全域（例：80px）に文字や主要要素がはみ出していない。
- タイトルは短く太く、背景との差が十分（コントラスト）。/compressor で容量も最適化。
/ogパラメータのエスケープと最大長を制限（例：80字）。想定外文字で崩れない。- 既存の導線と重複しない言い回し（オリジナル性）。関連： CLSゼロ設計 / srcset/sizes
6. まとめ
OGP は「読む前の体験」。比率・安全域・可読性・容量の四点をテンプレ化し、/og で自動化すれば、 “切れない・潰れない・読みやすい”を継続できます。本文側は 予約サイズ設計 と レスポンシブ画像 を併せて盤石に。
FAQ（よくある質問）
画像形式の基本方針は？（写真/スクショ/透過）
写真は AVIF / WebP（画質80–85%目安）、UIやスクショはPNG / WebP Lossless、単色ロゴはSVGが基本です。 実装の詳細は srcset/sizes設計ガイド と スクショ最適化 を参照してください。
圧縮しても画質を落とさないコツは？
実表示幅に合わせたリサイズ → 過大ダウンロードを防ぎ、
srcset/sizes を 実描画幅に一致させます。画質は写真で 80–85% を起点に、ノイズやエッジを目視確認。 仕上げは /compare で Before/After を見比べるのがおすすめです。