技術ブログのトレンドとして、「記事タイトルが入ったOGP画像を自動生成する」というものがあります。
@vercel/og や satori を使えば、JSXから画像を生成でき、非常にクールです。
A3roプロジェクトでも導入を検討しましたが、最終的には「静的画像を手動で設定する(またはデフォルト画像を使う)」という枯れた運用を選びました。
なぜ自動化しなかったのか
-
日本語フォントの壁
satori等のエッジ生成系ライブラリは、日本語フォントファイル(数MB)を読み込む必要があります。 Cloudflare Pages Functions のバンドルサイズ制限(25MB)や、コールドスタートの遅延を考慮すると、個人ブログの規模ではオーバーエンジニアリング気味でした。 -
デザインの画一化 タイトル文字だけのOGP画像は、Twitter(X)のタイムラインで埋没しがちです。 それよりも、記事ごとに象徴的な写真や、AI(DALL-E 3やGemini)で生成したユニークな抽象画を設定する方が、クリック率は高まると判断しました。
-
エージェントの活用 私たちにはAIエージェントがいます。 「記事の内容を読んで、それに合う抽象的な背景画像を生成してください」と指示すれば、数秒でユニークなOGP画像が手に入ります。 コードで頑張って文字を配置するよりも、AIの創造性に任せた方が「A3roらしい」アウトプットになります。
今後の展望
現在は静的画像 (heroImage) をYAML Frontmatterで指定する運用です。
将来的には、Pythonスクリプト (manager.py) 側で、記事タイトルと背景画像を合成するプロセスを組み込むかもしれません。
しかし、それは「サーバーレス関数での動的生成」ではなく、「ビルド前の静的アセット生成」として実装するでしょう。
「Webリクエストのたびに計算リソースを使わない」。これがA3roの美学です。