実は、ブログを始めてからずっとサムネなしで投稿していました。
面倒だったのもあります。
でも一番は「何で作ればいいかわからない」という迷いでした。
Canvaにしようか、Figmaにしようか。調べるたびに後回しにしていました。
ある日ふと思いました。
「迷うくらいなら、自分専用のやつ作っちゃえばよくない？」
そこで、AIを使ってサムネを自動生成するツールを作ってみました。
タイトルを入力するだけで、画像が出てくるやつです。
この記事でわかること
- Claude APIをチャット以外に使う方法（デザインJSON生成という発想）
- Canvas APIでブラウザだけで画像を合成する仕組み
- 詰まったところとその解決法（改行ズレ問題）
何を作ったか
タイトルを入力すると、1200×630pxのサムネイル画像が自動生成されるWebアプリです。
生成した画像はそのままPNGで保存できます。
ブランドカラー（ベージュ×グリーン）は固定で、毎回ぶれない統一感が出るようにしました。
アプリはこちら → サムネイルメーカー
使った技術は以下のとおりです。
- Claude API（デザインの設計図を生成）
- Canvas API（画像の合成・文字描画）
- Vercel（公開）
なぜ作ったか
ずっとサムネなし、というのは正直ちょっとまずいと思っていました。
でも「何で作ろう」と考えるたびに選択肢が多すぎて、結局後回しにしていました。
Canvaにしようか、Figmaにしようか、テンプレートを探そうか……。
決まらないから作らない、の繰り返しでした。
だったら自分専用のツールを作ってしまえば、迷う必要がなくなる。
せっかくClaude APIを触り始めたので、チャットじゃない使い方にも挑戦してみたい気持ちもありました。
どうやって作ったか（AIの使い方）
今回のポイントは、ClaudeにデザインをJSONで出力させるという発想です。
「サムネイルのデザインを考えて」と自然言語で頼むのではなく、
「このタイトルに合うデザインをJSONで返して」と指示します。
{
"backgroundColor": "#f5f0e8",
"titleText": "ブログのサムネをAIに任せてみた",
"accentColor": "#4a7c59",
...
}こんな形のJSONが返ってきます。
あとはCanvas APIがそのJSONを読んで、画像に変換します。
Claude APIが「設計図を書く人」、Canvas APIが「実際に絵を描く人」、という分業です。
Claudeへの指示はシンプルでした。
「くらしの複利のイメージに合う形にしてほしい」とだけ伝えました。
あとはClaudeがブランドカラーやフォントの配置を考えてくれました。
詰まったところと解決法
正直に言うと、ここが一番時間がかかりました。
テキストが変なところで改行される問題です。
Canvas APIは「画像生成AI」ではありません。
自分でテキストを1文字ずつ描画する仕組みなので、「ここで折り返して」という指示を自分で書く必要があります。
最初はClaude Codeに「改行がズレるから直して」と指示を出しました。
コードはどんどん複雑になっていきました。
でも、直らない。
しばらくして気づきました。
「そもそも、タイトルが長すぎる」
文字数を減らしたら、あっさり解決しました。
技術で解決しようとして、実は入力の問題だった。
こういうことってあるんですね。
完成してみて
約2時間で完成しました。
使ってみて思ったのは、これはツールを使う話じゃなくてツールを作る話だということです。
CanvaやFigmaって、便利ですよね。でも、他の人が作ったものです。
自分のブログに合わせた、自分だけのサムネツールを、2時間で作れる。
「既製品を使う側」から「自分専用を作る側」に変われた感覚がありました。
ちょっと革命的だと思いました。
まとめ・使ってみてください
- Claude APIはチャット以外にも使える（デザインJSON生成など）
- Canvas APIと組み合わせると画像生成ツールが作れる
- 詰まったときは、コードより「入力」を疑う
アプリはこちらから試せます。
→ サムネイルメーカー
最後まで読んでくださって、ありがとうございます。
CanvaじゃなくてCanvaを作る時代、一緒にやってみませんか。
また来てください。くらしの複利でした。
採用担当の方はこちら → 私を採用しませんか
📢 広告です
ハピタス経由で証券口座を開設するとポイントがもらえてお得です。
コメント