StudioからWordPressへ移行する6手順｜エクスポート不可はClaude Codeで補う

公開日: 2026年3月29日最終更新: 2026年10月1日

執筆・編集：株式会社Nexa 編集部（下書きと機械検査はAI、公開前に人が確認）／約26分で読めます。公式ドキュメント・公式発表などの一次情報を確認したうえで執筆・更新しています。AIツールの仕様や料金は変わることがあるため、導入判断の前に各公式サイトの最新情報もご確認ください。記事の作り方と検査の方針

StudioからWordPressへ移行するときは、Studioのデータを書き出すのではなく、公開中のサイトを読み取ってWordPress側で作り直します。Studio公式ヘルプに、CMSのデータ、ページ情報、デザイン、ソースコードのエクスポートはできないと書かれているためです。

「移行」で調べている方の目的は、向きによって答えが変わります。先に早見表で整理します。

やりたいこと	方法	読む場所
StudioからWordPressへ移す	エクスポート機能がないため、サイトを読み取って作り直す	移行の全体像
WordPressからStudioへ移す	WordPressのXMLファイルを、Studio CMSへ取り込む公式機能を使う	逆向きの移行
StudioとClaudeを連携する	Studio.Drop（2026年8月発表、クローズドβ）がMCP接続に対応	StudioとClaudeの連携
「WordPress Studio」でClaude Codeを使う	WordPress.comのローカル開発ツール。ノーコードのStudioとは別の製品	WordPress Studioとの違い

この記事では、あるコーポレートサイトをStudioからWordPressへ移行したときの手順を公開します。デザイン分析、テーマ構築、サーバー設定、DNS切り替えまでを1日で進めました。Claude Codeに任せた作業と、人が行った作業を分けて説明します。

画面の名称と手順は、2026年10月1日に各サービスの公式ページで確認した内容です。サーバーはConoHa WING、ドメインの管理はお名前.comを例にしています。

なぜSTUDIOからWordPressへ移行したのか

Studioは、コードを書かずにデザイン性の高いサイトを作れるツールです。一方で、集客用の記事を増やし、コマンドやAIで運用を自動化したい段階になると、WordPressのほうが合う場面が出てきます。

StudioとWordPressの違い

Studioにもブログ（CMS）機能やSEOの設定項目はあります。移行を判断するうえで差が出るのは、次の点です。

項目	Studio	WordPress
データのエクスポート	CMSのデータ、デザイン、ソースコードとも不可	「ツール」→「エクスポート」でXMLファイルに出力
構造化データ	ページ設定でJSON-LDを入力できる	テーマや本文に自由に記述できる
独自コードの追加	有料プランのカスタムコード機能で、headとbodyに追加	テーマのファイルを直接編集できる
XMLサイトマップ	設定でオンにすると自動生成	本体が標準で出力。プラグインで拡張できる
機能の追加	Apps連携とカスタムコード	公式ディレクトリに73,000件以上の無料プラグイン
AIエージェントからの操作	Studio.Drop（クローズドβ）がMCP接続に対応	WP-CLIのコマンドで、投稿、設定、プラグインを操作できる

Studioでも、ページごとにJSON-LDを入力でき、XMLサイトマップも自動で生成できます。SEOの設定項目だけで比べると、差は大きくありません。差が出るのは、データを書き出せるかどうかと、コマンドで操作できるかどうかです。

WordPressに移行して得られるもの

今回の移行で重視したのは、次の4点です。

• コマンドで運用できる: WP-CLIを使うと、記事の投稿や設定の変更をコマンドで実行できる。Claude Codeに作業を任せるときの土台になる
• データを自分で持てる: 記事と設定を自社のサーバーに置き、必要なときにエクスポートできる
• テーマを自由に作れる: 記事冒頭の要約ボックスや目次など、記事の型をテーマ側で決められる
• プラグインで機能を足せる: お問い合わせフォーム、SEOの設定、セキュリティ対策を追加できる

「WordPressへ移行したいが、デザインの再現が大変」と感じる方は多いはずです。この再現の作業を、Claude Codeに任せました。

移行の全体像 — Claude Codeが担った6つのフェーズ

今回の移行は、次の6つのフェーズで進めました。

フェーズ	内容	主なツール
フェーズ1	既存サイトのデザイン分析と画像の収集	agent-browser
フェーズ2	オリジナルブロックテーマの構築（36ファイル）	Claude Code（コーディング）
フェーズ3	ConoHa WINGへのドメイン追加とWordPressのインストール	agent-browser（ConoHaの管理画面）
フェーズ4	テーマをサーバーへ転送して有効化	SCP、SSH、WP-CLI
フェーズ5	WordPressの初期設定（固定ページ、カテゴリ、プラグイン）	WP-CLI
フェーズ6	Studioのドメイン接続の解除、ネームサーバーの変更、SSLの設定	agent-browser（お名前.comの管理画面）

agent-browserは、Vercel Labsが公開しているブラウザ操作用のコマンドラインツールです。Claude Codeがこのツールを通じてブラウザを動かし、画面の内容を読み取ります。

全フェーズを通じてClaude Codeが作業を進め、ユーザーが担当したのはログインやパスワードの入力、最終確認などの一部です。

フェーズ1 — 既存サイトのデザイン分析とスクレイピング

最初に、移行元のStudioサイトを正確に把握します。エクスポートができないため、公開中のページをブラウザで表示し、その状態から情報を読み取ります。

Studioサイトのデザインシステムを記録する

Claude Codeにagent-browserを使わせ、既存サイトを一通り表示しながら、次の情報を記録させます。

分析・記録した情報の例:

要素	記録した値
メインカラー	#0a56c9（深い青）
アクセントカラー	#f23a3c（赤 ※フォーム必須マーク）
背景色	#f6f7f9（ライトグレー）
主要フォント	Noto Sans JP
ヘッダー構成	ロゴ + ナビ（5項目） + CTAボタン
ページ構成	トップ・会社概要・サービス・お問い合わせ・プライバシーポリシー・特商法（6ページ）

ページ構成、カラー、フォントを先に記録しておくと、次のテーマ構築で判断に迷う箇所が減ります。

画像素材を収集する

サイト内で使われている画像も、agent-browserで収集します。ヒーロー画像やAbout Usの画像グリッドなど、計12枚を取得してローカルのフォルダに保存しました。

ポイント Studioの公開サイトは、作成時期によって仕組みが異なります。2026年6月11日より前に作成し、切り替えをしていないプロジェクトは、ブラウザ側で画面を組み立てる構成（旧基盤）です。この場合、HTMLを直接取得しても本文や画像のURLを得にくいため、ブラウザで表示した状態から読み取ります。新基盤のサイトは、サーバー側で完成したHTMLを返します。

フェーズ2 — オリジナルWordPressブロックテーマをゼロから構築

デザインの情報が揃ったら、Claude Codeにテーマのコーディングを指示します。既製テーマのカスタマイズではなく、オリジナルのブロックテーマを新しく作りました。

既製テーマ・ページビルダーを使う方法との違い

WordPressへの移行では、SWELLやTCDなど販売されているテーマや、Elementor・Spectraなどのページビルダーを使い、既存のレイアウトに寄せて作り直す方法もあります。この方法は、テーマ購入の費用が発生しますが、専門知識が少なくても管理画面上で組み立てられる利点があります。

今回はテーマを購入せず、Claude Codeにフェーズ1の分析結果（カラー・フォント・レイアウト）を渡し、オリジナルのブロックテーマをゼロから作らせました。既製テーマのレイアウトに寄せるのではなく、Studioサイトのデザインをそのまま再現できる点と、記事冒頭の要約ボックスや目次などNexa独自の記事テンプレートを最初から組み込める点を重視したためです。

theme.json・テンプレート・パターンの構成

WordPressのブロックテーマは、次のようなファイルで構成されます。必須のファイルは style.css と templates/index.html の2つです。以下のテーマ名は例示用の値です。

example-theme/
├── theme.json          ← カラー・フォント・スペーシングのグローバル設定
├── style.css           ← テーマ情報と基本スタイル（必須）
├── functions.php       ← Google Fontsの読み込みなど
├── templates/
│   ├── index.html      ← メインテンプレート（必須）
│   ├── single.html     ← 記事詳細ページ
│   ├── archive.html    ← 一覧ページ
│   └── page.html       ← 固定ページ
├── parts/
│   ├── header.html     ← ヘッダー
│   └── footer.html     ← フッター
└── patterns/
    ├── hero.php        ← ヒーローセクション
    ├── services.php    ← サービスカード
    └── cta.php         ← CTAバナー

今回は36ファイルを生成しました。Claude Codeは、フェーズ1の分析結果（カラー、フォント、レイアウト）を参照しながら、既存のデザインを再現するコードを出力しました。

カスタムCSSでデザインを再現するポイント

テーマ構築で確認した点は次の3つです。

フォント読み込み: 今回は、Google Fontsをfunctions.phpで読み込む方式にしました。

ホバーアニメーション: サービスカードのホバー効果など、Studioサイトにあった動きをCSSで再現しました。スクロールに合わせて要素が表示されるアニメーションも実装しています。

ブレイクポイント: モバイル、タブレット、PCの3段階でレイアウトが変わるよう、レスポンシブ対応を含めて生成しました。

ローカルプレビューで確認する

テーマのファイルが揃ったら、Claude CodeがHTMLのプレビューを生成し、ブラウザで表示を確認しました。トップページとメディアページの2つを、キーボードで切り替えながら確認できる形にしています。

---

AI導入に関するお困りごとは、株式会社NexaのAI顧問がサポートします。「何から始めればいいか分からない」という段階からご相談いただけます。

AI顧問の無料相談はこちら →

---

フェーズ3 — ConoHaサーバーにドメイン追加とWordPressインストール

既存のサーバー（別のサイトで使用中のConoHa WING）に、新しいドメインを追加します。このフェーズもagent-browserを使い、ConoHaのコントロールパネルを操作しました。ログインは人が行います。

どのメニューで何を設定するか

ConoHa WINGは、作業によって開くメニューが異なります。ドメインの追加は「サーバー管理」、WordPressとSSLは「サイト管理」です。

作業	開くメニュー	行う時期
ドメインの追加	サーバー管理 → ドメイン → +ドメイン	フェーズ3
WordPressのインストール	サイト管理 → サイト設定 → WordPress → ＋WordPress	フェーズ3
無料独自SSLの利用設定	サイト管理 → サイトセキュリティ → SSL	フェーズ6（ネームサーバー変更の後）
かんたんSSL化	サイト管理 → サイト設定 → WordPress	フェーズ6（無料独自SSLの後）

SSLの2つの設定は、ネームサーバーをConoHaに向けた後に行うため、このフェーズでは設定しません。

サーバー管理からドメインを追加する

取得済みのドメインを追加する場所は、ドメインを購入する画面ではなく、「サーバー管理」→「ドメイン」→「+ドメイン」です。手順は次のとおりです。

1. コントロールパネルにログインし、上部メニューの「WING」を開く
2. 左メニューの「サーバー管理」から「ドメイン」を開き、右上の「+ドメイン」をクリックする
3. 「新規ドメインを追加」を選び、ドメイン名（例: example.com）を入力する
4. 無料独自SSLは「利用しない」を選び、「保存」をクリックする

手順4で「利用しない」を選ぶのは、無料独自SSLの設定に、ネームサーバーがConoHaを向いていることが必要なためです。この時点では、ドメインはまだStudioを向いています。SSLはフェーズ6で設定します。

WordPressのインストール設定

左メニューの「サイト管理」→「サイト設定」→「WordPress」タブを開き、「＋WordPress」をクリックします。「インストール方法」は「新規インストール」を選びます。

今回の設定は次のとおりです。

設定項目	内容
URL	wwwなし（例: example.com）
WordPressテーマインストール	利用しない（後でオリジナルテーマを転送するため）
パーマリンク	後でWP-CLIで設定

WordPressのログイン情報とデータベースのパスワードは、インストール時に控えておきます。

ポイント ネームサーバーを切り替える前に表示を確認するには、ConoHa WINGの「動作確認URL」を使います。「サイト管理」→「サイト設定」→「基本設定」で利用設定をONにすると、確認用のURLが表示されます。WordPressでは正しく表示されない場合があり、そのときはパソコンのhostsファイルにサーバーのIPアドレスとドメイン名を書いて確認します。

フェーズ4・5 — テーマデプロイとWordPress初期設定を一括自動化

WordPressのインストールが終わったら、ローカルで構築したテーマをサーバーへ転送します。ここからの作業はコマンドで行うため、WordPressの管理画面を開く必要はありません。

以下のコマンドに出てくる値は、すべて例示用です。自分の環境に合わせて置き換えてください。

例示用の値	意味
example.com	移行するドメイン名
myserver	SSHの接続先に付けた別名
example-theme	テーマのフォルダ名
$HOME/projects/studio-to-wordpress	ローカルの作業フォルダ

事前準備: SSHの接続先とWP-CLI

ConoHa WINGのSSHは、キー認証が必須です。「サーバー管理」→「SSH」でキーを作成すると、接続情報（ホスト名、ポート番号、ユーザー名）を確認できます。この接続情報を、ローカルの ~/.ssh/config に別名で登録します。

Host myserver
  HostName ssh.example.com
  Port 22
  User example-user
  IdentityFile ~/.ssh/example-key.pem

HostName、Port、User、IdentityFileの4つは、コントロールパネルに表示された値と、ダウンロードしたキーの保存場所に置き換えます。

次に、サーバーのホームフォルダにWP-CLIを置きます。WP-CLI公式の手順にあるコマンドです。

# WP-CLIをダウンロードし、動作を確認する
ssh myserver 'curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar'
ssh myserver 'php wp-cli.phar --info'

テーマをzip化してサーバーに転送する

# 作業フォルダへ移動してテーマをzip化
cd "$HOME/projects/studio-to-wordpress"
zip -r example-theme.zip example-theme/

# サーバーに受け取り用のフォルダを作り、SCPで転送
ssh myserver 'mkdir -p ~/tmp'
scp example-theme.zip myserver:tmp/

# SSH経由で解凍・配置・有効化
ssh myserver 'unzip -o ~/tmp/example-theme.zip -d ~/public_html/example.com/wp-content/themes/'
ssh myserver 'php ~/wp-cli.phar --path="$HOME/public_html/example.com" theme activate example-theme'

フォルダのパスは、引用符（"）で囲みます。フォルダ名に空白が含まれていると、囲まない場合は空白の位置でパスが2つに分かれ、cd が失敗するためです。

転送後、使わないテーマは theme list で確認し、theme delete テーマ名 で削除します。

WP-CLIで固定ページとカテゴリを作成する

管理画面から手作業で設定する固定ページやカテゴリも、WP-CLIならコマンドで作成できます。

# WP-CLIの呼び出しを変数にまとめる（外側は一重引用符）
WP='php ~/wp-cli.phar --path="$HOME/public_html/example.com"'

# トップページ用の固定ページを作成し、IDを控える
HOME_ID=$(ssh myserver "$WP post create --post_type=page --post_title='ホーム' --post_status=publish --porcelain")

# 残りの固定ページを作成
for PAGE in "私たちについて" "サービス" "お問い合わせ" "メディア"; do
  ssh myserver "$WP post create --post_type=page --post_title='$PAGE' --post_status=publish --porcelain"
done

# ブログカテゴリを作成
ssh myserver "$WP term create category 'AI活用ノウハウ' --slug=ai-knowhow"
ssh myserver "$WP term create category '導入事例' --slug=case-study"

# トップページに固定ページを表示する
ssh myserver "$WP option update show_on_front page"
ssh myserver "$WP option update page_on_front $HOME_ID"

# パーマリンクを設定する
ssh myserver "$WP rewrite structure '/%postname%/'"

トップページに固定ページを表示するには、show_on_front と page_on_front の2つを設定します。page_on_front には、表示する固定ページのIDを指定します。

Claude Codeは、コマンドの作成、実行、結果の確認までを続けて行います。人は、作成されたページの内容を確認します。Claude CodeとWP-CLIで記事公開を自動化する手順はこちら →

プラグインをまとめてインストールする

# プラグインをインストールして有効化
for PLUGIN in contact-form-7 seo-simple-pack google-sitemap-plugin siteguard ewww-image-optimizer; do
  ssh myserver "$WP plugin install $PLUGIN --activate"
done

インストールしたプラグインは次のとおりです。コマンドに指定する名前（スラッグ）は、WordPress公式ディレクトリのプラグインページのURLで確認できます。

プラグイン	スラッグ	用途
Contact Form 7	contact-form-7	お問い合わせフォーム
SEO SIMPLE PACK	seo-simple-pack	SEOメタ設定
Sitemap by BestWebSoft	google-sitemap-plugin	サイトマップの生成
SiteGuard WP Plugin	siteguard	セキュリティ対策
EWWW Image Optimizer	ewww-image-optimizer	画像最適化

サイトマップ用のプラグインは、名前の似たものが複数あります。入れたいプラグインのスラッグを確認してから実行してください。

注意 SiteGuard WP Pluginは、ログインページのURLを変更する機能が初期状態でONです。有効化すると、ログインページのURLが login_ と5桁の数字を組み合わせたものに変わります。有効化した後に、新しいURLを必ず控えてください。

フェーズ6 — DNS切り替えとSSL有効化

テーマと設定が整ったら、本番のドメインをWordPressに向けます。このフェーズは順番が重要です。ConoHa WINGの無料独自SSLは、ネームサーバーがConoHaを向いてから設定します。「かんたんSSL化」は、無料独自SSLの利用設定を済ませてから使います。

1. Studioのドメイン接続を解除する
2. お名前.comでネームサーバーをConoHaに変更する
3. コマンドで反映を確認する
4. 無料独自SSLの利用設定を「利用する」にする
5. かんたんSSL化の「SSL有効化」をクリックする

Studioのドメイン解除手順

Studioのプロジェクトから、独自ドメインの接続を解除します。Studioの公開パネルを開き、ドメインの左側にある［×］をクリックします。解除は、WordPress側の準備（フェーズ5まで）が済んでから行います。

お名前.comでネームサーバーをConoHaに変更する

ドメインをお名前.comで管理している場合は、お名前.com Naviでネームサーバーを変更します。agent-browserで、ログイン済みの画面を操作しました。

1. お名前.com Naviにログインし、「ネームサーバー/DNS」から「ネームサーバー設定」を開く
2. 「1.ドメインの選択」で、変更するドメインにチェックを入れる
3. 「2.ネームサーバーの選択」で「その他のサービス」タブを開き、「その他のネームサーバーを使う」を選ぶ
4. ConoHaのネームサーバーを入力し、「確認」→「OK」の順にクリックする

ConoHaの公式ガイドに記載されているネームサーバーは、次の2つです。

ネームサーバー1: ns-a1.conoha.io
ネームサーバー2: ns-a2.conoha.io

自分の契約の値は、ConoHaのコントロールパネルの「サーバー管理」→「契約情報」→「メール/FTP/ネームサーバー情報」で確認できます。

DNS反映確認とSSL有効化

ネームサーバーの変更がインターネット全体に反映されるまで、最大で72時間程度かかります（お名前.com、ConoHaの公式案内）。反映の状況は、コマンドで確認できます。

# ネームサーバーを確認（ConoHaのネームサーバーが表示されれば反映済み）
dig example.com NS +short

# Aレコードを確認（ConoHaのサーバーのIPアドレスが表示されれば反映済み）
dig example.com A +short

サーバーのIPアドレスは、「サーバー管理」→「契約情報」で確認できます。

反映を確認できたら、SSLを2段階で設定します。

1. 無料独自SSLの利用設定

「サイト管理」→「サイトセキュリティ」→「SSL」タブを開き、「無料独自SSL」の「利用設定」を「利用する」にします。ConoHa以外のDNSを使う場合は、wwwありとwwwなしの2つのAレコードを設定しておく必要があります。

2. かんたんSSL化

「サイト管理」→「サイト設定」→「WordPress」タブを開き、対象のWordPressのURLをクリックします。「かんたんSSL化」の「SSL有効化」をクリックすると、サイトURLの変更など、WordPress内のSSL設定が自動で行われます。無料独自SSL（またはオプション独自SSL）の利用設定がONになっていないと、この機能は利用できません。

設定後、WordPressのURLがhttpsになったことをコマンドで確認します。

# https://example.com と表示されれば完了
ssh myserver "$WP option get siteurl"

注意 ConoHa WINGは、SSLを設定するとhttpsのURLへ自動で転送します。.htaccessに転送の設定を自分で追加すると、転送が繰り返されてエラーになる場合があります。また、無料独自SSLは、短期間に何度も設定すると一定期間申請が制限されます。

移行後に実施した残作業と発生したトラブル

移行の作業は6つのフェーズで終わりますが、ページの中身を入れる作業が残ります。また、作業が長くなると、Claude Codeのセッションをまたぐときに作業の状態が引き継がれない問題が起きます。

セッションをまたいだときのファイル消失と対処

今回の移行では、フェーズ2でテーマのファイルを構築した後、新しいセッションを開始したところ、前のセッションで作成したファイルを参照できなくなりました。原因は、ファイルを保存するフォルダをはっきり指定していなかったことです。

Claude Codeの各セッションは、新しいコンテキストウィンドウで始まります。前のセッションの会話の内容は、そのままでは引き継がれません。次の3点で対処しました。

• 作業フォルダのパスを最初に指定する（例: $HOME/projects/studio-to-wordpress/）
• 各フェーズの完了時に、どのファイルをどこに保存したかをClaude Codeに書き出させる（例: STATUS.md）
• 次のセッションの開始時に、そのファイルを読ませる。毎回伝える内容は、セッションの開始時に読み込まれる CLAUDE.md に書く

固定ページのコンテンツを入力する

固定ページの内容（プライバシーポリシー、特定商取引法に基づく表記、会社概要、サービス説明）は、Studioの公開ページからagent-browserで読み取り、WP-CLIでWordPressに登録しました。

本文をファイルに保存しておくと、post create にファイルを渡して登録できます。

# 本文のファイルをサーバーへ転送し、下書きとして登録する
ssh myserver 'mkdir -p ~/tmp/pages'
scp company.html myserver:tmp/pages/
ssh myserver "$WP post create ~/tmp/pages/company.html --post_type=page --post_title='会社概要' --post_status=draft --porcelain"

WordPress標準のインポート機能（「ツール」→「インポート」→「WordPress」）は、WordPressからエクスポートしたXMLファイルを読み込むためのものです。StudioからはこのXMLファイルを出力できないため、今回は使っていません。

登録した内容は、設立年などの細かい表記まで、元のサイトと人の目で照らし合わせます。違いがあれば、Claude Codeに修正を依頼します。

StudioのURLとWordPressのパーマリンクが違う場合の301リダイレクト

Studioの各ページのURLと、WordPress側で新しく設定したパーマリンク（/%postname%/など）が一致しないページがあれば、検索エンジンに登録済みの旧URLから新URLへ301リダイレクトを設定します。Googleの公式ガイドでも、URLを変更する場合はサーバー側の永続的なリダイレクト（301または308）を使うことが推奨されています。

今回の移行は、ドメイン名を変えずにネームサーバーの向き先だけを変えたため、多くのページはURLが変わりませんでした。Studio時代のURLとパーマリンクが異なるページが残る場合は、公開前にその一覧を作り、ConoHa WINGの .htaccess などサーバー側の設定で、旧URLごとに301リダイレクトを設定してから公開します。

StudioとClaudeの連携、逆向き（WordPressからStudio）の移行

StudioとWordPressの「移行」や、StudioとClaudeの「連携」で調べている方に向けて、この記事の手順以外の選択肢を整理します。

名称	提供元	できること	提供状況
Studio CMSのインポート機能	Studio	WordPressの記事や固定ページをStudioへ取り込む	提供中
Studio.Drop	Studio	既存サイトを取り込み、AIとの対話で運用する。MCP接続に対応	クローズドβ（招待制）
WordPress Studio	WordPress.com	パソコン上でWordPressを動かす。Claude Codeなどと接続できる	無料で提供中

WordPressからStudioへ移す場合

逆向きの移行には、Studio公式のインポート機能があります。WordPressからエクスポートしたXMLファイルを、Studio CMSへ取り込みます。

1. WordPressの管理画面で「ツール」→「エクスポート」を開き、すべてのコンテンツを選んでファイルをダウンロードする
2. StudioのCMSダッシュボードを開き、［インポート］を選ぶ
3. XMLファイルを指定して取り込む。完了または失敗は、メールで通知される

取り込めるのは、投稿記事、固定ページ、投稿者、タグ、カテゴリーの一部です。次の点に注意します。

• XMLファイルは最大10MBまで
• 記事は「下書き」の状態で取り込まれる。公開するには、公開ステータスを変更する
• カスタムフィールド、画像のキャプション、埋め込み、カスタム投稿タイプの内容は取り込まれない
• サイト全体の構成や設定を移す機能ではないため、デザインはStudio上で作る

StudioとClaudeを連携する方法

Studioは2026年8月に、新しいサービス「Studio.Drop」を発表しました。運用中のサイトをURLの入力などで取り込み、AIとの対話で編集や運用を行うサービスです。公式の発表では、MCP接続によって、ClaudeやCodexなどのAIエージェントとサイトを接続できると案内されています。

2026年10月1日時点では、クローズドβとして招待制で提供されています。利用するには、事前登録が必要です。

現行のStudioで作ったサイトをClaude Codeで扱う場合は、この記事のフェーズ1のように、公開中のページをブラウザ経由で読み取る方法になります。

「WordPress Studio」は別の製品

名前が似ていますが、「WordPress Studio」は、WordPress.comが提供するローカル開発ツールです。パソコン上でWordPressのサイトを動かすためのアプリで、macOS、Windows、Linuxに対応し、無料で利用できます。

公式ページでは、Claude Code、Cursor、VS Code、CodexとMCPで接続できると案内されています。WordPressのテーマを手元で作って確認したい場合に、選択肢になります。ノーコードのStudioからの移行機能ではありません。

よくある質問

Q. StudioにはWordPressへのエクスポート機能はありますか？

ありません。Studio公式ヘルプに、CMSのデータ、ページ情報、デザイン、ソースコードのエクスポートはできないと書かれています。WordPressへ移す場合は、公開中のページから文章と画像を集め、デザインはWordPress側で作り直します。

Q. WordPressからStudioへの移行はできますか？

記事と固定ページは、Studio公式のインポート機能で取り込めます。WordPressからエクスポートしたXMLファイル（最大10MB）をStudio CMSに読み込む方法で、記事は下書きの状態で取り込まれます。デザインやメニューの構成は取り込まれないため、Studio上で作ります。

Q. StudioとClaude（Claude Code）を連携する方法はありますか？

Studioが2026年8月に発表したStudio.Dropが、MCP接続に対応すると案内されています。2026年10月1日時点ではクローズドβで、招待制です。現行のStudioのサイトは、公開中のページをブラウザ経由でClaude Codeに読み取らせる方法で扱えます。

Q. WordPress StudioとStudioは同じものですか？

別の製品です。WordPress Studioは、WordPress.comが提供するローカル開発ツールで、パソコン上でWordPressを動かします。Studioは、コードを書かずにサイトを作るサービスです。

Q. オリジナルブロックテーマの構築はClaude Code未経験でもできますか？

今回の移行は、非エンジニアが実施しました。Claude Codeに、再現したいデザインの情報（スクリーンショットや、カラーとフォントの記録）を渡し、WordPressのブロックテーマを作るよう指示します。コードを直接書く必要はありませんが、表示の確認は人が行います。

Q. 既存のConoHaサーバーに新ドメインを追加するにはどうすればいいですか？

ConoHa WINGのコントロールパネルで、「サーバー管理」→「ドメイン」→「+ドメイン」から追加します。「新規ドメインを追加」を選び、ドメイン名を入力して保存します。ドメインを購入する画面ではない点に注意してください。

Q. ConoHa WINGの「かんたんSSL化」が使えないのはなぜですか？

無料独自SSL、またはオプション独自SSLの利用設定がONになっていないと利用できません。先に「サイト管理」→「サイトセキュリティ」→「SSL」で、無料独自SSLを「利用する」にします。無料独自SSLの設定には、ネームサーバーがConoHaを向いていることが必要です。初期ドメインでは、かんたんSSL化は利用できません。

Q. DNS切り替え後、サイトが表示されるまでどれくらいかかりますか？

お名前.comの案内では、ネームサーバーの変更がインターネット全体に反映されるまで、最大72時間程度かかります。反映の状況は dig example.com NS +short で確認できます。ConoHaのネームサーバー（ns-a1.conoha.io など）が表示されれば、反映されています。

まとめ

StudioからWordPressへの移行を、Claude Codeで進めた6つのフェーズを解説しました。

• フェーズ1: agent-browserで、Studioサイトのデザイン分析と画像の収集
• フェーズ2: オリジナルブロックテーマを36ファイル生成
• フェーズ3: ConoHa WINGへのドメイン追加と、WordPressの新規インストール
• フェーズ4・5: SCPでテーマを転送し、WP-CLIで固定ページ、カテゴリ、プラグインを設定
• フェーズ6: ネームサーバーの変更、無料独自SSLの利用設定、かんたんSSL化

Studioにはエクスポート機能がないため、移行は作り直しになります。その作り直しのうち、デザインの読み取り、テーマのコーディング、WordPressの初期設定は、Claude Code、WP-CLI、agent-browserの組み合わせで進められました。ログイン、SSLの設定の順番、公開前の表示確認は、人が確認する部分です。

同じ進め方は、WordPressサイトの新規構築や、既存サイトのリニューアルにも使えます。

---

---

この記事で参照した外部情報

1. Studio公式ヘルプhelp.studio.design
2. WP-CLI公式wp-cli.org
3. ConoHaの公式ガイドsupport.conoha.jp
4. お名前.comonamae.com
5. Studio.Dropstudio.design
6. 公式ページdeveloper.wordpress.com

本文中でリンクしている外部ページの一覧です（自動生成）。最終確認日は本記事の最終更新日 2026-10-01 で、リンク先の内容はその後変わることがあります。

📚 「AI活用ノウハウ」の関連記事

• Zoom法人契約ガイド｜料金・プランと導入前の確認事項
• HubSpot導入ガイド｜中小企業の費用・移行・定着の5段階
• Notta法人導入ガイド｜料金・席数とセキュリティの判断基準
• kintone導入費用はいくら？料金と初年度予算の計算方法
• A2Aプロトコルとは？MCPとの違いと企業導入までの5ステップ
• AI顧問とは？費用相場・AIコンサルとの違い・選び方【2026年版】

AI導入を検討中の方へ

• AI導入支援とは？選び方と進め方
• AI導入費用の相場と内訳
• AI顧問の費用相場と見積もりの見方
• AI顧問とAIコンサルの違い
• AI開発会社の選び方と発注前の確認点