はじめに

2024年6月21日に、Anthropicの新モデル「Claude 3.5 Sonnet」がリリースされました。

Claudeの最新バージョンということで、とても注目を集めています。

Claudeシリーズは他の生成AIと比較しても引け目を取らない回答精度や速度を出していますが、
3.5になりさらに回答精度や速度が向上したようです。

また、同時にArtifactsという機能も追加されました。

詳しくはAnthropic社のリリースをご参照ください

今回はArtifactsを使って遊んでみたいと思います。

Artifactsとは

2024/6/21にClaude 3.5 Sonnetと一緒に追加された新機能です。

こちらはチャットの回答を拡張する機能のようです。

Claudeにコンテンツの生成を依頼すると右側に専用ウィンドウが表示され、作成物をリアルタイムで表示することができるようになりました。

また、インタラクティブにコンテンツを生成してくれるので、
生成されたコンテンツを会話をしながら確認、修正することができます。

メリット

Artifactsを使うことでのメリットは以下のようになります。

簡単なコンテンツ確認:

• リアルタイムで生成され、即座に結果を確認することができる
• 専用のウィンドウに表示されるので、会話の流れを妨げることなく内容を確認できる

柔軟な編集が可能:

• 生成されたコンテンツについて、コメントをすることで修正や調整ができる

再利用可能な出力:

• コード、文書、HTMLなど多様な形式で出力されるため、様々な用途に適用可能

上記で解説した特徴やメリットをまとめると以下のようになります。（この画像もArtifactsを使って作成しました）

今回はArtifactsを使って簡単なTodoアプリを作ってみます。

設定

Feature PreviewからONにすれば良さそうです。簡単ですね。

Todoアプリを作ってもらう

雑にプロンプトを投げてみる

まずは雑に投げてみます。Claude3.5になったということで応答精度も向上していると思います。

生成されたWebアプリの画面を実際に触ることができるので確認しやすいですし、
うまくいっていないところを見つけやすいです！

ここで生成されたコンテンツではinputのテキストボックスに入力しても
タスクを追加できませんでした。なので、追加できるように修正してもらいます。

追加できるようにしてくれました。

もうこれで簡単なTodoアプリとしての機能は完成しました！
一瞬で作れてしまうので便利ですね！

ただ、このままだとデザインがあまりイケてないので、
デザインをいい感じにしてくれってお願いしてみます。

いい具合に綺麗にしてくれました。

この状態でも良いんですが、タスクのステータス（Todo、In Progress、Done）があると
もっと良いですよね。なのでコードを修正してもらいます。

ちゃんと作ってくれました。

ステータスの状態遷移は矢印ボタンを押して遷移できるようです。

生成されたテキストを見てみると、以下のように言っているのでこちらもやってもらいましょう。

さらに機能を追加したり、デザインを調整したりする必要がある場合は、お知らせください。例えば、ドラッグアンドドロップ機能の追加や、タスクの編集機能の実装なども可能です。

ドラッグ&ドロップと編集ができるようになりました！

簡単なWebアプリであればめちゃめちゃ早く作ることができますね！
（あと内部のコードなど気にしなければ…）

SVG画像とかも作れるらしい

冒頭の公式YouTubeでも最初に作っていましたが、SVG画像が作れるようです。

ということで、このWebアプリのアイコンを作ってもらいましょう。

まぁまぁまぁまぁ、許容できる範囲ですね。プロンプトも雑なのでこの程度だと思っています。

これを作成したWebサイトに埋め込んでもらいます。

いい感じに装飾できました！

デモ

完成したTodoアプリを実際に動かしてみたいと思います！

まとめ

今回はClaude 3.5とArtifactsを使ってWebアプリを作ってみました。

ArtifactsはWebアプリだけでなく、スライド作成やSVG画像作成などさまざまな用途に使用することができます。

公式サイトにも書いてありますが、Artifacts機能が追加されたことで、Claudeがただのチャット用AIから共同作業環境へと進化したと感じました。

さまざまなアイデアを会話を通じてリアルタイムで迅速で形にすることができるのは見ていて楽しいですし、効率的にアウトプットできるなぁと思いました。

今回紹介したArtifactsはFeature Previewということで、正式リリースされていません。
こちらのブログも2024年6月末時点での情報となっております。
今後、機能変更が入る可能性がありますので注意が必要です。