前提

今回は、コード生成の精度について比較します。コードはHTMLでWebサイトを作成してもらいます。生成スピードは体感でどうだったかだけ気にしてみます。

質問

今回は比較なので、全て同じ質問をしてみます。
（GPT-4oに作成してもらった架空の会社の情報です。）

あなたは優秀なプログラマーです。以下の要件に基づいてHTMLコードを生成してください。

## 要件
- HTML/CSSを使用して企業紹介サイトを作成したい
- CSSは新しくcss拡張子のファイルを使用せず、HTMLタグの中でstyleオプションを使用して適用してほしい

## 企業情報
**企業名:** コンペアー株式会社  
**設立:** 2014年9月1日  
**従業員数:** 約1000名  

### 概要:
コンペアー株式会社は、製品やサービスの詳細な比較を行うサービスを提供している企業です。特に、生成AIモデルの精度比較や、SaaS（ソフトウェア・アズ・ア・サービス）の料金や機能の比較を得意としています。業界全体で利用されているデータベースと、高度な分析ツールを活用し、企業や個人が最適な選択をするためのサポートを行います。

### 主なサービス:
1. **生成AIモデル比較**: さまざまな生成AIツールの性能、使用用途、精度を比較。
2. **SaaS料金比較**: 各種ビジネス向けSaaS製品の価格と機能を横断的に分析し、最適なプランを提案。
3. **製品レビュー**: 顧客のニーズに応じた製品の比較や、機能の違いを視覚的に提示するコンテンツ作成。

### 本社所在地:
- **本社:** 東京都
- **支社:** 大阪、名古屋、博多、札幌

### 企業文化:
コンペアー株式会社の社内は、非常にオープンで親しみやすい雰囲気です。先輩後輩の壁が少なく、互いにサポートし合う環境が整っている一方で、仕事の面ではきちんと責任を果たす文化が根付いています。このバランスが、社員の成長を後押しし、高いモチベーションを維持する源になっています。

### テーマカラー:
ライトブルーが企業のテーマカラーであり、爽やかで清潔感のある印象を与えています。このカラーは、社内のデザインやロゴにも反映されており、顧客に対して信頼感を与える象徴です。

### 福利厚生:
社員の健康と幸福を重視しており、社内には社員食堂があります。1食1000円で好きなだけ食べられるバラエティ豊かなメニューが提供されており、栄養バランスにも配慮されています。

### 経営方針:
コンペアー株式会社は、「公平な比較を通じて、最適な選択を支援する」ことを使命とし、常に最新の技術とデータを駆使して顧客に価値を提供することを目指しています。

まず、GPT-4o

実行結果はこちら

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>コンペアー株式会社 - 企業紹介</title>
</head>
<body style="font-family: Arial, sans-serif; line-height: 1.6; background-color: #f9f9f9; margin: 0; padding: 20px;">

    <header style="background-color: #E0F7FA; padding: 20px; text-align: center;">
        <h1 style="color: #0277BD;">コンペアー株式会社</h1>
        <p style="font-size: 14px;">設立: 2014年9月1日 | 従業員数: 約1000名</p>
    </header>

    <section style="padding: 20px; background-color: #fff; margin-top: 10px;">
        <h2 style="color: #0277BD;">企業概要</h2>
        <p>コンペアー株式会社は、製品やサービスの詳細な比較を行うサービスを提供している企業です。特に、生成AIモデルの精度比較や、SaaS（ソフトウェア・アズ・サービス）の料金や機能の比較を得意としています。業界全体で利用されているデータベースと、高度な分析ツールを活用し、企業や個人が最適な選択をするためのサポートを行います。</p>
    </section>

    <section style="padding: 20px; background-color: #E3F2FD; margin-top: 10px;">
        <h2 style="color: #01579B;">主なサービス</h2>
        <ul>
            <li><strong>生成AIモデル比較:</strong> さまざまな生成AIツールの性能、使用用途、精度を比較。</li>
            <li><strong>SaaS料金比較:</strong> 各種ビジネス向けSaaS製品の価格と機能を横断的に分析し、最適なプランを提案。</li>
            <li><strong>製品レビュー:</strong> 顧客のニーズに応じた製品の比較や、機能の違いを視覚的に提示するコンテンツ作成。</li>
        </ul>
    </section>

    <section style="padding: 20px; background-color: #fff; margin-top: 10px;">
        <h2 style="color: #0277BD;">本社所在地</h2>
        <p><strong>本社:</strong> 東京都</p>
        <p><strong>支社:</strong> 大阪、名古屋、博多、札幌</p>
    </section>

    <section style="padding: 20px; background-color: #E3F2FD; margin-top: 10px;">
        <h2 style="color: #01579B;">企業文化</h2>
        <p>コンペアー株式会社の社内は、非常にオープンで親しみやすい雰囲気です。先輩後輩の壁が少なく、互いにサポートし合う環境が整っている一方で、仕事の面ではきちんと責任を果たす文化が根付いています。このバランスが、社員の成長を後押しし、高いモチベーションを維持する源になっています。</p>
    </section>

    <section style="padding: 20px; background-color: #fff; margin-top: 10px;">
        <h2 style="color: #0277BD;">テーマカラー</h2>
        <p>ライトブルーが企業のテーマカラーであり、爽やかで清潔感のある印象を与えています。このカラーは、社内のデザインやロゴにも反映されており、顧客に対して信頼感を与える象徴です。</p>
    </section>

    <section style="padding: 20px; background-color: #E3F2FD; margin-top: 10px;">
        <h2 style="color: #01579B;">福利厚生</h2>
        <p>社員の健康と幸福を重視しており、社内には社員食堂があります。1食1000円で好きなだけ食べられるバラエティ豊かなメニューが提供されており、栄養バランスにも配慮されています。</p>
    </section>

    <section style="padding: 20px; background-color: #fff; margin-top: 10px;">
        <h2 style="color: #0277BD;">経営方針</h2>
        <p>コンペアー株式会社は、「公平な比較を通じて、最適な選択を支援する」ことを使命とし、常に最新の技術とデータを駆使して顧客に価値を提供することを目指しています。</p>
    </section>

    <footer style="text-align: center; padding: 20px; background-color: #E0F7FA; margin-top: 10px;">
        <p>&copy; 2024 コンペアー株式会社 - All Rights Reserved</p>
    </footer>

</body>
</html>

解説セクションとして、以下の3点を挙げてくれていました。

	•	各セクションはsectionタグで分け、視覚的な変化を出すために背景色を交互に設定しました。
	•	テーマカラーとして「ライトブルー」を背景やテキストの色に使用しています。
	•	headerとfooterを使用してページのヘッダーとフッターを整えています。

作成されたWebサイトがこちら

結構綺麗なWebサイトが出来上がりましたね。

続いてClaude3.5 Sonnet

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>コンペアー株式会社 - 企業紹介</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f4f4f4;
    }

    header {
      background-color: #e6f3ff;
      color: #0066cc;
      text-align: center;
      padding: 1em;
      margin-bottom: 20px;
    }

    h1,
    h2 {
      color: #0066cc;
    }

    .section {
      background-color: white;
      padding: 20px;
      margin-bottom: 20px;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    ul {
      padding-left: 20px;
    }

    .footer {
      text-align: center;
      margin-top: 20px;
      font-size: 0.9em;
      color: #666;
    }
  </style>
</head>

<body>
  <header>
    <h1>コンペアー株式会社</h1>
    <p>公平な比較を通じて、最適な選択を支援する</p>
  </header>

  <div class="section">
    <h2>会社概要</h2>
    <p><strong>設立:</strong> 2014年9月1日</p>
    <p><strong>従業員数:</strong> 約1000名</p>
    <p>
      コンペアー株式会社は、製品やサービスの詳細な比較を行うサービスを提供している企業です。特に、生成AIモデルの精度比較や、SaaS（ソフトウェア・アズ・ア・サービス）の料金や機能の比較を得意としています。業界全体で利用されているデータベースと、高度な分析ツールを活用し、企業や個人が最適な選択をするためのサポートを行います。
    </p>
  </div>

  <div class="section">
    <h2>主なサービス</h2>
    <ul>
      <li><strong>生成AIモデル比較:</strong> さまざまな生成AIツールの性能、使用用途、精度を比較。</li>
      <li><strong>SaaS料金比較:</strong> 各種ビジネス向けSaaS製品の価格と機能を横断的に分析し、最適なプランを提案。</li>
      <li><strong>製品レビュー:</strong> 顧客のニーズに応じた製品の比較や、機能の違いを視覚的に提示するコンテンツ作成。</li>
    </ul>
  </div>

  <div class="section">
    <h2>本社所在地</h2>
    <p><strong>本社:</strong> 東京都</p>
    <p><strong>支社:</strong> 大阪、名古屋、博多、札幌</p>
  </div>

  <div class="section">
    <h2>企業文化</h2>
    <p>
      コンペアー株式会社の社内は、非常にオープンで親しみやすい雰囲気です。先輩後輩の壁が少なく、互いにサポートし合う環境が整っている一方で、仕事の面ではきちんと責任を果たす文化が根付いています。このバランスが、社員の成長を後押しし、高いモチベーションを維持する源になっています。
    </p>
  </div>

  <div class="section">
    <h2>テーマカラー</h2>
    <p>ライトブルーが企業のテーマカラーであり、爽やかで清潔感のある印象を与えています。このカラーは、社内のデザインやロゴにも反映されており、顧客に対して信頼感を与える象徴です。</p>
  </div>

  <div class="section">
    <h2>福利厚生</h2>
    <p>社員の健康と幸福を重視しており、社内には社員食堂があります。1食1000円で好きなだけ食べられるバラエティ豊かなメニューが提供されており、栄養バランスにも配慮されています。</p>
  </div>

  <div class="section">
    <h2>経営方針</h2>
    <p>コンペアー株式会社は、「公平な比較を通じて、最適な選択を支援する」ことを使命とし、常に最新の技術とデータを駆使して顧客に価値を提供することを目指しています。</p>
  </div>

  <div class="footer">
    <p>&copy; 2024 コンペアー株式会社. All rights reserved.</p>
  </div>
</body>

</html>

コードの部分で大きな違いが出てきましたね！

GPT-4oの場合は、それぞれのHTMLタグにstyleを適用していたのを、Sonnetの場合は<head>タグの中にまとめてstyleを定義してくれました！

こっちの方がコーディングする側としても良い形式であることは間違い無いですね。

解説セクションでは、以下のことを解説してくれていました。

主な特徴は以下の通りです：

1. HTML5の基本構造を使用しています。
2. CSSはHTMLファイル内の<style>タグ内に記述し、外部ファイルは使用していません。
3. レスポンシブデザインのための基本的なメタタグを含んでいます。
4. 企業のテーマカラーであるライトブルーを、ヘッダーの背景色や見出しの色に使用しています。
5. 各セクションは白い背景と影を持つカードのようなデザインで、読みやすさを向上させています。
6. 会社概要、主なサービス、所在地、企業文化、テーマカラー、福利厚生、経営方針などの情報を含んでいます。

このHTMLファイルをブラウザで開くと、シンプルでわかりやすい企業紹介サイトが表示されます。必要に応じて、画像や追加のスタイリング、JavaScriptなどを加えて、さらに充実したウェブサイトにすることができます。

解説も充実してますね！

作成されたWebサイトはこちら

デザインはこっちの方がシンプルですね。自分はこっちの方が好きです。
何より、スマホでもみやすいレイアウトになっている！好き。

次は、GPT-o1-mini

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>コンペアー株式会社 企業紹介</title>
</head>
<body style="font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f5f5f5;">

    <!-- ヘッダー -->
    <header style="background-color: #ADD8E6; padding: 20px; text-align: center;">
        <h1 style="margin: 0; color: #ffffff;">コンペアー株式会社</h1>
        <p style="color: #ffffff;">公平な比較を通じて、最適な選択を支援する</p>
    </header>

    <!-- メインコンテンツ -->
    <main style="padding: 20px;">

        <!-- 企業情報 -->
        <section style="background-color: #ffffff; padding: 20px; margin-bottom: 20px; border-radius: 8px;">
            <h2 style="color: #ADD8E6;">企業情報</h2>
            <ul style="list-style-type: none; padding: 0;">
                <li><strong>企業名:</strong> コンペアー株式会社</li>
                <li><strong>設立:</strong> 2014年9月1日</li>
                <li><strong>従業員数:</strong> 約1000名</li>
            </ul>
        </section>

        <!-- 概要 -->
        <section style="background-color: #ffffff; padding: 20px; margin-bottom: 20px; border-radius: 8px;">
            <h2 style="color: #ADD8E6;">概要</h2>
            <p>
                コンペアー株式会社は、製品やサービスの詳細な比較を行うサービスを提供している企業です。特に、生成AIモデルの精度比較や、SaaS（ソフトウェア・アズ・ア・サービス）の料金や機能の比較を得意としています。業界全体で利用されているデータベースと、高度な分析ツールを活用し、企業や個人が最適な選択をするためのサポートを行います。
            </p>
        </section>

        <!-- 主なサービス -->
        <section style="background-color: #ffffff; padding: 20px; margin-bottom: 20px; border-radius: 8px;">
            <h2 style="color: #ADD8E6;">主なサービス</h2>
            <ol>
                <li><strong>生成AIモデル比較:</strong> さまざまな生成AIツールの性能、使用用途、精度を比較。</li>
                <li><strong>SaaS料金比較:</strong> 各種ビジネス向けSaaS製品の価格と機能を横断的に分析し、最適なプランを提案。</li>
                <li><strong>製品レビュー:</strong> 顧客のニーズに応じた製品の比較や、機能の違いを視覚的に提示するコンテンツ作成。</li>
            </ol>
        </section>

        <!-- 本社所在地 -->
        <section style="background-color: #ffffff; padding: 20px; margin-bottom: 20px; border-radius: 8px;">
            <h2 style="color: #ADD8E6;">本社所在地</h2>
            <ul>
                <li><strong>本社:</strong> 東京都</li>
                <li><strong>支社:</strong> 大阪、名古屋、博多、札幌</li>
            </ul>
        </section>

        <!-- 企業文化 -->
        <section style="background-color: #ffffff; padding: 20px; margin-bottom: 20px; border-radius: 8px;">
            <h2 style="color: #ADD8E6;">企業文化</h2>
            <p>
                コンペアー株式会社の社内は、非常にオープンで親しみやすい雰囲気です。先輩後輩の壁が少なく、互いにサポートし合う環境が整っている一方で、仕事の面ではきちんと責任を果たす文化が根付いています。このバランスが、社員の成長を後押しし、高いモチベーションを維持する源になっています。
            </p>
        </section>

        <!-- テーマカラー -->
        <section style="background-color: #ffffff; padding: 20px; margin-bottom: 20px; border-radius: 8px;">
            <h2 style="color: #ADD8E6;">テーマカラー</h2>
            <p>
                ライトブルーが企業のテーマカラーであり、爽やかで清潔感のある印象を与えています。このカラーは、社内のデザインやロゴにも反映されており、顧客に対して信頼感を与える象徴です。
            </p>
        </section>

        <!-- 福利厚生 -->
        <section style="background-color: #ffffff; padding: 20px; margin-bottom: 20px; border-radius: 8px;">
            <h2 style="color: #ADD8E6;">福利厚生</h2>
            <p>
                社員の健康と幸福を重視しており、社内には社員食堂があります。1食1000円で好きなだけ食べられるバラエティ豊かなメニューが提供されており、栄養バランスにも配慮されています。
            </p>
        </section>

        <!-- 経営方針 -->
        <section style="background-color: #ffffff; padding: 20px; border-radius: 8px;">
            <h2 style="color: #ADD8E6;">経営方針</h2>
            <p>
                コンペアー株式会社は、「公平な比較を通じて、最適な選択を支援する」ことを使命とし、常に最新の技術とデータを駆使して顧客に価値を提供することを目指しています。
            </p>
        </section>

    </main>

    <!-- フッター -->
    <footer style="background-color: #ADD8E6; padding: 10px; text-align: center; color: #ffffff;">
        &copy; 2024 コンペアー株式会社
    </footer>

</body>
</html>

コード自体はGPT-4oに近いですかね？
ただ、親切なことにコメントをつけてくれていますね！

解説セクションでは、以下のように説明してくれています。

	•	全体レイアウト: ページ全体はArial, sans-serifフォントを使用し、背景色に薄いグレー (#f5f5f5) を設定しています。コンテンツは白背景のセクションに分かれており、各セクションは角を丸めたボックススタイルです。
	•	ヘッダーとフッター: ヘッダーとフッターは企業のテーマカラーであるライトブルー (#ADD8E6) を背景色に使用し、テキストは白色で統一しています。ヘッダーには企業名とミッションステートメントを表示しています。
	•	セクションのスタイル: 各セクションタイトルはライトブルーの色を使用し、視覚的に統一感を持たせています。セクション間には適度なマージンを設けて、内容が見やすくなるようにしています。
	•	リストとテキスト: 企業情報やサービス内容は箇条書き（ulやol）を使用して整理されています。これにより、情報が読みやすく、理解しやすくなっています。
	•	レスポンシブデザイン: 基本的なレスポンシブ対応を考慮して、固定幅ではなくパーセンテージや自動調整を使用しています。ただし、詳細なレスポンシブデザインは含まれていません。

細かい説明をしてくれていますね！具体的なカラーコードを示してくれているのは好印象。

作成されたWebサイト

やっぱりGPT-4oが作成したWebサイトと近いですね。

GPT-o1-preview行ってみよう！

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>コンペアー株式会社 - 企業紹介</title>
</head>
<body style="font-family: Arial, sans-serif; margin: 0; padding: 0;">

    <header style="background-color: #ADD8E6; padding: 20px;">
        <h1 style="margin: 0; color: white;">コンペアー株式会社</h1>
    </header>

    <main style="padding: 20px;">
        <section>
            <h2 style="color: #ADD8E6;">企業情報</h2>
            <ul style="list-style-type: none; padding: 0;">
                <li><strong>企業名:</strong> コンペアー株式会社</li>
                <li><strong>設立:</strong> 2014年9月1日</li>
                <li><strong>従業員数:</strong> 約1000名</li>
            </ul>
        </section>

        <section>
            <h2 style="color: #ADD8E6;">概要</h2>
            <p>コンペアー株式会社は、製品やサービスの詳細な比較を行うサービスを提供している企業です。特に、生成AIモデルの精度比較や、SaaS（ソフトウェア・アズ・ア・サービス）の料金や機能の比較を得意としています。業界全体で利用されているデータベースと、高度な分析ツールを活用し、企業や個人が最適な選択をするためのサポートを行います。</p>
        </section>

        <section>
            <h2 style="color: #ADD8E6;">主なサービス</h2>
            <ol>
                <li><strong>生成AIモデル比較</strong>: さまざまな生成AIツールの性能、使用用途、精度を比較。</li>
                <li><strong>SaaS料金比較</strong>: 各種ビジネス向けSaaS製品の価格と機能を横断的に分析し、最適なプランを提案。</li>
                <li><strong>製品レビュー</strong>: 顧客のニーズに応じた製品の比較や、機能の違いを視覚的に提示するコンテンツ作成。</li>
            </ol>
        </section>

        <section>
            <h2 style="color: #ADD8E6;">本社所在地</h2>
            <ul style="list-style-type: none; padding: 0;">
                <li><strong>本社:</strong> 東京都</li>
                <li><strong>支社:</strong> 大阪、名古屋、博多、札幌</li>
            </ul>
        </section>

        <section>
            <h2 style="color: #ADD8E6;">企業文化</h2>
            <p>コンペアー株式会社の社内は、非常にオープンで親しみやすい雰囲気です。先輩後輩の壁が少なく、互いにサポートし合う環境が整っている一方で、仕事の面ではきちんと責任を果たす文化が根付いています。このバランスが、社員の成長を後押しし、高いモチベーションを維持する源になっています。</p>
        </section>

        <section>
            <h2 style="color: #ADD8E6;">テーマカラー</h2>
            <p>ライトブルーが企業のテーマカラーであり、爽やかで清潔感のある印象を与えています。このカラーは、社内のデザインやロゴにも反映されており、顧客に対して信頼感を与える象徴です。</p>
        </section>

        <section>
            <h2 style="color: #ADD8E6;">福利厚生</h2>
            <p>社員の健康と幸福を重視しており、社内には社員食堂があります。1食1000円で好きなだけ食べられるバラエティ豊かなメニューが提供されており、栄養バランスにも配慮されています。</p>
        </section>

        <section>
            <h2 style="color: #ADD8E6;">経営方針</h2>
            <p>コンペアー株式会社は、「公平な比較を通じて、最適な選択を支援する」ことを使命とし、常に最新の技術とデータを駆使して顧客に価値を提供することを目指しています。</p>
        </section>
    </main>

    <footer style="background-color: #ADD8E6; padding: 10px; text-align: center; color: white;">
        &copy; 2024 コンペアー株式会社
    </footer>

</body>
</html>

なんかスッキリとしてるなぁ...

解説はなかったです。

作成されたWebサイト

なんかしょぼい？

まとめ

モデル	生成速度	コードの質	Webサイトの質
GPT-4o	○	○	○
Claude3.5 Sonnet	○	◎	◎
GPT-o1-mini	◎	○	○
GPT-o1-preview	△	○	△

個人的には、Claude3.5 Sonnetさんがめっちゃ優秀だなと感じました。
GPT-o1-miniは軽量版なだけあって、生成速度はピカイチでした。
GPT-o1-previewは生成速度の割にしょぼかったですね。（何回か生成試しましたが、同じようなクオリティでした。）

もしかしたら、バグの出にくいHTMLだからGPT-o1-previewの良さが出なかったのかもしれないですが、PythonやRubyだったらどうなるんですかね？

最後に

現在、Claude3.5はSonnetさんだけですが、今年の秋冬でHaikuさんとOpusさんも出てくるらしいですね。

業務で実装したAIチャットは、Claude3のHaikuさんで実装しているので、Claude3.5のHaikuさんが生まれたらそっちにアップデートしたいです。

以上