技術ブログを地味に増やし続けている弊社ですが、ブログを書く人が多くなるにつれて、問題になったのがアイキャッチ画像でした。
運用としては、投稿し終わったあとに
- 管理者がPhotoshopやFigmaでアイキャッチ画像を作成
- アイキャッチ画像を投稿
凝ったイラストを毎回作るほどでもないけど、何もないのも寂しい。というわけで、サービスアイコンとテキストを組み合わせるだけの、割り切ったアイキャッチ生成ツールを作ってみることにしました。
Claude Codeに要件をまとめて渡して、そのまま実装してもらう形で進めています。
つくったもの
社内専用のNext.jsアプリです。アイコン画像とテキストをアップロードすると、16:9のアイキャッチ画像がその場で生成されてダウンロードできる、というだけのシンプルなツールです。
- 画像生成には
@vercel/og(Satoriベース)を使用 - Vercelにデプロイ
- 認証はNext.js Middlewareで自前実装したBasic Auth(Vercelの有料Password Protectionは使わない)
構成
- フレームワーク: Next.js(App Router)
- 画像生成:
@vercel/og - デプロイ先: Vercel
- 認証: Basic Auth(Middleware実装)
- フォント: Noto Sans JP / Inter / Amazon Ember / IBM Plex Sans
やったこと
1. Claude Codeに要件をまとめて渡す
お手軽な社内ツールを作成するときにコーディングエージェントは欠かせません。今回はこんな感じで、機能要件・非機能要件をまとめてプロンプトとして渡しました。
- 認証(Basic Auth)
- 入力フォーム(アイコンアップロード、テキスト入力、表示モード、レイアウト方向、フォント選択、ダーク/ライトモード)
- 画像生成(
@vercel/ogで16:9生成、flexboxで中央寄せ)
あえて「自動レイアウト判定はしない」「背景除去はしない」というのを非機能要件として明記しています。ここを曖昧にすると、AIは気を利かせて余計な自動判定ロジックを実装しがちなので、割り切りたい部分は先に明言しておくのがコツだと思います。
2. 生成されたプロジェクト構成を確認する
app/api/generate/route.tsxに画像生成ロジックが集約される形で、指定したディレクトリ構成どおりに実装されました。
3. フォントファイルを配置する
public/fonts/にフォントファイルを配置します。
今回は以下の無料フォントを使用します。
- Noto Sans JP (和文フォント)
- Inter (欧文フォント)
- IBM Plex Mono (等幅欧文フォント)
権利の関係があるため、社外に公開するツールや、社外向けの成果物にこのフォントをそのまま使うのは避けた方がよさそうです。
4. 環境変数を設定してローカルで動かす
Basic Auth用のユーザー名・パスワードを環境変数に設定して、ローカルで起動してみます。
plain
cd /Users/tako/next-blog-eyecatch-generator
BASIC_AUTH_USER=admin BASIC_AUTH_PASSWORD=test123 npm run dev
5. 実際にアイキャッチを作ってみる
さっそく本記事のアイキャッチ画像を作りたいと思います。
ロゴとテキストを入れて、レイアウトやフォント、ダーク/ライトモードを切り替えながら生成してみます。
やりとりしながら作っていたら入力項目が多くなってしまいましたが、アイキャッチ作成業務の標準化にもつながりました。
6. Vercelにデプロイする
最後に、READMEの手順に沿ってVercelにデプロイします。
所感
PhotoshopやFigmaなしにブログのアイキャッチ画像をつくれるようになりました。
ちょっとしたアプリケーションで地味に時間のかかっていた定常業務をなくしていけたらと思います！
ここまで読んでいただき、ありがとうございます。もしこの記事の技術や考え方に少しでも興味を持っていただけたら、ネクストのエンジニアと気軽に話してみませんか。
- 選考ではありません
- 履歴書不要
- 技術の話が中心
- 所要時間30分程度
- オンラインOK
