サムネイルとOGP
kumiko-genによるサムネイル生成と、svg-to-pngによるOGP画像変換の仕組み
ブログ記事のサムネイル画像とOGP（Open Graph Protocol）画像の生成・管理について説明します。
概要
各ブログ記事には、記事ヘッダーに表示されるサムネイル画像と、SNSでシェアされた際に表示されるOGP画像があります。サムネイルはkumiko-genで生成されるSVG、OGP画像はそのSVGから変換されるPNGです。
ファイル構成
サムネイルとOGP画像はblog/public/thumbnails/ディレクトリに配置されます。
{slug}.svg— 記事ヘッダーに表示されるサムネイル（kumiko-genで生成）{slug}.png— OGPメタタグ用の画像（svg-to-pngで変換、1200x630px）
slugは記事のMDXファイル名（拡張子なし）と一致します。
kumiko-gen: サムネイルSVG生成
kumiko-gen (@takazudo/kumiko-gen) は、記事のslug文字列をシードとして組子模様のSVGサムネイルを生成するツールです。同じslugからは常に同一のSVGが生成されます。pnpm dlx経由で実行されるため、インストール不要です。
slug文字列からFNV-1aハッシュを生成し、決定的な疑似乱数（Mulberry32 PRNG）でパターン・配色・レイヤー構成を決定します。9種類のパターン（asanoha、mitsukude、goma、shippoなど）を複数レイヤーで重ね合わせ、36種類の組み込み配色スキーム（Dracula、Nord、Catppuccin、Gruvbox、TokyoNightなど）から選択されます。
ルートのスクリプトには--color-scheme random --zoom 5がデフォルトで含まれており、各slugに対して決定的にユニークな配色とズームビューが適用されます。
pnpm kumiko-gen <slug>出力先: blog/public/thumbnails/{slug}.svg
主なオプション
| オプション | 説明 |
|---|---|
--size <number> | SVGサイズ（デフォルト: 800） |
--zoom <number> | ズームレベル（デフォルト: 1、推奨: 5） |
--color-scheme <name> | 配色名、またはrandomでslugごとの決定的選択 |
--list-color-schemes | 利用可能な配色名を一覧表示 |
--fg "<color>" | 全レイヤーのストロークカラーを上書き |
--bg "<color>" | 背景色 |
--stroke-width <n> | ストローク幅の上書き |
--divisions <n> | グリッドの分割数 |
svg-to-png: OGP画像変換
svg-to-png は、kumiko-genで生成したSVGサムネイルをOGP用のPNG画像（1200x630px）に変換するツールです。本リポジトリのsub-packages/svg-to-png/に配置されており、sharpライブラリでSVGをラスタライズします。
変換パイプラインは以下の通りです。
blog/public/thumbnails/{slug}.svgを読み込み- 1200x1200でSVGをラスタライズ
- 上下を285pxずつセンタークロップして1200x630にリサイズ
- PNGとしてエンコード・書き出し
pnpm svg-to-png <slug>出力先: blog/public/thumbnails/{slug}.png
一括変換
--allオプションでサムネイルディレクトリ内の全SVGを一括変換できます。
pnpm svg-to-png --all新規記事のワークフロー
新しい記事を作成する際は、以下の手順でサムネイルとOGP画像を準備します。
- 記事のMDXファイルを作成
- kumiko-genでサムネイルSVGを生成
- svg-to-pngでOGP用PNGに変換
pnpm kumiko-gen my-article-slug
pnpm svg-to-png my-article-slugルートスクリプトには--color-scheme random --zoom 5が含まれているため、追加のフラグは不要です。
OGPメタタグ
ブログのNext.js側では、記事ページのgenerateMetadataがOGPメタタグを出力します。OGP画像にはblog/public/thumbnails/{slug}.pngが使用されます。
SNSでシェアされた際に、記事のタイトル・説明文・サムネイル画像がプレビューとして表示されます。
ツールの詳細仕様
各ツールの詳細な仕様については、それぞれのリポジトリ・パッケージを参照してください。
- kumiko-gen: github.com/Takazudo/kumiko-gen（npm パッケージ:
@takazudo/kumiko-gen） - svg-to-png: 本リポジトリの
sub-packages/svg-to-png/に配置