Claudeで作ったWebサイトをStudioに取り込む手順——アーティファクトの保存から崩れやすい箇所まで

Claudeにサイトを頼むと、会話の右側にプレビュー付きの「アーティファクト」として、動くページがそのまま表示されます。見た目を確かめながら「もう少し余白を」「色を落ち着かせて」と直せるのが便利なところですが、その完成品をStudioに持っていく段になると、ファイルをどう取り出すかで一度立ち止まります。

この記事では、Claudeが作ったサイトをStudioに取り込むまでの流れを、Claude特有の出力の形に沿って説明します。方法の全体像は生成AIで作ったWebサイトをStudioで公開するには？3つの方法を比較にあります。

Claudeの出力は、どんな形で返ってくるか

Claudeは、Webページを1つのHTMLファイルにまとめてアーティファクトとして返すのが基本です。CSSはHTMLの中に書かれ、装飾にTailwind CSS（クラス名で見た目を指定する仕組み）を外部から読み込む形を使うこともよくあります。

注意したいのは、「サイト」ではなく「アプリ」のように頼むと、HTMLではなくReact（プログラムで画面を組み立てる形式）で返ってくることがある点です。Reactの形式は、そのままではStudioに持ち込めません。最初から「単一のHTMLファイルで、Reactは使わずに」と頼んでおくのが確実です。

ファイルの取り出しは、アーティファクトの右上あたりにあるダウンロードの操作で行います。コードをコピーしてテキストエディタで「index.html」として保存しても同じです。

• HTMLのアーティファクト → ダウンロードするかコピーして「.html」で保存。これ1つで準備完了
• Reactのアーティファクトになってしまった → 「同じ内容を単一のHTMLファイルに書き直して」と頼み直す
• Tailwind CSSを外部から読み込む書き方 → そのまま読み込める（SHITAJIが使われているクラスぶんのCSSを組み立てる）

Studioに取り込むまでの3ステップ

SHITAJIでの流れは、どのAIで作ったサイトでも同じです。

• 読み込む：「HTML/CSSファイルを読み込む」で保存したHTMLを選びます。読み込んだ時点で、Studioに入れると崩れる書き方は自動で書き直され、「直したところ」「まだ直っていないところ」のレポートが出ます。
• 書き出す：画面で見た目を確かめたら「Studio用に書き出す」を押します。検査を通ったものが、Studioのネイティブ要素（ボックス・テキスト・画像）に変換されます。
• 追加する：「コピー」を押し、Studioのデザイン画面で ⌘V（WindowsはCtrl+V）で貼り付けます。以降は普通のStudioプロジェクトとして編集できます。

Claudeのサイトで崩れやすい箇所と、直し方

Claudeの出力で、取り込んだあとに差が出やすいのは次の箇所です。

• 画像が仮のもの、または表示されない：アーティファクトの中では外部の画像を読み込めないことがあるため、Claudeは画像を色付きの箱で代用したり、仮のURLを書いたりします。Studioに入れたあと、本物の画像に差し替える前提で進めてください。頼むときに「画像は実在する写真素材サイトのURLで」と伝えると、最初から本物が入ります。
• 細かい装飾（すりガラスのような透け感・グラデーション文字など）が単純化される：Claudeは装飾に凝った書き方を選ぶことがあります。Studioで表現できる範囲に収まらない指定は、取り込み時に近い見た目へ寄せられるか、レポートの「まだ直っていないところ」に出ます。気になる場合は「装飾は控えめに、単色の背景と1色のアクセントで」と頼むと、そのまま写ります。
• 出現アニメーション（スクロールで要素がふわっと出る）：見た目は入りますが、動きはStudio側の「条件付きスタイル」で付け直します。考え方はStudioのアニメーション入門へ。
• メニューの開閉やタブなどJavaScriptの動き：静的な変換では持ち込めません。生成AIが書いたスライダー・アコーディオンのJavaScriptが、Studioで動かない理由で、Studio側の部品への置き換え方を整理しています。

Claudeへの頼み方

最初の指示に次の一文を足しておくと、あとで頼み直す回数が減ります。

「Reactは使わず、単一のHTMLファイルとして作ってください。CSSはHTMLの中に書き、JavaScriptは使わないでください。画像は実在する写真素材のURLを使ってください。」

Claudeのプレビューで見た目を詰めるのはとても速いので、「Claudeで下書き、Studioで仕上げと公開」という分担にすると、両方の得意なところだけを使えます。複数ページのサイトを頼むときは、生成AIに複数ページのサイトを作らせると、ヘッダー・フッターが微妙にずれる理由と揃え方もあわせてご覧ください。