知識がなくても始められる、AIと共にある豊かな毎日。
AIコーディング

アーティファクトで作業場の計算を URL にする — ChatGPT Sites と何が違い、どこまで公開できるか

ゲンキ

※本記事にはアフィリエイト広告(PR)が含まれます。

原価の式は既にある。3Dプリントの原価を日本の電気代で計算し直す — 値付けの根拠を作る(2026-08-19 公開) で、材料・電気・機械・失敗率・手作業・梱包・送料・手数料の8要素に分解し、試算例まで置いた。足りないのは、その式を人に渡す形だ。表計算のファイルを送るか、数式を説明し直すか、そのたびに同じ手間がかかる。

作業場の計算を、URLで渡せる道具にする(2026-09-16 公開) では、この問題を ChatGPT の Sites で解く筋道を書いた。本記事は同じ問題を Claude Code のアーティファクトで解く。当サイトは実際に原価計算機を作り、非公開の URL に置いて、制約と公開範囲を確かめた。先に結論を書いておくと、当サイトはこのアーティファクトを読者に公開しない。読者向けの道具は当サイトの 3Dプリント原価計算機 をはじめ、サイト内の /apps/ で作って公開する方針だからだ。理由は本文で示す。

数値と版番号は 2026年9月17日に取得したもので、当サイトの環境は Claude Code 2.1.273、auto mode である。

忍者AdMax

アーティファクトとは何か

アーティファクトとは何か

文書の定義では、アーティファクトは、Claude Code がセッションから claude.ai 上の非公開 URL に公開する、1枚のインタラクティブな Web ページである。ブラウザで開くと、セッションが続く限り同じ URL でその場で更新される。共有したければ、ページのヘッダにある Share から行う。

閲覧は claude.ai の中の専用の領域で行われ、ページ自体はサンドボックス化された別のオリジン(*.claudeusercontent.com)から読み込まれる。claude.ai の会話画面で生成されるアーティファクトとは、監査ログのイベント種別やコネクタの管理設定を共有する同系統の仕組みで、Claude Code のセッションからも公開できるようになった、という位置づけだ。

向いているのは、ターミナルの文字より見て触ったほうが早い出力だ。文書が挙げる例は、注釈つきの差分でレビューを案内する、セッションが集めたデータのダッシュボード、複数の設計案の並置、長い作業の進捗を埋めていく時系列、そして Slack に貼る代わりのリンク。

逆に、向いていないものも文書は明確にしている。アーティファクトは作業の記録であり、バックエンドの無い自己完結の1ページなので、複数の経路を持つ Web アプリにはならない。社内ツールとして本格的に運用したいなら、自前の環境に配置するよう書かれている。

誰に見せられるか — プラン別の共有範囲

誰に見せられるか — プラン別の共有範囲

ここが本記事で最も壊れやすい箇所なので、表にする。

項目Pro / MaxTeamEnterprise
機能の既定使える(管理なし)既定でオンOwner が管理画面で有効化するまで使えない
作成直後作成者だけに見える同左同左
組織内の共有なし特定の人、または組織の全員同左
公開リンク唯一の共有手段Owner が有効化するまでオフ同左
編集者ロールなしありあり
コメントなしあり(v2.1.221 以降)あり

面の条件は、Claude Code CLI 2.1.183 以降、または Desktop アプリ 1.13576.0 以降で、/login で claude.ai のアカウントに入っていること(組織向けの Claude Tag のセッションは別枠)。API キー、ゲートウェイのトークン、クラウドプロバイダの資格情報では公開できない。モデルの経路は Anthropic API だけで、Amazon Bedrock・Google Cloud の Agent Platform・Microsoft Foundry では使えない。CMEK・HIPAA・ゼロデータ保持を有効にした組織も対象外だ。

当サイトは個人のプランで使っている。だから当サイトにとって、アーティファクトを人に見せる方法は公開リンク一つしかない。「チームの中だけで共有」という選択肢は存在しない。この点は Sites との比較で効いてくる。

公開リンクで見る人に表示されるもの

公開リンクで見る人に表示されるもの

公開リンクは、claude.ai にサインインしていなくても誰でも開ける。そのとき、ページには作成者の名前ではなく「Content is user-generated and unverified.」(利用者が生成した内容であり、検証されていない)という表示が出る。組織内で共有した場合は、サインインした閲覧者に作成者の名前が見える。

読者に渡すなら、この表示を伴うことを記事の側で先に書く必要がある。当サイトの名前で配る道具ではなく、Claude Code で作られた匿名の1ページとして届くからだ。Sites のように自分のドメインを当てる仕組みは、文書には無い。当サイトが公開リンクにしない理由の一つがここにある。

1枚の静的ページという制約

1枚の静的ページという制約

アーティファクトは、公開時に HTML の骨組みに包まれ、厳格な Content Security Policy の下で配信される。制約は文書に表で整理されている。

制約内容
外部リソーススクリプトは cdnjs・Tailwind の CDN・jQuery の CDN・jsDelivr の一部パスだけ。フォントは Google Fonts だけ。外部の画像・スタイルシートは全て不可。fetch・XHR・WebSocket は自分のオリジンと Google Fonts のホストにのみ可
バックエンド無し。閲覧者を自分で認証できない
ダウンロードページ自身からは始められない。「downloads」の capability を宣言し、それが有効なアカウントでだけ使える
ページ数1枚。相対リンクは解決されない
ソースの形式.html・.htm・.md。UTF-8 で書く(BOM 付きの UTF-16 LE も受け付ける)
描画後のサイズ16 MiB 以下

つまり、計算機のようなものを作るときは、CSS も JavaScript も1ファイルに同梱し、画像は埋め込みにする。ライブラリが要るなら上記の CDN から読む。当サイトの計算機はライブラリを使わず、フォントだけ Google Fonts から読んだ。

生成の費用にも触れておく。装飾されたページはターミナルの文字より出力トークンを多く使い、埋め込み画像がその主因だと文書は書いている。図はラスタ画像ではなく SVG か HTML と CSS で描き、不要な対話要素を付けず、大きなデータは要約する、という三つが節約の指針だ。

閲覧者のコネクタで動く

閲覧者のコネクタで動く

アーティファクトには、閲覧時に MCP のコネクタを呼んで最新のデータを表示する能力がある(v2.1.209 以降)。GitHub のコネクタで開いている PR の一覧を出す、といった使い方だ。

仕組みで重要なのは、呼び出しが閲覧者自身のアカウントで行われること。作成者のコネクタではない。閲覧者は最初にページに許可を求められ、断るか、そのコネクタを繋いでいなければ、その部分は空のまま表示される。だから同じページを二人が開いても、アカウントの権限次第で見えるものが変わりうる。ページは誰の資格情報も見ず、claude.ai が代わりに呼ぶ。

この設計の帰結として、コネクタを呼ぶアーティファクトはどのプランでも公開リンクにできない。Pro/Max では作成者専用のままになる。当サイトの計算機にコネクタを付けなかったのはこのためだ。Team/Enterprise では、Artifacts のトグルとは別に「Enable artifact connectors」という管理設定があり、オフの組織では閲覧者にライブの部分が空で表示される。

Sites との違いを表にする

Sites との違いを表にする

Sites の記事で確定した事実と並べる。

観点ChatGPT SitesClaude Code アーティファクト
位置づけ公開ベータ。Plus・Pro・Business・Enterprise・EduPro・Max・Team・Enterprise。CLI 2.1.183 / Desktop 1.13576.0 以降。claude.ai アカウントでログインし、モデルの経路は Anthropic API
作成直後の閲覧範囲所有者とワークスペース管理者のみ作成者のみ
一般公開可(Enterprise は管理者の有効化が必要)Pro/Max は公開リンクが唯一の共有手段。Team/Enterprise は Owner が有効化するまで不可
バックエンドあり(データベース 10 GB とオブジェクトストレージ)無し。静的1ページ
外部データサイト側の実装による閲覧者自身のコネクタ経由。付けると公開不可
独自ドメイン条件つきで可記載なし
禁止用途保健情報・カード決済・13歳未満・金融取引(第三者の決済プロバイダー経由の販売を除く)ほか文書に列挙なし

二つは、同じ「URL で渡す」でも性格が違う。Sites はホストされた小さな Web アプリで、データを持ち、ドメインを当てられる。アーティファクトはセッションの出力を固めた1枚で、持てるのは表示と計算だけだ。原価計算機のように入力を受けてその場で計算するだけの道具なら、後者で足りる。注文を受けて記録するような道具なら、前者の領域になる。

当サイトで作った — 3Dプリント原価計算機

当サイトで作った — 3Dプリント原価計算機

9月17日、当サイトは 原価の記事の式をそのまま使って計算機を作り、非公開のアーティファクトとして公開した。

構成は三段だ。左に8要素の入力欄。要素ごとに枠を分け、式か注記を1行で添えた。右に結果。内訳の表は 原価の記事の試算表と同じ行構成で、材料費・電気代・機械費・直接費小計・失敗率込み・後処理・梱包資材・送料・手数料・合計の順に並ぶ。その上に、手間賃込みの原価と手間賃なしの原価を二つ並べた。原価の記事で「赤字かどうかの下限」と「続ける価値があるかの基準」として二通りを持つよう勧めたので、その二つをそのまま置いている。最後に、目標粗利率から売価を逆算する欄。手数料が売価に連動するため、原価を単純に割ると狙った率に届かないという 原価の記事の指摘を、検算つきで示す。

初期値は 原価の記事の試算例をそのまま入れた。1kg 3,000円、80g、上乗せ15%、120W、5時間、31円/kWh、本体80,000円、想定稼働2,000時間、成功率90%、後処理15分を時給1,200円、梱包60円、送料240円、売価2,000円、手数料10%、目標粗利率40%。読者は自分の数字に置き換える。入力値はどこにも送信されない。

外部から読み込むのは Google Fonts の2書体だけで、スクリプトは全て同梱した。コネクタもダウンロードの capability も宣言していない。前者は公開リンク化を妨げないため、後者はアカウント単位で有効化される機能で、当サイトの環境で使えるか確認していないためだ。

式を道具にするときに決めたこと

式を道具にするときに決めたこと

式があっても、入力欄にするときに決めなければならないことが四つあった。

単位と刻み。 使用量はグラム、電力はワット、時間は時間、価格は円。入力欄の刻みは、フィラメント価格なら10円、電力なら5W、時間なら15分にした。細かすぎる刻みは入力を億劫にし、粗すぎる刻みは実際の値を入れられなくする。原価の記事の試算例が置いた値がそのまま入る刻みを基準にした。

既定値の出所。 空の入力欄から始めると、道具が何をするのか最初の一瞬で伝わらない。記事の試算例を既定値として入れておけば、開いた瞬間に「この数字でこの原価」という関係が見え、あとは自分の数字に置き換えるだけになる。既定値が記事の値であることは、ページの冒頭に明記した。

二通りの原価。 原価の記事は、手間賃を含めない原価を「赤字かどうかの下限」、含めた原価を「続ける価値があるかの基準」として両方持つよう勧めた。計算機でも二つを並べて表示し、片方だけを合計と呼ばないようにした。粗利率の表示は手間賃込みの側で計算し、赤字なら色を変える。

逆算の検算。 目標粗利率から売価を出す式は、売価に連動しない原価を(1 − 手数料率 − 目標粗利率)で割る。答えだけ出すと、なぜ原価を単純に割ってはいけないのかが伝わらないので、逆算した売価での手数料・原価・粗利を検算として並べた。手数料率と目標粗利率の合計が100%以上だと分母がゼロか負になるので、その場合は売価が定まらない旨を表示する。

こうした判断は、式の側には書かれていない。道具にするときに初めて決まる。逆に言えば、道具を作る過程で、記事に書いていなかった前提(丸めの順序、既定値の出所)が可視化された。

検算 — 原価の記事の試算例と一致するか

検算 — 原価の記事の試算例と一致するか

計算機の値が記事の値と食い違えば、道具として渡せない。初期値のまま開いた状態で確認した。

項目原価の記事計算機
原価(手間賃込み)1,350円1,350円
原価(手間賃なし)1,050円1,050円
粗利(売価2,000円)650円(32.5%)650円(32.5%)
目標粗利率40%の売価2,300円2,300円

一致させるために、一つだけ計算の順序を合わせた。原価の記事の試算は各行を円に丸めてから積み上げている(電気代 0.6kWh × 31円 = 18.6円を 19円とし、丸めた 19円で足すので直接費小計は 495円。丸めずに足せば 494.6円になる)。計算機も各行を円に丸めてから合計する。丸めずに小数のまま合計すると、逆算売価が 2,299円になり、記事と1円ずれる。道具は記事の値を再現するべきで、記事の側が丸め方を決めている以上、道具がそれに従う。

公開の手続きと権限モード

公開の手続きと権限モード

公開は権限モードに従う。auto mode では分類器が公開を審査し、確認のプロンプトは出ない。manual と accept edits では「Claude wants to publish …(Anthropic のサーバーにアップロードし、共有するまでは自分だけに見えるページとしてホストする)」という確認が出て、Yes を選ぶ。一度承認すると再公開は確認なしになるが、capability を新たに宣言したときや、公開リンクにした後は、もう一度確認される。

当サイトは auto mode なので、計算機は確認のプロンプト無しに公開された。文書は、出力がページに向いていると判断すれば Claude が自分の判断で公開することもある、とも書いている。ここで慌てる必要が無いのは、作成直後の閲覧範囲が作成者だけだからだ。外に出るのは Share を押した後であり、その操作は人の手にある。

公開後は URL が表示され、ブラウザが自動で開く。開かせたくなければ CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0。/artifacts で自分の全アーティファクトと共有されたものを一覧でき(v2.1.208 以降)、Ctrl+] で最新のものを再表示する。

更新と版

更新と版

同じセッションで修正を頼めば、同じ URL に再公開される。開いている人には、その場で更新が届く。公開のたびに版が作られ、Share の画面でどの版を見せるかを選べる。別のセッションから更新したいときは URL を渡すか /artifacts で添付する。渡さなければ、新しいアーティファクトが別に作られる。

当サイトの計算機は、梱包資材の枠に注記の行を足した版2で、公開リンクにはしていない。しない理由は次の節で書く。

コメントと編集者 — Team/Enterprise だけ

コメントと編集者 — Team/Enterprise だけ

組織内で共有したアーティファクトには、閲覧者がコメントを付けられ、Claude にそのコメントを読ませて返信させられる(v2.1.221 以降)。編集者ロールを与えれば、相手のセッションから同じ URL に再公開できる。セッションが続く間、Claude は自分が公開したアーティファクトのコメントを見張り、権限モードが許せば自分で返信する(v2.1.228 以降)。1時間に60件を超えると自動返信は止まる。

これらは全て Team と Enterprise の機能で、公開リンクではコメントできない。個人のプランでは、読者から意見を集める経路は別に用意する必要がある。

当サイトが公開リンクにしない理由

当サイトが公開リンクにしない理由

作った計算機は動く。それでも当サイトは公開しない。読者向けの道具は、サイトの /apps/ に置く方針だからだ。すでに 3Dプリント原価計算機 をはじめ、印刷時間や流量の計算機をそこで公開している。

判断の材料は、本記事でここまでに書いた制約そのものである。公開リンクのページは当サイトの名前を持たず、「利用者が生成した内容で検証されていない」という表示を伴う。自分のドメインは当てられず、検索にも当サイトのページとして載らない。コメントは付けられず、版が上がれば読者の見た画面と記事の画面が食い違う。道具を読者に渡すなら、当サイトの名前で、当サイトのドメインで、当サイトが更新を管理できる場所に置くほうがよい。/apps/ はそのためにある。

ではアーティファクトの出番はどこか。作る過程を検証する場所と、自分と、自分の周りの少人数のための道具である。当サイトにとって今回の計算機は、原価の記事の式が入力欄と結果表に落ちるか、丸めの順序をどう合わせるか、どの制約に当たるかを確かめる試作だった。試作としては十分に役に立ち、その結果を /apps/ 側の道具の改善に回せる。

それでも公開リンクにする人のために、記事の側に書いておくべき四つのことを残す。

一つ目は、ページに何が表示されるか。作成者の名前は出ず、「利用者が生成した内容で検証されていない」という表示が付く。読者がそれを見て不審に思わないよう、先に説明しておく。

二つ目は、入力した数字がどこにも送られないこと。バックエンドが無く、ページからの通信は自分のオリジンと Google Fonts にしか届かない。原価や売価は人に見せたくない数字であることが多いので、ここは明確に書く。Sites の記事で規約を読んだときに確認したとおり、閲覧者の個人データを集めるページは作成者がデータ管理者としての責任を負う。何も集めないページは、その責任の外にいる。

三つ目は、既定値が記事の試算例であって、読者の実態ではないこと。電気単価の31円/kWh は全国家庭電気製品公正取引協議会の目安で、実際の料金は契約先で違う。送料と手数料率は各社の最新の表で確認する。道具は式を代わりに計算するだけで、数字の正しさは入れた人の側にある。

四つ目は、更新される可能性。同じ URL のまま版が上がるので、記事に書いた画面と読者が開いた画面が違うことがある。版の番号を記事に書いておけば、差があるときに気づける。

3Dプリントの作業台で何を URL にするか

3Dプリントの作業台で何を URL にするか

原価計算機は一例で、同じ形の道具は他にもある。大量印刷を前提に設定を決める — 時間・材料・失敗率の見積り(2026-09-02 公開) の見積りは、個数と1個あたりの時間と失敗率を入れれば所要と材料が出る計算機になる。採寸の記録から収まりを判定する道具も、寸法を入れて公差を引くだけなら1枚で済む。

共通する条件は、式が既にあり、入力を受けてその場で計算し、何も保存しないことだ。記録を残したい、注文を受けたい、複数の人の入力を集めたい、となった時点で、静的1ページの外に出る。そこは Sites か自前の環境の領域で、アーティファクトで無理に作らない。

まとめ

まとめ

アーティファクトで計算を URL にするとき、確かめる順序は次のとおりだ。

  1. 作成直後は自分だけ。外に出るのは Share を押した後
  2. Pro/Max では公開リンクが唯一の共有手段。閲覧者には「利用者が生成した内容で検証されていない」と表示される
  3. コネクタを付けると公開できない。付けるなら組織内共有の前提で
  4. 静的1ページ。CSS も JavaScript も同梱し、外部は指定の CDN と Google Fonts だけ。16 MiB 以下
  5. auto mode では確認なしに公開される。既定が非公開なので実害は無いが、知っておく
  6. 道具は記事の値を再現する。丸め方まで合わせて検算する

当サイトの計算機は、8要素の入力と二通りの原価、逆算売価を1枚に収め、原価の記事の試算例を再現した。式を持っている人にとって、道具にする手間はもう大きくない。決めるべきは、誰に、どの範囲で渡すかのほうだ。

Claude Code を体系的に押さえたい場合の入門書の例。本シリーズは公式ドキュメントを一次情報にしているので、書籍は補助線として。

¥3,300 (2026/09/19 12:35時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場

出典・参考

ブラウザだけでできる本格的なAI画像生成【ConoHa AI Canvas】
ABOUT ME
swiftwand
swiftwand
AIを使って、毎日の生活をもっと快適にするアイデアや将来像を発信しています。 初心者にもわかりやすく、すぐに取り入れられる実践的な情報をお届けします。 Sharing ideas and visions for a better daily life with AI. Practical tips that anyone can start using right away.
記事URLをコピーしました