見出し画像

生成AIで業務ツール作成を比較！ChatGPT-4o vs Claude 3.5 sonnet vs tsuzumi

たぬ

こちらの記事の続きです。

生成AIを利用して業務ツールを自動生成するという試みを行い、ChatGPT-4o、Claude 3.5 sonnet、そしてNTTの「tsuzumi」を比較しました。この記事では、それぞれのAIの特性やパフォーマンスを基に、実際のツール作成プロセスと結果について詳しく紹介します。


ツール作成の要件

各AIに以下の要件を提示しました。（全量は別途この記事内で公開しています。）

  1. ツール管理

    • ツール名、説明、URL、カテゴリーなどの情報を管理

    • ツールの追加、編集、削除をサポート

  2. JSON操作

    • データのエクスポートとインポートが可能

    • ローカルストレージの利用でデータの永続化を実現

  3. UI/UX

    • リスト表示と詳細情報の展開機能

    • ステータスメッセージやリアルタイムJSON表示

  4. 基本設計

    • フロントエンドはHTML、CSS、JavaScript

    • JSON5を用いたデータ処理

AI別の結果

結論から言えば、コーディングに関しては、Claude>ChatGPT>tsuzumiの印象でした。ClaudeとChatGPTは動くものを作ってくれましたが、tsuzumiは1発では動きませんでした（エラー）。これらは指示の仕方にも問題はある可能性はあります。

UI面で評価すると、Claudeの方が人間にとって使いやすいと感じました。

1. Claude 3.5 sonnet

  • コーディング結果: 要件通りの動作をほぼ一発で実現。

  • UI評価: 人間工学的に見て使いやすいインターフェースを生成。

  • コメント: 総合的に最も優れた結果を出したAI。

2. ChatGPT-4o

  • コーディング結果: 動作するツールを作成できたが、微修正が必要だった。

  • UI評価: 標準的なレベルだが、細部の調整が求められる場面が多い。使いづらいかな。

  • コメント: 総合性能は高いが、Claudeには一歩及ばない印象。

3. tsuzumi

  • コーディング結果: 初回は動作せず、エラー修正が必要だった。

  • UI評価: そもそもレンダリングできず。実用性には改善の余地あり。

  • コメント: 国産LLMとしての特化性を感じさせる部分もあるが、現時点では他AIに劣る。そもそも、こういった用途は想定されていない可能性があります。

左：Claude 3.5 sonnet
右：ChatGPT-4o

以下が初手作成されたコードです。上から順に、tsuzumi、Claude 3.5 sonnet、ChatGPT-4o、Gemini 1.5 proです。

↓これらを踏まえて最終的に作成したもの。(Claudeベース)
しかし、いろいろサンプルを提示してもらって組み合わせるのも面白いですね。

（↑本当はファイルをアップロードしたかったのですが、noteのエディターがバグって、アップロードしてもﾋﾞｸﾝと画面が動いて消えてしまうので、やむを得ず。）

プロンプトは以下となります。参考としてChatGPTとのやりとりも載せます。

そもそも、今の対話型AIであれば、有償レベルのものはIQ100を超えています。そのため、もっと雑に指示したとしても良いように作ってくれます。それを受けて「こうしてほしい」と依頼を出すのが結局楽だとも思います。

以下の仕様に準拠して、WEBアプリ(HTML)を作成してください。

用件定義

目的
JSONツール管理システムは、JSONデータを用いてウェブツールの情報を管理するためのインターフェースを提供します。主な目的は以下の通りです：
1. ウェブツール情報の追加、編集、削除を簡単に行えること。
2. ツール情報をJSON形式でエクスポート・インポートできる機能を提供すること。
3. ローカルストレージを利用したデータの永続化とリセット機能をサポートすること。

主な機能要件
1. ツール一覧管理
- ツールの追加、編集、削除が可能。
- ツール情報は以下の項目を含む：
- ツール名
- 説明
- URL
- カテゴリー
- 関連ブログURL
2. JSON操作
- JSONデータのエクスポート（ダウンロード）。
- JSONファイルのインポート（アップロード）。
3. ローカルストレージ管理
- データの自動保存および読み込み。
- リセット機能で初期状態に戻す。
4. UI/UX
- ツールリストの展開・折りたたみ機能。
- ステータスメッセージ表示（例：成功・エラー通知）。

基本設計

1. システム構成
- フロントエンド: HTML, CSS, JavaScript
- ライブラリ: JSON5（JSONパーシング）

2. UI設計
- ツールリスト
- 各ツールはカード形式で表示。
- 編集可能なフォームと削除ボタンを内包。
- トグルアイコンで詳細情報を展開/折りたたみ可能。
- ボタン群
- 新規ツール追加、JSONエクスポート/インポート、データリセット、全ツール展開/折りたたみボタン。
- ステータスメッセージ
- 操作結果を通知するメッセージを画面上部に固定表示。
- JSON出力エリア
- 編集中のJSONデータをリアルタイムに表示。

3. データ構造
”javascript
tools = [
{
name: "ツール名",
description: "説明文",
url: "ツールのURL",
category: "カテゴリー名",
blogUrl: "関連ブログのURL"
}
];
"

4. 主なロジック
- ツール管理
- 編集時にリアルタイムでローカルストレージとUIを更新。
- JSON操作
- エクスポート時は`JSON.stringify()`を使用してダウンロードリンク生成。
- インポート時はファイル選択ダイアログからJSONを読み込み、パースしてツールリストに反映。
- ローカルストレージ
- データ保存: `localStorage.setItem()`
- データ読み込み: `localStorage.getItem()`
- リセット: 初期データで上書き後、`localStorage.removeItem()`を実行。

5. ユーザー操作フロー
1. 初期画面
- デフォルトツールの一覧表示。
2. ツール編集
- 各ツールの情報をフォームで編集、即時反映。
3. 新規ツール追加
- プリセットのテンプレートを元に新規ツールを追加。
4. エクスポート/インポート
- JSONエクスポートで現在のツールデータをダウンロード。
- JSONインポートで外部ファイルからデータを取り込み、即座に表示。
5. リセット
- 初期状態に戻す（ユーザー確認ダイアログあり）。

プロンプト

余談

今回のツール作成は、noteで公開しているWEBアプリを整理する目的でも進めました。（そもそも公開もGitHubを使えば良かった話ですね。今更ですが。）

（名前がね、たぬポータルだとアレになるのでね…）

まとめ

各AIにはそれぞれの強みと弱みがありますが、特にClaude 3.5 sonnetはコーディング面とUI面のバランスが取れており、業務ツールの作成に適していると感じました。一方で、「tsuzumi」は国産LLMとして業務特化型の可能性を秘めており、今後の進化に期待が持てます。生成AIの進化を体感できるプロジェクトとして、非常に興味深い結果が得られました。

もっとも、このような用途は想定されておらず、例えば特定の企業のQ&Aのチャットボットであったり、窓口のサポートであったり、そうであれば本来の力を発揮できる可能性があります。

ちなみに、コーディング以外のタスク（記事要約など）はそれぞれ大差なかったため省略しています。気になる方はぜひ、登録して確かめてみてください！

いいなと思ったら応援しよう！