![見出し画像](https://assets.st-note.com/production/uploads/images/144748288/rectangle_large_type_2_c91e89a83003f446f1bd3f80ec0d3624.png?width=800)
claude.aiのアーティファクト機能でさくっとテトリス風ゲームをつくる
Claude 3.5 Sonnetにあわせて発表された、Claude.ai のアーティファクトという機能を早速ためしてみました。
アーティファクトという言葉は、「人とLLMが協力して生成した成果物」というニュアンスで使ってるのかなぁ。
サポートされているアーティファクトには、プログラムコードのほか、マークダウン文書などがあり、それらアーティファクトをLLMと対話しながらブラッシュアップしていく感じです。JavaScriptとかならチャット画面の隣で実際の動作を確認しながら作れてとても楽しいです。
サポートされているアーティファクトの種類
![](https://assets.st-note.com/img/1718939503957-WGwRnYZZ2W.png?width=800)
プログラムコード
![](https://assets.st-note.com/img/1718938780325-xr70Ymb968.png?width=800)
![](https://assets.st-note.com/img/1718938916511-XYC6DpoI69.png?width=800)
![](https://assets.st-note.com/img/1718938885967-sdW3C41IHJ.png?width=800)
![](https://assets.st-note.com/img/1718939062393-2LEb6xLj7O.png?width=800)
![](https://assets.st-note.com/img/1718939078098-5waD4ntKdP.png?width=800)
Mermaid図
![](https://assets.st-note.com/img/1718939158501-5YC8xqR2wv.png?width=800)
![](https://assets.st-note.com/img/1718939191527-0QmKNNz7Es.png?width=800)
![](https://assets.st-note.com/img/1718939208889-xbxVBpfnof.png?width=800)
SVG
![](https://assets.st-note.com/img/1718939266085-FfCLMx1yEB.png?width=800)
![](https://assets.st-note.com/img/1718939310541-EQrjKWVHlo.png?width=800)
![](https://assets.st-note.com/img/1718939319067-MuAws4HrLX.png?width=800)
![](https://assets.st-note.com/img/1718939372433-FGvUpISBk7.png?width=800)
![](https://assets.st-note.com/img/1718939408587-UKMlVL6fzs.png?width=800)
![](https://assets.st-note.com/img/1718939429517-8mEZkA8X8G.png?width=800)
![](https://assets.st-note.com/img/1718939444300-2eTl88zvJ3.png?width=800)
Reactコンポーネント
![](https://assets.st-note.com/img/1718940320198-opWtVB6hYc.png?width=800)
![](https://assets.st-note.com/img/1718940346689-BrnWE7K25x.png?width=800)
Markdown
![](https://assets.st-note.com/img/1718940468448-cRmR5qUjL2.png?width=800)
![](https://assets.st-note.com/img/1718940549704-kzvLU8V5kB.png?width=800)
生成された.mdファイル
ブラウザで動くゲームをつくる
ライフゲーム
![](https://assets.st-note.com/img/1718954375220-DP8OsvjeUD.png)
![](https://assets.st-note.com/img/1718954402914-fjD7f8iw0l.png?width=800)
テトリス
投げやりなプロンプト「ブラウザで動くテトリス作って」から、若干調整して、ほんの10分くらいでまぁまぁ遊べるレベルになったと思います。リンク先のhtmlをブラウザーで開いてみてください。
![](https://assets.st-note.com/img/1718955993356-4UCCZflORO.png)
感想
わはは楽しい。こういう機能の標準UIが欲しかった!😆
いままでclaude.aiのUIは、ChatGPTと比べてイマイチかなぁと思っていましたが、一気に垢抜けた印象ですね。
この記事が気に入ったらサポートをしてみませんか?