【2026年】3大生成AIにWebサイトを作らせて比較してみる (ChatGPT・Gemini・Claude)

2026-06-19

2023年頃から生成AIの進化が凄まじく､私もClaudeとGeminiを主に使っていますが､色々なタスクをClaude Codeに託したりしています｡

本ブログは手で執筆するのがこだわりなのでAIは使用していませんが
今回は3大AI「ChatGPT」「Gemini」「Claude」に同じプロンプトでWebサイトを作らせて､現時点での性能を比較してみたいと思います｡

2026年時点では､3つの生成AIにはそれぞれ次のような特徴があると言われています｡

ChatGPT → アイディア出しが特に得意
Gemini → 最新情報のサーチや､大量のデータの処理が特に得意｡安い｡
Claude → 論理的な文章の作成や､プログラミングが特に得意

実際使っていても､確かにそんな感じがします｡

これだけ聞くとClaudeが最もいいものを作りそうですが､どうでしょうか？ (私もClaude推しなので)

それではやっていきましょう｡

ルール

通常のチャット画面でやりとりを行う
それぞれコーディングに適したエージェントがありますが､公平を期すために｡
プロンプト (AIへの指示) は､一字一句違えず同じものを送る
同じ日､同じタイミングに指示を送る
思考モードやモデルについてはデフォルトのものを使う
ChatGPT → 「GPT 5.5」 Gemini → 「3.5 Flash・思考レベル:標準」 Claude → 「Sonnet 4.6・工数:低」

「架空のコーヒーサブスクサービスのLP」を作らせてみる

架空のコーヒーサブスクサービスのLPをHTML/CSS/JSの1ファイルで作成してください

というプロンプトで生成してくれたのがこちら｡ (クリックで拡大)

どうでしょうか？

感じ方は人それぞれですが､私は純粋に､ChatGPTが凄いなと思いました｡
画像も入ってるし､全体的にキレイです｡

一方で､Claudeは少し思い切ったデザインというか､コーヒーショップのようなシックな雰囲気を醸し出しています｡

そして､どっちつかずなのがGeminiでしょうか｡
平凡というか｡スマホでちょっと崩れてるので調整が必要ですし｡

少し技術的な視点で見ていくと､基本的にはどれも同じようなマークアップが行われています｡

<header><section><footer>などが用いられたマークアップで､適切にインデントも取られています｡

1つ特徴的なのが､ClaudeだけGoogleフォントを使っています｡

他のAIも指示をすれば使ってくれるのだとは思いますが､最初から使ってくるとは､デザインにこだわりを持っているのでしょうか？

ちなみにSEO関連の記述は､どれも一切書かれていません｡「架空の」と伝えたので仕方ないですが｡

SEO関連の記述を入れてみる

続いて､性能を比較するためにSEO関連の記述を追加してと指示してみます｡

最低限､OGP関連の記述は欲しくて､あわよくば構造化データまで入れてくれればいいな～と思いつつ｡

長いので畳みますが､結果がこちら｡
OGP関連タグも構造化マークアップもすべて入れてくれて､どれも似たり寄ったりでした｡

追加されたSEO関連の記述を見る

ChatGPT

<head>に追加

<!-- SEO -->
<title>BeanBox | スペシャルティコーヒーの定期便・サブスクサービス</title>

<meta name="description"
      content="BeanBoxは世界中のスペシャルティコーヒーを毎月お届けするコーヒーサブスクです。送料無料、焙煎したての新鮮な豆をご自宅へ。初月50%OFF実施中。">

<meta name="keywords"
      content="コーヒーサブスク,コーヒー定期便,スペシャルティコーヒー,コーヒー通販,コーヒー豆,BeanBox">

<meta name="robots"
      content="index, follow, max-image-preview:large">

<meta name="author" content="BeanBox">

<link rel="canonical" href="https://example.com/">

<!-- OGP -->
<meta property="og:type" content="website">
<meta property="og:title" content="BeanBox | 毎月届く特別なコーヒー体験">
<meta property="og:description" content="世界中のスペシャルティコーヒーを毎月お届けするコーヒーサブスク。">
<meta property="og:url" content="https://example.com/">
<meta property="og:image" content="https://example.com/ogp.jpg">
<meta property="og:site_name" content="BeanBox">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="BeanBox | 毎月届く特別なコーヒー体験">
<meta name="twitter:description" content="世界中のスペシャルティコーヒーを毎月お届け。">
<meta name="twitter:image" content="https://example.com/ogp.jpg">

<!-- Language -->
<meta http-equiv="content-language" content="ja">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>の直前に追加

<script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@type":"Organization",
  "name":"BeanBox",
  "url":"https://example.com",
  "logo":"https://example.com/logo.png",
  "description":"スペシャルティコーヒーの定期便サービス"
}
</script>

さらにFAQリッチリザルト用の構造化データも追加できます。

<script type="application/ld+json">
{
 "@context":"https://schema.org",
 "@type":"FAQPage",
 "mainEntity":[
   {
     "@type":"Question",
     "name":"いつでも解約できますか？",
     "acceptedAnswer":{
       "@type":"Answer",
       "text":"はい。マイページからいつでも解約可能です。"
     }
   },
   {
     "@type":"Question",
     "name":"送料はかかりますか？",
     "acceptedAnswer":{
       "@type":"Answer",
       "text":"すべてのプランで送料無料です。"
     }
   },
   {
     "@type":"Question",
     "name":"豆と粉を選べますか？",
     "acceptedAnswer":{
       "@type":"Answer",
       "text":"ご注文時にお好みの状態を選択できます。"
     }
   }
 ]
}
</script>

Gemini

1. <head> 内に追加したメタタグ（SEO・OGP）

<!-- 基本のSEOメタタグ -->
<meta name="description" content="CRAFT BEAN CLUBは、世界中の希少なスペシャルティコーヒーを毎月お届けする定期便（サブスク）サービスです。焙煎直後の新鮮な豆をポスト投函でお届けします。">
<meta name="keywords" content="コーヒーサブスク,コーヒー定期便,スペシャルティコーヒー,毎月届く,自家焙煎">
<link rel="canonical" href="https://example.com/coffee-subscription"> <!-- 実際のURLに変更してください -->

<!-- OGP（SNSシェア対策） -->
<meta property="og:type" content="website">
<meta property="og:title" content="CRAFT BEAN CLUB - 毎月届く、極上の焙煎体験">
<meta property="og:description" content="世界中の小規模農園から厳選された希少なスペシャルティコーヒー。焙煎から48時間以内にポストへお届け。">
<meta property="og:image" content="https://example.com/assets/og-image.jpg"> <!-- 実際の画像URLに変更してください -->
<meta property="og:url" content="https://example.com/coffee-subscription">
<meta property="og:site_name" content="CRAFT BEAN CLUB">

<!-- X (旧Twitter) カード -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="CRAFT BEAN CLUB - 毎月届く、極上の焙煎体験">
<meta name="twitter:description" content="世界中の小規模農園から厳選された希少なスペシャルティコーヒー。焙煎から48時間以内にポストへお届け。">
<meta name="twitter:image" content="https://example.com/assets/og-image.jpg">

2. 構造化データ（JSON-LD）の追加

<!-- サービス・商品の構造化データ -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "CRAFT BEAN CLUB コーヒーサブスクリプション",
  "description": "世界中の小規模農園から厳選された希少なスペシャルティコーヒーを毎月お届けする定期便サービス。",
  "image": "https://example.com/assets/og-image.jpg",
  "offers": {
    "@type": "AggregateOffer",
    "priceCurrency": "JPY",
    "lowPrice": "1980",
    "highPrice": "4780",
    "offerCount": "3",
    "priceValidUntil": "2027-12-31",
    "availability": "https://schema.org/InStock"
  }
}
</script>

<!-- FAQ（よくあるご質問）の構造化データ -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "いつでも解約やスキップは可能ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "はい、可能です。マイページから次回お届け日の7日前までにお手続きいただければ、いつでも配送スキップや一時停止、解約が違約金なしで行えます。"
      }
    },
    {
      "@type": "Question",
      "name": "賞味期限はどのくらいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "焙煎日から未開封で約3ヶ月、開封後は香りをより楽しんでいただくために1ヶ月以内を目安にお召し上がりいただくことを推奨しております。"
      }
    },
    {
      "@type": "Question",
      "name": "送料はかかりますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "すべての定期便プランにおいて、日本全国一律で送料無料でお届けいたします。"
      }
    }
  ]
}
</script>

Claude

以下のSEO関連記述を追加しました。

<!-- ══ PRIMARY META ══ -->
<title>KUROKO COFFEE（黒子珈琲）| スペシャルティコーヒーのサブスク定期便</title>
<meta name="description" content="産地直送のスペシャルティコーヒーが毎月ポストに届く。焙煎日から5日以内発送、いつでも解約可能。あなた好みのコーヒーをAIが毎月セレクト。月2,480円〜。">
<meta name="keywords" content="コーヒーサブスク,スペシャルティコーヒー,定期便,コーヒー定期購入,産地直送,シングルオリジン,焙煎,コーヒー通販">
<meta name="author" content="KUROKO COFFEE">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://kuroko-coffee.jp/">

<!-- ══ OGP (Open Graph) ══ -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://kuroko-coffee.jp/">
<meta property="og:site_name" content="KUROKO COFFEE（黒子珈琲）">
<meta property="og:title" content="KUROKO COFFEE — 縁の下の一杯、毎月届く。">
<meta property="og:description" content="産地直送のスペシャルティコーヒーが毎月ポストに届く定期便。焙煎日から5日以内に発送。AIがあなた好みを学習して毎月最適なロットをセレクト。月2,480円〜、いつでも解約可能。">
<meta property="og:image" content="https://kuroko-coffee.jp/ogp.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="KUROKO COFFEEのロゴとコーヒーカップのビジュアル">
<meta property="og:locale" content="ja_JP">

<!-- ══ Twitter Card ══ -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@kuroko_coffee">
<meta name="twitter:creator" content="@kuroko_coffee">
<meta name="twitter:title" content="KUROKO COFFEE — 縁の下の一杯、毎月届く。">
<meta name="twitter:description" content="産地直送のスペシャルティコーヒーが毎月ポストに届く。焙煎日から5日以内発送、月2,480円〜。">
<meta name="twitter:image" content="https://kuroko-coffee.jp/ogp.jpg">
<meta name="twitter:image:alt" content="KUROKO COFFEEのOGPイメージ">

<!-- ══ Structured Data (JSON-LD) ══ -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "@id": "https://kuroko-coffee.jp/#organization",
      "name": "KUROKO COFFEE（黒子珈琲）",
      "url": "https://kuroko-coffee.jp/",
      "logo": {
        "@type": "ImageObject",
        "url": "https://kuroko-coffee.jp/logo.png",
        "width": 400,
        "height": 100
      },
      "sameAs": [
        "https://www.instagram.com/kuroko_coffee/",
        "https://twitter.com/kuroko_coffee/"
      ],
      "contactPoint": {
        "@type": "ContactPoint",
        "contactType": "customer service",
        "email": "hello@kuroko-coffee.jp",
        "availableLanguage": "Japanese"
      }
    },
    {
      "@type": "WebSite",
      "@id": "https://kuroko-coffee.jp/#website",
      "url": "https://kuroko-coffee.jp/",
      "name": "KUROKO COFFEE",
      "publisher": { "@id": "https://kuroko-coffee.jp/#organization" },
      "potentialAction": {
        "@type": "SearchAction",
        "target": "https://kuroko-coffee.jp/search?q={search_term_string}",
        "query-input": "required name=search_term_string"
      }
    },
    {
      "@type": "WebPage",
      "@id": "https://kuroko-coffee.jp/#webpage",
      "url": "https://kuroko-coffee.jp/",
      "name": "KUROKO COFFEE（黒子珈琲）| スペシャルティコーヒーのサブスク定期便",
      "description": "産地直送のスペシャルティコーヒーが毎月ポストに届く。焙煎日から5日以内発送、いつでも解約可能。月2,480円〜。",
      "isPartOf": { "@id": "https://kuroko-coffee.jp/#website" },
      "about": { "@id": "https://kuroko-coffee.jp/#organization" },
      "inLanguage": "ja",
      "breadcrumb": {
        "@type": "BreadcrumbList",
        "itemListElement": [
          {
            "@type": "ListItem",
            "position": 1,
            "name": "ホーム",
            "item": "https://kuroko-coffee.jp/"
          }
        ]
      }
    },
    {
      "@type": "ItemList",
      "name": "KUROKO COFFEEのサブスクリプションプラン",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "item": {
            "@type": "Product",
            "name": "Tanukiプラン",
            "description": "毎月1種のシングルオリジン100g。焙煎日から5日以内に発送。産地・焙煎情報カード同封。",
            "brand": { "@id": "https://kuroko-coffee.jp/#organization" },
            "offers": {
              "@type": "Offer",
              "priceCurrency": "JPY",
              "price": "2480",
              "priceSpecification": {
                "@type": "UnitPriceSpecification",
                "price": "2480",
                "priceCurrency": "JPY",
                "billingIncrement": 1,
                "unitCode": "MON"
              },
              "availability": "https://schema.org/InStock",
              "url": "https://kuroko-coffee.jp/#plans"
            }
          }
        },
        {
          "@type": "ListItem",
          "position": 2,
          "item": {
            "@type": "Product",
            "name": "Kitsuneプラン",
            "description": "毎月2種の飲み比べセット100g×2。AIによる進化型テイストプロファイル、Slackコミュニティ参加権付き。",
            "brand": { "@id": "https://kuroko-coffee.jp/#organization" },
            "offers": {
              "@type": "Offer",
              "priceCurrency": "JPY",
              "price": "3980",
              "priceSpecification": {
                "@type": "UnitPriceSpecification",
                "price": "3980",
                "priceCurrency": "JPY",
                "billingIncrement": 1,
                "unitCode": "MON"
              },
              "availability": "https://schema.org/InStock",
              "url": "https://kuroko-coffee.jp/#plans"
            }
          }
        },
        {
          "@type": "ListItem",
          "position": 3,
          "item": {
            "@type": "Product",
            "name": "Tenguプラン",
            "description": "毎月3種＋限定ロット1種。ロースター訪問権（年1回）、ゲイシャ・パナマ優先枠、月1オンライン品評会参加。",
            "brand": { "@id": "https://kuroko-coffee.jp/#organization" },
            "offers": {
              "@type": "Offer",
              "priceCurrency": "JPY",
              "price": "6800",
              "priceSpecification": {
                "@type": "UnitPriceSpecification",
                "price": "6800",
                "priceCurrency": "JPY",
                "billingIncrement": 1,
                "unitCode": "MON"
              },
              "availability": "https://schema.org/InStock",
              "url": "https://kuroko-coffee.jp/#plans"
            }
          }
        }
      ]
    },
    {
      "@type": "FAQPage",
      "mainEntity": [
        {
          "@type": "Question",
          "name": "いつでも解約できますか？",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "はい、いつでも解約・一時停止が可能です。契約期間の縛りはありません。マイページから翌月分の締め切り日までに手続きいただければ、次回以降の発送を止めることができます。"
          }
        },
        {
          "@type": "Question",
          "name": "焙煎してからどのくらいで届きますか？",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "全プランとも焙煎日から最大5日以内に発送しています（Tenguプランは3日以内）。新鮮なコーヒーをお楽しみいただけます。"
          }
        },
        {
          "@type": "Question",
          "name": "コーヒーの好みが変わったら変更できますか？",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "もちろんです。マイページからいつでもテイストプロファイルを更新できます。また、届いたコーヒーへのフィードバックを送るだけで、AIが自動的に次月のセレクションを調整します。"
          }
        },
        {
          "@type": "Question",
          "name": "送料はかかりますか？",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "初回は送料無料です。2回目以降は全国一律330円（税込）の送料がかかります。"
          }
        }
      ]
    }
  ]
}
</script>

どれも似た感じで､OGPタグはしっかり入れてくれたし､構造化マークアップも入れてくれました｡

これならSEO的にも大差はなさそうです｡