Claude Artifacts をローカルで動かす:インストール不要の HTML ルート(2026)
すべての Claude Artifact は、依存関係を全部含んだ単一の HTML ファイルです。このガイドでは、コードのコピー、.html としての保存、ダブルクリックで実行、という書き出しの全工程を解説し、さらに Artifact 付属のダウンロードボタンを使う近道と、React Artifact を Vite で動かす方法まで扱います。
30 秒でわかる要約
- Claude Artifact の正体は単一ファイルの HTML です。左にチャット、右に完全なコードパネル。Claude の外で動かすのに必要なものは、すでに画面の上にあります。
- コピールート:コードをすべて選択して新しいテキストファイルに貼り付け、拡張子 .html で保存してダブルクリックすれば、既定のブラウザで Artifact が開きます。
- ダウンロードルート:Claude の Artifact カードには Download ボタンが用意されていて、ワンクリックで .html ファイルをダウンロードフォルダに保存できます。コピー＆ペーストすら不要です。
- 拡張子に注意:メモ帳は既定で .txt で保存しますが、ブラウザは .txt を Web ページとして描画しません。「.html として保存」するこの一手こそが、動かすためのスイッチです。
Make an HTML File from a Claude.ai Game File
チャンネル:Karl Kapp1:53
このガイドは動画で実演された手順をオリジナルの図解ステップとして書き起こしたものです。スクリーンショットはその録画から抽出し、それぞれ撮影時刻へのリンクを付けています。
FAQ で紹介する Vite + React + shadcn/ui ルートは、Matt Palmer 氏の「Editing Claude Artifacts locally with Vite, React, and Shadcn/ui」によるもので、第 2 のソースとしてクレジットしています。
ステップごとに、Artifact を Claude の外で動かす
- 1
Artifact のコードパネルを開く
Claude で Artifact を含む会話を開き、コードパネルを広げてチャットとソースコードを左右に並べます。探すのはスタイルもスクリプトもまとめた、途切れのない 1 枚の HTML ドキュメントです。この 1 ファイルこそがアプリの全部だからです。
左にチャット、右に Artifact の HTML ソース。この 1 ファイルがすべてです。0:02 に視聴 - 2
コードパネルの Copy ボタンを見つける
コードパネルのヘッダーには Artifact 名と HTML タグ、そして Copy ボタンが並んでいます。ワンクリックで現在のバージョンのソース全体をコピーでき、手動での範囲選択は不要です。
Copy ワンクリックで、現行バージョンの完全なコードを取得できます。0:08 に視聴 - 3
書き出す前にプレビューで試遊する
プレビューに切り替えて、実際にアプリを動かしてみましょう。この例は光点を集めて敵の円を避けるクイズミニゲームで、スコア板と問題ポップアップ付きです。現在のバージョンの操作感が期待どおりか確認します。プレビューで動いているものが、そのまま書き出されるものです。
プレビューはこれからコピーするバージョンそのもの。まずここで試しましょう。0:20 に視聴 - 4
HTML ソースを丸ごとコピーする
コードパネルを先頭の DOCTYPE から末尾の script タグまでスクロールして内容が欠けていないか確認し、すべてコピーします。貼り付け後に動かないときは、コピー漏れが最初の疑問符です。
DOCTYPE から最後の script タグまで。コピーは完全に。0:30 に視聴 - 5
デスクトップに新しいテキストドキュメントを作る
Windows のデスクトップの空きスペースを右クリックし、「新規作成」から「テキストドキュメント」を選びます。コードを受け取る空ファイルの完成です。エディタのインストールは不要で、メモ帳で十分です。
デスクトップを右クリック → 新規作成 → テキストドキュメント。必要なのはメモ帳だけ。0:47 に視聴 - 6
空のファイルをメモ帳で開く
新規ドキュメントをダブルクリックすると、カーソルが 1 行 1 列目にある空の状態でメモ帳が開きます。裏には Claude のタブを開いたままにしておきましょう。このあと 1 分ほど、両者を行き来することになります。
1 行 1 列目の空のメモ帳。裏では Claude が待機中です。0:55 に視聴 - 7
Artifact のコードをファイルに貼り付ける
コピーした内容をすべて貼り付けます。ファイルには即座に HTML と JavaScript が並びます。この例ではキャンバスゲームの描画ヘルパーとメインループです。途中で切れているように見えたら、ステップ 4 に戻ってコピーし直しましょう。
Artifact の中身が、あなたの PC 上のプレーンテキストファイル 1 つに収まりました。0:57 に視聴 - 8
.html 拡張子で保存する
「ファイル → 名前を付けて保存」を開き、.html で終わる名前を付けます。ダイアログの「ファイルの種類」はテキスト文書のままでも構いません。決めるのは名前に打ち込む .html のほうです。ブラウザは HTML と認識できるページしか描画しないのです。
名前がすべてを決めます。game.html は動き、game.txt は動きません。1:01 に視聴 - 9
上書き警告は名前の変更で回避
Windows に「ファイルが既に存在します」と警告されたら「いいえ」を選んで新しい名前にします。動画では先に game.html を保存済みのため、2 回目の書き出しは game2.html になります。名前を変えておけば各バージョンがディスクに残り、上書きされません。
上書きは「いいえ」、名前は game2.html。先の書き出しはそのまま残ります。1:07 に視聴 - 10
ファイルをダブルクリックして遊ぶ
デスクトップに保存したファイルをダブルクリックします。file:/// アドレスから既定のブラウザで開かれ、ゲームのスタート画面・スコア・敵の円が、Claude の中とまったく同じように動きます。サーバーも claude.ai のタブも不要です。
file:///...Desktop/game2.html — Artifact は完全にあなたの PC 上で動いています。1:32 に視聴 - 11
近道:Claude 専用の Download ボタンを使う
手動コピーだけが道ではありません。Claude は Artifact カードの下に Download ボタンを表示します。セットアップガイドのような別ファイルや Download all が並ぶこともあります。ワンクリックで .html がダウンロードフォルダに直行し、メモ帳は登場しません。
Artifact カードの Download ボタンで .html を直接保存。コピペ不要です。1:44 に視聴 - 12
ダウンロードした中身を確認する
ブラウザのダウンロード一覧に、書き出されたファイルが並びます。ここでは約 20 KB の DKapp_Game_Revised.html。どれでもダブルクリックすればステップ 10 と同じようにローカルで動き、テキストエディタで開いてソースを読むこともできます。
ダウンロード一覧の 20 KB の .html。Artifact まるごと、オフラインで実行可能です。1:50 に視聴