Studio.Dropとは？189ページのサイトを発表当日に移行して分かったこと

アーム代表の伊藤です。
Studio.Dropは、Studio株式会社が2026年9月1日に発表した「Agentic Web Platform」で、公開中のWebサイトをURLひとつで移行し、AIとの対話で更新・運用まで完結させる新サービスです（クローズドベータ・招待制）。

発表当日にStudio.Dropへ実運用中のサイト189ページを移行できたので、再現度と編集の実際、Studio.Assistantとの違い、フリーランスの現場での活かし方までを体験ベースで整理します。

こんな方におすすめのコラムです

• サイトを作った制作会社と疎遠になり、文言ひとつ直せないまま時間が経っている
• Studio.Dropの発表を見たが、実際にどこまで動くのかの一次情報が見つからない
• AIにサイト運用を任せると言われても、勝手に壊されそうで踏み切れない
• Studio.AssistantとStudio.Dropの違いが分からず、どちらを調べればいいのか迷っている
• リニューアルの見積もりが想定より高く、いまのサイトを活かす道を探している

Studio.Dropの結論だけ、先に置いておきます。

ただし、Studio.Dropはまだクローズドベータです。数字も評価も現時点の一断面である前提で、ここから順に見ていきます。

189ページが12分で「もう1つの本番」になった｜Studio.Drop移行の実力

クローズドベータの順番が来ると、「Studio.Dropへようこそ」という招待メールが届きます。記載のメールアドレスのStudioアカウントでサインインすれば、そのまま始められます。

発表の数時間後、アームのサイト（aaam.jp。Astroで自作した100ページ超のサイト）のURLをStudio.Dropに入れて移行を試しました。バージョン履歴を見ると、プロジェクト作成からインポート完了までの間隔はおよそ12分で、プロジェクト設定の表示では189ページが取り込まれていました。

待っている間、画面に張り付いている必要はありません。取り込みと最適化が終わると「インポート完了」のメールが届き、プロジェクトを開くボタンからそのままエディタへ戻れます。放置していい非同期の作りは、他の作業と並行したい実務者には親切です。

メールからエディタを開くと、トップからコラム一覧までがそのまま再現されていました。いちばん驚いたのは背景です。aaam.jpのトップでは、WebGLのシェーダーで描いたグラデーションが背景でゆっくり流れているのですが、このアニメーションまでパラメータごと複製されて、そのまま動いていました。静止画のコピーではなく、動きまで含めた複製です。確認したページでは、本番と並べて見分けがつきませんでした。

Studio.Dropの再現度で確認できたことを挙げます。

• 見出し・本文・パンくずからカテゴリ表示まで、確認した範囲でレイアウト崩れなし
• 背景のWebGLアニメーションは、シェーダーを動かすスクリプトと描画パラメータ（速さ・ゆがみ・色）がそのまま複製され、本番と同じ設定値で動いていた
• 使っているWebフォントまで引き継がれた
• ヘッダー・フッターは自動で「共通パーツ」として抽出され、1箇所直せば全ページに効く状態になっていた
• お問い合わせ・資料請求フォームは、入力内容がStudio.Drop側の管理機能に届くよう自動で接続されていた
• コラム記事は記事管理の機能に取り込まれ、壊れていたカテゴリ表示の一部は移行時に修復されていた

個人的にいちばん評価しているのは、再現度そのものより移行ログの正直さです。Studio.Dropの管理画面には「検索や無限スクロールは、元のページに存在しないため追加していません」「実績紹介は独自の並び順があるため現状を維持しています」と、やらなかったことと、その理由まで明記されていました。

AIによる移行で怖いのは、気を利かせたつもりの改変です。少なくとも今回の移行では、元に無い機能を勝手に足す挙動は確認されませんでした。

インポートの前に1つだけ関門がある｜所有者確認と「高速モード」

URLを入れて終わり、ではありません。Studio.Dropのインポート画面には「このサイトの所有者です（またはコンテンツを複製する権利があります）」という確認が置かれていて、他社のサイトを丸ごと写す道具にならないよう線が引かれています。

あわせて「高速モード」のスイッチがあり、有効にするとrobots.txtを無視して速く取得する代わりに、サイトを配信しているサーバーへ負荷がかかる可能性があると明記されています。アームは自分のサイトなので高速モードを有効にして実行しました。

権利と負荷の説明を先に読ませてから実行させる設計は、業務ツールとして誠実です。自分が管理していないサイトで試すときは、高速モードを入れる前にサイトの所有者と相談してください。

移行レポートに「何を・どう複製したか」が全部残る

Studio.Dropには移行レポートが自動で残ります。そこには、HTML・CSS・JSと画像などの素材を機械的に複製する方式で移行したこと、テキスト13ファイルと画像など250ファイルを取り込んだこと、全ページで同一だった20個の共通ブロックを部品として切り出したことまで記録されていました。

移行の中身を後から検証できる形で残す作りで、Studio.Dropを業務で使う道具として信頼できます。このレポートは、後述の開発者モードからいつでも開けます。

画像もフォントも「アセット」に自動で整理される

Studio.Dropの管理画面には「アセット」というファイル置き場があり、移行したサイトの画像・フォント・faviconなどが自動でフォルダに整理されて入っていました。CMSでいうメディアライブラリにあたる場所です。ファイルのアップロードもフォルダの追加もここから行えるので、サイトの素材を1箇所で握れるのは運用側にはありがたい作りです。

ちなみにastroフォルダを開くと、ハッシュ名のファイルが242件並んでいて一見ゴミの山に見えます。正体は日本語Webフォントを軽く配信するための分割ファイル（サブセット）で、ビルドが生成したものまで忠実に複製された結果です。消すと文字の表示が壊れるので、そのままにしておくのが正解です。

Studio.Dropの評価まとめ｜◎と×を先に見る

GUIか、AIか。Studio.Dropの編集は「両方が正解」だった

移行したサイトをどう編集するのか。エンジニアの知人から「編集はGUIでできるのか、それともエージェント経由でHTMLをいじってもらう感じなのか」と聞かれましたが、Studio.Dropを試した答えは両方が正解でした。しかも生のコードを開ける隠し扉まであります。順に見ていきます。

Design Modeは実質「ビジュアルDOMエディタ」

Studio.DropのDesign Modeに入ると、画面左にheader・main・sectionといったHTMLの構造がそのままレイヤーとして並びます。見出しをクリックすると選択枠とツールバーが現れ、フォント・サイズ・色・揃え・幅をその場で変更でき、ダブルクリックすればテキストを直接書き換えられます。

操作感はFigmaに近く、デザインツールを触ったことがあれば迷いません。

AI Editは指示の範囲を守り、証拠を残す

試しにStudio.DropのAI Editへ「コラム記事のh1タイトルの文字色だけを赤に変えてください。他は何も変えないでください」と指示すると、約40秒で完了しました。

注目したいのは、「対象のコラム記事を確認」「指定箇所を確認」「タイトル文字色だけを変更」と、AIが踏んだ手順がログとして残ることです。指示の範囲外に手を出した形跡はありませんでした。Studio.Dropに大きな編集を任せる前の試金石として、この小さなテストはおすすめです。

もう一歩踏み込んで、文言と色をひとつの指示にまとめる変更も試しました。

お悩みページの見出しに「文言を『ホームページはあるのに、問い合わせがまったく来ない』に変え、文字色を赤にしてください。他は何も変えないでください」と頼むと、Studio.Dropは6件の手順を踏んで、文言と色の2点だけを同時に変更しました。1回の指示に複数の変更を混ぜても、範囲は崩れませんでした。

指示の対象を言葉で説明したくないときは、チャット欄の「要素を選択」ボタンが使えます。ページ上の要素を直接クリックすると、選んだ箇所がチャット欄にチップとして積まれていき、離れた場所にある複数の要素を選んで、まとめて1つの指示を出せます。

実際に4つの段落を選んだ状態が次の画面です。「この4箇所の語尾をそろえて」のような横断修正を1回で頼める形で、ページ数の多いサイトほど効いてきます。

図版の生成までやる。しかも失敗を隠さない

文言修正の先も試しました。「いま開いているページのコンテンツに合う図版を生成して、適切な位置に入れてください」と頼むと、Studio.Dropはお悩みページの本文を読み、「問い合わせを生む、3つの掛け算」という図版を作って見出しの直下に挿入しました。スマートフォンでは縦型レイアウトに切り替わる、という説明付きです。

続けて「もっとスタイリッシュでグラフィカルに。背景とのコントラストも意識して」と重ねると、ダーク背景にゴールドとコーラルを効かせたデザインへ作り直されました。

このとき、2回目の作業ログ8件のうち1件には失敗の表示が残っていました。結果の図版は問題なく表示されており、うまくいかなかった手順まで隠さず見せるのは移行ログと同じ思想です。

生成された図版をそのまま採用するかの判断は人に残りますが、叩き台が数分で出てくる価値は大きいと感じます。

右下の小さな丸点が「開発者モード」への入り口

Studio.Dropの画面の右下には、小さな丸い点がひとつ置かれています。装飾に見えますが、クリックすると「開発者モード」に切り替わります。中身は本物のコードエディタです。

移行されたHTMLやCSSのファイルがそのまま並び、aaam.jpのindex.htmlを開くと、メタタグからOGPの設定までシンタックスハイライト付きで原文のまま表示されました。保存・履歴・プレビューリンクのボタンがそろい、生のファイルを直接書き換えられる作りです。

移行レポートには、ページは素のHTMLファイルとして配信されるとも明記されています。ノーコードの顔とコードの顔を丸点ひとつで行き来できるので、エンジニアと組む運用でも詰まりません。

MCP接続でClaude CodeなどのAIエージェントからも操作できる

Studio.Dropの管理画面にはMCP接続の設定があり、Claude Code・Cursor・Codexなど手元のAIツールへ、自分のメンバー権限を渡せます。手順は3ステップで、ターミナルでコマンドを1行実行し、ブラウザーに開く承認画面で許可すれば完了。トークンを手でコピーさせない認証の設計です。

接続したツールからは、編集に加えてフォーム・アクセス解析・Search Consoleの確認までできると説明されています（2026年9月時点の管理画面の記載）。エンジニアが自分の開発環境からStudio.Dropのサイトを運用する道が、正式に用意されているということです。

AIに任せる怖さは「戻せること」で消す｜全変更にバージョン履歴

Studio.Dropでは、移行・自動最適化・AIの編集・手動編集のすべてが時系列の履歴として残り、各時点をプレビューしてから復元できます。実際に、AIに変えさせた文字色をワンクリックで元に戻せました。

AIに任せる怖さは「戻せること」でしか消えないので、この設計は、Studio.Dropを運用に使ううえでの生命線だと思います。

Studio.AssistantとStudio.Dropは「似て非なる」AI｜担当する工程が別

Studio.AssistantとStudio.Dropは、どちらもStudio株式会社のAIサービスですが、担当する工程がまったく違います。

Studio.Assistantはヒアリングから情報設計・デザイン生成までを担う「ゼロから作る」ための制作支援ツールで、対象はシングルページ。対してStudio.Dropは、公開中のサイトを引き継いで「公開後の更新・運用」を担うプラットフォームです。

作る前を速くするのがStudio.Assistant、公開後を止めないのがStudio.Dropと覚えると取り違えません。

2つは競合ではなく、制作の時間軸の別の場所に立っています。

Studio.Assistantで叩き台を作り、Studioで公開し、公開後の運用をStudio.Dropが引き継ぐ。公式がこう説明しているわけではありませんが、並べてみると1本のリレーとして読めるラインナップです（この整理はアームの見立てです）。

Studio.Assistantの実力は、別記事のStudio.Assistantの実力と限界 デザイナー2人の本音レビューで詳しく書いています。70%まで10分で作る速さと、そのまま納品できない30%の中身まで、今回と同じ実務者目線のレビューです。

スタートアップの現場でStudio.Dropをどう使う？一人目デザイナーの活用シーン

ここからは、スタートアップを支援するフリーランスデザイナーとしての視点です。

公式の発表には、ホスティング、共同編集、MCP接続、スマートフォンからの編集といった機能が並びます（出典: Studio「Studio.Drop」最新情報・2026年9月1日閲覧）。機能の一覧はリンク先に譲り、ここでは「既存の案件でどう効くか」に翻訳します。

どれも「作る」仕事ではなく「止めない」仕事です。Studio.Dropは、その止めない仕事の道具として設計されています。

Studio.Dropが刺さるサイト、まだ待つべきサイト

どんなサイトならStudio.Dropを検討する価値があるのか。実測とアームの実務経験から、相性をひと目で判定できる形にしました。

◎に共通するのは「作り直したい」ではなく「直せない状態を解消したい」という悩みです。直したいのに直せないまま流れる時間は、請求書に載らない機会損失になります。Studio.Dropの設計は、まさにこの層に向いています。

迷ったら「いまのサイトをそのまま活かしたいかどうか」で切り分けてください。活かしたいならStudio.Dropを試す価値があり、変えたいなら先にリニューアルの設計です。

正直に書く、Studio.Dropの現時点の注意点

発表当日のベータ版なので、Studio.Dropを割り引いて見るべき点も正直に書きます。

• Studio.Dropはクローズドベータの招待制で、利用には待機リストへの登録が必要です（2026年9月時点）
• Studio.Dropの料金はヘルプに明記されています。Standardが月額4,980円（公開100ページまで）、Proが月額29,800円（ページ数上限なし・いずれも税込）。無料トライアルは14日間で、トライアル中の公開には有料プランの開始が必要です（2026年9月時点）
• AIの利用は月間クレジット制です。管理画面には「今月のAIクレジット」のメーターがあり、毎月1日（UTC）にリセットされると明記されています。アームの環境では、移行と一連のテストを終えた時点で30%を使用していました（無料トライアル中の表示。上限の実量は未公表です）
• バージョン復元の直後に、画面が1分ほど固まる場面がありました。復元自体は正常に完了しています
• sitemap.xmlやrobots.txtの自動生成、Search Consoleへのサイトマップ自動送信は「現在ありません」とヘルプに明記されています。公開後のSEO運用は手動前提で計画してください
• 今回確認したのは移行と編集までで、Studio.Dropで公開したあとの表示速度など、公開後の挙動そのものは未検証です

StudioやFramerと何が違う？「引き継ぐ」から始まるのはStudio.Dropだけ

いちばんの違いは起点です。StudioもFramerも「これから作るサイト」の道具として設計されていますが、Studio.Dropは「もう公開されているサイト」を出発点にします。

サイトの相談で実際に多いのは「作り直したい」ではなく「作った会社と疎遠になって直せない」という状況で、そこへ正面から当てた製品はこれが初めてだと感じています。

StudioとFramerそのものの解説は、次の記事で詳しく書いています。

ここまで前のめりに書きましたが、ツールを替えるだけで運用が回り始めるわけではありません。決め手は「月々の更新作業が、誰の何分になるか」の総量です。

いまの体制で月に何件の更新が発生し、どこで止まっているのかを先に数える。この棚卸しなしにStudio.Dropへ移しても、止まる場所が変わるだけです。

Studio.Dropへの移行や運用の見直しは、アームにご相談ください

Studio.Dropを試したいが招待枠が来ない。来たとして、いまのサイトを任せてよいのか判断できない。そんな段階の相談で構いません。

アームはStudio.Dropへの移行を実測した経験をもとに、いまのサイトを活かす選択肢と作り直す選択肢を並べて、費用と運用の総量で比較できる形にします。サイトの運用体制の見直しをアームに相談するからどうぞ。現状の棚卸しからで構いません。

よくある質問

まとめ

Studio.Dropは、公開中のWebサイトをURLひとつで移行し、AIとの対話とGUIの両方で運用できる新プラットフォームです。発表当日に実運用中のサイト189ページをStudio.Dropへ移行した範囲では、移行の再現度、移行ログの透明性、図版生成までこなすAI Edit、生コードを開ける開発者モード、バージョン復元の安全設計まで、実運用を見据えた作りでした。

ゼロから作るStudio.Assistantとは担当する工程が別で、使い分けは「作る前か、公開後か」で考えれば迷いません。一方でStudio.Dropは招待制のベータ版で、公開後の挙動には未検証の領域が残ります。この記事の評価も現時点の一断面にすぎません。

正式リリースまでの間にやる価値があるのは、ツール選びよりも、いまのサイトの更新がどこで止まっているかの棚卸しです。Studio.Dropへ移行すべきかの判断も含めて、迷ったらアームに相談してください。