Claude Artifacts & Projects

# 概要

今更感はありますが、Claude Artifacts & Projects機能について書こうと思います。

Claudeは個人的に一番使っている生成AIです。

コードを書く時にメインで使っていますが、非常に強力な助っ人で、欲しい答えをバシッと決めてくれます。

しかし、Claudeの良さはその賢さだけではなく、周辺の機能面において他とは違う機能が備わっています。

それがArtifactsとProjects機能です。

当記事では、このArtifactsとProjectsについて書いていこうと思います。

# Artifactsについて

Cluade Artifactsは、AIとの会話とは別軸で表示される領域となります。

まさにマークダウンのような、左に記述して、右でマークダウンを確認するみたいな二画面を表示するような構成になっています。

![スクリーンショット 2024-07-30 21.00.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1331770/6648035d-2912-5520-7cfb-ecd71ccb91e5.png)

見てもらうと分かる通り、右にはコードが表示されています。

左の会話では最初はコードも埋め込まれていましたが、Artifactsを使うように指示すると右画面に分裂し、コードは右に表示してくれるようになります。

コードの生成は、メインの会話とは別軸で生成されるので、コード生成中もメインの会話の生成は続きます。

これは他の生成AIとは全然違う部分で、コードの分縦に長くならないというのが非常にUXが良い点だと思います。

当然、コードのコピーもできますし、ダウンロードもできます。

一つの会話で複数回Artifactsが作られることもありますが、切り替えも簡単なので一つ前のコードに戻すことも簡単です。

ただ、二つ目のArtifactsが生成された段階で、一度Artifacts部分が二つ目の最新のものに切り替わってしまうのでコードを読んでる間に切り替わると少しまどろっこしい部分はあります。

## Artifactsを使うと何が嬉しいか

Artifactはコードの表示だけを行うわけではありません。

マークアップや、Reactのコンポーネントをレンダリングした状態で確認することもできます。

マーメイドも実際に描画した状態でも見ることができます。

主に表示できる機能は[こちら](https://support.anthropic.com/en/articles/9487310-what-are-artifacts-and-how-do-i-use-them)を参照ください。

これらを使うことで可視化し、商談をスムーズに進めたという話も聞きました。

素晴らしい機能の一つです。

# Projectsについて

Projectsは、Claudeの左バーから選択できる項目の一つになります。

![スクリーンショット 2024-07-30 21.17.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1331770/b2bc898f-aa40-1f2c-f1ad-0b101f806e06.png)

Projectsの概要としては、メインの会話が一つだとしたら、メインの会話の塊をプロジェクトとと呼んでいるようです。

実はこのProjectsが結構Claudeを使う上で肝になります。

生成AIを使ってる人にとって、コンテキストは非常に重要なファクターになります。

例えば、TypeScriptについての質問をしているのに、なぜかPythonのコードで説明をし出したりしたら、非常にストレスフルになります。

そのため、こちらとしては今質問している内容は全てTypeScriptに関するものであるというコンテキストを持っていて欲しい訳です。

しかし、メインの会話を途中で中断し、他のメインの会話に入った時、そのコンテキストが失われてしまいます。

そこで、Projectsが強力な武器になります。

Projectsには、共通のコンテキストをProjectに紐づけることができます。

つまり、Projects内のメインの会話は全てProjectに紐づくコンテキストを持つことになります。

## 使い方

Projectを作ると、コンテキストを追加できるボタンがあります。

![スクリーンショット 2024-07-30 21.26.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1331770/fdd80f17-9ae9-7bca-e30b-de4eaa400377.png)

そこでは画像とテキストのどちらのコンテキストを追加するか選べるポップアップが表示されます。

画像では、PDFなどを読み込ませることで、PDFにある知識を持ったProjectが作られますし

テキストでは、持たせたい知識をテキストとして入力することでProjectに持たせることができます。

僕がよく使う方法は

何かのサービスなり、ツールを作る時は、そのサービスやツールの名前でプロジェクトを作り、コンテキストに使う技術の言語であったり、ライブラリを列挙したりしています。

また、レスポンスのフォーマットを指定したい場合は、それもコンテキストに追加します。

余計なテキストを含めずに簡略した返答が欲しい時は、そのように返答するようにといった指示を書いたりもします。

一つのProjectが持てるコンテキストにも限界はありますが、テキストであればそれなりの量を書くことができます。

## Projectsと何が嬉しいか

### スレッドの使い捨て

上記のコンテキストをProject内であれば、暗黙の了解として理解してくれているという点で、手順が省けるというのは非常に強い動機です。

しかし、それ以上にClaudeの性質上、メインの会話を長引かせることが苦手という問題があります。

少し前まで、それこそArtifactsやProjectsがない時からClaudeを使っていますが、当時はメインの会話をProject的に使っていました。

そうすると、その会話のコンテキストをClaudeが事前に理解するというのを毎回繰り返し、投稿上限にすぐ達してしまうということが度々ありました。

そして、上限についてはClaudeの弱いところで、およそ30~40回ほどの会話で上限に達してしまい、次の質問余力の補完（5時間毎）まで待たないといけないのです。

最近は、上限にすぐ達するから新しい会話を始めろという警告も出るようになりました。

![スクリーンショット 2024-07-30 21.35.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1331770/989d654e-e244-694f-576a-e361d8444f4e.png)

そこで、Projectを使うことで、ある程度コンテキストを共有したまま、新しい会話をどんどん作ることができるので、この上限への緩和を図ることができるようになるのです。

このProjectの活用こそ、Claudeの効率的な使い方のように感じます。

### コードの共有

プロジェクトの会話で生成されたコードをコンテキストに追加することができます。

![スクリーンショット 2024-08-03 23.14.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1331770/88c0444d-04c9-7fdc-e19d-45555053a24e.png)

生成されたArtifactsの右下にコンテキストを追加するボタンがあります。

これをクリックするだけで、プロジェクトのコンテキストに追加することで、次の会話に行った時もこのコードを前提に会話を続けることができます。

逐一コピペしなくても良かったり、コードの積み重ねができるのというのが非常に良く、UXの高さを感じますね。

# まとめ

Project機能はサブスクでないと使えない機能ではありますが、非常に強力なので課金する価値は十分にあるものだと思っています。

課金で使えるようになるClaude 3.5 Sonnetが非常に賢いというだけでも使う価値があります。

利用料金も$20なので、ガッツリ使う方であれば全然元が取れる金額だと思います。

なにより、自分は背景色であったりArtifactsといったUXの良さが好きで使っている節はあります。

是非、これを機にClaudeを使ったことがない方も使ってみて欲しいです。