SHITAJI

← メディア

コーディングAIで作ったサイトをStudioに取り込む手順
2026-10-06AI×Web制作約8分で読めます

Claude CodeやCursorで作ったWebサイトをStudioに取り込む手順——最初に「静的HTML」で頼むのが近道

Claude CodeやCursorのような「コーディングAI」は、チャットの画面にコードを表示するだけでなく、パソコンの中のプロジェクトのフォルダに、ファイルを直接作ったり書き換えたりしてくれます。Claude Codeの公式ドキュメントでは、コードベースを読み、ファイルを編集し、コマンドを実行する道具として説明されています。Cursorの公式ドキュメントも、AIエディタ兼コーディングエージェントとして紹介しています。

この仕組みは、複数ページのサイトや画像フォルダ込みのサイトを一度に作らせたいときに便利です。一方で、何も指定しないと、ReactやNext.jsのような「開発者向けの形」でプロジェクトを作ってしまうことがあり、そのままではStudioに持ち込みにくくなります。この記事では、Studioで編集・公開するところまでを見すえて、いちばん手戻りの少ない進め方を説明します。全体像は生成AIで作ったWebサイトをStudioで公開するには？3つの方法を比較へ。

チャット型のAIとコーディングAIの違い

ChatGPTやClaude、Geminiのチャット画面で作る場合は、返ってきたコードを自分でファイルに保存します。コーディングAIの場合は、AIがフォルダの中に直接ファイルを作るので、保存の手間がありません。そのかわり、「どんな形のファイルができるか」を最初に決めておく必要があります。

チャット型のAIコーディングAI
できあがる場所チャットの画面（コードを自分で保存する）パソコンの中のフォルダ（ファイルが直接作られる）
複数ページ・画像フォルダ1ファイルずつ受け取って並べるフォルダ構成ごと作られる
作業の進み方1回の返答で完結しやすいファイルの編集やコマンドの実行まで、続けて行える
気をつけることコードの取り出しと保存最初に、作ってほしい形（静的HTML）を指定する
注意コーディングAIは、パソコンの中のファイルを書き換えたり、コマンドを実行したりできる道具です（Claude Codeの公式ドキュメントにも、ファイルの編集とコマンドの実行が書かれています）。大事なファイルが入ったフォルダではなく、このサイト用の新しい空のフォルダで作業すると安心です。

最初の指示で「静的なHTML/CSS」を指定する

Studioに持ち込むなら、フレームワークを使わない静的なHTML/CSSの形がいちばん素直です。作業を始めるとき、最初の指示に次のように添えてください。

フレームワークは使わず、静的なHTMLとCSSだけで、Webサイトを作ってください。
・ページごとに index.html、about.html のようなHTMLファイルを作る
・CSSは style.css にまとめる
・画像は images フォルダに置く
・JavaScriptは使わない
・スマートフォン幅では、横並びを縦並びにする
AIの出力の形SHITAJIでの読み込み方1つのHTMLファイル（CSSは中に）「HTML/CSSファイルを読み込む」そのまま読み込めるHTML＋CSS＋画像のフォルダ「フォルダを読み込む」そのまま読み込めるReact／Next.js などのプロジェクトブラウザで「ウェブページ、完全」で保存 → フォルダで読み込むそのままでは中身が空＝ひと手間が要る
AIの出力の形と、読み込み方の対応。コーディングAIは、指示しだいで真ん中の形（HTML・CSS・画像のフォルダ）で作れます。

取り込むまでの流れ

SHITAJIでの流れは、どのAIで作ったサイトでも同じです。コーディングAIの場合の手順は次のとおりです。

  1. 新しい空のフォルダを作り、Claude CodeやCursorでそのフォルダを開く
  2. 上の指示を伝えて、サイトを作ってもらう
  3. できた index.html をブラウザで開き、見た目と、ページ同士のリンクを確かめる（直したいところは、続けてAIに頼む）
  4. SHITAJIで、新しいプロジェクトを作るときに「フォルダを読み込む」を選び、サイトのフォルダをまるごと選ぶ
  5. 読み込みのあとに出る「直したところ」「まだ直っていないところ」の知らせを確かめる
  6. 画面で見た目を確かめて「Studio用に書き出す」を押し、「コピー」したものを、Studioのデザイン画面で ⌘V（WindowsはCtrl+V）で貼り付ける
注意1回の読み込みで扱えるファイルは60個までです。画像が多いときは、使っていないものを除いてから読み込んでください。読み込める画像は.png・.jpg（.jpeg）・.gif・.webp・.svgで、フォントファイル（.woffなど）は対象外です。

ReactやNext.jsで作られてしまったときは

コーディングAIは、頼み方によっては、ReactやNext.jsなどのフレームワークでプロジェクトを作ります。こうしたサイトは、ファイルの中身が最初は「箱」だけで、文字や画像はブラウザで開いたときにプログラムが組み立てます。そのファイルをそのまま渡しても、中身が空になってしまいます。SHITAJIは、読み込む前にこの状態を見つけてお知らせします。対処は次の2つです。

対処やり方向く場面
静的なHTML/CSSに書き直してもらう「同じ内容を、フレームワーク無しの静的なHTML/CSSに書き直して」とAIに頼むまだ作り始めたばかりで、直しやすいとき
表示した状態を「完全」保存するサイトをブラウザで開き、「名前を付けて保存」→「ウェブページ、完全」（Chromeの場合）で保存する。できた.htmlと「_files」フォルダを、新しいフォルダ1つにまとめて入れ、「フォルダを読み込む」で選ぶ作り込んだ後で、書き直しが大変なとき

取り込んだあとに差が出やすい箇所

よくある質問

質問答え
Claude CodeとCursorで、取り込みの手順は違いますか？違いません。どちらも、フォルダの中にファイルを作る道具なので、そのフォルダをSHITAJIで読み込む流れは同じ。大事なのは、どのAIかではなく、最初に静的なHTML/CSSを指定したかどうか。
フォルダの中に、node_modulesなどの大きなフォルダがあります。サイトの表示に必要なのは、HTML・CSS・画像だけ。それだけを新しいフォルダに移して読み込む（1回の読み込みで扱えるのは60個まで）。
AIが作ったサイトを、ブラウザで開いても真っ白です。JavaScriptで画面を組み立てる作りの可能性がある。静的なHTML/CSSで作り直してもらうか、うまく表示できた状態を「ウェブページ、完全」で保存して読み込む。
取り込んだあと、AIに直してもらえますか？直せる。ただし、Studioに取り込んだあとの修正はStudio上で行う。見た目を大きく変えたいときは、AIで作り直してから、もう一度取り込むほうが手戻りが少ない。

まとめ

コーディングAIで作ったサイトをStudioで運用するコツは、「最初に静的なHTML/CSSで頼む」→「ブラウザで確かめる」→「フォルダごと読み込む」の3つです。フレームワークで作られてしまったときは、静的な形に直してもらうか、表示した状態を完全保存して読み込めば、取り込めます。

頼み方の基本はChatGPT・Claude・GeminiにWebサイトの下書きを作らせるプロンプトのコツ5つ、他のツールで作ったときの流れはBoltで作ったWebサイトをStudioに取り込む手順、取り込んだあとに編集しやすい形を保つ考え方は生成AIで作ったサイトの文章・画像を、あとから自分で直せるようにしておくコツにまとめています。

生成AIで作ったHTML/CSSを、Studioへ。

SHITAJIは、HTML/CSSのサイトをStudioのネイティブ要素として取り込む変換ツールです。 フリープランは月3ページまで無料・カード登録不要で試せます。

登録なしで1ページ試してみる →SHITAJIについて詳しく →

次に読む

2026-09-24生成AIが作ったサイトに残る「仮の文章・架空の実績」、公開前に差し替えるべき箇所2026-09-16生成AIが作ったサイトの画像が表示されない・壊れたリンクになる理由

※ SHITAJIはStudio株式会社とは関係のない独立したサービスです。「Studio」はStudio株式会社の商標です。 本記事は公開されている情報と一般的な制作の知見にもとづいて執筆しています。