はじめに

最近、AIを利用してコードを生成する機会が増えています。
では、同じ開発要件と同じプロンプトを与えた場合、生成AIによって完成するツールにはどのような違いが発生するのでしょうか。

今回は、3つの生成AIに同じ開発要件を提示し、簡単な問い合わせ・障害管理ツールを作成してもらいました。

生成された成果物について、機能だけではなく、不具合、UI/UX、コードの品質なども確認し、実務で利用できるレベルなのかという観点から比較してみました。

結論

本結果は、2026年9月17日時点の各AIサービスを用い、同一プロンプトから生成された成果物を今回の評価観点で比較したものです。生成AIは同じプロンプトでも出力結果が変わるため、各AI・モデルの性能全般を評価するものではありません。

機能の完成度・コード品質：ClaudeとGeminiが優秀（不具合なし）
プロンプトの厳密性指摘：ChatGPTが最も優秀（曖昧な案件を自動で指摘）
そのまま実務で使えるか：どのAIも手動での動作確認と修正は必須

ツール概要と検証環境

開発条件

今回のツールは以下の条件で作成してもらいました。

HTML、CSS、JavaScriptのみ
フレームワークや外部ライブラリは使用しない
サーバーサイド処理は使用しない
1つのHTMLファイルで動作する
ブラウザだけで動作する
指定したCSSをベースとして使用する

使用したAIモデル

検証時点（2026/9/17）で、各サービスのデフォルトモデルを使用しました。

ChatGPT（GPT-5.6 Luna）
Gemini（3.6 Flash-Light）
Claude（Sonnet 5）

評価観点

必須機能の実装
プロンプトで指定した必須機能が実際に動作するか
不具合の有無
各機能を実際に操作し、想定した動作にならない箇所がないか
UI/UX
画面の見やすさ、操作のわかりやすさ、ボタンや入力項目の配置など
コードの品質
コードの可読性、改行・空白、コメント、構造など

使用したプロンプト

各AIに同じプロンプトを使用しました。
最初に使用したプロンプトをChatGPTに入力したところ、「要件が曖昧なため、このままでは意図したツールを正確に生成できない」という趣旨の指摘を受けました。プロンプトを見直してもう一度入力してみたところ、ツールを上手く生成できました。

最初のプロンプト

HTMLとJavaScriptで簡単な問い合わせ・障害管理ツールを作成してください。外部ライブラリやフレームワークを使用しないでください。データをブラウザのLocalStorageで保存してください。
以下の必須機能を実装してください。
・…
以下略

修正後のプロンプト

HTML、CSS、JavaScriptを使用して、簡単な「問い合わせ・障害管理ツール」を作成してください。
【開発条件】
・HTML/CSS/JavaScriptのみで作成してください。
・サーバーサイド処理は使用しないでください。
・外部ライブラリとフレームワークは使用せず、Vanilla JavaScriptで実装してください。
・index.html として保存し、ブラウザで開くだけで動作するようにしてください。
・データはブラウザの localStorage に保存し、ページを再読み込みしても保持されるようにしてください。
・PCブラウザでの業務利用を想定してください。
・日本語のUIにしてください。

【必須機能】
・…
以下略

また、生成されたコードについては、基本的にAIが出力したものをそのまま使用しました。
ただし、共通条件としてこちらで用意したCSSを使用するように指示しました。CSSに不足や不整合は必要に応じてAI側で修正、追加することを許容しました。

ChatGPT（GPT-5.6 Luna）

要件定義のフィードバックは優秀でしたが、出力コードの精度には課題が残りました。

良かった点：指定のない「フィルタ条件のクリアボタン」を自主的に実装
改善点：問い合わせ・不具合の編集時に変更が保存されない（致命的）
コード品質：改行や空白が少なく可読性が低い。JavaScriptのコメントは一切なし（約360行）

Gemini

全体的にバランスが良く、不具合のないコードを出力しました。

良かった点：不具合なし。ベースCSSのアニメーションも再現。コードが比較的見やすい
改善点：カーソルをボタンに合わせると色が変わらない、モーダル外をクリックで閉じないなど細かなUI配慮に欠ける
コード品質：改行や空白が適切で読みやすいが、コメントが少ない（約900行）

Claude

コード量、品質、UIの配慮を含め、最も完成度が高い成果となりました。

良かった点：不具合なし。対応履歴追加時の担当者選択など
改善点：コメントがほとんどない。CSSの色が減った（CSV出力ボタンが灰色になった）
コード品質：改行や空白で構造がわかりやすいが、コメントが少ない（約1000行）

比較結果

評価項目	ChatGPT	Gemini	Claude
必須機能の実装	〇	〇	〇
動作時の不具合	あり	なし	なし
UI/UXの配慮	△	〇	◎
コードの可読性	×	〇	〇
生成コードの総行数	約360行	約900行	約1000行

おわりに

今回は3つの生成AIに同じプロンプトを与えて、同じツールを作成してもらいました。

同じ要件でも、生成されたコードの量や構造、UI、実装された機能、不具合などには違いがありました。また、モデルによってコードの可読性やコメントなどにも差があります。

個人的には、AIにコードを生成してもらうこと自体はかなり簡単でしたが、生成されたものをそのまま使うのではなく、動作確認する上、手動で修正することが重要だと改めて感じました。

今回は簡単なツールの比較だったので、次回はもう少し複雑な要件で試してみたいと思います。