試そうと思った背景

タイトル通りの内容です AIの動作確認のため、簡単なサイトやアプリを作成しているのですが、 せっかくならとデプロイまで行ってみています このブログ自体もClaudeでチャットしながらベースを構築しました その様子は以下に書いてますので、気になったら読んでもらえると嬉しいです

さて、デプロイするとなると、OGPやfaviconが必要です 試しに、コードを書いてもらったチャットでそのまま、 「OGPを作成して」とお願いしたらSVGでサクッと作ってくれました（びっくり）

AIを使ってOGP

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" width="1200" height="630">
  <!-- 背景グラデーション -->
  <defs>
    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#0c4a6e" />
      <stop offset="100%" stop-color="#0284c7" />
    </linearGradient>
    <linearGradient id="accentGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#0ea5e9" />
      <stop offset="100%" stop-color="#38bdf8" />
    </linearGradient>
  </defs>

  <!-- 背景 -->
  <rect width="1200" height="630" fill="url(#bgGradient)" />
  
  <!-- 装飾要素 - 波形パターン -->
  <path d="M0 100 Q300 150 600 100 Q900 50 1200 100 L1200 0 L0 0 Z" fill="#0ea5e9" opacity="0.2" />
  <path d="M0 500 Q300 450 600 500 Q900 550 1200 500 L1200 630 L0 630 Z" fill="#0ea5e9" opacity="0.2" />
  
  <!-- 装飾的な丸 -->
  <circle cx="150" cy="150" r="100" fill="#0ea5e9" opacity="0.1" />
  <circle cx="1050" cy="480" r="120" fill="#0ea5e9" opacity="0.1" />
  
  <!-- メインカード -->
  <rect x="200" y="150" width="800" height="330" rx="15" fill="white" />
  
  <!-- 装飾的なアクセント線 -->
  <rect x="200" y="150" width="800" height="8" rx="4" fill="url(#accentGradient)" />
  
  <!-- サイト名 -->
  <text x="600" y="110" font-family="'Noto Sans JP', sans-serif" font-size="42" font-weight="bold" fill="white" text-anchor="middle">Akkyの実験レポート</text>
  
  <!-- メインタイトル -->
  <text x="600" y="270" font-family="'Noto Sans JP', sans-serif" font-size="56" font-weight="bold" fill="#0c4a6e" text-anchor="middle">
    <tspan x="600" dy="0">Web開発とプログラミングの</tspan>
    <tspan x="600" dy="70">最新情報とTips</tspan>
  </text>
  
  <!-- サブタイトル -->
  <text x="600" y="390" font-family="'Noto Sans JP', sans-serif" font-size="28" fill="#64748b" text-anchor="middle">実践的な知識を深く掘り下げるテックブログ</text>
  
  <!-- フッター -->
  <rect x="0" y="530" width="1200" height="100" fill="rgba(0,0,0,0.2)" />
  
  <!-- URL -->
  <text x="600" y="590" font-family="'Noto Sans JP', sans-serif" font-size="28" fill="white" text-anchor="middle">techblog.example.com</text>
  
  <!-- ロゴマーク -->
  <g transform="translate(540, 445)">
    <rect x="0" y="0" width="120" height="40" rx="20" fill="url(#accentGradient)" />
    <text x="60" y="27" font-family="'Noto Sans JP', sans-serif" font-size="20" font-weight="bold" fill="white" text-anchor="middle">TECH BLOG</text>
  </g>
</svg>

最終的に内容を調整したものが以下です。

プロンプト

今回のようにサイトをゼロイチで立ち上げからしてもらうよりも 自分で作ったサイトやアプリのOGPやfaviconだけをAIに作ってもらいたいというケースの方が多いかと思います そこで、プロンプトも作ってみたので、参考にして下さい

基本

[タイトルまたはキーワード]をテーマにしたOGP画像を作成してください。

### **デザイン要件**
- 画像サイズ: 1200×630px（OGP推奨サイズ）
- 配色: [希望のカラーパレット]
- 雰囲気: [シンプル / モダン / カラフル / 高級感 など]
- フォント: [シンプル / 手書き風 / ゴシック / 明朝 など]
- アイコンやシンボル: [使用するアイコン、ロゴの指定]
- 背景: [単色 / グラデーション / 写真 / イラスト]
- 装飾: [枠線 / シャドウ / 光のエフェクト など]

### **テキスト情報**
- メインテキスト: [タイトルやキャッチコピー]
- サブテキスト: [補足説明]
- テキスト配置: [中央 / 左寄せ / 右寄せ]
- 文字色: [明るめ / 暗め / 指定色]

### **ターゲット・目的**
- 使用するメディア: [ブログ / SNS / YouTubeサムネイル など]
- ターゲット層: [ビジネスマン / 学生 / 主婦 / IT系 など]
- 目的: [記事のクリック率を上げる / 高級感を演出する / カジュアルな印象にする など]

### **参考イメージ**
- [参考画像のURL]
- [似たデザインの説明]

• 実際にできたもの

架空の設定で実行してみました。

[プロジェクト管理用のSaas]をテーマにしたOGP画像を作成してください。 

### デザイン要件 
- 画像サイズ: 1200×630px（OGP推奨サイズ） 
- 配色: [グリーン系] 
- 雰囲気: [モダン / 高級感 ] 
- フォント: [ ゴシック ] 
- アイコンやシンボル:
  以下のサイトから引用して下さい
  https://atlasicons.vectopus.com/
- 背景: [イラスト] 
- 装飾: [枠線 / シャドウ ]  

### テキスト情報 
- メインテキスト: [プロジェク管理ツール Hello World] 
- サブテキスト: [タスク漏れをなくして計画通りの遂行をサポート] 
- テキスト配置: [中央] 
- 文字色: [背景とのコントラスト比を考慮]  

### ターゲット・目的 
- 使用するメディア: [LP] 
- ターゲット層: [ビジネスマン / フリーランス] 
- 目的: [信頼性を演出する]

プロンプトそのまま

配置や色を少し修正してもらいました

ブログ記事

「副業で月5万円稼ぐ！初心者向けおすすめスキル」  
をテーマにしたOGP画像を作成してください。

### **デザイン要件**
- 画像サイズ: 1200×630px
- 配色: ピンク・白を基調に信頼感を出す
- 雰囲気: モダンでシンプル
- フォント: ゴシック系（視認性重視）
- アイコンやシンボル: ノートパソコン、電球のアイコン
- 背景: シンプルなグラデーション
- 装飾: 軽いシャドウを加えて立体感を出す

### **テキスト情報**
- メインテキスト: 「副業で月5万円稼ぐ！」
- サブテキスト: 「初心者向けおすすめスキル」
- テキスト配置: 中央
- 文字色: 白

### **ターゲット・目的**
- 使用するメディア: ブログ（副業・フリーランス向け）
- ターゲット層: 20〜40代の会社員
- 目的: 記事のクリック率を上げる

• 実際にできたもの

プロンプトそのまま

アイコンはあまり品質が良くなかったので、 フリー素材をClaudeのチャットから渡して差し替えてもらいました アイコンの配置も調整すると以下のようになります

実際には最初に作成されたものをデザインツールなどに貼り付けて調整するのが良いかなと思います。

一発でドーンとはいかないですが、デザインに慣れていない人にとってはゼロイチのハードルが高いので、 十分に効率化になります。

SVGをPNGに変換する

さて、Claudeに作成してもらうとSVGデータで出力されます。

実際にはPNGにする必要があったので、ついでにSVGデータをPNGデータに変換するアプリを作ってもらいました。 以下にデプロイしているので、使ってみてください

アプリを作った時の記事

最後に

個人のブログやポートフォリオ用のサンプルサイトなど、悩まずにサクッと作りたい時には最高の体験でした。 この記事を読んで、少しでも工数削減に役立ち、集中すべきところに集中できるようになれば嬉しいです。