2024年6月21日に生成AIの開発を手掛けるAnthropic社から、新しいモデル「Claude 3.5 Sonnet(クロード3.5ソネット)」がリリースされました！
その中でも特に注目されているのが、新機能の「Artifacts」です。簡単に言うと、チャットをしながら視覚的なコンテンツも同時に生成できるというものなんです。この機能は、GPT-4oやGemini 1.5 Proの性能を上回るとも言われています。
本記事では、そんなClaudeの「Artifacts」機能に焦点を当てて、その驚きの性能や使い方・料金について初心者の方にもわかりやすく解説していきます。
※「Claude 3.5 Sonnet」自体の詳しい使い方については、以下の記事で解説しています！
Claudeの新機能「Artifacts(アーティファクト)」とは？
Claude 3.5 Sonnetで新しく登場した「Artifacts」機能とは、上記の動画を見ていただければわかる通り、チャット中に視覚的なコンテンツも同時に生成してくれる機能です。
この機能を活用して、リアルタイムでスライド資料を作成したり、簡単なゲームやWebサイトを生成出来たりするんです！
Claude 3.5 Sonnetは、誰でも無料で利用できますので、特に制限などはありません。
Artifactsを利用するメリット
Artifactsを利用するメリットには、以下のようなものがあります。
- リアルタイムでコンテンツが生成・編集可能：コンテンツがその場で作成され、すぐに結果を見ることができます。さらに、専用の表示領域があるため、対話を中断せずにコンテンツを確認できます！
- 柔軟に調整が出来る：生成されたものに対してフィードバックを与えることで、微調整や修正が可能です！
- 多目的に活用可能な出力：コードや文書、ウェブページなど多岐にわたる形式で出力されるため、幅広い用途に対応できます！
これらのメリットが、GPT-4oやGemini 1.5 Proを超えると言われている理由なんです！
では、Artifacts機能では具体的にどのようなことが出来るのでしょうか？
Artifactsでできること5選！
Artifacts機能では、以下のようなことが出来るようになりました。
- スライド作成・チャート作成
- 簡単なWebサイトの設計(HTML/CSSベースのUI)
- 簡単なゲームの生成(JavaScriptベース)
- 簡単なアプリの作成
- SVG画像の作成
①スライド作成・チャート作成
Artifacts機能では、データを図解にまとめてスライド資料やチャート資料に変換できます。
さらに、分析結果も同時に文章化してくれるのでとても便利です！
ビジネスマンや学生の方はレポートやスライド資料を作成する場面が多いかと思いますが、この機能を利用するとたった数分で完成するので、これまでの作業を大幅に効率化させることができます。
②簡単なWebサイトの設計(HTML/CSSベースのUI)
Artifacts機能では、作成したいWebサイトの内容をプロンプトで入力するだけで、ベースとなるページをリアルタイムで生成してくれます。
それだけでなく、Webサイト内で表示した方が良いコンテンツも提案してくれるので、改良しながら作ることも可能です！
③簡単なゲームの生成(JavaScriptベース)
Artifactsでは、作成したいゲーム内容をプロンプトとして入力することで、簡単なゲームが作成できます。
リアルタイムなので、編集も簡単です。
プログラミングが分からない！という方でも安心してゲームが作れる便利な機能です。
④簡単なアプリの作成
Artifactsでは、作成したいアプリの概要をプロンプトとして入力することで、簡単なアプリが作成できます。
ただアプリを作るだけでなく、AI側から提案してくれるのがうれしいポイントです。
⑤SVG画像の作成
Artifactsでは、SVG画像も簡単に作成できます。
2次元のグラフィック・グラフ・イラストをWebサイトに表示したい場合にオススメです！
【無料？有料？】Artifactsの料金プラン
Claude 3.5 Sonnetの「Artifacts機能」は、誰でも無料で利用可能です！
しかし、Sonnetの上位版「Opus」を使うには下記のProプランに加入する必要があります！
Proプランは月額20ドル(約3,200円)/Teamプランは月額25ドル(約4,000円)となっています。
Claude 3.5 SonnetのAPI利用料金
さらに、API経由でClaude 3.5 Sonnetを利用する場合は料金がかかってしまうのでご注意ください。
ただ、Sonnetは今までよりも生成速度がアップ+低コストを実現したモデルです。入力コストは3分の1に・出力コストは5分の1まで抑えられています！
料金は以下の通りです。
| 入力 | 100万トークンあたり3ドル(約480円) |
| 出力 | 100万トークンあたり15ドル(約2,400円) |
Claude 3.5 Sonnetの始め方
Claude 3.5 Sonnetの始め方・ログイン方法はとっても簡単です！
こちらにアクセスして、お持ちのメールアドレスでログインするだけです。
※Googleアカウントが便利です。
Artifactsの使い方
では早速Artifacts機能を使ってみましょう！
⓪Artifactsを使う前の準備
まずはClaude公式サイトにアクセスしたら、チャット下部の「Try it out」をクリックしましょう。(※ここをクリックしなければ使えないのでご注意ください。)
プレビュー画面が表示されたら、右下のArtifacts機能を「ON」にしてページを閉じましょう。
①スライドを作成する方法
Artifacts機能で、スライド資料を作る方法について解説していきます！
- STEP1作成したいスライド内容を入力する
プロンプトは日本語でも大丈夫です。
初心者向けにSEO対策の基礎についてまとめたスライド資料を作成してください。入力できたら、「↑」をクリックしましょう！
- STEP2スライド資料が生成される
すると、このようにスライド資料がたった数秒で生成されます！
PowerPointにそのまま出力できるようになれば、さらに便利になりますね！
②フローチャートを作成する方法
Artifacts機能で、フローチャートを作る方法について解説していきます！
- STEP1作成したいフローチャート内容を入力する
プロンプトは日本語でも大丈夫です。
カフェを開店するにあたって、お客様が入店から退店するまでの店員の業務フローをフローチャート図として作成してください。入力できたら、「↑」をクリックしましょう！
- STEP2フローチャート図が生成される
すると、このようにフローチャートが生成されます。作成したフローチャートは、mdファイルとして保存することも可能です。
他には、問題解決に関するフローチャートやWeb上で動くワークアプリなども生成できるようです！
③グラフを作成する方法
Artifacts機能で、グラフを作る方法について解説していきます！
- STEP1作成したいグラフの概要を入力する
日本語でも大丈夫です！
1年間で貯金を50万円増やす目標にしたいので、グラフをメインにした計画書を書いてください入力できたら、「↑」をクリックしましょう！
- STEP2グラフが生成される
すると、このようにグラフが生成されます。
自分でスケジュールなどを立てるのが不得意な方は、グラフ付きで計画書を作成してもらうのも1つの手ですね！
④簡単なWebサイトを作成する方法
Artifacts機能で、Webサイトを作る方法について解説していきます！
- STEP1作成したいWebサイトの概要をプロンプトとして入力する
プロンプトは日本語でも大丈夫です。
東京都渋谷区の魅力をまとめたWebサイトを作成してください。入力できたら、「↑」をクリックしましょう！
- STEP2Webサイトが生成される
すると、下記画像のように簡易的なWebサイトが生成されます！
右上の切り替えで、コード表示かプレビュー表示に変更できるようになっています。
変更点がある場合は、チャットで指示することで改良を加えていけるのも安心です。
会員登録フォームやランディングページ制作なども、簡単にできてしまうのは驚きですよね。
⑤簡単なゲームを生成する方法
Artifacts機能で、ゲームを作る方法について解説していきます！
- STEP1作成したいゲーム内容をプロンプトに入力する
プロンプトは日本語でも大丈夫です。
JavaScriptを使ったシューティングゲームを作成してください入力できたら、「↑」をクリックしましょう。
- STEP2ゲームが生成される
Artifacts機能では、JavaScriptを使ったゲームが出力されます。
右上の切り替えで、コード表示かプレビュー表示に変更できるようになっています。
変更点がある場合は、チャットで指示することで改良を加えていけるので、プログラミングが分からない方でも安心です！
⑥アプリを作成する方法
Artifacts機能で、アプリを作る方法について解説していきます！
- STEP1作成したいアプリの概要を入力する
プロンプトは日本語でも大丈夫です。
HTML/CSS、JavaScriptを使ったレシピ管理アプリを作成してください。入力できたら、「↑」をクリックしましょう。
- STEP2アプリが生成される
シンプルなプロンプトでも、しっかりとしたアプリが生成されました！
さらにデザイン性を持たせるために、追加で指示をしていき、改良していきましょう！
プログラミングに詳しくない筆者でも出来たので、誰でも簡単にアプリが作成できます。
試してみましたが、しっかりと動きますよ！
⑦SVG画像を作成する方法
Artifacts機能で、SVG画像を作る方法について解説していきます！
- STEP1作成したいSVG画像の内容を入力する
プロンプトは日本語でも大丈夫です。
ウサギの特徴を完ぺきにとらえたSVG画像を作成してください。入力できたら、「↑」をクリックしましょう。
- STEP2SVG画像が生成される
このように出力されました！
うさぎというよりも猫っぽいので、耳を長くしてください、と指示してみました。
ウサギに近づきましたね！こんな感じでSVG画像を生成できます。
他にもさまざまな活用方法があります。以下の記事でご紹介していますので、合わせてチェックしてみてください！
Artifactsはスマホ版Claudeアプリでも使える？
もちろん、Artifacts機能はスマホ版Claudeアプリでも利用可能です！
以下のリンク先からインストールできます！
・App Store：https://apps.apple.com/jp/app/claude-by-anthropic/id6473753684
まとめ
いかがでしたでしょうか？
Claudeの新機能「Artifacts」の概要、使い方や料金について徹底解説してきました！
プログラミング初心者から上級者まで幅広いユーザーに対応し、無料でも始められる手軽さが魅力でしたね。
Artifactsを使いこなすことで、日々のビジネスや作業の生産性が大幅に向上するに違いありません！ぜひ実際に使ってみて、あなたの作業フローに組み込んでみてくださいね。
- ChatGPTで〇〇を効率化したい
- スライドを作るならどのAIツールがおすすめ？
- おすすめのGPTsが知りたい
同じ悩みを解決した人がいるかもしれません。ぜひ質問してみてください！
