📌概要: Google Gemini の Imagen 4 Fast APIを使って、ブログ記事のeyecatch画像をカテゴリ別に自動生成し、Cloudflare R2にアップロード、Notionのプロパティを自動更新する仕組みを構築しました。
はじめに
技術ブログの記事にeyecatch画像を毎回手動で用意するのは面倒。Gemini Imagen 4 APIを使えば、記事のカテゴリに合わせた幾何学デザインの画像を自動生成できる。生成した画像はCloudflare R2にアップロードし、NotionのEyecatchプロパティを自動更新する。
この記事でわかること
対象読者
前提条件
1. Gemini Imagen APIのセットアップ
Google Cloudの準備
-
Google Cloud Consoleでプロジェクト作成
-
Generative Language API を有効化
-
無料トライアル→有料プランにアップグレード（Imagen APIは有料プラン必須）
-
APIキーを発行
利用可能なモデル
| モデル |
特徴 |
| imagen-4.0-generate-001 |
高品質、低速 |
| imagen-4.0-fast-generate-001 |
高速、十分な品質 |
| imagen-4.0-ultra-generate-001 |
最高品質 |
| gemini-2.5-flash-image (Nano Banana) |
テキスト描画が得意 |
今回はimagen-4.0-fast-generate-001を採用。
2. プロンプト設計
テキストなし指定の重要性
画像生成AIはテキストを含めがち。以下のプロンプトで徹底排除する。
Absolutely no text, no words, no letters, no labels, no numbers, no characters.
Pure visual abstract art only.
カテゴリ別カラーパレット
記事のカテゴリに応じて色味を変え、ブログ全体で統一感を出す。
const CATEGORY_COLORS = {
'トラブルシューティング': 'warm orange, burnt sienna, cream, dark brown. Beige background.',
'設定・環境構築': 'deep navy blue, steel blue, lavender, soft peach. Navy blue background.',
'実装': 'emerald green, teal, sage, dark forest green. Soft mint background.',
'設計': 'deep indigo, slate blue, dusty rose, warm taupe. Light gray background.',
'学習メモ': 'golden yellow, amber, warm brown, mustard. Cream background.',
'技術': 'cool gray, steel blue, ice blue, charcoal. Light silver background.',
};
共通スタイル
「円と弧が重なるマット紙風の幾何学構成」で統一。
Abstract geometric composition with overlapping translucent circles,
arcs and curved shapes. Matte paper-like texture. Flat design,
minimal, modern. 16:9.
3. 画像生成の実装
function callImagen(prompt) {
return new Promise((resolve, reject) => {
const url = `https://generativelanguage.googleapis.com/v1beta/models/imagen-4.0-fast-generate-001:predict?key=${API_KEY}`;
const body = JSON.stringify({
instances: [{ prompt }],
parameters: { sampleCount: 1, aspectRatio: '16:9' },
});
});
}
レスポンス構造
{
"predictions": [{
"bytesBase64Encoded": "iVBORw0KGgo...",
"mimeType": "image/png"
}]
}
4. R2へのアップロード
Cloudflare R2はS3互換APIなので、AWS SDKが使える。
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
const s3 = new S3Client({
region: 'auto',
endpoint: process.env.R2_ENDPOINT,
credentials: {
accessKeyId: process.env.R2_ACCESS_KEY,
secretAccessKey: process.env.R2_SECRET_KEY,
},
});
async function uploadToR2(buffer, filename) {
const key = `images/eyecatch/${filename}`;
await s3.send(new PutObjectCommand({
Bucket: 'microcms-image',
Key: key,
Body: buffer,
ContentType: 'image/png',
}));
return `${BUCKET_URL}/${key}`;
}
5. Notion更新
アップロードした画像URLをNotionのEyecatchプロパティとカバー画像に設定。
async function updateNotionEyecatch(pageId, imageUrl) {
await notion.pages.update({
page_id: pageId,
properties: {
Eyecatch: { url: imageUrl },
},
cover: {
type: 'external',
external: { url: imageUrl },
},
});
}
6. レート制限対策
Imagen 4 Fastは1分あたり約5リクエストの制限がある。48記事を一括生成する場合は15秒間隔で実行。
await new Promise(r => setTimeout(r, 15000));
全48記事で紒12分。--dry-runオプションで事前に対象を確認できるようにしておくと安心。
Tips
📌Tip 1: Imagen APIは無料プランでは使えない。Google Cloudの有料プランへのアップグレードが必須（無料トライアルクレジットは使える）
📌Tip 2: 「No text」をプロンプトに入れてもテキストが生成されることがある。「Pure visual abstract art only」を追加すると改善する
📌Tip 3: 同じプロンプトでも毎回異なる画像が生成される。気に入らない画像は個別に再生成可能
📌Tip 4: R2のパブリックURLはpub-{hash}.r2.dev形式。カスタムドメインも設定可能
参考リンク
まとめ
-
Imagen 4 Fastで十分な品質のeyecatch画像を自動生成できる
-
カテゴリ別カラーパレットでブログ全体に統一感を出せる
-
テキストなしの幾何学デザインが最も安定する
-
R2 + Notion API更新で完全自動化パイプラインが構築可能
-
レート制限は15秒間隔で回避
