Claude 3.5 SonnetのArtifacts機能とは？使い方と使えない場合の対処法

本記事では、Claude 3.5 SonnetのArtifacts機能について詳しく解説します。

具体的なユースケースを交えながら、Artifacts機能の使い方や使用できない場合の対処法も紹介します。

Claude 3.5 SonnetのArtifacts機能とは？概要や特徴

まずは、Claude 3.5 SonnetとArtifacts機能の概要や特徴について解説します。

Claude 3.5 Sonnetとは

Claude 3.5 Sonnetは、Anthropic社が提供する生成AIモデル「Claude」の最新版です。

速度とコストのバランスに優れ、競合モデルやClaude 3 Opusを上回るパフォーマンスを発揮します。

特に、マルチモーダル機能により、チャートやグラフの解釈など視覚的推論が必要なタスクにおいて大きな改善が見られます。

Claude 3.5 SonnetのArtifacts機能で視覚的操作性が向上

Claude 3.5 Sonnetの「Artifacts」は、Claudeと対話しながらアウトプットを作成・修正できる機能です。

Artifacts機能の画面は2つに分かれており、左側のチャットでAIと対話しながら、右側にAIが作成したアウトプットが表示されます。

以下のAnthropic公式の動画でも紹介されていますが、これまではAIを使ってアウトプットを生成する際、複数のツールやブラウザを開いて、それぞれを行ったり来たりしながら作業するに必要がありました。

Artifacts機能のメリットは、作業がClaude内で完結できる点にあります。

Artifacts機能は以下のような業務シーンで活用することができます。

エンジニア

コードベースからアーキテクチャ図を作成できます。

プロダクトマネージャー

インタラクティブなプロトタイプを作成して迅速な機能テストを行えます。

マーケティング

パフォーマンス指標を活用したキャンペーンダッシュボードを設計できます。

営業

予測洞察を含んだ販売パイプラインを視覚化できます。

Claude 3.5 SonnetのArtifacts機能は無料で使える？料金プランについて

2024年8月から、Artifacts機能はすべてのユーザーが無料で利用可能になりました。

Free、Pro、TeamプランのいずれでもArtifactsを使用できます。

iOSおよびAndroidアプリにも対応しています。

Claude 3.5 SonnetのArtifacts機能の始め方と使い方

ここでは、Claude 3.5 SonnetのArtifacts機能の始め方と使い方をステップバイステップで解説します。

Artifacts機能の始め方！有効化する方法

Artifacts機能は自動で有効化されており、特別な設定は不要です。

ユーザーがコードやドキュメント、ウェブサイトデザインなどを生成する際に自動で起動し、アウトプットを見ながらAIに修正指示を出すことができます。

簡単なゲームを作成する手順

Artifactsの公式紹介動画では、HTML5で1分以内にサイドスクロールのゲームを作成する方法が紹介されています。

実際にArtifacts機能を使って、ゲームを開発してみましょう。

ゲームの設定として、登場するキャラクターや障害物、ルールなどの情報をプロンプトに含めて指示を出します。

プロンプトを送信すると自動でコーディングが始まり、すぐにHTMLファイルのゲームが作成されました。

画面右下のダウンロードボタンよりHTMLファイルをダウンロードすることで、ブラウザ上でゲームを試すことができます。

こちらが作成されたゲームです。指示通り、ゴールエリアである黄色い四角形に到達するとクリア、敵キャラクターである赤い四角形に接触するとゲームオーバーとなっています。

もちろん、ここからより詳細な指示を出して、ゲームを修正していくことも可能です。

Webサイトの設計を行う手順

Artifacts機能では、Webサイトの設計を行うこともできます。

まずはプロンプトで開発したいWebサイトの概要と、機能やコンテンツに関する指示を箇条書きで指示します。

プロンプトを送信すると自動でコードが生成され、Webサイトのイメージが右側のArtifacts機能にて表示されます。

表示されたアウトプットを見ながら、必要に応じて修正の指示を出していくことが可能です。

Artifacts機能の右上の「Preview」と「Code」のタブを切り替えることで、コードとWebサイトのイメージをそれぞれ確認することができます。

スライドやグラフを作成する方法

次に、Artifacts機能でスライドやグラフを作成する方法を紹介します。

今回は、労働政策研究・研修機構に掲載されている「完全失業率、有効求人倍率」の統計データを使用します。

対象のExcelファイルをCSVファイルに変換し、「Add content」よりアップロードし、グラフの種類などアウトプットイメージをプロンプトに記載します。

Reactという形式で以下のようにグラフが生成されました。

右上のタブにて、グラフとコードをそれぞれ切り替えることが可能です。

さらに、グラフのデータから読み取れる内容のサマリーも追加したスライドを作成するよう指示を出してみます。

以下のように、グラフとサマリーを含んだ資料が完成しました。

Claude 3.5 SonnetのArtifacts機能が使えない場合の対処法

Artifacts機能が使えない場合は、次の2つの原因が考えられます。

• 生成内容がArtifactsの対象外である
• 無料プランの使用制限に達している

生成したい内容がコードやWebサイトデザイン、メール文面など、Artifactsを使うことのできるアウトプットであることを再度確認し、必要に応じてプロンプト内でArtifactsを使用したい旨を明記してください。

また、使用制限に達した場合は、４〜5時間ほど時間をおいて再度試してみるとよいでしょう。

スライド資料を作成するならArtifacts機能ではなくイルシルがおすすめ

イルシルはスライド作成に特化したAIツールで、特に日本のビジネスシーンに適したスライドやパワーポイントを簡単に自動生成できます。

Claude 3.5 SonnetのArtifactsがコードやウェブサイト作成に適している一方で、パワーポイントには未対応のため、スライド作成にはイルシルが効率的です。

以下にイルシルのサービス特徴を挙げます。

テキストからスライドを自動生成

テキストで指示を出すことでスライドを自動生成したり、長い文章を要約してスライドを作成したりすることができます。

生成した内容をもとに編集することも可能です。

日本のビジネスシーンに特化

日本のビジネスシーンに合わせた用途別の豊富なテンプレートを揃えているため、業務の現場でも幅広く活用できます。

豊富で高品質なデザイン

よく使うデザインのパーツを多く取り揃えており、効率的に作業することができます。

まとめ

Claude 3.5 SonnetのArtifacts機能は、コード生成やウェブサイトデザイン、グラフ作成など多用途で利用でき、作業を大幅に効率化します。

無料プランでも使用可能で、さまざまなアウトプットの制作がClaude内で完結できる点がメリットです。

必要に応じて最適なプランを選び、業務の効率化に活用しましょう。