note のアイキャッチ画像自動作成 失敗から成功への道筋とプロンプト無料公開

note を続けていると、意外と時間を取られるのがアイキャッチ画像を作成する作業です。
Canva を開いて、テンプレートを選んで、タイトルを入力して、フォントを調整して……毎回同じことをしていると「これ、自動化できないか？」と
思うようになりました。

・完成までの失敗いろいろ

Claude Codeに頼んで色々試しましたが、失敗の連続でした。

・GUI　いちおう完成

最初に作成してくれたのはGUIでした。
私のようなノンプログラマーは、Pythonとか、.pyや.butファイル･･･
聞くだけで、身震いします。
いちおう完成までこぎつけたので、その作り方を公開しようと思っていたのですが、もっと良い方法(・成功---完成版プロンプト)が見つかりました。

・Claude.aiに相談-1

Claude Codeが提案したのは、Claude.aiにプロンプトを入力する方法です。
Claude Codeの言う通りに、このように入力しました。

技術的な指定は何もせず、Claude.ai に任せるつもりだったようです。
ところが返ってきたのは、繰り返し使える「ツール」ではなく、
その場限りの画像が1枚。

確かに･･･ですよね。Claude Codeって意外にバカなんですかね？
毎回使えるツールが欲しい、という一番肝心なキーワードを伝えていなかったため、Claude.ai は画像を作ればいいんだな、と解釈したのも無理はありません。

・Claude.aiに相談-2

Claude Codeに言われたとおりに、このプロンプトを追加

ツールの土台(Artifact)は作ってもらえました。
その結果、質問攻めにあう事に･･･。

・特定の記事用に1枚作りたいか、毎回使える自動生成ツールが欲しいか
・アイキャッチの雰囲気は？(シンプルル・ポップ・ビジネス・おまかせ)
・記事のジャンル・テーマは？

試しに、同じプロンプトを再度入れなおしたところ、
全く違う質問が返ってきました。

自然な言葉で少しずつお願いするやり方は、会話としては自然ですが、
作りたいツール完成に一筋縄では、たどり着けないと分かりました。

・Claude.aiの無料プラン制限にぶつかる

無料で使用している方にもツールを使ってもらいたいと思い、
私の個人用のGoogleアカウントで試した結果、
”17:20まで無料のメッセージを使い切りました”と表示され、
それ以上やり取りできなくなりました。

無料プランは、5時間ごとの消費量（トークン数）で計算されるため、
それに引っかかったようです。

有料プランなら気にせず何度もやり取りできますが、
無料プランだと1回のやり取りが貴重です。
曖昧な頼み方で行ったり来たりする余裕はありません。

・Geminiに相談

ここまで失敗するClaude Codeに頼んでも、らちがあかないと思い、
Geminiにやりたいことを伝えて、Claude.aiにどのようなプロンプトを入れたら良いかを相談しました。

その結果、自然文を言葉で入れるのではなく、コードをそのままコピペするよう言われました。

・成功---完成版プロンプト

↓↓↓　これがClaude.aiに張り付けたプロンプトです。

# Role: Expert Full-Stack Developer & UI/UX Designer

# Task:
Create a single-file HTML/CSS/JS application that runs as a Claude Artifact for note.com creators to generate "Eye-Catch" featured images.

# CRITICAL FIX for Artifacts Environment:
The "Download PNG" feature MUST work inside Claude's iframe sandbox.
- Use `canvas.toDataURL('image/png')` or `canvas.toBlob()`.
- Implement a robust download mechanism using an invisible dynamic link or fallback trigger compatible with Claude Artifacts iframe restrictions.

# Key Specifications:

## 1. Canvas Dimensions & Resolution
- Canvas resolution: EXACTLY 1280 x 670 pixels.
- Export options: Clean high-res PNG download.

## 2. Background Options
- Custom Image Upload: User can upload their own background image file.
- Preset Backgrounds / Frame Designs: Floral Wreath, Heart Frame, Modern Minimalist, etc.
- Solid / Gradient Color Background: Color picker options.

## 3. Draggable Elements (Interactive Canvas)
Allow drag-and-drop positioning for:
- Main Title Block (Draggable, resizable font, customizable color, weight, alignment, font family).
- Subtitle Block (Draggable, customizable text, font size, color).
- Character / Overlay Image (Draggable, uploadable PNG with transparent background, resize slider).

## 4. Outer Border Customization
- Border Toggle: Enable / Disable.
- Border Style: Solid, Dashed, Dotted, Double/Wave.
- Border Color: Color picker.
- Border Thickness: Slider (1px to 30px).
- Border Inset/Padding: Slider.

## 5. UI/UX
- Responsive sidebar or control panel.
- Real-time preview updates on the canvas.

# Output:
Provide the complete HTML/CSS/JS code in a single file ready to execute in Claude Artifacts.

少し時間はかかりましたが、待っているとアイキャッチメーカーという
名前のアプリ（Artifact）が出来上がりました。

背景・メインタイトル・サブタイトル・キャラクター挿入・外枠など
お好みで選択して使用できます。

大きさも色も自由に変更できます。
また、タイトルとキャラクターはマウスを使って自由に位置を変更可能。

お好みのアイキャッチ画像が出来たら、PNGをダウンロードをクリックし
ファイルをダウンロードボタンをクリックすると、ペイントが開きますので、お好きな名前に変更して保存してください。

保存したファイルはpngで保存されるため、アイキャッチ画像の選択画面で
選択すればそのまま使用できます。

次のアイキャッチを作る時にも使えるように、
出来上がったツールの右上にあるコピーボタンをクリックして、
メモ帳にペーストします。
メモ帳を保存する際に、名前のあとに　.html とつけて保存してください。

保存したファイルをダブルクリックすると、ブラウザ（ChromeやEdgeなど）でツールが直接起動します。（ネット接続がなくても使えます）

・さいごに

行き詰まったら、別の AI に相談してみる。
Claude Codeだけで試行錯誤するのではなく、Gemini に
どう頼めばいいか、を相談したことが突破口になりました。
1つの AI とのやり取りだけにこだわらず、別の視点を借りるのも有効です。

余談ですが、私は契約書のチェック等で、
Claude Code(Anthropic)・Gemini CLI(Google)・Codex CLI(OpenAI)による
3AI会議を開催させています。

さいごまでお読みいただきありがとうございました。