これまでは、ブログ運営の効率化を目的にして、当該記事の内容を元にClaudeに記事用SVG画像を作らせていた。SVG（Scalable Vector Graphics）は、ウェブ上で使用される画像形式の一つで、拡大縮小しても品質が劣化しない特徴がある。例えば、ロゴやアイコンなどによく使われ、様々な画面サイズに対応できる柔軟性が魅力。テキストや図形を数学的な計算式で表現するため、ファイルサイズも小さく、ウェブサイトの表示速度向上にも貢献する。しかし、複雑な写真のような表現には向いていないため、用途に応じて使い分ける必要がある。

SVGは非構造化文章の視覚化にとっても便利なツールだけど、ブログのサムネイルに使うにはどうやらインパクトに欠けるようだ。

SVGは非構造化文章の視覚化にとっても便利なツールだけど、ブログのサムネイルに使うにはどうやらインパクトに欠けるようでクリック率の低下を招いている気がする。そこで、ブログ記事のサムネイルに一般的な写真やイラストの画像を使うことを考えたが、コーヒーの絵や写真ばかりが並ぶ絵面は面白くない。サムネイル画像には記事の内容を表す意味を持たせたい。

新しいサムネイル画像作成プロセス

というわけでたどり着いたアイデアが、まずClaudeで記事の内容元にSVGを作成する（これは今まで通り）。そして、そのSVGを元にChatGPTに画像ファイルを作らせるという流れ。

Claudeには現在、画像生成機能がないのでChatGPTを使うことにした。また、ChatGPTに記事内容を元に画像を作らせるとできが悪い。これは両者の性能差ではなく、記事のhtmlをClaudeが作っている関係上文脈の理解度が高いのだろうと推測している。

サムネイル画像作成プロンプト

参考までにプロンプトを貼っておく。

# カスタムプロンプト：記事ページ用サムネイル画像作成

ブログ記事やウェブコンテンツ用のサムネイル画像をSVGフォーマットで作成してください。以下の指示に従ってください：

1. 画像サイズ: 400x200 ピクセル

2. 背景:
   - 薄い色（例：薄緑、薄青、薄黄）を使用
   - 全体を白い枠線（幅4px）で囲む

3. レイアウト:
   - 上部中央にメインビジュアル（記事や概念を表現するイラスト）
   - 右上に小さな吹き出し
   - 下部に大きなテキストエリア
   - 最下部にハッシュタグエリア

4. イラスト:
   - コンテンツに関連するシンプルなイラストを描画
   - イラストは線画やシンプルな図形を使用
   - 必要に応じて、複数の要素を組み合わせて表現
   - 例：カレンダー、本、コーヒーカップなど、記事の内容を象徴する要素

5. テキスト:
   - メインテキスト: コンテンツのタイトルや主題（フォントサイズ16px、太字）
   - 吹き出し: 関連するキーフレーズや感想（フォントサイズ12px）
   - ハッシュタグ: 関連するキーワード（フォントサイズ12px）

6. 色使い:
   - 背景色以外に2-3色を使用
   - コントラストを考慮し、読みやすさを確保

7. スタイル:
   - フラットデザインを基調とし、複雑な陰影は避ける
   - 全体的に軽快で親しみやすい印象を目指す

8. コンテンツ適応:
   - 提供されたブログやウェブコンテンツの主題に合わせてイラストとテキストを調整
   - キーワードや主要概念を視覚的に表現

9. テキストの配置:
   - 各テキスト要素が重ならないよう注意深く配置
   - メインテキストは下部中央に配置し、上下に十分な余白を確保
   - ハッシュタグは最下部左側に配置

10. 吹き出しのデザインと配置:
    - 吹き出しは右上に配置し、適切なサイズで設計する
    - 吹き出し内のテキストが吹き出しからはみ出さないよう注意する
    - テキストは吹き出しの中心に合わせて配置する（text-anchor="middle"を使用）
    - 例：
      ```xml
      <path d="M320 20 Q345 20 345 35 L345 65 Q345 80 320 80 L300 80 L310 90 L290 80 Q265 80 265 65 L265 35 Q265 20 290 20 Z" fill="#fff" stroke="#333" stroke-width="2"/>
      <text x="305" y="42" font-family="Arial, sans-serif" font-size="12" text-anchor="middle" fill="#333">テキスト1行目</text>
      <text x="305" y="62" font-family="Arial, sans-serif" font-size="12" text-anchor="middle" fill="#333">テキスト2行目</text>
      ```

11. 視認性:
    - すべての要素が明確に区別できるようにする
    - 重要な情報が他の要素に隠れたり、切れたりしないよう注意

    12. アクセシビリティ:
        - 色のみに依存した情報伝達を避け、形状や配置でも情報を表現
        - テキストとその背景のコントラスト比を十分に確保
    
    13. 再現性:
        - 同じスタイルで異なる記事のサムネイルを作成できるよう、一貫したデザイン要素を使用
    
    14. 具体的な表現:
        - 日付や期間を表す場合は、具体的な表現を使用する（例：「4」ではなく「第4週」）
        - カレンダーなどの要素を使用する場合は、以下のように表現する：
          ```xml
          <rect x="150" y="20" width="100" height="80" fill="#fff" stroke="#333" stroke-width="2"/>
          <line x1="150" y1="40" x2="250" y2="40" stroke="#333" stroke-width="1"/>
          <text x="200" y="35" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">8月</text>
          <text x="200" y="65" font-family="Arial, sans-serif" font-size="16" text-anchor="middle" fill="#333">第4週</text>
          ```
          
これらの指示に従ってサムネイル画像を作成してください。作成後は、すべての要素が適切に配置され、テキストの重なりがないか確認してください。また、デザインの意図と各要素の役割について簡潔な説明を添えてください。
                    

このプロンプトから生成されるSVGをコードをChatGPTに入力して画像を作ってもらえばいい。

新しいアプローチの利点

このアプローチには以下のような利点があります：

• 記事の内容を反映した、より魅力的なサムネイル画像が作成できる
• SVGの構造化された情報を活用し、ChatGPTでより適切な画像生成が可能
• ブログの視覚的一貫性を保ちながら、各記事の個性を表現できる

ClaudeとChatGPTの長所を組み合わせることで、より効果的なサムネイル画像が作れるようになった！

この新しいアプローチを使って、過去の記事のサムネイル画像も順次更新していく予定。また、プロセスの自動化や、さらなる画質の向上にも取り組んでいきたい。

ブログ運営における視覚的要素の重要性は高まる一方です。今回のような工夫を重ねることで、読者の皆様により魅力的で分かりやすいコンテンツを提供していきたい。