【LLM比較】LLMはどこまでWebアプリを作れる？夏らしい色の図形のビューア開発で徹底比較

この記事では、複数のLLMに対し、単一のHTMLファイルで動作するインタラクティブなWebアプリケーションの開発タスクを与え、その生成能力を多角的に比較した結果を共有します。

はじめに

近年、LLMのコード生成能力は目覚ましい進化を遂げています。

そこで今回は、これからの季節にぴったりの 「夏のパステルカラーを基調とした、立体的な図形を操作できるWebビューア」 という仕様を持つアプリケーションに焦点を当てます。
このアプリケーションを、外部ファイルに一切依存しない単一のHTMLファイルとして主要なLLMに生成してもらい、そのコード生成能力と品質を比較しました。

プロンプト内容

今回LLMに与えたプロンプトは以下の通りです。

プロンプト

あなたは優秀なWebデザイナー兼フロントエンド開発者として、Webブラウザ上で動作するアプリを開発してください。このツールは、ユーザーの操作に応じて様々なパステルカラーの立体的な図形を表示するもので、ゲーム要素は一切含まれません。

以下の具体的な仕様に従って、1つのHTMLファイルにソースコード全体を出力してください。 外部ファイルへの依存は一切認められません。

# 仕様

1. ファイル形式:

* すべてのコードは1つのHTMLファイル内に記述してください。CSSは<style>タグ内に、JavaScriptは<script>タグ内に記述し、HTMLの構造と統合してください。


2. デザイン:

* あなたが考える「夏」をイメージさせるパステルカラーを基調とした、モダンで洗練されたデザインを採用してください。「夏」を連想させる、明るく爽やかなパステルカラーの組み合わせを検討してください。

* 表示される図形は、CSS（または可能な場合はJavaScriptによるDOM操作）を用いて立体的に見えるようにスタイルを工夫してください。影、グラデーション、奥行き感を表現するプロパティ（例: transform, box-shadow）などを活用してください。

* 背景は単色のベタ塗りではなく、パステルカラーのグラデーションや、繊細な幾何学模様などのパターンを用いて、おしゃれで魅力的な視覚効果を加えてください。


3. 表示図形:

* 以下の3種類の図形を切り替えて表示できるようにしてください。

  - 立方体 (Cube)

  - 球体 (Sphere)

  - 円錐 (Cone)

* 各図形は、最初は画面中央に配置してください。



4. 操作方法:

* Enterキー: 表示する図形を「立方体」→「球体」→「円錐」→「立方体」の順で切り替えてください。

* スペースキー: 表示されている図形の色を、あなたが選定した「夏をイメージさせるパステルカラー」の中から順番に切り替えてください。

* 矢印キー（←/→）: 表示されている図形をY軸を中心に左右に回転させてください。スムーズなアニメーションを実装し、キーが押され続けている間は回転が継続するようにしてください。

* 矢印キー（↑/↓）: 表示されている図形をX軸を中心に上下に回転させてください。スムーズなアニメーションを実装し、キーが押され続けている間は回転が継続するようにしてください。

* (+) キー: 表示されている図形を拡大してください。キーが押され続けている間は拡大が継続するようにしてください。

* (-) キー: 表示されている図形を縮小してください。キーが押され続けている間は縮小が継続するようにしてください。


5. ユーザーインターフェース (UI):

* Webページのタイトルおよびメインの見出しとして、アプリ名を「アプリ」と表示してください。

* 現在の図形の種類を表示する専用のエリアを設けてください。

* 現在選択されている色を表示する専用のエリアを設けてください。色の名前も表示してください。

* 具体的な操作方法のセクションを設けてください。

このプロンプトは、 単一ファイルでの完結、デザイン性、インタラクティブな操作、そして3D表現 という、複数の要素を組み合わせた、フロントエンド開発の総合的な能力を問う内容になっています。

評価観点

生成されたコードと、それをブラウザで表示・操作した結果に基づき、以下の観点から各LLMの生成物を評価しました。

• ファイル形式

  • すべてのコードは1つのHTMLファイル内に記述され、CSSは<style>タグ内に、JavaScriptは<script>タグ内に記述し、HTMLの構造と統合されているか。

• デザイン

  • 「夏」をイメージさせるパステルカラーを基調とした、モダンで洗練されたデザインになっているか。
  • 表示される図形は、影、グラデーション、奥行き感が表現されているか。
  • パステルカラーのグラデーションや、繊細な幾何学模様などのパターンを用いて、おしゃれで魅力的なデザインになっているか。

• 表示図形

  • 以下の3種類の図形を切り替えて表示できるか。
    • 立方体 (Cube)
    • 球体 (Sphere)
    • 円錐 (Cone）
  • 各図形が、最初は画面中央に配置されているか。

• 操作方法

  • Enterキー: 表示する図形を「立方体」→「球体」→「円錐」→「立方体」の順で切り替えることができるか。
  • スペースキー: 表示されている図形の色を、「夏をイメージさせるパステルカラー」の中から順番に切り替えることができるか。
  • 矢印キー（←/→）（↑/↓）: 表示されている図形をY軸/X軸を中心に、スムーズに回転させることができるか。
  • (+)(-) キー: 表示されている図形を拡大/縮小することができるか。

• ユーザーインターフェース（UI）

  • Webページのタイトルおよびメインの見出しとして、アプリ名を「アプリ」と表示されているか。
  • 現在の図形の種類を表示する専用のエリアが設けられているか。
  • 現在選択されている色を表示する専用のエリアが設けられているか。
  • 具体的な操作方法のセクションを設けられているか。

• コードの品質

  • コードのインデント、命名規則、コメントの有無など、人間が読みやすいか。

比較対象LLM

今回は、以下の主要なLLMを対象としました。

• Anthropic Claude 4 Sonnet
• Anthropic Claude 3.7 Sonnet
• Anthropic Claude 3.5 Haiku
• Google Gemini 2.5 Pro
• Google Gemini 2.5 Flash
• Google Gemini 2.0 Flash
• OpenAI GPT-4.1
• OpenAI GPT-4o
• OpenAI GPT-3.5 Turbo

比較方法

以下のプロンプトで生成AIを活用して評価をしつつ、AIによる自動評価が実態と合わない場合は手動で修正し、比較しました。

評価用プロンプト

以下の生成されたHTMLプログラムとそのブラウザでの表示内容を、提示された「検証内容」と「評価観点」に基づいて評価してください。各評価項目について、具体的な理由とともに5段階評価（1: 全く満たしていない、2: ほとんど満たしていない、3: 部分的に満たしている、4: ほぼ満たしている、5: 完全に満たしている）で評価し、総評も記述してください。

# 生成されたHTMLプログラム

[ここにLLMが生成したHTMLコードを貼り付けてください。]



# ブラウザ表示時のスクリーンショットまたは説明

[ここにブラウザでの表示がわかるスクリーンショットを添付するか、詳細に記述してください。]



# 評価シート

## ファイル形式

- 評価項目: すべてのコードは1つのHTMLファイル内に記述され、CSSは<style>タグ内に、JavaScriptは<script>タグ内に記述し、HTMLの構造と統合されているか。

  - 評価: [1-5]

  - 理由:



## デザイン

- 評価項目: 「夏」をイメージさせるパステルカラーを基調とした、モダンで洗練されたデザインになっているか。    

  - 評価: [1-5]

  - 理由:

- 評価項目: 表示される図形は、影、グラデーション、奥行き感が表現されているか。

  - 評価: [1-5]

  - 理由:

- 評価項目: パステルカラーのグラデーションや、繊細な幾何学模様などのパターンを用いて、おしゃれで魅力的なデザインになっているか。

  - 評価: [1-5]

  - 理由:

## 表示図形

* 評価項目: 以下の3種類の図形を切り替えて表示できるか。（立方体 (Cube)、球体 (Sphere)、円錐 (Cone)）

  - 評価: [1-5]

  - 理由:

* 評価項目: 各図形が、最初は画面中央に配置されているか。

  - 評価: [1-5]

  - 理由:



## 操作方法

* 評価項目: Enterキー: 表示する図形を「立方体」→「球体」→「円錐」→「立方体」の順で切り替えることができるか。

  - 評価: [1-5]

  - 理由:

* 評価項目: スペースキー: 表示されている図形の色を、「夏をイメージさせるパステルカラー」の中から順番に切り替えることができるか。

  - 評価: [1-5]

  - 理由:

* 評価項目: 矢印キー（←/→）（↑/↓）: 表示されている図形をY軸/X軸を中心に、スムーズに回転させることができるか。

  - 評価: [1-5]

  - 理由:

* 評価項目: (+)(-) キー: 表示されている図形を拡大/縮小することができるか。

  - 評価: [1-5]

  - 理由:



## ユーザーインターフェース（UI）

* 評価項目: Webページのタイトルおよびメインの見出しとして、アプリ名を「アプリ」と表示されているか。

  - 評価: [1-5]

  - 理由:

* 評価項目: 現在の図形の種類を表示する専用のエリアが設けられているか。

  - 評価: [1-5]

  - 理由:

* 評価項目: 現在選択されている色を表示する専用のエリアが設けられているか。

  - 評価: [1-5]

  - 理由:

* 評価項目: 具体的な操作方法のセクションを設けられているか。

  - 評価: [1-5]

  - 理由:

 

## コードの品質

* 評価項目: コードのインデント、命名規則、コメントの有無など、人間が読みやすいか？評価: [1-5]

  - 理由:

  - 総評



---

上記評価を踏まえ、このHTMLプログラムの全体的な品質と、要求仕様への適合度について総評を記述してください。改善点があれば具体的に提案してください。

なお、添付のプログラムやキャプチャからは判断できない場合は、その旨記載してください。

比較結果

さて、気になる比較結果はどうなったのでしょうか？
ここでは特に目立ったモデルに焦点を当ててご紹介します。

圧巻の完成度！特に高評価だったモデル

🏆 OpenAI GPT-4.1

操作画面

総評

提示されたすべての要件を 非常に高いレベルで満たしています。
特にデザイン面では、「夏」のイメージを完璧に捉えたパステルカラーの背景、図形の影やグラデーション、奥行き感の表現まで見事に実現していました。
機能性もスムーズで、UI/UXも優れています。
コード品質も高く、コメントも適切で可読性が非常に高いです。

コードの一部

    // --------- 状態 ---------  
    let shapeIdx = 0;  
    let colorIdx = 0;  
    let rotY = 25; // 初期値 少し傾けて見せる  
    let rotX = -20;  
    let scale = 1.0;  
    const MIN_SCALE = 0.55, MAX_SCALE = 2.3;  
  
    // アニメーション用（キー押し続け制御）  
    const keyState = {  
      ArrowLeft: false, ArrowRight: false, ArrowUp: false, ArrowDown: false,  
      '+': false, '-': false // 拡大縮小    
    };  
  
    const ROT_SPEED = 1.6; // deg/frame  
    const SCALE_SPEED = 0.013; // per frame  

🏆 Anthropic Claude 4 Sonnet

操作画面

総評

こちらも提示された要件を非常に高いレベルで満たしていました。
夏のパステルカラーを基調としたモダンで洗練されたデザイン、および立方体・球体・円錐の3D図形表示における影やグラデーションによる奥行き感の表現が特に優れていました。
図形切り替え、色変更、回転、拡大縮小といった操作ロジックも実装され、コード品質も良好です。

コードの一部

            nextShape() {
                // 現在の図形を隠す
                document.getElementById(this.shapes[this.currentShapeIndex]).classList.add('hidden');
                
                // 次の図形に切り替え
                this.currentShapeIndex = (this.currentShapeIndex + 1) % this.shapes.length;
                
                // 新しい図形を表示
                this.updateShape();
            }
            
            nextColor() {
                this.currentColorIndex = (this.currentColorIndex + 1) % this.colors.length;
                this.updateColor();
            }
            
            updateShape() {
                // すべての図形を隠す
                this.shapes.forEach(shape => {
                    document.getElementById(shape).classList.add('hidden');
                });
                
                // 現在の図形を表示
                const currentShape = document.getElementById(this.shapes[this.currentShapeIndex]);
                currentShape.classList.remove('hidden');
                
                // UI更新
                document.getElementById('current-shape').textContent = this.shapeNames[this.currentShapeIndex];
                
                // 色を適用
                this.updateColor();
            }

🏆 Google Gemini 2.5 Flash

操作画面

総評

要求仕様に非常に高く適合し、「夏のパステルカラー、モダンで洗練されたUX」のデザインコンセプトを忠実に再現しました 。
背景グラデーション、図形の影・グラデーションなど細部まで作り込まれ、UI全体の統一感も高く魅力的です。
機能面やコードの品質も良好です。

コードの一部

        // アニメーションの状態変数
        let rotationX = 0; // X軸回転角度
        let rotationY = 0; // Y軸回転角度
        let scale = 1;     // スケール
        const rotationSpeed = 2; // 回転速度 (度/フレーム)
        const scaleSpeed = 0.005; // 拡大縮小速度 (倍率/フレーム)
        let animationFrameId = null; // requestAnimationFrame ID

        // キーが押され続けているかを管理するフラグ
        const keyStates = {
            ArrowLeft: false,  // 左矢印
            ArrowRight: false, // 右矢印
            ArrowUp: false,    // 上矢印
            ArrowDown: false,  // 下矢印
            Equal: false,      // '+' キー
            Minus: false       // '-' キー
        };

        // 図形とUIを更新する関数
        function updateShape() {
            // 既存の図形をクリア
            shapeContainer.innerHTML = '';
            shapeContainer.className = ''; // クラスをクリア

            const currentShape = shapes[currentShapeIndex];
            const currentColor = colors[currentColorIndex];

            // UIを更新
            currentShapeTypeEl.textContent = currentShape.name;
            currentColorNameEl.textContent = currentColor.name;
            // CSS変数から実際の色値をT取得し、色見本を更新
            currentColorSwatchEl.style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue(currentColor.value.replace('var(', '').replace(')', ''));

            // 現在の色をCSS変数に設定し、図形に反映
            document.documentElement.style.setProperty('--current-shape-color', currentColor.value);

            // 新しい図形を生成して追加
            let shapeElement;
            switch (currentShape.type) {
                case 'cube':
                    shapeElement = document.createElement('div');
                    shapeElement.className = 'cube';
                    // 立方体の6面を生成
                    const faces = ['front', 'back', 'right', 'left', 'top', 'bottom'];
                    faces.forEach(face => {
                        const faceDiv = document.createElement('div');
                        faceDiv.className = `cube-face ${face}`;
                        shapeElement.appendChild(faceDiv);
                    });
                    break;
                case 'sphere':
                    shapeElement = document.createElement('div');
                    shapeElement.className = 'sphere';
                    break;
                case 'cone':
                    shapeElement = document.createElement('div');
                    shapeElement.className = 'cone';
                    // 円錐のCSSは単一の要素とグラデーションで表現します
                    break;
            }

今後の進化が期待されるモデル

OpenAI GPT-3.5 Turbo

操作画面

総評

要求仕様の核となる3Dグラフィックス関連の機能（立体的な図形の表示、回転・拡大縮小、図形切替など）は実装に至りませんでした。表示は2Dの四角形のみとなり、デザイン面での立体感も不足していました。
全体として、基本的なファイル形式とUI表示の要件はクリアしたものの、3D図形操作という高度な機能には今後の大きな進化が期待されるモデルです。

Anthropic Claude 3.5 Haiku

操作画面

総評

UI表示や図形・色切り替えといった基本的な機能は実装されていました。
3D図形の表現と操作における影や奥行き感の表現には、今後の大きな伸びしろが見られます。
基本的な機能はしっかり構築されており、今後の3Dグラフィックス表現の進化に期待が寄せられるモデルです。

全モデル動作デモ一覧

🏆 Anthropic Claude 4 Sonnet

Anthropic Claude 3.7 Sonnet

Anthropic Claude 3.5 Haiku

Google Gemini 2.5 Pro

🏆 Google Gemini 2.5 Flash

Google Gemini 2.0 Flash

🏆 OpenAI GPT-4.1

OpenAI GPT-4o

OpenAI GPT-3.5 Turbo

考察

ファイル形式と基本的なUI

ほとんどのLLMが、指示通り単一HTMLファイル内にCSSとJSを埋め込み、基本的なUI要素（アプリ名、状態表示、操作方法）を表示することは高い精度で実現できていました。

デザイン性（特に3D表現）に大きな差

最もLLM間で能力差が顕著に出たのが、デザイン、特に図形の「影、グラデーション、奥行き感」といった3D的な表現でした。
高評価のモデルでは、CSSのみで非常に洗練された3D表現、背景パターン、UIデザインを実現していました。
一方で、一部のモデルでは図形がほぼ平面的な描画となり、影や奥行き感がほとんど表現できていませんでした。

複雑なインタラクションへの対応

元のプロンプトでは、矢印キーやプラス/マイナスキーについて「スムーズなアニメーションを実装し、キーが押され続けている間は回転が継続するようにしてください」と明確に指示されていました。
この要件に対し、LLM（大規模言語モデル）間で、その「継続」と「スムーズさ」の解釈および実装方法に違いが見られました。

コードの品質

LLMの生成したコードは総じて読みやすいものの、その品質には差が見られました。
適切なインデント、明確な命名規則、十分なコメントにより、コードの可読性と保守性を重視していることがうかがえるモデルもありました。
一方で、一部のモデルではコメントの不足や命名規則の不統一、インデントの揺れなどが見られました。

まとめ

今回の検証により、単一ファイルでの完結という制約の下でも、LLMは一定レベルのWebアプリケーションを生成できることが確認できました。
特に、 🏆 OpenAI GPT-4.1 、🏆 Anthropic Claude 4 Sonnet 、🏆 Google Gemini 2.5 Flashは、デザイン性と操作性の両面において最も高いレベルで要求仕様を満たしており、その生成能力の高さが際立っていました。

その他の最近のモデルも、デザインや機能の一部で優れた結果を示しています。

一方で、モデルによってはデザイン性や複雑なインタラクションの実装に課題を残しており、特にCSSのみでの高度な3D表現はLLMにとって得意不得意が分かれる領域と言えそうです。

LLMの進化は著しく、新旧のモデルを比較して著しい成長を感じることができました。

今後のさらなる発展に、ますます期待が膨らみます。