どうもこんにちは。
今回は、以下の4つのモデルを比較してみます。
- GPT-4o
- GPT-o1-mini
- GPT-o1-preview
- Claude3.5 Sonnet
GPTは、ChatGPTのデスクトップアプリで実行しています。
Claudeは、Web版で実行しています。
前提
今回は、コード生成の精度について比較します。コードは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>© 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>© 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;">
© 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;">
© 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さんが生まれたらそっちにアップデートしたいです。
以上