Claudeアーティファクトで社内ツールを作る方法と共有のしかた｜チェック113項目のガイドを同じURLで更新し続ける【2026年】

Claudeのアーティファクトで社内ツールを作るとき、僕に必要だったのは開発の環境ではなく、HTMLファイル1枚と共有メニューでした。最初は自分だけが見られる状態で公開し、社内に渡すときだけ共有を設定し、直したら同じURLに公開し直します。この3つを決めておけば、エンジニアがいなくても手順書をツールとして配れます。

2026年7月11日、僕は社内向けの広告の出稿ガイドを、全11章・チェックリスト113項目のHTML1本にまとめました。それをClaude Codeからアーティファクトとして公開し、社員が見ながら作業する前提のページにしています。

この記事では、公開までの流れ、プラン別の共有の範囲、同じURLのまま直す手順、社内ツールにするときの注意を書きます。「Claudeで手順書を作ったけれど、どう配って、どう直し続ければいいの？」と迷っているあなたに向けた記事です。

Claudeアーティファクトは「1枚のHTML」を社内ツールにする置き場

Claudeのアーティファクトは、Claudeが作ったWebページをclaude.aiの上に置き、リンクで開けるようにする機能です。社内ツールとして見ると、サーバーを用意せずに手順書やチェックリストを配れる置き場になります。

アーティファクトには、claude.aiのチャットで作るものと、Claude Codeのセッションから公開するものがあります。英語の画面や公式ドキュメントでは「Claude Artifacts」と呼ばれています。

公式ドキュメントでは、アーティファクトとは、セッションからclaude.aiの非公開URLに公開される、操作できるWebページのことです。開いておくと、セッションが進むにつれてその場で更新されます。

ただし、何でも載せられるわけではありません。公式の制約をもとに、社内ツールとして向くものと向かないものを分けると、次の表になります。

僕の会社の出稿ガイドは、読む・チェックを入れるだけのページなので、左の列に収まりました。公式も、バックエンドのある社内ツールは自前の環境に置くよう案内しています。

僕の会社の出稿ガイド：全11章・チェック113項目をHTML1本に収めた

2026年7月11日に作った出稿ガイドは、全11章とチェックリスト113項目を、HTMLファイル1本に収めています。社員が見ながら作業する前提の社内用ページで、誰がやっても同じ手順で出稿できることを目的にしました。

本体のHTMLが唯一のソースで、ほかに原稿やデータのファイルはありません。社内の説明書（README）にも「単一HTMLで完結、これが唯一のソース」と書いています。

2026年10月24日にファイルを数え直すと、約12万5千文字のHTMLでした。章は11個のsection要素に分かれ、チェック項目は17個のリストに合わせて113項目です。7月11日の作成時の記録とも数が一致しています。

章立ては「受注から運用まで」の順

章は、仕事の流れの順に並べています。最初に全体のマップ、次に配信までの準備が7章、守るべきルールの章と運用の章が1つずつ、最後に出稿前の最終チェックです。

各章の中身は、社内の過去の案件の記録と、2026年7月時点の公式の仕様の調査をもとに書きました。この記事では、作り方と共有・更新のしかたに絞り、出稿の中身には触れません。

章はsection単位、目次はページ内のアンカー

章はHTMLのsection要素で区切り、ch00からch10までの番号を振っています。更新ルールでも、直すときは章のsection単位で編集すると決めています。

目次は、同じページの中のリンク（#ch01 のようなアンカー）で各章へ飛ぶ作りです。公式の制約でも相対リンクは解決しないので、ページを分けずに1枚の中で章を行き来させる形が合っています。

スクロールに合わせて、いま読んでいる章が目次で強調される仕掛けも、ページの中のスクリプトだけで動かしています。外から読み込むスクリプトやスタイルシートは使っていません。

Claudeアーティファクトの使い方：Claude Codeで作って公開するまで

Claude Codeで使うなら、claude.aiのアカウントでログインしたセッションで、ページにしたい内容を頼むだけです。公開するとURLが表示され、ブラウザで新しいページが開きます。

始める前に、使える条件を確かめます。2026年10月時点の公式ドキュメントでは、条件は次のとおりです。

• プラン：Pro・Max・Team・Enterprise
• ログイン：/login でclaude.aiのアカウントにサインインしたセッション。APIキーやクラウド事業者の認証で動かしているセッションは公開できない
• 使う場所：Claude CodeのCLIか、デスクトップアプリ。-p で動かす非対話の実行などでは、既定で使えない

公開までの手順

1. 頼む：「このチェックリストをアーティファクトにして」のように、機能の名前か見た目を言葉で伝えます。
2. 置き場所を決める：場所を指定しないと、Claudeはプロジェクトの外の一時フォルダにHTMLかMarkdownを書いてから公開します。社内ツールにするなら、元のファイルの置き場所を自分で指定しておきます。
3. 開いて確かめる：最初の公開の後にURLが表示され、ブラウザが開きます。この時点では自分にしか見えません。
4. あとから開き直す：Ctrl+] でそのセッションの最新のアーティファクトが開き、/artifacts で自分のアーティファクトの一覧が出ます。

僕の会社の出稿ガイドは、2の置き場所を最初から決めた例です。元のHTMLは社内の資料の置き場に置き、公開する前に手元のブラウザで表示を確かめる方法も説明書に書いています。

Claude Codeは、計画を立てるモードの最中や、定期実行のタスクから公開するときなどは、公開の前に確認を求めます。社内ツールを自動の処理から作り直すときは、この確認で止まる前提で組みます。

Claude Codeそのものの始め方は、Claude Codeの使い方（インストールから最初の1週間まで）に書いています。

Claudeアーティファクトの共有：最初は非公開、渡せる範囲はプランで違う

Claudeアーティファクトは、作った直後は自分だけが見られます。ヘルプセンターも、共有するまで何も外に出ないと説明しています。社内に渡すときは、ページ上部の共有（Share）から相手と範囲を選びます。

僕の会社の説明書にも、既定は非公開で、社員に見せるときはページ右上の共有メニューから設定する、と書いています。共有の範囲はプランで変わるので、公式の記載を表にしました。

社内ツールとして配るなら、Team・Enterpriseの「組織の中だけ」がいちばん素直です。見る人は組織のメンバーとしてclaude.aiにサインインし、公開した人の名前もページで分かります。

Pro・Maxで「リンクを知っている人」にすると、リンクが外へ渡れば誰でも開ける状態になります。社内の手順書でも、外に出て困る中身があるなら、この設定は避けた方が安全です。

共有した相手に渡せる権限

ヘルプセンターでは、権限は「閲覧のみ」「コメント可」「編集可」の3つで、種類によっては閲覧と編集の2つだけです。Claude Codeのドキュメントでは、Team・Enterpriseで相手を閲覧者から編集者に切り替えられます。

組織の中で共有したページには、コメントも付けられます。社員が「この手順が画面とずれている」とページの上で書き込めるので、更新の依頼の窓口にも使えます。

アカウントが要るかどうかは、説明が分かれている

ヘルプセンターでは、共有したアーティファクトは原則として全員にClaudeのアカウントが要り、例外は公開したチャットのものだけです。Claude Codeのドキュメントは、公開リンクならサインインなしで開けるとしています。

2026年10月24日時点では、2つの説明の書き方が一致していません。社外の人に渡す前は、相手の環境で開けるかを一度確かめると確実です。

公開したページが検索に出てしまったときの対処は、Claudeの共有リンク・公開Artifactが検索に出る時の対処に分けて書いています。

同じURLのまま更新する：別の会話からはURLを渡すのが決まり

アーティファクトを直すときは、元のHTMLを編集して、同じURLに公開し直します。同じ会話ならそのまま再公開すればURLが保たれ、別の会話からはURLを渡して更新を頼みます。

公式ドキュメントでも、Claudeは元のファイルを編集して同じURLに公開し直すと説明されています。ページを開いている人の画面はその場で更新され、公開のたびに版が残ります。共有の設定から、見せる版を選ぶこともできます。

別の会話から直すと、新しいURLになることがある

別のセッションから更新するときは、アーティファクトのURLを渡すか、/artifacts の一覧から今のセッションに紐づけます。どちらもせずに頼むと、新しいセッションは別のアーティファクトを作ります。

社員に配ったリンクは、古いまま残ります。だから僕の会社の説明書には、公開したURLを書いておき、別の会話から直すときはそのURLを渡す、と決めています。

出稿ガイドの更新ルール4つ

説明書に書いている更新ルールは、次の4つです。

1. 本体のHTMLを直接編集する（章はsection単位）
2. Claude Codeに「ガイドを更新して再公開」と頼み、同じURLのまま出し直す（別の会話からは説明書のURLを渡す）
3. 管理画面の仕様が変わって記述とずれたら、気づいた人が佐藤に報告し、ガイドを更新する
4. 新しい成功例や失敗は、社内のナレッジにノートを作ってから、該当する章にも反映する

3と4は、ガイドを作った人だけが直すのではなく、使う人が気づいた点を戻す流れです。元の記録をナレッジ側に残してから章に反映するので、ガイドの文だけが一人歩きしません。

公開済みのページを直すときの確認

誰でも開ける形で公開したアーティファクトは、Claude Codeが変更の前に、会話ごとに1回確認を求めます。

Team・Enterpriseで編集者が先に新しい版を出していたときは、古い写しをもとにした公開は断られ、Claudeが新しい版に変更を重ねて出し直します。

チェックの状態はlocalStorageへ：見る人のブラウザごとに残る

出稿ガイドのチェックリストは、ページの中のスクリプトが、チェックの状態をブラウザのlocalStorageに保存しています。サーバーには送らないので、ほかの社員のチェックとは混ざりません。

ここでいうlocalStorageとは、Webページが見る人のブラウザに小さなデータを残しておける保存場所です。同じブラウザでページを開き直すと、前に入れたチェックが戻ります。

HTMLは普通の箇条書き、チェックボックスは後から差し込む

HTMLの中では、チェック項目は普通の箇条書きとして書いています。ページを読み込んだときに、スクリプトが各項目へチェックボックスを差し込み、保存済みの状態を読み戻す作りです。

この形だと、項目を足すときはHTMLの箇条書きに1行足すだけで済みます。保存のための名前は項目ごとに章の番号と順番から作り、保存全体の名前には版番号を付けています。

<script>
// 例：チェックの状態をブラウザに保存する最小の形（実際のガイドのコードではない）
var KEY = "guide-checks-v1";
var saved = {};
try { saved = JSON.parse(localStorage.getItem(KEY) || "{}"); } catch (e) {}
</script>

読み書きは try と catch で包んでいます。ブラウザの設定で保存できない環境でも、チェックが残らないだけで、ページの表示は崩れません。

上部には「何項目中いくつ済んだか」の進み具合の棒も出しています。113項目のうちどこまで終わったかが、章を行き来しても分かります。

この作りでできないこと

ブラウザの保存場所なので、別の端末や別のブラウザで開くと、チェックは空の状態から始まります。閲覧データを消したときも消えます。

チーム全員の進み具合を1か所で見たい用途には、この作りでは足りません。出稿ガイドは「一人ひとりが自分の作業で使うチェック」と割り切って、今の形にしています。

社内ツールとして配る前の注意：公開範囲・中身・置けないもの

社内ツールとして配る前に確かめたいのは、誰が見られるか、ページに何が入っているか、ページに置けないものは何か、の3つです。

公開範囲：最初の非公開を崩さない

僕の会社では、2026年7月28日に作り直した社内ルールで、アーティファクトは非公開を既定にしています。外に出すのは汎用の中身だけで、公開する前に中身を必ず読むと決めています。

Team・Enterpriseでは、外への公開はOwnerが有効にするまでオフです。Ownerは組織の設定から、アーティファクトそのものをオフにしたり、保存期間を決めたりもできます。

中身：顧客名・連絡先・鍵を入れない

社内向けのページでも、顧客の名前、個人の連絡先、パスワードやAPIキーは入れない方が安全です。共有の設定を間違えたとき、リンク1本で中身ごと渡ってしまうからです。

Claude Codeは、場所を指定しないと一時フォルダにページを書きます。本体のファイルを自分の置き場に持っておくと、公開する前に中身を読み返して確かめやすくなります。

置けないもの：外部の画像と、自前のサーバーの処理

公式の制約では、ページが読み込めるのはGoogle Fontsの書体と、決められた5つの公開CDNのスクリプトだけです。外部の画像は表示されないので、画像はページに埋め込みます。

フォームの送信先を自社のサーバーにする、閲覧者ごとにログインさせる、といった処理はできません。そこまで要るなら、アーティファクトではなく自社のサーバーに置くツールとして作ります。

僕の会社では、写真のナンバーをAIで見つけて隠すツールを、自社のレンタルサーバーに置く静的なページとして作りました。作り方はonnxruntime-webでブラウザだけでAI推論する作り方に書いています。

手順書を毎回同じ形で作らせたいなら、作り方そのものをスキルにしておく方法もあります。

Claude Skillsの作り方と、社内で使われた14本に、僕の会社のスキルの使われ方をまとめています。

まとめ

• Claudeアーティファクトは、HTML1枚の手順書やチェックリストを、サーバー無しで社内に配れる置き場になる
• Claude Codeから公開するにはPro以上のプランと、claude.aiのアカウントでのログインが要る（2026年10月時点）
• 作った直後は自分だけが見られる。社内に渡す範囲は共有メニューで選び、選べる範囲はプランで違う
• 直すときは元のHTMLを編集して同じURLに公開し直す。別の会話からはURLを渡さないと新しいURLになる
• 僕なら最初に、いまチャットや紙で配っている手順書を1枚のHTMLにして、非公開のまま自分で使ってみるところから始めます