サクッとビンゴアプリを作成：ChatGPT CanvasとClaude Artifactsを活用
久しぶりにAIを使って簡単なWEBアプリを作成しました。今回はChatGPTのCanvas機能とClaudeのArtifactsを使って、ビンゴボードのアプリを作りました。シンプルなアプリですが、手軽に作成できるので、AIの活用例としても十分でしょう。もちろん、通常のチャットベースでも作成できる内容です。
作成したWEBアプリ
今回作ったのはビンゴボードのアプリで、パーティーやイベントで使うことを想定しています。少し工夫した点として、生成時刻を表示する機能を追加しました。これにより、不正に再生成されたかどうかも確認できるようになっています。以下にリンクを貼っているので、自由にお試しください。（それぞれ、上がClaude、下がChatGPTです。）
ChatGPT CanvasとClaude Artifactsの比較
右側がClaude 3.5のArtifactsを使用して作成したものです。
「使用」という言葉が少し語弊を生むかもしれませんが、
それぞれのツールを使って作成した、という意味です。
今回はあまりプロンプトに凝らず、思いつくままに指示を出しました。（結構てきとうです😎）やりとり全量は下部に掲載しています。
WEBアプリを作ってください。HTMLベースでお願いします。内容は、ビンゴアプリです。５*5の数字がランダムに表示されるようにします。その数字を押すと、穴が開くように見えるようにしてください。縦横斜めで開いた場合、それが強調されるようにしてください。真ん中は数字を入れずに最初に開けられるようにしてください。
最高ですね！期待通りです。デザインを若干モダンな感じにできますか？また、数字の幅を設定できるようにしてください。例えば、60と入力すると、その範囲でランダムに生成されます。ランダムな生成はビンゴ生成ボタンを押しても実行できるようにしてください。
現状の仕様では、プレイヤーが自由に再生成できてしまいます。そのため、今のこのビンゴがいつ生成されたか、画面上に表示することはできますか？
デザインと機能の違い
ChatGPTで生成したものは非常にシンプルで、使いやすさ重視の印象です。一方で、Claudeで生成したアプリはよりデザインに凝っており、ポップで明るい雰囲気になっています。どちらも要件をしっかり満たしているため、その点は満足です。好みの問題ですが、個人的にはClaudeのデザインがより魅力的に感じました。
テスト仕様書の生成
続けてテスト仕様書もAIで作成してみました。ChatGPTのCanvasを使って、まず文章でテスト項目を作成し、HTMLに変換しようとしましたが、Canvas上では正常に？処理が行われず、結果的には不完全なHTMLになってしまいました。
一方、Claudeでは新たにArtifactsを立ち上げて、テスト仕様書を生成しました。こちらはフォーマットがきれいで、視覚的にも見やすく、期待以上の仕上がりでした。
両AIの使用感
両方を使って感じたことですが、正直なところ、どちらもコーディングの面では若干物足りないところがありました。ChatGPTのCanvasはプレビュー確認ができない点が煩わしく、Claudeは全てAI任せにするため、軽微な修正でも依頼する際に時間的なコストがかかります。しかしながら、どちらもきちんと動くものを作ってくれるので、その点は大変満足です。
ChatGPTのCanvasはまだβ版ですので、今後のアップデートに期待しています！また、ClaudeのArtifactsも、今後さらに機能が充実すれば、非常に強力なツールになりそうです。（Claudeに関しては、公式から特にアップデートの案内が出ているわけではありません。）
しかし、良いですね。2つのライバル的な製品が、お互いに刺激し合ってアップデートされるのは。進化し続けるというのは大変素晴らしいことです。ワクワクしますね！
おまけ
以下がChatGPTのやりとり全量です。（やりとり全量共有できていないかも。）