Claude Artifacts（アーティファクト）の使い方｜初心者でも迷わない保存・共有ガイド

Claude Artifactsの使い方が分からず、Claudeにお願いして作ってもらったコードやWebページ、資料が「どこに保存されるの？会話を続けたら消えちゃわない？」と不安になったことはありませんか。

せっかく良いものができても、扱い方が分からないままだと落ち着きませんよね。

実は、Claudeにはそうした成果物を専用の場所にまとめて表示してくれる「アーティファクト（Artifacts）」という機能があります。

仕組みさえ分かってしまえばとてもシンプルで、初心者の方でもすぐに使いこなせますのでご安心ください。この記事では、Claude Artifactsの使い方を、表示のされ方・共有の仕方・つまずきやすい点まで、丁寧に解説していきます。

この機能が向いている方

「作った成果物が会話に埋もれて探せない」「保存や共有の仕方が分からない」という方に、アーティファクトはぴったりの機能です。

アーティファクト以外にもClaudeの主要機能を一通り押さえておきたい方は、Claude初心者が最初に覚えるべき7つの機能【2026年6月版】も参考にしてください。そもそもClaude自体が初めてという方は、【今さら聞けない】Claudeとは？初心者向け使い方解説から読むとスムーズです。

Claudeのアーティファクトとは？

「アーティファクト」とは、平たく言えば「成果物置き場」です。皆さまがClaudeとの会話でつくった文書やコード、Webページなどの成果物を、右側の専用ウィンドウにまとめて表示し、その場でプレビュー・編集・作り直しができる機能なのです[1]。

「プレビュー」というのは、作ったものをその場ですぐ見られる表示のことだと考えていただければ十分です。難しい仕組みを覚える必要はありません。

アーティファクトはどこに表示される？（画面の見方）

さて、実際の画面を見てみましょう。Claudeにまとまった成果物（コードやWebページ、図、アプリなど）を作らせると、本文の中に埋もれることなく、右側のアーティファクト・ウィンドウに分けて表示されます。会話がスクロールでどんどん流れていっても、成果物はウィンドウ側にきちんと残ります。

加えて、生成したあとは会話の中にも成果物の「カード」（例：Todo list・コード・HTMLなど）が残ります。このカードからは、いつでも開き直したり、ダウンロードしたりできます。

画像のとおり、①右側の専用ウィンドウに表示されます。②会話に残るカードから開き直し・ダウンロードできます。この2か所さえ押さえておけば、成果物を見失うことはありません。

アーティファクトでできること

「アーティファクトとは・できること」を場面で考えると分かりやすくなります。資料のたたき台をさっと作りたいとき、内容を図解で整理したいとき、動くミニツールを試しに触ってみたいとき、アーティファクトならその場で形にして確認できます。

対応しているのは、文書（Markdown・テキスト）、コード、HTML・Webページ、図（ダイアグラムやSVGなど）、そしてボタンや入力が実際に動くインタラクティブなアプリやツールです。

作ったアーティファクトを共有・公開するには

「これ、誰かに見せたいな」と思ったことはありませんか。作ったアーティファクトは、最初は自分だけに表示される状態です。

そこで大切なのが「共有」の一手間です。共有したいときは、ブラウザでアーティファクトを開き、ページ上部の「共有（Share）」から公開の操作をします。無料・Pro・Maxのいずれのプランでも公開でき、公開するとリンクを持つ人が閲覧・操作できるようになります[2]。

なお、公開すると誰でもリンクからアクセスできる状態になりますので、機密情報や個人情報を含む内容は公開に含めないよう注意してください。

無料でも使える？利用のポイント

アーティファクトは無料で使えるのか、気になるところですよね。結論から言うと、無料プランでも追加費用なしで使えます。

一方で、基本的にPC・ブラウザでの利用が中心の機能です。モバイルアプリでは専用のアーティファクト一覧タブなど、一部の機能が使えない場合があります。まずはPCのブラウザで試してみるのがおすすめです。

アーティファクトが表示されないときは

「アーティファクトを頼んだのに表示されない」「使えない」と戸惑ったことはありませんか。そんなときは、次の2点を確認してみてください。

ここで大切なのが、設定の「機能（Capabilities）」でアーティファクト関連がオンになっているかどうかです。オフだと出てこないことがあります。それでも出ない場合は、「アーティファクトとして表示して」「HTMLで作って」のように成果物の形をはっきり伝えて頼んでみましょう。形を明示するだけで、ぐっと出やすくなります。

それでは、上手に使うコツも一つ。最初はシンプルに作らせ、そのあと「色を変えて」「項目を追加して」と少しずつ直していくと、イメージ通りに近づけやすくなります。

まとめ

Claude Artifactsは、成果物を右側の「専用ウィンドウ」にまとめて表示し、あとから開き直したり共有したりできる機能です。仕組みはシンプルなので、難しく考える必要はありません。

まずはClaudeに「HTMLで簡単な◯◯を作って。アーティファクトで表示して」と頼んでみましょう。右側のウィンドウに成果物が出てくれば、もう皆さまはアーティファクトを使いこなせています。

※ TECH-NOISYでは、ClaudeをはじめとしたAIツールの使い方や活用のコツを日々発信しています。最新情報のチェック用に、こちらもご参照ください→ TECH-NOISYのXアカウント

最終更新日：2026年7月26日

※本記事の内容は執筆時点のものです。AIツールの機能や利用条件は今後変更される可能性がありますので、最新情報は各公式サイトでご確認ください。

Citations:

[1] What are artifacts and how do I use them? | Claude Help Center
[2] Publish and share artifacts | Claude Help Center