[Astro] 記事サムネイルをブランドカラーの自作SVGで量産する

ブログを移行したとき、サムネイルの無い記事が大量にあって no-image.png だらけで寂しい状態でした。 写真を用意するのは大変なので、記事のトピックに合わせたカバー画像を SVG で量産することにしました。SVG なら軽量・テキストで編集可能・外部画像に依存しない、と個人ブログにはちょうど良いです。

方針：ブランドカラーのカード

「グラデ背景 + ラベル + 大きなタイトル + サイト名」という共通テンプレートを作り、ツールごとに色とロゴだけ変える方式にしました。1200x630（OGP と同じ比率）で作っておくと使い回しが効きます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" width="1200" height="630"
     font-family="'Avenir','Noto Sans JP',sans-serif">
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#0c4a6e"/>
      <stop offset="1" stop-color="#0ea5e9"/>
    </linearGradient>
  </defs>
  <rect width="1200" height="630" fill="url(#bg)"/>
  <text x="80" y="150" fill="#ffffff" opacity="0.75" font-size="34" font-weight="600">CSS FRAMEWORK</text>
  <text x="78" y="330" fill="#ffffff" font-size="92" font-weight="800">Tailwind</text>
  <text x="80" y="575" fill="#ffffff" opacity="0.6" font-size="30">nao-guitarist.com</text>
</svg>

これを public/images/blog/covers/ に置いて、frontmatter から参照するだけ。

thumbnail: /images/blog/covers/tailwindcss-v4.svg

公式ロゴを薄く重ねる

各ツールのロゴを入れると一気に「らしく」なります。配布されているブランドロゴ（Simple Icons など）の単色パスを取得して、カードの右側にうっすら重ねました。

curl -o docker.svg https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/docker.svg

取得した SVG から <path d="..."> を抜き出し、24×24 のロゴをカード内に拡大配置します。

<!-- 24x24 のロゴを scale(15) で 360px に拡大、右側へ薄く配置 -->
<g transform="translate(800,150) scale(15)" fill="#ffffff" opacity="0.16">
  <path d="M13.983 11.078h2.119a.186.186 0 0 0 ..."/>
</g>

ブランドカラーも各ロゴの公式カラーに合わせると統一感が出ます。同じツールの記事はカバーを共通化すると、一覧がきれいに揃います。

注意：SVG は OGP 画像には向かない

ここが一番のハマりどころ。サイト内のカード画像や記事ヘッダーには SVG で十分ですが、SNS シェア用の OGP 画像（og:image）に SVG を指定しても、多くの SNS（X / Facebook など）は SVG をレンダリングしません。

OGP もこの画像で賄いたい場合は、

• SVG を PNG/JPG にラスタライズして og:image 用に書き出す（resvg や sharp、ブラウザのスクリーンショット等）
• もしくは OGP は別途専用の生成（@vercel/og 等）にする

といった対応が必要です。逆に言うと、サイト内表示だけなら SVG で軽く済ませて OK。用途を分けて考えるのがポイントでした。

まとめ

• 共通テンプレ + 色/ロゴ差し替えで、サムネを低コストに量産できる
• 公式ロゴの単色パスを薄く重ねると一気に “らしく” なる
• ただし OGP に使うなら SVG ではなくラスタ画像が必要

写真が無い技術記事でも、カードが揃うと一覧の見栄えがかなり良くなりました。