Claude Artifactsの使い方｜無料で作れる5タイプと共有リンクの出し方 (2026年版)

「AIにツールを作らせたはいいけど、動かすまでが一番面倒」。コードをコピーして、エディタに貼って、ファイル名をつけて保存して、ブラウザで開いて、崩れていたらまたAIに戻る。この往復が嫌でAI活用を諦めた人、けっこう多いはずです。

Artifacts（アーティファクト）は、その往復を丸ごと消します。Claudeのチャット画面の右半分にパネルが開いて、生成されたHTMLやReactがその場で動く。修正は「ここの色を濃くして」と話しかけるだけ。保存作業がゼロになります。

しかもこれ、無料プランで使えます。

Claude Artifactsとは？成果物を右パネルで動かす機能です

Claude Artifactsとは、Claudeが生成したコード・HTMLアプリ・SVG図・Reactコンポーネント・長文ドキュメントを、会話とは別のパネルに切り出して表示・実行する機能です。テキストの塊ではなく、触れる成果物として受け取れます。

Anthropicが2024年6月にClaude 3.5 Sonnetと同時に投入した機能で、いまは全プランに標準搭載されています。ある程度の長さがあって、あとで再利用されそうな出力を、Claudeが自動でArtifact化します。

自動判定なので狙って出したいときは明示します。「Artifactとして出して」「HTML1枚のファイルにして」と添えるだけ。これで空振りがほぼなくなります。

押さえるべきは3点です。

• 生成物が動く状態でプレビューされる
• 会話の指示だけでその場が書き換わる（全文の貼り直しが不要）
• 完成品はリンク1本で他人に渡せる

コードをテキストで返すだけの一般的なチャットAIとの差は、この3点目まで含めた「配れる」ところにあります。

通常チャットとの違いは？「触れるかどうか」です

同じ質問を投げても、Artifactが開くかどうかで作業量が変わります。差分を並べます。

つまり、Artifactsは「読むための出力」を「使うための出力」に変える機能です。ここを理解すると、指示文の書き方も変わります。

Claude本体の基本操作から押さえたい人は、Claudeの使い方まとめを先に読んでおくと理解が速くなります。

使い方は4ステップ。設定はほぼ不要です

claude.aiにログインして、次の順に進めます。難しい設定画面はありません。

1. 機能がオンか確認する：プロフィールアイコン → 設定 → 機能プレビュー。Artifacts関連の項目を見ます。ほとんどのアカウントは最初からオンです
2. 作りたいものを1文で頼む：「〇〇するツールをHTML1枚で作って」のように、出力形式まで指定するのがコツ
3. 右パネルで触る：数値を入れる、ボタンを押す、スマホ幅に縮める。実際に動かします
4. 会話で直す：「入力欄をもう1つ」「スマホで崩れるので縦並びに」。パネルだけが更新されます

2番の書き方が全てです。次の一文を末尾に足すだけで、動かない成果物が激減します。

HTMLファイル1枚で完結させて。外部ライブラリはCDN読み込みのみ。

これを言わないと、Claudeは複数ファイル構成やnpmインストール前提のコードを返しがちです。そうなるとプレビューが動かず、結局ローカル作業に逆戻り。ここが最初の分かれ道。

作れるのは主に5タイプ。本命はHTMLアプリです

何でも作れるわけではありません。得意な形式ははっきり決まっています。

1. HTMLアプリ（投資対効果が圧倒的）

HTML・CSS・JavaScriptを1枚にまとめたミニアプリです。計算ツール、タイマー、入力フォームの試作、簡易ゲーム。ブラウザだけで完結するものはほぼ作れます。ここが本命です。

2. Reactコンポーネント

UIの試作向き。状態が変わったときの挙動や入力チェックの動きを、口で説明する代わりに動く画面で見せられます。デザイナーとの認識合わせが一気に速くなります。

3. SVG図・ダイアグラム

フローチャート、構成図、アイコン、ER図。ベクター形式なので拡大しても粗くなりません。資料用の図解をゼロから描く時間が消えます。Mermaid記法の図も扱えます。

4. コード（Python等）

Pythonやシェルスクリプトも生成できますが、パネル内でそのまま実行されるのはフロントエンド系が中心です。Pythonは「整形された状態で受け取ってローカルで走らせる」用途と考えてください。

コード生成そのものを比べたいときは、AIコーディングツールのカテゴリ一覧から用途に近いものを当たると早いです。

つまり、パネル内で完結させたいならHTMLかReactを指定するのが正解です。

5. マークダウンの長文

仕様書、議事録テンプレート、README。構造のある文書を整形表示できます。文章をAIと共同編集したいときの受け皿がここ。

資料を会話ごとまとめて管理したいなら、Claude Projectsの使い方と組み合わせる形も検討してください。

5タイプのうち、ノーコードツールの契約を止められるほど効くのはHTMLアプリです。社内向けの小さな道具は、これで試作が終わります。ノーコード系のサービスと見比べたい場合は、ノーコードAIツールのカテゴリ一覧も参考になります。

そのまま貼れる8つの指示文

抽象的な説明より、コピーできる文のほうが役に立ちます。実務で効く順に8つ。

1. 手取り計算ツール

月収と扶養人数を入力すると手取り額を出すHTMLツールを作って。
社会保険料・所得税・住民税を概算で分けて表示。HTML1枚で完結させて。

2. 売上ダッシュボード

以下の月別売上を棒グラフと前年比の折れ線で表示するHTMLを作って。
Chart.jsはCDN読み込み。数値はJSの配列で先頭にまとめて。

数値を先頭の配列にまとめさせるのが肝です。翌月は数字だけ差し替えれば再生成が要りません。地味に効きます。

3. 見積もりシミュレーター

プラン選択と人数入力で金額が変わるものを作り、公開リンクを商談相手に送る。営業資料に埋め込む用途で重宝します。

4. 業務フローの棚卸し図

問い合わせ受付から一次回答までの業務フローをSVGで図解して。
承認が入る箇所は色を変えて、待ち時間の目安も添えて。

5. 社内用の用語クイズ

新人研修の定着確認に。50問のフラッシュカードが1回の指示で出ます。

6. フォームUIの試作

Reactで入力チェックの挙動まで作らせ、実装に入る前に仕様の穴を潰します。手戻りが減る。

7. 正規表現の検証台

テキストを貼ると指定の正規表現でマッチ箇所をハイライトするHTMLを作って。

エンジニア以外でも扱えるのが利点です。

8. アンケート集計ビューア

CSVを貼り付けると集計グラフに変わるページ。定例の集計作業がその場で終わります。

8つに共通するのは「毎回同じ計算・同じ整形をしている作業」を狙っている点です。ここが一番リターンが大きい領域。

指示文の書き方そのものを底上げしたいなら、AIプロンプトの書き方ガイドも合わせて読んでおくと成功率が変わります。

公開リンクと埋め込みの手順

作ったものを人に渡す手順です。パネル右上の共有ボタンから進みます。

1. Artifactパネル右上の Publish（公開） を押す
2. 生成されたURLをコピーする
3. 渡したい相手にリンクを送る

公開したArtifactはURLを知っていれば誰でも開けます。ログインは不要です。裏を返すと、社外に出せない数字を入れたまま公開してはいけません。ここは事故が起きやすいポイント。

公開を取り消したいときは、同じメニューから非公開に戻します。リンクは即座に無効になります。

自社サイトに埋め込みたい場合は、公開URLをiframeで読み込む形が手軽です。手順は3つだけ。

1. Publishで公開URLを発行する
2. そのURLをsrcに入れたiframeタグを、埋め込みたいページに置く
3. 表示崩れがないか、スマホ幅でも確認する

タグはこの形になります。

<iframe src="公開URL" width="100%" height="600" style="border:0" loading="lazy"></iframe>

高さは中身に合わせて調整してください。自動リサイズはされないので、固定値で余裕を持たせるのが無難です。

ただし埋め込み先のポリシーやブラウザの設定によってはブロックされることがあります。本番運用に載せるなら、生成されたコードをコピーして自前のページに置くほうが安定します。埋め込みは社内共有や検証用と割り切るのが現実的です。

ここまでの整理: 起動はログインだけ、作るなら「HTML1枚」と指定、渡すならPublishでURL。この3つを覚えれば実務では困りません。

無料プランでどこまで使えますか？

Artifacts自体は無料プランを含む全プランで使えます。有料でないと開かない機能ではありません。

差が出るのは使用量の上限です。Claudeは「直近5時間のセッション」を基準にした上限と、週単位の上限を設けています。Artifactの生成と修正は普通の会話より長い出力を伴うので、無料プランだと上限に当たるのが早い。作り込み始めた途端に止まる、というのが典型的な詰まり方です。

Anthropicは「何回まで」という具体的な回数を公表していません。消費量はメッセージの長さや添付ファイルのサイズで変わります。設定画面の「使用量」でバー表示を確認できるので、そこを見るのが確実です。

プラン別の考え方を整理します。

つまり、まずは無料で試して「上限で止まってイライラする」段になったらProへ、が素直な順番です。いきなり課金する必要はありません。

なお2026年5月に「対話用のサブスク枠」と「Agent SDK向けの月次クレジット」へ課金体系を分ける案が予告されましたが、開始予定だった2026年6月15日に一時停止が告知され、現在も施行されていません。「月次クレジット」という別枠は存在せず、claude.ai上のArtifactsもAgent SDKも同じサブスク利用枠を消費します。第三者の解説記事には分離済みと書かれたものが残っているので、公式ヘルプで確認してください。

料金まわりを詳しく詰めたい人は、Claudeのツールページで最新のプラン構成を確認してください。コストを抑える組み方はClaudeの費用を下げる方法にまとめています。

ChatGPT CanvasやCopilotとどう使い分ける？

似た機能は他社にもあります。どれか1つに絞る必要はないので、向き不向きで振り分けるのが得策です。

比較対象の詳細は、ChatGPTならChatGPT Canvasの使い方、コーディング環境ならGitHub Copilotのページで確認できます。

Artifactsの強みは、1回の指示で「動くもの」がゼロから立ち上がる速さです。逆に、既存のコードベースに手を入れる作業は苦手。リポジトリ全体の文脈を持てないからです。リポジトリごと扱いたい用途はClaude Codeの使い方の守備範囲になります。

そして重要な線引きとして、Artifactsは本番運用の場所ではありません。データベースも認証もなく、ページを閉じれば入力内容は消えます。試作と共有までが守備範囲。ここを勘違いすると後で痛い目を見ます。

比較検討を広げたいなら、AIツールのカテゴリ一覧から自分の用途に近いものを当たるのが早いです。

うまくいかないときの原因は？よくある3つ

Artifactが期待通りに動かないとき、原因はだいたい決まっています。

プレビューが真っ白：外部ライブラリの読み込みに失敗しているケースが大半です。「CDNのURLを最新の安定版に直して」と伝えると復旧します。

Artifactが開かない：出力が短すぎるとClaudeが通常の返信として返します。「Artifactとして出して」と明示するか、要件を足して分量を増やしてください。

修正すると別の場所が壊れる：長い会話ほど起きます。パネル内の版を戻せる機能があるので、動いていた版に戻してから指示を出し直すのが安全です。

うまくいかない大半は、指示文の精度で解決します。「何を・どの形式で・どこまで」を1文に入れる癖をつけると成功率が跳ね上がります。

編集部の評価

正直、AIツールの機能追加としては破格の部類です。理由は3つあります。

第一に、無料プランで使えること。同等の体験を他社で得ようとすると有料枠に入るケースが多く、入口の低さが圧倒的です。

第二に、成果物が配れること。プレビューで終わらず、URLで渡せる。ここが「AIで作ってみた」を「実際に使われる」に変える境目になっています。

第三に、指示文のハードルが低いこと。プログラミングの知識がなくても、日本語で「こういうツールが欲しい」と書けば形になります。

一方で微妙な点も正直に書きます。本番運用に載せられないこと、既存プロジェクトへの組み込みには弱いこと、そして無料プランだと作り込み始めた途端に上限が来ること。この3つは仕様上の限界で、指示文の工夫では解消できません。

それでも、社内ツールの試作という一点においては一択です。企画会議で「こんな画面はどうか」と口で説明する時間があるなら、その場で作ったほうが速い。使い方が変わるレベルの機能だと考えています。

よくある質問（FAQ）

Q. Claude Artifactsは無料で使えますか？

使えます。無料プランを含む全プランに搭載されています。ただし使用量の上限があり、作り込むほど早く上限に当たります。連続して回したいならPro（月$20、年払いで月$17換算）が現実的です。

Q. 作ったArtifactは他の人に見せられますか？

見せられます。パネル右上のPublishを押すとURLが発行され、リンクを知っている人なら誰でも開けます。ログインは不要です。公開前に、社外に出せない情報が入っていないか必ず確認してください。

Q. スマホからでも使えますか？

使えます。ただし画面が狭いため、右パネルでのプレビューは切り替え表示になります。作り込みはPC、確認と共有はスマホ、という分担が現実的です。

Q. Artifactsで作ったものをそのまま業務システムにできますか？

おすすめしません。データの保存先も認証の仕組みもないため、閉じれば内容は消えます。試作して要件を固め、実装は別の環境で行う流れが安全です。

Q. ChatGPT Canvasとどちらを選ぶべきですか？

作るものによります。動くミニアプリを一気に立ち上げたいならArtifacts、文章を段落単位で直しながら仕上げたいならCanvas。両方に触れて、用途で振り分けるのが一番損がありません。両サービスの全体像はClaudeとChatGPTの比較にまとめています。

Artifactsで作ったツールを社内に広げる段階まで来たら、次は「どのAIをどの業務に当てるか」の設計が効いてきます。用途別の使い分けを整理したいなら、AIチャットツールのカテゴリ一覧を見ておくと選定が一気にラクになります。