OGPサムネイル設計 2025 — 見切れない、重くない、伝わる

// scripts/build-ogp.mjs
import sharp from 'sharp'
import fs from 'node:fs/promises'
import path from 'node:path'

const WIDTH = 1200, HEIGHT = 630
const OUT = 'public/ogp'
await fs.mkdir(OUT, { recursive: true })

const entries = [
  { slug: 'ogp-thumbnail-design-2025', title: 'OGPサムネイル設計 2025', brand: 'Unified Image Tools' },
  // 必要に応じて記事ごとに追加
]

const base = sharp({ create: { width: WIDTH, height: HEIGHT, channels: 4, background: '#0b0f15' } })
for (const e of entries) {
  // セーフエリア 10% を意識したテキスト配置（概念例: 実運用はSVG合成推奨）
  const svg = `<svg width="${WIDTH}" height="${HEIGHT}" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="100%" height="100%" fill="#0b0f15"/>
    <rect x="${WIDTH*0.1}" y="${HEIGHT*0.1}" width="${WIDTH*0.8}" height="${HEIGHT*0.8}" fill="none"/>
    <text x="50%" y="45%" font-size="72" text-anchor="middle" fill="#fff" font-family="'Noto Sans JP',sans-serif">${e.title}</text>
    <text x="50%" y="65%" font-size="36" text-anchor="middle" fill="#9aa4b2" font-family="'Noto Sans JP',sans-serif">${e.brand}</text>
  </svg>`
  const img = await base
    .composite([{ input: Buffer.from(svg) }])
    .webp({ quality: 82 })
    .toBuffer()
  await fs.writeFile(path.join(OUT, `${e.slug}.webp`), img)
}

// export const generateMetadata = async (): Promise<Metadata> => ({
//   openGraph: {
//     type: 'article',
//     images: [
//       { url: `/ogp/ogp-thumbnail-design-2025.webp`, width: 1200, height: 630, alt: 'OGPサムネイル設計 2025' }
//     ],
//   },
//   twitter: {
//     card: 'summary_large_image',
//     images: ['/ogp/ogp-thumbnail-design-2025.webp']
//   }
// })

# WebP 変換
cwebp input.png -q 82 -m 6 -mt -o ogp.webp

# AVIF 変換
avifenc --min 26 --max 32 --speed 6 input.png ogp.avif