2024年6月21日にリリースされたClaude 3.5 Sonnetに新機能の「Artifacts(アーティファクト)」が実装されました。
今その機能が凄いと話題なので、使い方を解説したいと思います。
Claude 3.5 SonnetのArtifactsとは
Claudeに新しく追加されたArtifactsは、コードスニペット、テキストドキュメント、ウェブサイトデザインなどをClaudeに生成するように依頼できる画期的な機能です。
会話に専用のウィンドウが表示され、生成したものをリアルタイムで確認、編集、構築できます。
従来の会話型AIから共同作業環境というより広範なものへと進化しました。
Artifactsの使い方
Artifactsを使うには、まず「Meet Claude 3.5 Sonnet」をクリックします。
![Artifactsの使い方1](https://it-lifestyle-up.com/wp-content/uploads/2024/06/71d3408ee17a326cf9a6c05e9e87b3bd.png)
Googleでサインアップします。
![Artifactsの使い方2](https://it-lifestyle-up.com/wp-content/uploads/2024/06/b97e481667fa790eaaa617413dd91e2c.jpg)
携帯の番号でアカウントを作成しましょう。
![Artifactsの使い方3](https://it-lifestyle-up.com/wp-content/uploads/2024/06/c57cc98d8a29c196d6ff7bfd17daa958.jpg)
Artifactsを有効化するには、「Try it out」をクリックします。
![Artifactsの使い方4](https://it-lifestyle-up.com/wp-content/uploads/2024/06/b4cd003811d291c328522e5669b71822.jpg)
そうすると、次のような画面が出てくるので「オン」にします。
![Artifactsの使い方5](https://it-lifestyle-up.com/wp-content/uploads/2024/06/db88b25705ac63725bec49a4af882bca.jpg)
![](https://it-lifestyle-up.com/wp-content/uploads/2023/12/1381_Cute-dinosaur-operating-a-computer-suit-style-_xl-1024-v1-0-150x150.jpg)
これでArtifactsが有効になりました。
Artifactsが有効の状態では、生成物をリアルタイムに確認、編集、構築できます。
試しに、お問い合わせフォームを作ってもらうので、「HTML,CSS,JSでお問い合わせフォームを作成してください。」と入力しました。
![Artifactsの使い方6](https://it-lifestyle-up.com/wp-content/uploads/2024/06/a90eb6e7b1565a7817ab539e7325920d.png)
そしてこちらが実際に生成されている様子です。
![](https://it-lifestyle-up.com/wp-content/uploads/2023/12/1381_Cute-dinosaur-operating-a-computer-suit-style-_xl-1024-v1-0-150x150.jpg)
お問い合わせフォームがわずか20秒ほどでできあがりました。
ボタンの色を変えたり、ボタンに動きをつけたり、項目を追加することも可能です。
![Artifactsの使い方7](https://it-lifestyle-up.com/wp-content/uploads/2024/06/91e0dd1c917d8c894e3803ef401542bc.png)
![](https://it-lifestyle-up.com/wp-content/uploads/2023/12/1381_Cute-dinosaur-operating-a-computer-suit-style-_xl-1024-v1-0-150x150.jpg)
指示が悪かったのかグラデーションにはならなかったものの、動きや項目の追加はバッチリです。
もう一つ、イメージボードの作成をお願いしてみました。
プロンプトを置いておくので、良かったら使ってみてください。私はなんとなく英語でお願いしていますが、日本語でも問題ありません。
1.アップロード、編集、保存機能を備えた画像掲示板用のReactコンポーネントの作成をお願いします。
2.消しゴム、描画、テキスト機能を含むようにイメージボードコンポーネントを更新してください。
3.マウスボタンを押しているときだけ描画が行われるようにコンポーネントを修正してください。
ちなみに今回のアップデートにより、一定回数使用すると、レート制限が解除されるまで全く使えなくなりました。
多く使う場合は、Proプランに課金する必要があります。
![Artifactsの使い方8](https://it-lifestyle-up.com/wp-content/uploads/2024/06/a29911f472d7e50232ff143e2d448dc3.png)
![](https://it-lifestyle-up.com/wp-content/uploads/2023/12/1381_Cute-dinosaur-operating-a-computer-suit-style-_xl-1024-v1-0-150x150.jpg)
無料で使っていた私にとっては痛いアップデートです。
まとめ
本記事では、Anthropic社のClaude 3.5 Sonnet「Artifacts」の使い方について解説しました。
2024年後半には、Claude 3.5 Haiku、Claude 3.5 Opusのリリースも予定されています。
今後、AIがどのように進化するのか、ますます楽しみです!
コメント