Claudeで作ったサイトを編集する方法

Claudeが何を渡してきたのかを見きわめる前に道具へ手を伸ばすと、午後がまるごと消えます。ある人は、プロジェクト一式を一枚のページみたいに開こうとする。別の人は、ダウンロードできるファイルの中でずっと待っていた見出しを動かすために、チャットへ二十分も頼み直す。

「Claudeがサイトを作ってくれた」——この一文が、まるで違う三つの仕事をこなしています。自分のがどれなのかを見きわめる手順を飛ばせば、その午後は、はじめから噛み合うはずのなかった道具との格闘に消えます。だから、まずそこを片づける。あとのすべては、それ次第です。

三つのうち、実際どれを持っているか

ある人が指しているのは、Claudeの会話の中に現れたあのパネル——スクロールでき、開き直せる、生きたプレビュー。それが artifact です。チャットの中に住んでいます。

別の人が指しているのは、ファイルです。ダウンロードを押して、いまフォルダに一つの .html が置いてある。ブラウザで開けば、ページはまるごとそこに、スタイルごと、一つのファイルの中にあります。

三人目は Claude Code を使って、プロジェクト を手にした——たくさんのファイルの入ったフォルダ、おそらく React か Next、開発者がビルド手順つきで動かす類のもの。それはページではなく、コードベースです。

持っているもの	どこに住むか	どう直すか
Claude の artifact	チャットのパネルの中	HTML としてダウンロードし、ファイルを直す
一つの .html ファイル	パソコンの上の一ファイル	ビジュアルエディタで開く
Claude Code のプロジェクト	たくさんのファイルの入ったフォルダ	コードエディタ / IDE で開く

ここからが役に立つところ。三つのうち二つは、同じ仕事に畳み込めます。artifact もダウンロードしたファイルも、つきつめれば、開いて手で直せる一つの .html。三つ目だけは別の生きもので、時間を無駄にしないよう、あとで戻ってきます。

artifact をチャットの外へ出す

サイトが artifact なら、Claudeに何度も変更を頼み続ける必要はありません。引っぱり出せます。

その artifact が HTML ページなら——Claudeが生きたウェブプレビューとして見せるあの種類なら——チャットからそのまま、一つの .html ファイルとしてダウンロードできます。（どの artifact もそうだとは限りません。Claudeは React コンポーネントや SVG、図、ほかのコードも作り、React の「サイト」はすぐ開けるページではなくコンポーネントのソースとしてダウンロードされます——これが実は、最後に触れる複数ファイルの場合です。）HTML がいったんパソコンの上のファイルになれば、チャットは蚊帳の外——ページはあなたのもので、ほかのどんなウェブページとも同じように直せます。ここを見落とす人が多い。「見出しを青に、いや、もっと濃く、いや、左に寄せて」と会話の中で頼み直し続ける——ダウンロードして自分で十秒ほどで動かせたのに、です。

一つの誤字のために Claudeへ頼み直すのは、音が一つ外れたからと一曲まるごと録り直すようなもの。スタジオがいる時も、確かにあります。でもたいていは、その一音だけを差し替えたいだけです。

開いて、好きなところを変える

いまあなたの手には .html ファイルがあります——ダウンロードした artifact でも、Claude Code が渡した単体のページでも、どちらでも同じ。ページとコードを一緒に見せてくれる何かで開きましょう。

私が HTML Tweak を作ったのは、まさにこの受け渡しのためです。.html ファイルを開くと、片側にページ、もう片側にそのコードが並び、両方が同期して保たれます。ページ上で見出しをクリックすると、コードの対応する行がハイライトされる——これが「クリックで場所を探す」。テキストを変え、色を差し替え、切れたリンクを直す。Chrome か Edge なら、同じファイルへそのまま保存し直します。ほかのブラウザなら、編集済みのコピーを代わりに渡して、ダウンロードさせます。

レイアウトを壊すのが怖い？構造を固定して言葉だけに触れるようにする、テキスト専用モードがあります。文章を変えて、デザインは Claudeが置いたそのままに。コードを書かない人には、私はこのモードを勧めています。

もっと一般的な版がほしいなら——Claudeが作ったものに限らず、どんな HTML ファイルでも——素朴なHTML ファイルを編集する手順を書きました。決める前にいくつかのエディタを比べたいなら、無料のものを比較しました。私自身の道具より優れている点も含めて。

Claude Code のプロジェクトなら、これは役に立たない

ここは正直に言わせてください。上の話はぜんぶ、一つの .html ファイルについてです。Claude Code が複数ファイルのプロジェクトを組んだなら——package.json と src ディレクトリがあり、コンポーネントが複数のファイルに分かれ、ビルド手順のあるフォルダなら——どれ一つ当てはまりません。

HTML Tweak が開くのは一つの .html ページです。プロジェクト管理ツールでも、コードエディタでもありません。React や Next のプロジェクトはコードベースで、コードベースには本物のエディタがいります——VS Code、あるいはそれを組んだ当のもの、Claude Code そのもの。プロジェクト一式を一ファイルとして開こうとしても、ただ動きません。あなたに格闘させるより、いま言っておくほうがいい。

見分け方は？ダウンロードしたものを見てください。.html で終わる一つのファイルなら、ここが正解。たくさんのファイルの入ったフォルダ、あるいは解くとフォルダになる .zip なら、それはプロジェクト——ここではなく、コードエディタへ。

チャットのパネル、それから自分のディスクの上のファイル

artifact か単一ファイルのページなら、手順は短い。

1. artifact なら、チャットから HTML ファイルとしてダウンロードする。
2. パソコンの上でその .html ファイルを見つける。
3. ビジュアルエディタで開く。
4. ページの上で直す——テキスト、色、リンク——コードへ飛びたいときは「クリックで場所を探す」を使う。
5. 保存する。Chrome と Edge は同じファイルへ書き戻し、ほかのブラウザは編集済みのコピーをダウンロードする。
6. 保存したファイルをブラウザで開いて確かめる。おしまい。

アカウントも、ビルドし直しも、チャットへ戻ることも、いりません。

人が一時間を取られるやつ

チャットでプレビューをいじり、ダウンロードしたファイルへ切り替えると、手つかずに見える——だから保存が効かなかったんだと思い込む。効いています。チャットの中の artifact と、ディスクの上の .html は、二つの別々のコピーで、片方を直しても、もう片方には決して届きません。それが腑に落ちれば、残りはよけて通れます。

どのブラウザにいるかを忘れる。 Firefox や Safari では、HTML Tweak は元のファイルへ書き戻せないので、保存のたびに新しいコピーを渡します。何も失われませんが、どれが最新なのかを追う必要がある。Chrome と Edge はその場で保存する——だからこの作業には、私はこの二つへ人を寄せます。

プロジェクトがページのように開くと思い込む。 これが大物です。一つの .html ではなくフォルダを持っているなら、手を止めて、コードエディタで開いてください。何よりも先に、ファイルかフォルダかを確かめる。

元のものを取っておかない。 直す前に、Claudeがくれたそのものを、一つコピーして脇に置く。編集がおかしくなったとき、戻れる手つかずの版がほしくなります。

artifact か、ファイルか？どちらにせよ、手元にあるのが一つのページなら、これは二分の変更で、頼み直しではありません。HTML Tweak で開いて、ページを自分で直す——チャットの中の版はそのままそこに残り、ディスクの上のファイルは、静かにあなたのものになります。