ChatGPT SitesとClaude Artifactsに、同じ条件で5つのダッシュボードを作らせました。
結果は単純な5勝0敗ではありません。完成時間は5つともClaudeが短く、勝手に気を利かせる創意工夫もClaudeに多く見られました。一方、ChatGPTは指示した条件をきっちり守る傾向があり、画像生成やサイトの管理機能も強みです。
最終的に僕が「仕事で使うダッシュボードを作るならChatGPT Sites」と判断した決め手は、データベースを使ったサイトを他の人と共有できたことでした。今回の実測結果と、組織で選ぶときの確認項目を比較検証レポートにまとめています。
配布物
ChatGPT Sites × Claude Artifacts 比較検証レポート
5つのテスト結果、UI・管理機能の違い、向いている仕事、導入前に確認したい項目を14ページにまとめたPDFです。自分で見比べるだけでなく、会社やチームでどちらを使うか相談するときの説明資料としても使えます。
検証条件
- Claude CoworkはClaude Opus 5の「高」、ChatGPT WorkはGPT-5.6 Solの「高」を使用
- 各テストは、1回の指示でどこまで完成するかを見るワンショット比較
- プロンプト送信からAIの処理と返答が終わるまでを「完成までの時間」として計測
- テスト1〜3は新規制作、テスト4・5は同じHTMLから始める改修課題
- 1回ずつの実用テストであり、モデル性能を統計的に証明するものではない
テスト4・5では、両者に同じ固定幅HTMLを読み込ませました。再現したい場合は、次のファイルを使ってください。
共通の前置き
テスト1〜3では、下の前置きに各テストの依頼文を続けて、ひとつのプロンプトとして送りました。
これはAIツールの比較検証です。以下の課題について、説明だけでなく実際に開いて使える成果物を作ってください。
この依頼文と、今回添付した素材だけを制作の前提にしてください。過去の別案件の内容は流用しないでください。
このツールで標準提供されている制作・表示・保存機能は使って構いません。追加サービスの契約、追加課金、外部への招待やメッセージ送信、一般公開は、僕の確認なしに行わないでください。標準機能で必要になる非公開の保存・ホスティングは構いません。
求めていない機能は追加せず、完了時には開き方、実装したこと、未実装や制約を短く教えてください。
## 依頼
テスト1：町内会のイベント告知ポータル
架空の「ひだまり町内会」のイベント告知ポータルサイトを作ってください。
住民が「何が・いつ・どこであるか」をすぐ把握でき、家族で参加したくなるサイトにしてください。今回は見るだけのサイトです。登録フォーム、検索、会員ログイン、DBは不要です。
掲載情報は以下で固定してください。すべて検証用の架空情報です。
・夏祭り：2026年8月22日 16:00〜20:00、ひだまり中央公園。盆踊り・屋台・子ども向けゲーム。入場無料。雨天時は翌日に延期。
・公園清掃：2026年8月9日 8:00〜9:00、ひだまり中央公園入口集合。軍手と飲み物を持参。雨天中止。
・防災訓練：2026年9月6日 10:00〜12:00、ひだまり小学校校庭。消火器体験・避難経路確認。参加無料。小雨決行。
・問い合わせ先：町内会掲示板の担当者案内を確認してください。
夏祭りを一番目立つイベントとして扱ってください。検証用なので現在の日付による自動非表示や「終了しました」への切替は不要です。
夏祭りらしさが伝わるオリジナルのメインビジュアルを1点用意して組み込んでください。画像生成が標準機能で使える場合は使ってください。使えない場合は、その環境でできる図案や装飾で仕上げて、方法を説明してください。実在の祭りの写真をこの町内会の実績として見せないでください。
PCでもスマホでも読みやすくしてください。「架空の町内会・検証用」とわかる表示を入れてください。
テスト2：寄付額に応じて返礼が切り替わるサイト
架空の「ひだまり町内会 夏祭り」の寄付シミュレーターを作ってください。
寄付額を入力すると、その金額でもらえる返礼の表示がその場で切り替わるサイトです。実際の寄付受付・決済・保存・ログインは不要です。
ルールは以下です。返礼は該当する区分の1種類で、下位区分との累積ではありません。
・0円：寄付額を入力してください。
・1〜999円：お礼のメッセージ。
・1,000〜2,999円：お礼のメッセージ入りポストカード。
・3,000〜4,999円：夏祭りオリジナル手ぬぐい。
・5,000円以上：手ぬぐいと屋台券2枚のセット。
金額入力欄と、1,000円・3,000円・5,000円のクイック選択ボタンを用意してください。ボタンを押したら入力欄も同じ金額に変えてください。
金額は0〜1,000,000円の整数のみ。未入力時は入力を促し、負数・小数・数値以外・上限超えはエラーにして返礼の確定表示を消してください。
現在の返礼に加え、次の区分まであと何円かを表示してください。5,000円以上では「最高区分です」と表示してください。
日本語でPC・スマホ対応にし、「シミュレーションのみ・寄付は実行されません」と明記してください。新しい画像生成は不要です。
テスト3：夏祭り運営委員会の寄付管理
架空の「ひだまり町内会 夏祭り運営委員会」のメンバー用寄付管理サイトを作ってください。
会計担当が受け取った寄付を入力すると、寄付合計と目標との差額が更新され、別ユーザーの委員会メンバーが同じサイトを開いても同じ数字と一覧を見られるようにしてください。
目標額は100,000円。初期データは以下の3件です。
寄付ID,表示名,金額
D001,テスト世帯A,10000
D002,テスト世帯B,15000
D003,テスト商店C,20000
必要な機能：
・寄付ID・表示名・金額の入力と保存。
・金額は1〜1,000,000円の整数のみ。空欄、負数、小数、数値以外、上限超えは保存しない。
・寄付IDと表示名は必須。同じ寄付IDの再登録は拒否する。
・寄付合計、件数、目標額、目標までの不足額、達成率、寄付一覧を表示。
・目標達成後は不足額を0円とし、超過額も表示。達成率の数値は100%を超えてよい。
・データは共有の永続ストレージ/DBに保存。ブラウザ内の保存だけで代用しない。
・別ユーザーには再読み込みで同じデータが見えればよい。リアルタイム自動同期は不要。
・再読み込み、別ユーザーのアクセス、サイトの再オープンで初期データを再投入したり、寄付を消したりしない。
利用範囲はテスト用の委員会メンバーに限定してください。製品標準の共有設定を利用して構いません。招待先やアカウント確認が必要なら、送信や一般公開をせず僕に必要な操作を説明してください。
会計だけが編集できる細かな役割別権限は今回の必須要件にしません。閲覧者にも編集が可能なら、その制約を明記してください。名前と金額は架空データのみです。
PC・スマホ対応にし、保存成功と保存失敗を区別して表示してください。画像生成、実際の決済、外部通知、既存の本番台帳との連携は不要です。
完了時に、保存先、別ユーザーで確認する手順、共有範囲、実装できなかったことを説明してください。画面だけを作って「保存できた」と扱わないでください。
テスト4：見るだけのダッシュボードをスマホ対応
共通HTMLをそれぞれのツールで開き、内容・固定幅・数値・グラフ・出典を変えずに読み込ませてから、次を送りました。
いま表示している地球温暖化ダッシュボードを、スマートフォンでも読みやすいレスポンシブな画面に改修してください。
ここからは、先ほど禁止した固定幅の解除や画面幅に応じた配置変更を許可します。
・幅390pxと320pxで、ページ全体に横スクロールが出ないようにしてください。
・PC幅1,440pxでは、元の情報のまとまりとデザインの雰囲気を維持してください。
・情報の削除・省略や、ページ全体の縮小で済ませないでください。カード・グラフ・データ表の並びと寸法を調整してください。
・グラフの軸、単位、凡例、注記がスマホでも読めるようにしてください。目盛ラベルの間引きは可ですが、データ点や情報は落とさないでください。
・本文とデータ表は14px以上を目安に、拡大しなくても読めるサイズを確保してください。
・数値、出典、基準期間、対象年、埋め込みデータは変更しないでください。
・まだ見るだけのダッシュボードです。期間選択や検索など、インタラクティブな機能は追加しないでください。
改修版を表示し、何を変更したかを短く教えてください。
テスト5：ダッシュボードに操作機能を追加
テスト4でそれぞれが作った成果物を、そのまま同じ会話で改修させました。
いまのスマホ対応済み地球温暖化ダッシュボードに、以下の3つの操作を追加してください。現在のデザインとスマホ対応は維持してください。
データは既存HTMLに埋め込まれているものだけを使い、Web検索や追加データ取得はしないでください。
1. 気温の表示期間を切り替える
「2000–2024」「2010–2024」「2020–2024」の3つから選べるようにしてください。初期値は2000–2024です。
選んだ期間に合わせて、気温の折れ線グラフ、気温の元データ表、期間平均偏差、最初の年から最後の年への差、対象年数を連動させてください。
平均は年ごとの値の算術平均。最初の年から最後の年への差は「最終年の値－開始年の値」です。これは長期トレンドの推定ではないと明記してください。
1991–2020年平均を基準とする気温偏差という定義は変えないでください。
2. 排出内訳を量と割合で切り替える
5部門の棒グラフを「排出量（GtCO2-eq）」と「割合（%）」で切り替えられるようにしてください。初期値は排出量です。
割合は各部門の埋め込み排出量÷5部門の合計59×100で計算し、小数第1位で表示してください。丸めにより合計が100%にならない場合があると注記してください。気温の期間選択を変えても、この2019年の排出データは変えないでください。
軸・数値・単位を表示モードに合わせて変えてください。
3. 影響カードの説明を開く
「暑さと健康」「海と沿岸」「生態系」の各カードを選ぶと、その項目の詳しい説明が開き、閉じられるようにしてください。説明は既存HTMLの埋め込みJSON内のimpactsのdetailを使ってください。スマホのタップとキーボードの両方で操作できるようにしてください。
期間と排出表示を初期値に戻し、開いた説明も閉じる「表示をリセット」ボタンを用意してください。状態の永続保存やDBは不要です。
PC幅1,440px、スマホ幅390pxと320pxで使えるようにし、元のデータと出典は維持してください。
結果を見るときの注意
この結果は2026年9月時点の、僕の環境での実測です。特に共有機能や利用できるモデルは、プランや製品アップデートで変わる可能性があります。
また、ダッシュボードが作れることと、本物のお金や重要な情報をそのまま預けてよいことは別です。組織のルール、アクセス権、バックアップ、サービスを使えなくなった場合の移行方法まで確認したうえで使ってください。