ClaudeアーティファクトによるAIアプリ構築

操作方法

1. Claudeの左上隅のアイコン（サイドバー切り替えアイコン）をクリックして、左側のサイドバーを開く

2. サイドバーの上から4つ目くらいの「アーティファクト」をクリック

3. （このステップは省略可）アーティファクトのサンプルがいくつか表示されるので、興味があるものがあれば、クリックして、アーティファクトでどのようなアプリが作れるかの感じをつかむ

4. 右上部の「新規アーティファクト」をクリック

5. どのようなカテゴリーのアーティファクトを作りたいかをタイルのクリックにより選択（分からなければ、とりあえず、「新規作成」」タイルをクリックしておけば、AIと相談しながら決めることができる。「初心者なんだけど、お薦めを教えて」とか入力してもよい。「AIアプリを作りたい」とお願いすると、ClaudeをAPIから利用するアプリにしてくれるはず。）

6. AIと対話しながら、アプリを作る。

7. AIがコードを生成している最中は右のカラムにコードが表示され、完成すると、右カラムがプレビュー画面に切り替わる。

8. プレビュー画面ではアプリを動かしてみることができる

9. 左のカラムに戻って、AIに仕様変更や追加機能を依頼したり、コードの解説をしてもらったりできる

10. 右カラムの操作法

    • 右カラム左上部のアイコンでコード表示とプレビューを切り替えることができる。目のアイコンがプレビュー、</>アイコンがコード表示。

    • その右隣のバージョン表示をクリックするとどのバージョンを表示するか選択できる（以前のバージョンに戻ることもできるということ）

    • 右上部のアイコンで、アプリのリロード、コピー、ダウンロード、公開操作ができる。「公開」ボタンを押し、「公開してリンクをコピー」ボタンを押し、そのリンクを知らせることでアプリを共有できる。右端の「×」はアーティファクトウィンドウの消去（アーティファクトウィンドウの表示は、会話履歴中のアーティファクトをクリックすればよい）