🚀

Claude 3.5の最新機能Artifacts：使い方と実際の活用例を紹介

kat

2024/07/09に公開

LLM

claude35

tech

はじめに

Claude 3.5のArtifacts（アーティファクト）機能が非常に優れていると聞き、私も実際に試してみました。

本記事では、まずClaudeについて解説し、その後Claude 3.5のArtifacts機能について詳しく説明します。最後に、実際に使ってみた結果を紹介します。

Claudeとは

ClaudeはAnthropic社によって構築された大規模言語モデル（LLM）です。
Anthropic社は、ChatGPTの提供するOpenAI社の元社員が設立した会社で、AI技術の安全性や信頼性を重視しています。

Claudeの各バージョンのリリース時期と主な特徴

バージョン	リリース日	主な特徴
Claude 1	2023/3/14	基本的なAIチャットボットとして登場。詳細はこちら
Claude 2	2023/11/21	扱うトークン数の増加。推論力や指示理解能力が向上。詳細はこちら
Claude 3	2024/3/4	3つのモデル（Haiku、Sonnet、Opus）提供。視覚的機能（画像解析）。詳細はこちら
Claude 3.5	2024/6/21	Artifacts機能（成果物プレビュー）。制限付きで各モデル無料利用可能詳細はこちら

Claude 3.5のSonnetは、これまでのClaude3の上位モデルであるOpusよりも高い性能を持ち、
AIの性能を評価する複数のベンチマークにおいてChat GPT-4oを超えています。

Claude 3.5 Sonnetのベンチマーク結果

GPQAやMMLUなどは、AIの性能評価を行うために用いているベンチマークです。

Graduate level reasoning（大学院レベルの推論）
- GPQA（Graduate Level Expert Reasoning）：
  大学院レベルの専門的な知識と論理的思考を必要とする質問で評価するベンチマーク
Undergraduate level knowledge（学部レベルの知識）
- MMLU(Massive Multi-task Language Understanding)：
  大規模マルチタスク言語理解(Massive Multi-task Language Understanding)の略
  数学・物理学・歴史・法律・医学・倫理など、57科目の組み合わせで知識や問題解決能力を測るテスト
  高校や大学レベルの問題を含む4択形式
  平均的な人間の評価者は34.5%で、専門家集団の平均は89.8%と推定
Code（コーディング）
- HumanEval：
  AIのプログラミング能力を評価するベンチマーク。AIのコード生成能力とその正確性が問われます。
Multilingual math（多言語の小学校レベルの数学問題）
- MGSM(Multilingual Grade School Math):
  異なる言語で出題される小学校レベルの数学問題にどれだけ正確に対応できるかを評価するベンチマーク。
Reasoning over text（テキスト推論）
- DROP（Discrete Reasoning Over Paragraphs）:
  段落全体にわたる離散的な推論能力を評価するベンチマーク。F1スコアは、モデルの正確性と完全性を示す評価指標。
Mixed evaluations（さまざまな評価）
- BIG-Bench-Hard
  さまざまなタスクに対するAIのパフォーマンスを評価するベンチマーク。このテストは、特に困難な課題を含み、AIの総合的な知識、推論、創造性、理解力を試すものです。これにより、AIの多面的な能力を評価します。
Math problem-solving（数学問題解決）
- MATH
  数学の問題解決能力を評価。
Grade school math（小学校レベルの数学）
- GSM8K
  小学校レベルの数学問題を通じてAIの基本的な数学的理解力を評価するベンチマーク。

アーティファクト機能（Artifacts）

Claude3.5で話題の機能です。
アーティファクトとは、Claudeによって生成されたコードやドキュメント、画像などです。
アーティファクト機能は、アーティファクトをプロンプトの表示とは別の専用領域で操作できる機能です。

アーティファクトのソースコードの表示
アーティファクトのプレビュー表示
アーティファクトのコードコピー
アーティファクトのコードダウンロード
アーティファクトの表示バージョン切り替え

中でもインパクトがあるのは、プレビュー表示です。
プレビューによって、生成されたコードの動作や見た目をその場で確認できるようになりました。
追加で修正を依頼することが可能となりました。
このコード生成における体験の良さが話題の一因だと思います。

ChatGPTやGemini、3.5以前のClaudeでは、生成されたコードを動かすために以下のステップが必要でした。

生成されたコードをコピー
ファイルを作成
コードを貼り付けて保存
実行して確認
しかし、アーティファクト機能では、生成されたコードをその場で動かすことができます。
これにより、試行錯誤のサイクルが速まり、プロンプトの調整に集中できる点が非常に良いです。

プレビュー機能は非常に便利で素晴らしいと感じましたが、Claude 3.5 Sonnetのコード生成能力の向上があってこその機能だと感じました。
よく例として使われている「テトリス作って」や、「インベーダーゲーム作って」など、
細かい指示をしなくても、ある程度動いてしまうコードが出来上がってしまうのが驚きです。

アーティファクト機能の使い方

アーティファクト機能の有効化

アーティファクト機能は初期状態では無効になっているため、以下の手順で有効にします。

Claudeを開く
設定メニューの「Feature Preview」をクリック
- ページの右下にあるアカウント名をクリックして、表示されるメニューの中ほどにあります。
ポップアップで表示された「Feature Preview」の「Artifacts」をOnにします。

アーティファクトの表示

設定を有効にした後、通常どおりClaudeとやり取りでコードや画像の生成を依頼すると、自動的にアーティファクト（プレビュー）として表示されます。

例）

アーティファクトの表示例
画像の右半分がアーティファクトです。

アーティファクトの表示切り替え
右上の「Code」でコード表示に切り替え可能です。表示を戻したい場合は、隣の「Preview」で戻せます。
「Preview」の左にあるアイコンは、表示されているアプリを再表示します。
今回はブロック崩しゲームなので、ゲームの初期状態に戻せます。

右下の2つのアイコンは、
左がコピーで、ソースコードをクリップボードにコピーできます。
右はダウンロードで、コードをファイルとして保存できます。今回の場合はreactのtsxファイルとしてダウンロード出来ます。

また、アーティファクトの右上のXボタンをクリックするとアーティファクトが閉じてしまいますが、
再表示するには、コードのアイコンがついたブロックをクリックすることで再表示できます。
プロンプト欄や右側の「Chat Control」のどちらからも可能です。

アーティファクトの再表示

さらに指示を追加して機能を追加・変更することも可能です。
追加変更できること自体は他のLLMでも可能ですが、すべてClaudeの画面から他のツールに切り替えることなく変更と確認までできてしまうのがユーザ体験として良いです。

アーティファクトの変更

変更されたコードが出来上がった後、アーティファクトの左下にバージョン表示が追加されます。
左右の矢印でアーティファクトのバージョンを前に戻したり、新しくしたりできます。
矢印の間の真ん中の文字もクリック可能で、指定のバージョンにアーティファクトを切り替えられます。

アーティファクトのバージョン管理

2024/07/15 追記
ちょうどブログを公開した日くらいにアーティファクトの公開機能が提供されました。
アーティファクトの右下に「Publish」というボタンが増えています。

クリックすると、公開することについて説明と注意書きが表示されます。

「Publish & Copy Link」をクリックして、公開します。
数秒待つと、公開されたURLが表示されるので、コピーして表示してみます。

URLにアクセスすると最初に注意書きが表示されます。
「怪しいかもしれないから注意してねぇ」的な内容です。

「Show Content」ボタンをクリックすると公開したアプリが表示されます。

アプリの右下には、「Remix Artifact」ボタンがあり、
Remixすることで、公開されたアプリを参考に自分のアプリとして編集が可能です。

アーティファクトとして、アプリの元コードを再現しつつ、リミックス案３つ提案するプロンプトが自動で実行されます。

追記終わり

プレビュー機能について

非常に便利なプレビュー機能ですが、残念ながらすべてのアーティファクトがプレビューできるわけではありません。

具体的に何がプレビュー出来るかは公式情報として見つけられませんでしたが、
Claudeさんから引き出してみました。

一般的に利用可能な情報に基づいて、よく使用されるアーティファクトのプレビュータイプについて説明することはできます：

コード (application/vnd.ant.code): 様々なプログラミング言語のコードスニペットを表示します。
HTML (text/html): HTML、CSS、JavaScriptを含むウェブページをレンダリングします。
Markdown (text/markdown): フォーマットされたテキストドキュメントを表示します。
SVG (image/svg+xml): ベクターグラフィックスを表示します。
Mermaid図 (application/vnd.ant.mermaid): フローチャート、シーケンス図などを描画します。
Reactコンポーネント (application/vnd.ant.react): インタラクティブなReactコンポーネントをレンダリングします。

これらは一般的に知られている形式ですが、実際のシステムではさらに多くの種類や追加機能があるかもしれません。特定の機能や使用方法について質問があれば、できる限り答えさせていただきます。

コードについてはプレビュー表示というより、コードの色付け（シンタックスハイライト）だけかと思います。
他にも色々試してみましたが、プレビュー表示出来そうなのは上記のみのようです。
詳細は#アーティファクト活用例で紹介します。

Claude 3.5の使用制限

現在、Claude 3.5はclaude.aiにて無料で利用可能ですが、利用制限があります。
この辺はOpenAIがChatGPT4oを無料ユーザに開放しているのと同様、まずは使ってもらってユーザを獲得する作戦かなと思いました。
実際私も今回使ってみてClaudeの利用制限を増やすために課金したく

送信できるメッセージの数は、添付するファイルの長さや現在の会話の長さなど、メッセージの長さによって異なります。

現時点では、無料版では５時間あたり、おそらく9件です。
「おそらく」としたのは公式のヘルプ等で明言がないためです。

制限についてのヘルプ
https://support.anthropic.com/en/articles/8602283-does-claude-ai-have-any-message-limits
具体的な数値は記載されていません。
プロ版（有料プラン）の制限事項
https://support.anthropic.com/en/articles/8325612-does-claude-pro-have-any-usage-limits

無料サービスと比較して少なくとも 5 倍の使用量を提供します。
会話が比較的短い場合は、5 時間ごとに少なくとも 45 件のメッセージを送信できます。

制限の数値について記述があり、そこから無料プランでの制限がある程度推測可能です。
「少なくとも」とあるので、9件未満とも言えますし、いずれにせよテキスト量によって変化するため目安程度でしょう。

アーティファクト活用例

ここでは、アーティファクトのプレビューを活用出来そうなパターンについていくつか例を示したいと思います。

1. Webアプリのテスト実行

Reactで実装されたWebアプリケーションです。
ゲームはわかりやすい例ですが、ゲームに限らずReactで実装されるアプリについてはある程度動くと思います。

Reactアプリのプレビュー例1

Reactアプリのプレビュー例2

2. HTML/CSS

単純なhtmlとcssもプレビュー可能です。
指示の仕方によっては、ただのコード表示になる場合もありました。

HTML/CSSのプレビュー例

3. JavaScriptの実行

カウントダウンタイマーのサンプル

JavaScriptのプレビュー例

4. クラス図の描画

Mermaidを用いて図表化

Mermaidのプレビュー例

5. データのグラフ化

中身はReactのrechartsを用いているので、実質は１と同様です。

Reactアプリのプレビュー例3

vueを指定すればvueでもコーディングしてくれますが、アーティファクトのプレビューはできませんでした。

コードの表示例

6. 画像のプレビュー

SVG形式の画像

SVG画像のプレビュー例

7. MDファイルのプレビュー表示

Markdownのプレビュー例

8. コードのドキュメント化

ちょっとしたツールの説明書作成に使えそう。
中身はただのhtmlです。

9. その他形式の表示

コードに限らずですが、出力が長くなるデータはプロンプトとデータが分かれて表示されるのは見やすいです。

CSVフォーマット
表形式になるわけではないです。

表形式でプレビュー表示するにはMarkdown化する必要があります。

JSON形式

YAML形式

プロンプトで生成したReactアプリのデプロイ

Reactのアプリはtsxファイルでダウンロード可能です。
アプリのファイルのみなので、実行に必要なファイルについては別途環境構築が必要となります。

例えばcloudflareであれば色々準備なく公開することも可能です。
cloudflareにデプロイする方法は以下で紹介しています。

今回紹介したような単機能なアプリであれば、App.tsxの中身を生成されたコードに置き換えればさくっと公開可能です。
※余談ですが、出力されたReactのコードはTypeScryptの型エラーが出まくったので、先にプロンプトで型定義をしっかり書いて出力するように指示しておくのがよいでしょう。

参考情報

ヘルプ
https://support.anthropic.com/ja/
Claude 3.5について
https://www.anthropic.com/news/claude-3-5-sonnet

さいごに

Claude 3.5 SonnetのArtifactsについて紹介しました。
ArtifactsのUIは私にとって非常に使いやすいものでした。
色々とプロンプトを試してみた中で、3.5の進化を感じられました。
これを読んでClaude使ってみようと思って頂けましたら幸いです。

レスキューナウテックブログPublication

日本で唯一の危機管理情報を専門に取り扱う防災・BCPの専門企業、(株)レスキューナウです。当社で活躍するエンジニアの技術ブログを中心に公開していきます。