【画面で解説】Studio.Dropで既存サイトを取り込んでAIで編集する手順｜Claude Code連携まで

「Studio.Dropが気になるけれど、実際にどの画面で何をすればいいのか分からない」という声を、ノーコードサロンでもよく聞くようになりました。この記事では、ノーコードサロン代表の松永が、AIで作った自社サービスのLPをStudio.Dropに取り込み、チャットとClaude Codeの両方で編集したときの手順を、画面の順番どおりにまとめます。画面や料金は、収録した2026年9月時点のベータ版のものです。

この記事の内容は、解説動画でも実際の操作画面とあわせてご覧いただけます。

結論：取り込み、チャットで編集、Claude Codeからも編集の3段階で使える

Studio.Dropの使い方は、大きく3段階です。まず既存のサイトを取り込んでプロジェクトを作ります。次に、左のチャットに「ボタンの色を青色に変えたい」のように指示して直します。さらに、MCPでClaude Codeとつなげば、ふだん使っているAIエージェントの画面から同じプロジェクトを編集できます。

これまでStudioでは、ブロックを1つずつ置いてサイトを作る必要がありました。Studio.Dropでは、指示を出して待っている間にサイトが整っていきます。Studio.Dropそのものの考え方や、制作者の役割の変化はStudio.Dropの使い方とAI時代のWeb制作で整理しています。

Studio.Dropは、いつものStudioとは別のサービス

最初に押さえておきたいのは、Studio.Dropが既存のStudioとは別のサービスだという点です。プロジェクト一覧を開いたときのURLは「drop.studio.design」で、ふだん使っているStudioの「studio.design」とは分かれています。

そのため、現時点では「Studioの中の新機能」ではなく「別のサービス」と考えておくと混乱しません。将来ひとつにまとまる可能性もゼロではありませんが、収録時点ではプロジェクトも料金も別に管理されていました。

手順1：プロジェクトを作って既存サイトを取り込む

プロジェクト一覧の右上にある「新規プロジェクト」から始めます。プロジェクト名を入れて作成すると、サイトの作り方を選ぶ画面に進みます。

サイトの作り方は3つある

• URLから：公開中のサイトのURLを入れて取り込む
• フォルダー／ファイルから：手元のHTMLやCSSなどのファイルを持ち込む
• プロンプトから：AIがゼロから下書きを作る

今回はURLから取り込みました。すでにAIで作ったLPをCloudflareで公開していたので、そのURLを貼り付けています。手元にあるものに合わせて選べば問題ありません。

取り込む前に「複製する権利」を確認する

URLを入れると、「このサイトの所有者です（またはコンテンツを複製する権利があります）」というチェック欄が出てきます。自分のサイトならチェックを入れて進めます。

クライアントのサイトを取り込むときは、事前に「Studio.Dropで作り直したいので、複製してよいか」を必ず確認してください。許可を取らずに複製すると、あとからトラブルになります。

取り込み後は、元のサイトとほとんど同じ見た目になる

取り込みを始めると、画面には「完了までの目安：約7分」と表示されました。できあがったサイトは、元のLPとほとんど見分けがつかない仕上がりで、スマートフォン向けのレスポンシブも設定されていました。チャット欄には、AIが取り込みで何をしたかの報告も残ります。

手順2：編集画面の見かたを押さえる

編集画面は、左側のチャットと、右側のサイト・設定に分かれています。

左側：チャットでサイトを直す

チャットの使い方は、ChatGPTやClaudeなどの生成AIとほとんど同じです。「ボタンの色を青色に」「このカラーコードに変えて」と書くと、少し待つうちにサイトが変わります。テキストの変更や画像の差し替えも頼めます。

変えたい場所を指定する方法も2つあります。ページ上の要素を選んでから指示する方法と、プレビューにコメントを付けて「ここをどう変えたいか」を書く方法です。

AIの性能を選ぶ

入力欄の右下では、AIの性能を「軽量」「標準」「高性能」から選べます。画面には「高性能なAIほど利用枠を多く消費します」と書かれています。生成AIのモデル選びと同じ感覚で、細かい修正は標準、複雑な変更は高性能と使い分けるとよいでしょう。

画像はアップロードかStudio Stockから追加する

入力欄のプラスボタンからは、ファイルのアップロードができます。画像の追加画面では、手元のファイルのほかに「Studio Stock」から素材を検索して入れることもできました。

右側：サイト・記事・アセット・フォーム・アナリティクス

右側の上には「サイト」「記事」「アセット」「フォーム」「アナリティクス」の5つのメニューがあります。「サイト」はいま見ているデザイン編集の画面です。

記事では、サイト内のページをコレクションとして登録できます。画面では「下のツリーからパスを選んでください」とあり、/posts/2025/04 のような入れ子も含めて、配下のページはすべて記事として扱われます。同じカテゴリーの記事をまとめて管理する考え方は、StudioのCMS・ブログの作り方と同じです。

アセットでは、フォルダーを作って画像をまとめられます。フォームでは、項目を並べてAIにフォームを作ってもらえます。項目の種類や必須かどうかも選べて、届いた問い合わせはこの画面に表示されます。

アナリティクスでは、Googleアカウントを接続すると、GoogleアナリティクスとSearch Consoleの数字をStudio.Dropの中で確認できます。これまでは各ツールを開いて見に行く必要がありました。Studio側での計測の設定はStudioのGA4・Googleアナリティクス設定で解説しています。

プレビューで元のサイトと見比べる

右上の「プレビュー」からは、スマートフォンでQRコードを読み込んで確認したり、パソコンで開いたりできます。取り込んだサイトと元のサイトを並べてみると、ほぼ同じでした。過去に作ったポートフォリオなどを取り込んで見比べてみると、仕上がりの感覚がつかめます。

サイトのタイトルや説明はプロジェクト設定で

左上の歯車アイコンからは、プロジェクト名、サイトのタイトルと説明、カバー画像、アイコン、MCPの接続を設定できます。松永はこのタイトルと説明を、Claude Codeに「いい感じのタイトルを作って」「説明文を何文字程度で追加して」と頼んで入れました。

手順3：チャットでボタンの色を変える

実際にチャットで編集してみます。変えたいボタンを選んだ状態で「ボタンの色を青色に変えたい」と送信しました。

送信すると新しい会話として編集のリクエストが送られ、しばらくするとボタンが青に変わりました。チャットには「ホバー時は少し濃い青色になり、パソコン・スマートフォン表示ともに確認済み」という報告も残ります。同じ要領で「サイト全体のメインカラーをこのボタンと同じ色に」のように、ほかの場所もまとめて変えられます。

手順4：Claude CodeからStudio.Dropを編集する

Studio.Dropは、画面上のチャットだけでなく、Claude CodeやCodexなど手元のAIエージェントからも動かせます。仕組みはMCP（外部ツールとAIをつなぐ規格）です。

MCPでClaude Codeとつなぐ

右上のアイコンからアカウント設定を開き、「連携」を選ぶと、Claude Code・Cursor・Codexなどの接続手順が表示されます。手順は3つです。

1. 表示された「claude mcp add」から始まるコマンドをターミナルで実行する
2. 初回だけブラウザでStudio.Dropの承認画面が開くので、許可する
3. 接続が完了すると「接続中」に表示される

画面には「トークンのコピーは不要です」と書かれていて、キーを手で貼り付ける作業はありません。

Claude Codeのチャットから指示する

今回は、ターミナルに不慣れな方でも試しやすいよう、VS Codeの拡張機能「Claude Code for VS Code」のチャットから動かしました。送った指示は次のとおりです。

「Studio.Dropのプロジェクト一覧にある声から編集室というプロジェクトを編集したいです。青いボタンのカラーを他のボタンにも適用させてください」

Claude CodeはStudio.Dropのプロジェクト一覧から該当のプロジェクトを探し、中身を確認したうえでボタンの色を1か所で定義し直してくれました。Studio.Dropの画面に戻って読み込み直すと、ほかのボタンにも青が反映されていました。

松永自身は、開発ではターミナルを使いますが、細かい修正はこのチャットで頼むことが多いそうです。権限の設定は、許可する範囲を広げるほど承認なしで進みますが、そのぶんリスクもあります。慣れるまでは確認しながら進める設定をおすすめします。ノーコードとAIをどう分担させるかはStudioとClaude Codeの役割の違いで整理しています。

料金と公開の注意点

右上の「アップグレード」から料金プランを確認できます。収録時点の画面表示は次のとおりでした。

プラン	料金（税込）	ページ数
Standard	月額4,980円	100ページまで
Pro	月額29,800円	上限なし

プロジェクトを作るとStandardの14日間無料トライアルが始まり、その間も編集とプレビューは使えます。ただし、サイトを公開するには有料プランの開始が必要です。

公開の設定では、「〇〇.drop.studio.site」のサブドメインを決められます。お客さまが持っている「〇〇.com」や「〇〇.co.jp」などの独自ドメインを使う場合は、画面に「カスタムドメインを追加する前に、サイトを一度公開してください」とあるとおり、先に公開する必要があります。つまり、独自ドメインを使うなら有料プランに入ることになります。Studioでの独自ドメインの考え方はStudioの独自ドメイン設定の手順も参考にしてください。

松永の会社でも、クライアントのサイトをStudio.Dropに置き換える話が進んでいます。もともとクライアントはJimdoを使っていて、デザインを整えたいという相談でした。AIで作ったサイトを自分たちで運用する案も出ましたが、AIを覚えていく余力が今はないとのことで、Studioで作り直す予定でした。ちょうどそこにStudio.Dropが出てきたため、Studio.Dropで進めることで合意しています。

よくある質問

Q1Studio.Dropは、いつものStudioと同じサービスですか？

収録時点では別のサービスとして提供されています。URLは「drop.studio.design」で、プロジェクトの一覧や料金も分かれています。今後まとまる可能性はありますが、当面は別物と考えておくと混乱しません。

Q2無料で試せますか？

プロジェクトを作るとStandardの14日間無料トライアルが始まり、その間も編集とプレビューは使えます。サイトの公開には有料プランの開始が必要です。

Q3Claude Codeを使わないと編集できませんか？

いいえ、Studio.Dropの画面にあるチャットだけで編集できます。Claude CodeやCodexなどを普段から使っている方は、MCPでつなぐと、そちらの画面からも同じプロジェクトを編集できます。

Q4他の人のサイトを取り込んでもいいですか？

取り込むときに「所有者である、または複製する権利がある」ことの確認を求められます。クライアントのサイトなどを取り込む場合は、事前に必ず持ち主の許可を取ってください。

まとめ

Studio.Dropでは、既存サイトをURLから取り込み、チャットで指示してデザインを直し、さらにClaude Codeからも編集できます。これまでノーコードのときだけ要素を手で配置していた手間が、指示を出して待つ形に変わりました。まずは無料トライアルで、過去に作ったサイトを取り込んで見比べてみるのがおすすめです。

ノーコードサロンは、Studioでのサイト制作とClaude Codeを使ったAI活用を、どちらも学べる150名以上のコミュニティです。Studio.Dropのような新しい道具を実際の案件でどう使うかも、メンバー同士で共有しています。まずは1ヶ月、のぞいてみてください。