アイキャッチ画像テンプレを Claude 3.7 Sonnet とつくった

作成依頼

• #1 ブログ のアイキャッチ画像作成をシンプルに依頼
• ChatGPT-4o、microCMS、Vercel、Next.jsを簡単なアイコンで表現
• 青系のグラデーションをベースに使用
• タイトルは「ブログ作成プロジェクト」というシンプルなもの

最初の修正

• 元のブログタイトルをそのまま使ってほしい
• ロゴは本物を使いたい
• 「モダン技術」よりも「生成AIを活用した」という表現に

ロゴが直らないので方向転換

• 「こういうロゴじゃない？」と画像を見せてもダメ
• URL を渡しても読み込めない
• 「これだよ」と正確な画像をアップロードしても入れられない
• 諦めて、毎回使えるようなシンプルなテンプレートにしようと方向転換
• zenn みたいなのにしようと指示
• タイトルはそのままドンと表示
• 「#1」をつけてシリーズ感を出す

16:9 に変更指示したら配置が直らない

• ブログの見た目上 16:9 に統一しようとしたら、配置が変に
• 左上に要素が寄っている

• 指示しても直らない
• SVGの中身を見て「各要素の x と y の座標が直ってないからだとおもう」と指示したら直った
• が、なぜか中央寄せになるので「元のように左寄せに戻して」と調整

最終テンプレート

- サイズ: 1600 x 900 
- 外側: 枠線はなし
- 内側: 薄いクリーム色(#faf9f7)の背景
- 左上: 「#1」（次回は#2、#3と変更）
- タイトル: 左寄せで見やすく大きめの文字
- 日付: 左寄せで表示、「YYYY-MM-DD」形式
- 下部: 薄いグレーの区切り線
- 右下: ティールグリーン(#0d796b)の「Blog」バッジ（白抜きテキスト）