Claudeの新機能、Artifacts(アーティファクト)とは? 使い方と例。 / いがわ

.

Memo

Claudeのアーティファクトの使い方。

ClaudeのArtifacts(アーティファクト)機能。

アーティファクトとは?

Artifactsの読み方はアーティファクト? アーティファクツ?

Claude 3.5 Sonnetのリリースと一緒に、「Artifacts」という新しい機能が追加された。

Artifactsは、Artifact(人工物や工芸品、古物、成果物や生成物の意味)の複数形なので、「アーティファクツ」の方が自然。

ただしGoogle翻訳などでは「アーティファクト」となるので、ひとまず「アーティファクト」と呼ばれている模様。

rgb()で透明度も。CSSの新しい色指定と使い方を眺める猫たち。

AIと一緒に作る生成物。ノーコードの一面も。

Claude 3.5 Sonnetの紹介動画の中のアーティファクト。

AnthropicによるClaude 3.5 Sonnetの紹介動画で、アーティファクト機能も紹介されている。

アーティファクトは、生成しているもの(生成物)をリアルタイムでプレビュー表示するような機能。

プレビューと編集機能。

生成中のプレビューと同時に、編集、構築もできる、動的なワークスペース。

Webサイト制作者などが使う、作業をしながら制作物を確認する、いわゆるライブプレビュー。

コードが自動生成されるので、ノーコードツールの一面もある。

動画内では、そのアーティファクト機能を使って、Claudeと一緒にブラウザで動く簡単なゲームを作成している。

参照元:Introducing Claude 3.5 Sonnet \ Anthropic


ClaudeのArtifacts(アーティファクト)の設定方法。

Claudeのアーティファクトをオンへ。

Claudeのサイトへアクセス。

Claudeのサイトへ行ってログインすると、トップページにArtifactsについてのメッセージがある。(オレンジ枠の部分。)

Claude(クロード)のアーティファクトの使い方。画面のスクショ。

Artifactsについて(日本語訳)。

Google翻訳で日本語にした画面。ここではArtifactsは「遺物」と訳されているが、Claudeの「アーティファクト」機能のこと。

Claudeのアーティファクトの使い方。画面のスクショ。

Try it out(ぜひお試しください)をクリック。

「Try it out(ぜひお試しください)」のリンクをクリックすると、下記のウィンドウが表示される。

Claudeのアーティファクトの使い方。画面のスクショ。

日本語訳した画面。

Claudeのアーティファクトの使い方。画面のスクショ。

「Try it out」が見つからない場合は、画面左側へマウスを移動するとサイドバーが表示されるので、そこから「Feature Preview」をクリックでも表示可能。

Claudeのアーティファクトの使い方。画面のスクショ。

Artifacts(アーティファクト)の使用制限。

使用回数に制限がかかるが、Artifacts(アーティファクト)は無料プランでも利用できる。

お仕事で使う場合は、制限によるストレスや効率低下を回避するためにも、課金した方が無難。

Artifacts(アーティファクト)をオンに。

Artifacts(アーティファクト)のボタンをクリックし、オンにする。

Claudeのアーティファクトの使い方。画面のスクショ。

以上で完了。


ClaudeのArtifacts(アーティファクト)の使い方。

アーティファクトは自動的に現れる。

Webサイトを作る場合。

アーティファクトがオンになっていても、チャット画面はとくに変わらない。

チャットのやり取りで、自動的に画面右側へアーティファクトのスペースが現れる。

あとは、YouTubeのデモのように、Claudeとのチャットのやり取りで作業を続けていく。

Claudeのアーティファクトの使い方。画面のスクショ。

アーティファクトが消えた場合。

作業途中でアーティファクトのスペースが消えてしまった場合は、自動的にできあがるボタンをクリックするとアーティファクトが表示される。

プレビューとコードの切り替え。

アーティファクトの画面右上にある「Preview / Code」のボタンで、プレビューとコードの切り替えができる。

Claudeのアーティファクトの使い方。画面のスクショ。

テニスゲームを作る場合。

同様に、チャット中に自動的にアーティファクトが表示される。

混み合っている場合や、作業内容の複雑さなどにより、プレビューが表示されないこともある。

Claudeのアーティファクトの使い方。画面のスクショ。

一度「cookie」のエラーが出たが、それを含めて5回のやり取りで下記の途中結果に。

YouTubeの動画同様、数回のやり取りでは古典的なゲームになる。

おそらくClaudeの中に、テンプレートのようなプログラムがありそう。

資料、スライドなどの場合。

資料やスライド作成も同じように、制作物をリアルタイムで確認しながら作成できる。

3回のやり取りで、最低限の見出しと動きをつけ、ファイル形式を指定できる。

今回はブラウザで見られるように、HTML形式で指定。

(レスポンシブ対応済み。クリックで開きます。)


Claudeのアーティファクトの使い方。画面のスクショ。

スライド用のファイル形式。

Claudeに聞いてみたところ、下記のファイル形式に対応。

  • .pptx (Microsoft PowerPoint)
  • .key (Apple Keynote)
  • .odp (OpenDocument Presentation)
  • .pdf (Portable Document Format)
  • .html (HTML Slides, 例えばReveal.jsなど)

Figmaのファイル形式(.fig)にはまだ対応していないとのこと。


ClaudeのArtifacts(アーティファクト)はオン・オフの切り替えができない。

アーティファクトのオンとオフ。

アーティファクトはClaudeの機能の一部に。

現時点では、アーティファクト機能はユーザー側でオンとオフの切り替えができない。

アーティファクトをオフにしたい場合は、チャット欄でClaudeへ伝えれば良いとのこと。

Claudeのアーティファクトの使い方。画面のスクショ。

アーティファクトの現在地。

Webサイトやゲームやアプリと、資料やスライドとの違い。

Claudeのアーティファクト機能は、高い可能性で制作者や開発者の仕事環境を変えていく。

いきなりすぐには変わらなくても、徐々には変わっていく。そして他の生成AIも。

Webサイトやゲームやアプリ。

現在の段階としては、長期間使用されるような「Webサイト」や「ゲーム」、「アプリ」を生成する機能としてはまだごく初歩的なもの。

例えば数分や数時間で、WordPressサイトやECサイト、大規模なポータルサイトを作れるレベルとは言えない。

RPGや電子決済などのゲームやアプリも、数分や数時間では作れないだろう。

時間をかければ作れるかもしれないが、まだClaudeの中にノウハウ自体がないため、生産性はよくならない。

Claudeがノウハウを覚えた後は、高確率で転換期となる。

Claudeが、会話型AIから共同作業環境へのイメージ画像。

ただし、「ノウハウ」は会社や個人の「知的財産」でもある。また、写真や映像と同様に「著作権」もある。

知的財産や著作権をどう扱うか、準備が必要になる。

資料やスライド。

資料やスライドなどの一回限り、または短期的な用途として使用されるものは、効率的に作成できそう。

Claudeが、会話型AIから共同作業環境へ進化。

チームメイトとしてのClaude。

スマホやSNSがそうなったように、将来的には、プロジェクトチームにClaudeがいるような環境になるのかも。

Claudeのアーティファクトの使い方を見る猫ちゃん。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。(元々はメモ書きでした。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。

井川 宜久 / Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

AI 関連メモ。

ChatGPT 関連メモ。

DALL·E 関連メモ。

Sora 関連メモ。

Gemini 関連メモ。

Copilot、Bing 関連メモ。

Llama 関連メモ。

Claude 関連メモ。

Perplexity 関連メモ。


免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。