Claude のアーティファクトで、招待した人だけが使うページとアプリを作る

Claude Code を使っていると、候補を見比べるページなどを、Claude Code が自分からアーティファクトとして出してくることがある。この記事では、そのアーティファクトを今度はこちらから作り、人に見せたり使ってもらったりする。

Claude Code で作ったページを人に見せたいとき、これまでは Cloudflare に置いていた。見せる相手を絞りたければ、Basic 認証や Cloudflare Access で鍵をかけた。データを持たせたければ D1 を用意した。

アーティファクトを使うと、これらの作業が要らなくなる。アーティファクトは、Claude が作ったページを claude.ai に置く仕組み。置いた時点で自分しか開けず、招待した人だけが開ける。ページを開いている人が誰なのかをページが知っていて、データベースも使える。

引き換えに、使う人全員に claude.ai のアカウントが要る。無料のアカウントでよい。

本記事の位置付け

D1でアンケート・ランキング・分担表を作るの3章で、役割分担表を D1 で作った。この記事では同じ役割分担表をアーティファクトで作り、「決まった人たちだけで使う」形にする。

限られた人だけに見せる方法は、このサイトでほかに2つ扱っている。

	Basic 認証	Cloudflare Access	アーティファクト
鍵をかける作業	認証の処理を書き、合言葉を Cloudflare に預ける	Zero Trust の初回設定と許可のルール	要らない。作った時点で非公開
入れる人の決め方	合言葉を知っている人	許可したメールアドレス	招待したメールアドレス
入る人に要るもの	合言葉	メールアドレス	claude.ai のアカウント
誰が来たか	分からない	分かる	分かる（ページから名前を引ける）
データ	D1 などを別に用意する	D1 などを別に用意する	付いている
URL	自分のドメインなど	自分のドメインなど	claude.ai/artifact/<ID>

いちばんの違いは、入る人の準備。Cloudflare Access はメールアドレスさえあれば入れるが、アーティファクトは claude.ai のアカウントを作ってもらう必要がある。仲間うちが全員 Claude を使っているなら、この条件は無いのと同じになる。

1. アーティファクトとは

1-1. 頼まなくてもアーティファクトになっているもの

アーティファクトを最初に見かけるのは、自分で頼んだときより、頼まなくてもアーティファクトになっていたときのほうが多い。

Claude Code は、文字のやり取りだけでは伝えにくい中身を、自分からアーティファクトにして見せることがある。Claudeデスクトップアプリなら、画面の右側に開く。いつもではなく、一時フォルダや作業フォルダにファイルを作って開くだけのこともある。次のような頼みごとで、アーティファクトが出てきた。

頼んだこと	出てきたページ
favicon やデザインの候補を相談した	候補を並べたページ。見比べて、どれにするかを決める
Web ページの流れ星の動きを調整したいと言った	値を動かしながら見た目を確かめるページ。決めた値を Claude Code に伝え、作っている Web ページに入れてもらう
積み立ての試算をグラフで見せてと頼み、「家族にもシェアして、話し合いの土台にしたい」と続けた	条件をスライダーで変えられる試算のページ
イベントのブースのレイアウトを3Dで確認したいと言った	ブースを立体で表示し、視点を切り替えられるページ
アンケートの判定とマッチングの仕組みを、図解で説明してと頼んだ	仕組みを図で説明した資料
「プレゼン資料にまとめて」	スライド

favicon の候補を相談したときに出てきたページ。6案を並べ、それぞれタブに入ったときの見え方と狙いを添えている

流れ星の動きを調整したいと言ったときに出てきたページ。同時に流れる数、流れる時間、尾の長さ、太さ、角度をスライダーで動かして決め、その値を Claude Code に伝えて、作っている Web ページに入れてもらった

ブースのレイアウトを3Dで確認したいと言ったときに出てきたページ。通路から・真上などの視点に切り替え、家具や人をドラッグで動かし、時間帯ごとの配置やポスターの大きさを見比べる

どれも、Claude Code に頼んだのはアーティファクトではなく中身のほう。見せ方として、Claude Code がアーティファクトを選んでいる。

どんなときにアーティファクトになるかは、試算の例で見えた。Claudeデスクトップアプリのチャットで「定年まで毎月積み立てたらいくらになるか、グラフで見せて」と頼むと、グラフは会話の中に出ただけだった。「家族にもシェアして、話し合いの土台にしたい」と続けると、そこで初めてアーティファクトとして公開され、「家族に見せるには、ページ右上の共有メニューからリンクを共有する設定をしてください」と添えられた。人に見せる・残すという話が出たところで、アーティファクトを選んでいる。

左が会話。グラフは会話の中に出ていて、「家族にもシェアして」と続けたところでアーティファクト（あなたのみ）が作られ、右に開いた

Claude Design で作ったデザインも、アーティファクトとして保存される。Claude Code はそのリンクから中身を読み、HTML にできる（→ WSP 2章）。

どの場合も、出てきた時点では自分しか開けない。この記事では、同じ仕組みを、人に見せる・人に使ってもらうほうへ広げる。

1-2. Claude が作ったページを claude.ai に置く

アーティファクトは、Claude が作った Web ページを claude.ai に公開したもの。URL は claude.ai/artifact/<ID> の形になる。

Claudeデスクトップアプリでは、セッションの右上の「⋮」から アーティファクト を開くと、そのセッションで作ったものが並ぶ（→ CDG）。

1-3. 作る人と使う人に要るもの

• 作る人：Pro 以上のプラン。メールでの招待もリンクでの共有も、無料プランには無い
• 使う人：claude.ai のアカウント。無料プランでよい（2026-10-23 に、無料のアカウントを招待して、開く、データを書く、まで確かめた）

作れる数とサイズの上限（2026-10-24 時点の公式の説明から）：

何の上限か	上限
作れるアーティファクトの数	書かれていない
ページ1枚の大きさ	16 MiB。超えるのはたいてい、画像を埋め込みすぎたとき
データの保存	アーティファクト1つにつき 20 MB。文字だけで、画像やファイルは入らない
データの1件	256 KiB

出典は Claude Code のドキュメント と Claude のヘルプ。データの1件の上限は、Claude Code に入っているアーティファクトの API の説明から。3章の役割分担表なら、データは役割5つと担当者で数 KB に収まる。

1-4. こちらから作る：頼み方

作ったページをアーティファクトにしてほしいと頼むだけでよい。

プロンプト

このページをアーティファクトにして。

公開の前に許可を求められる。手元のファイルを claude.ai に上げる、という内容なので、確かめてから許可する。公開されたアーティファクトは、まだ自分しか開けない。

スライドなら、/slides に続けて、何の資料かを書く。

プロンプト

/slides GitとGitHubの使い方の最初のハンズオン

Claude Slides のアーティファクトとして作られ、リンクが返ってくる。

上のプロンプトを Claudeデスクトップアプリの Claude Code で送ったところ。12枚のスライドが作られ、右側に開いた

パソコンのブラウザで開くと、そのまま直したり発表したりでき、PowerPoint や PDF にも書き出せる（→ Claude Code のドキュメント）。

Claudeデスクトップアプリでは、サイドバーの Artifacts を開くと、「新しいものを作成」にドキュメント、スライド、デザイン、ダッシュボードが並ぶ。ここから選んで作り始めることもできる。

サイドバーの Artifacts を開いたところ。上に作り始めるためのボタン、下にこれまでのアーティファクトが並ぶ

ダッシュボードを選ぶと Claude Code のセッションが始まり、そこで何を表示するかを頼む。手元にデータが無ければ、架空のデータで試せる。

プロンプト

サンプルとして、架空のネットショップの売上データをもとにしたダッシュボードを作って。
月ごとの売上の推移と、商品ごとの売れ行きが見たい。

上のプロンプトを送ったところ。Claude Code が架空の売上データ（sales.csv）を作って一緒に公開し、売上合計などの数字、月ごとの売上、商品ごとの売れ行きを並べた

2. 見せるだけのページ

2-1. どんなページに向いているか

1-1 で出てきたページは、どれも見せるだけのページ。データを持たないページは、たいていそのまま人に見せられる。

• 決める前に意見をもらう：候補を並べたページや Claude Design のデザインを、一緒に決める人に見せる
• 資料として渡す：試算のグラフ、仕組みの図解、レイアウトの3D表示、スライドを、関係者にだけリンクで渡す

2-2. 共有方法

アーティファクトを開き、右上の 共有 を押す。

• メールで招待する：メールアドレスを入れ、権限を選んで 招待を送信 を押す。権限は 編集者・コメント投稿者・閲覧者 の3つで、既定はコメント投稿者
• リンクで共有する：「一般アクセス」を「リンクを知っている全員」にする

リンクで共有したページは、Claude にログインしていないブラウザでも中身が見られた（2026-10-23 実測）。見せるだけのページなら、相手にアカウントが無くても渡せる。

2-3. 招待された人の流れ

招待された人には、英語のメール（件名は「You’ve been invited to edit an artifact」）が届く。View invitation を押し、招待されたメールアドレスで claude.ai にサインインすると、招待の画面が出る。承諾して開く を押せば開ける。

3. 決まった人たちだけで使うアプリ

3-1. 作るもの

D1P 3章と同じ役割分担表。空いている役割を1つ選ぶと自分の担当になり、誰がどの役割かが全員に見える。1つの役割に担当は1人。

オーナーの画面。「いまの自分」に、ページが claude.ai から引いた名前と、この人にできることが出る。招待された人の名前は伏せている

D1 版との違いは、名前を入れる欄が無いこと。招待した人しか開けず、開いている人の claude.ai の名前をページが引けるので、自己申告にしなくてよい。

3-2. 頼み方

プロンプト

役割分担表をアーティファクトで作って。
====
- 役割は、受付、タイムキーパー、写真係、会場の片付け、二次会の店探しの5つ
- 招待した人が、空いている役割を1つ取れる。1つの役割に担当は1人
- 誰がどの役割を担当しているかは、claude.ai の名前で全員に見える
- 同時に取ろうとしたら、後の人には「取られました」と出す
- 自分が取った役割は自分で外せる
- ページそのものは、ページのボタンから書き換えられないようにする

最後の1行の意味は 4-2 で扱う。

Claude は、データベース（db）、開いている人が誰か（user）、ページ自身による書き換え（artifact）の3つの機能を使うページを作る。どの機能を使うかは公開のときに claude.ai に登録され、ページの中のプログラムが後から増やすことはできない。

3-3. 使う人を「編集者」で招待する

役割を取る（データを書く）には、使う人を 編集者 で招待する。コメント投稿者や閲覧者では、ページは開けてもデータを書けない。

試した結果（右端の列は 2026-11-02、ほかは 2026-10-23）：

	オーナー（Pro以上）	無料・コメント投稿者	無料・編集者	Pro以上・編集者（組織外）
役割を取る（データを書く）	できた	断られた	できた	できた
ページのボタンから書き換える	できた	機能が渡されない	できた	止めたページで断られた
Claude Code からページを書き換える	できる	無料プランでは Claude Code が無い	無料プランでは Claude Code が無い	できた

右端の列は、組織外の Pro 以上のアカウントを持つ6人に、ページのボタンからの書き換えを止めたテスト用のページで試してもらった結果。Claude Code からの書き換えまで試した4人は、全員が新しい版を公開できた。最初にコメント投稿者で招待してしまった人は、Claude Code から「このアーティファクトには読み取り専用のアクセスしかない」と断られ、編集者に変えたあとは書き換えられた。

3-4. 同時に取ったらどうなるか

D1 版では、データベースの制約で「後から来た登録」を拒んだ（→ D1P 3-3）。アーティファクトのデータの置き場所には、その制約が無い。代わりに、書く前に短い時間だけ「いま自分が書いている」と確保する仕組みがある。確保してから空きを確かめ、空いていれば書く。

仕様に「同時に取ろうとしたら、後の人には『取られました』と出す」と書いておけば、Claude がこの仕組みを使う。

3-5. D1 版で諦めていたことが要らなくなる

D1P 3-4 では、認証が無いので「当日その場」に使い方を固定した。アーティファクトでは、そのうち2つが要らなくなる。

• 端末をまたいでも同じ人：claude.ai のアカウントで見分けるので、スマホで取った役割をパソコンから外せる
• 名前は自己申告ではない：ページが claude.ai の名前を引く。他人の名前で登録できない

だから、役割を事前に募る使い方もできる。

4. 編集者に任せるときの判断

4-1. 編集者はページも書き換えられる

編集者は、Wiki の編集者と同じ立場になる。データを書けるだけでなく、ページそのものを書き換える機能も使える。役割分担表なら、見出しやボタンを変えた新しい版を公開できてしまう。

仲間うちの役割分担表なら問題になりにくい。信頼できない相手を編集者にするのは避ける。

4-2. ページのボタンからの書き換えを止める

3-2 のプロンプトの最後の1行で、ページ自身のボタンから書き換える機能を止めた。こうすると、編集者でも役割は取れるが、ページのボタンからの書き換えは断られる（2026-10-23 実測。無料の編集者で確認）。

止まるのはページのボタンからの書き換えだけで、次の2つは止まらない。

• データの書き込み：ページがデータから表示している部分は、編集者が変えられる
• Claude を通した書き換え：組織外の Pro 以上の編集者は、自分の Claude Code から新しい版を公開できた（2026-11-02 実測。3-3 の表の右端の列）

ボタンを止めても、編集者に渡すのはページ全体になる。Pro 以上のアカウントを持つ人を編集者にするなら、ページも書き換えられる前提で招待する。

4-3. 公開リンクとは両立しない

招待した編集者にデータを書いてもらっている間は、リンクで共有しない。「一般アクセス」を「リンクを知っている全員」にすると、組織外の編集者はデータを書けなくなる（2026-10-23 実測）。共有メニュー上は「編集者」と出たままなので、使う人からは理由が分からない。

見せるだけのページはリンクで、データを書いてもらうアプリはメールの招待で、と分ける。

5. Cloudflare に移す

• claude.ai のアカウントを持たない人からデータを受け取る：参加者アンケート、ランキングゲーム。組織外の人は編集者で招待しないと書けないので、不特定の人に URL を配る用途には使えない（→ D1P、D1W）
• 自分のドメインで出したい、ページを自分の持ち物として置きたい：Cloudflare に置く。アーティファクトは HTML として書き出せるが、データベースなどの機能はそのままでは動かない
• サーバー側で検証したい：アーティファクトのデータは、誰がどこに書けるかまでは絞れるが、書く中身を検証するコードは置けない。ランキングの不正対策のような話は D1 側になる

6. 補足

6-1. アプリとしてインストールする

Mac の Chrome では、アーティファクト名の横の「∨」から Artifacts をインストール を選ぶと、Chrome のアプリとして入る。アドレスバーの無い専用ウィンドウで開く。中には claude.ai の上部バーがそのまま出る。

6-2. 招待された人が自分用に作り変える

招待された人は、同じメニューの 複製 で自分用のコピーを作れる。コピーは自分だけに見え、チャットを開始 から Claude に頼んで作り変えられる（無料プランでも確認）。元のアーティファクトは変わらない。

コピーの エクスポート からは、HTML・Markdown・PDF で書き出せる。

まとめ

• アーティファクトは、Claude が作ったページを claude.ai に置く仕組み。作った時点で非公開で、招待した人だけが開ける
• 見せるだけのページはリンクで共有でき、相手にアカウントが無くても見られる
• データを書いてもらうアプリは、使う人を編集者でメール招待する。使う人は無料のアカウントでよい
• 編集者はページそのものも書き換えられる。ページのボタンからの書き換えを止めても、Pro 以上の編集者は Claude Code から書き換えられる
• アカウントを持たない人から受け取るなら、Cloudflare にする