【生成AI】GPT-o1-previewとClaude3.5 Sonnetの比較してみました。

どうもこんにちは。

今回は、以下の4つのモデルを比較してみます。

- GPT-4o
- GPT-o1-mini
- GPT-o1-preview
- Claude3.5 Sonnet

GPTは、ChatGPTのデスクトップアプリで実行しています。
Claudeは、Web版で実行しています。

https://claude.ai/new

# 前提

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

# 質問

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

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

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

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

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

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

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

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

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

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

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

# まず、GPT-4o

実行結果はこちら

```html
<!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点を挙げてくれていました。

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

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

 ![スクリーンショット 2024-09-13 20.21.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711491/5562a1c7-3abe-0f59-968b-f7cf8450de13.png)

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

# 続いてClaude3.5 Sonnet

```html
<!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`を定義してくれました！

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

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

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

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

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

解説も充実してますね！

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

![スクリーンショット 2024-09-13 20.28.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711491/0bb7a298-47ad-9eb5-3039-2e164d8d3d9c.png)

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

# 次は、GPT-o1-mini

```html
<!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に近いですかね？
ただ、親切なことにコメントをつけてくれていますね！

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

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

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

## 作成されたWebサイト

![スクリーンショット 2024-09-13 20.33.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711491/cfd8af9e-335d-c427-6bc3-49c5caecfa25.png)

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

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

```html
<!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サイト

![スクリーンショット 2024-09-13 20.40.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711491/134d74f9-401b-a749-2674-9e1701e1d6ca.png)

なんかしょぼい？

# まとめ

| モデル | 生成速度 | コードの質　| 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さんも出てくるらしいですね。

![スクリーンショット 2024-09-13 20.49.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711491/981bfcd3-3281-fad0-6555-2bdbc5ee4d4e.png)

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

以上