StudioからWordPressに移行した全手順 — Claude Codeだけで完結した6つのフェーズ

StudioからWordPressへの移行は、Claude Codeを使えばデザイン分析・テーマ構築・DNS切り替えまで1日で完結できます。

要点1: Studioにはエクスポート機能がないため、Claude Code＋agent-browserでデザインを自動分析・素材収集する
要点2: オリジナルブロックテーマを36ファイル自動生成し、SSH経由でサーバーにデプロイ
要点3: WP-CLI・agent-browserを組み合わせてDNS切り替え・SSL有効化まで管理画面操作なしで完結

対象: Studioから本格的なSEO集客サイトへ移行を検討している経営者・Web担当者

今日やること: 現在のStudioサイトの構成（ページ数・デザイン）をメモし、ConoHaのサーバー環境を確認する

この記事の著者

株式会社Nexa 代表取締役川島陸

一橋大学経済学部卒業後、フォーティエンスコンサルティング株式会社（旧株式会社クニエ）にて法人向けAI導入支援等を経験。独立後、AI系メディア運営やDify/n8nの導入支援を経て、株式会社Nexaを創業。法人向けAI研修・AI導入支援・AI関連メディア運営を手掛ける。

詳しく見る無料相談をする

この記事の目次

なぜSTUDIOからWordPressへ移行したのか
移行の全体像 — Claude Codeが担った6つのフェーズ
フェーズ1 — 既存サイトのデザイン分析とスクレイピング
フェーズ2 — オリジナルWordPressブロックテーマをゼロから構築
フェーズ3 — ConoHaサーバーにドメイン追加とWordPressインストール
フェーズ4・5 — テーマデプロイとWordPress初期設定を一括自動化
フェーズ6 — DNS切り替えとSSL有効化
移行後に実施した残作業と発生したトラブル
よくある質問
まとめ

StudioからWordPressへの移行は、Claude Codeを使えば非エンジニアでも1日以内に完結できます。

「Studioは使いやすいけれど、SEO集客のためにWordPressに移行したい」という声は多く聞かれます。ただ、Studioにはエクスポート機能がないため、手作業での移行は膨大な時間がかかるのが現実です。

この記事では、あるコーポレートサイトをStudioからWordPressへ移行した際の全手順を公開します。デザイン分析・テーマ構築・サーバー設定・DNS切り替えまで、Claude Codeがどのように作業を自動化したか、実際の手順とトラブル対処を含めて詳しく解説します。

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

Studioはノーコードで美しいサイトを素早く作れる優れたツールです。コーポレートサイトの制作期間は2週間〜1ヶ月程度と短く、デザインの自由度も高い。しかし、本格的なSEO集客記事を運用していくフェーズに入ると、いくつかの壁に当たります。

Studioのブログ機能とSEOの限界

Studioにもブログ（CMS）機能は存在します。ただし、WordPressと比較した際に以下の制約があります。

項目	Studio	WordPress
SEOメタ設定	基本的なタイトル・description設定のみ	Yoast・SEO SIMPLE PACKで詳細設定可能
構造化データ	自動生成のみ	プラグインで完全制御
AIO対策（サマリーボックス等）	自由に実装困難	テーマカスタマイズで対応可能
プラグイン拡張	なし	60,000以上のプラグイン
カテゴリ・タグ管理	限定的	柔軟に設計可能
サイトマップ自動生成	基本機能あり	プラグインで高機能化可能

集客記事を本格運用するには、詳細なSEO設定・AIO対策・内部リンク設計の自由度が必要です。この観点では、WordPressが明らかに優位に立ちます。

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

WordPressへ移行することで得られる主なメリットは以下の通りです。

SEO施策の幅が広がる: メタディスクリプション・OGP・JSON-LDを記事ごとに細かく設定できる
プラグインで機能拡張できる: Contact Form 7・XMLサイトマップ・セキュリティ対策プラグインが使える
WP-CLIによる自動化: Claude Codeからコマンドラインで記事投稿・設定変更が可能になる（これがClaude Code連携の肝）
Google Search Console・GA4との連携: SEO分析ツールとの連携がより深くできる

「WordPressへ移行したいが、デザインの再現が大変」と感じる方は多いでしょう。そこで活躍するのがClaude Codeです。

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

今回のStudio→WordPress移行は、以下の6フェーズで構成されています。

フェーズ	内容	主なツール
Phase 1	既存サイトのデザイン分析・画像スクレイピング	agent-browser
Phase 2	オリジナルブロックテーマの構築（36ファイル）	Claude Code（コーディング）
Phase 3	ConoHAにドメイン追加・WordPressインストール	agent-browser（ConoHa操作）
Phase 4	テーマをサーバーにデプロイ・有効化	SCP・SSH・WP-CLI
Phase 5	WordPress初期設定（固定ページ・プラグイン・カテゴリ）	WP-CLI
Phase 6	Studioドメイン解除・DNS切り替え・SSL有効化	agent-browser（お名前.com操作）

全フェーズを通じてClaude Codeが自律的に作業を進め、ユーザーはパスワード入力などの一部操作のみ担当しました。管理画面での手動ポチポチはほぼゼロです。

＼ Claude Codeの導入、何から始めればいいかわかります／

法人向けClaude Code個別指導の無料相談はこちら

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

移行の第一歩は、既存のStudioサイトを正確に把握することです。StudioのSPA（シングルページアプリケーション）構造はHTMLを直接取得しても内容が得られないため、agent-browserを使ってブラウザレンダリング後の状態を解析します。

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

Claude Codeにagent-browserスキルを呼び出させ、既存サイトを一通りブラウズしながら以下の情報を記録させます。

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

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

ページ構成・カラー・フォントを正確に記録しておくことで、後のテーマ構築フェーズで迷いがなくなります。

画像素材をスクレイピングで収集する

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

ポイントStudioはSPA構造のため、通常のcurlやwgetでは画像URLを正確に取得できません。agent-browserでブラウザレンダリング後の状態から画像を収集するのがポイントです。

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

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

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

WordPressのブロックテーマは以下の構成要素から成ります。

nexa-corporate/├── 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はStudioサイトの分析結果（カラー・フォント・レイアウト）を参照しながら、既存のデザインを忠実に再現したコードを出力しました。

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

テーマ構築で注意すべきポイントがいくつかあります。

フォント読み込み: theme.jsonのfontFace URLは不安定なことがあるため、Google Fonts APIをfunctions.phpで読み込む方式が安定しています。Claude Codeはこの点を自動的に判断し、functions.phpでの管理に切り替えました。

ホバーアニメーション: サービスカードのホバー効果など、StudioサイトにあったインタラクションをCSSで再現。スクロールで要素がフェードインするアニメーションも実装しました。

ブレイクポイント: モバイル・タブレット・PCの3段階でレイアウトが変わるレスポンシブ対応も自動生成に含まれています。

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

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

Claude Codeの導入や活用方法について、個別にご相談いただけます。「WordPressサイトをAIで構築したい」「業務自動化をClaude Codeで実現したい」という段階からサポートしています。

Claude Code個別指導の無料相談はこちら →

＼業務自動化のお悩み、プロが30分で整理します／

法人向けClaude Code個別指導の無料相談はこちら

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

既存サーバー（別サイトで使用中のConoHa WING）に新しいドメインを追加します。このフェーズもagent-browserを使い、ConoHa管理画面の操作を自動化しました。

サイト管理画面からドメインを追加する

ConoHa WINGでの注意点として、ドメインを追加する場所は「ドメイン取得」画面ではなく、「サイト管理 → ドメイン → + ドメイン」です。取得済みドメインを追加するため、ドメイン購入の画面に誤って進まないように注意が必要です。

手順は以下の通りです。

ConoHa WING管理画面の「サイト管理」へ
「ドメイン」タブから「+ ドメイン」ボタンをクリック
使用するドメインを入力（SSL設定は最初は「利用しない」で保存し、後で有効化）
ドメイン追加完了後、「サイト」からWordPressのインストールに進む

WordPressのインストール設定

今回はWordPressテーマのインストール設定を「利用しない」に変更（後でオリジナルテーマをデプロイするため）して新規インストールしました。

インストール時の設定ポイント：

設定項目	内容
URL	wwwなし（`https://ドメイン名/`）
テーマインストール	利用しない（後でデプロイ）
パーマリンク	後でWP-CLIで設定

ポイント本番ドメインを変更する前に、ConoHaの仮ドメイン（*.xxxxxx.conoha.jp）でWordPressを構築・確認してから切り替えると、ダウンタイムをほぼゼロに抑えられます。

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

WordPressのインストールが完了したら、ローカルで構築したテーマをサーバーにデプロイします。すべてコマンドラインで実行しているため、WordPress管理画面を開く必要はありません。

テーマをzip化してサーバーにデプロイする

# テーマをzip化cd ~/Desktop/Claude\ Code実行フォルダ/SEOプロジェクト/nexaサイト/zip -r nexa-corporate.zip nexa-corporate/# SCPでサーバーに転送scp nexa-corporate.zip conoha:~/tmp/# SSH経由で解凍・配置・有効化ssh conoha 'unzip -o ~/tmp/nexa-corporate.zip -d ~/public_html/ドメイン名/wp-content/themes/'ssh conoha 'php ~/wp-cli.phar --path=$HOME/public_html/ドメイン名 theme activate nexa-corporate'

デプロイ完了後、デフォルトのテーマ（Cocoon等）をWP-CLIで削除し、環境をクリーンにします。

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

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

WP="php ~/wp-cli.phar --path=\$HOME/public_html/ドメイン名"# 固定ページを作成for PAGE in "ホーム" "私たちについて" "サービス" "お問い合わせ" "メディア"; do  ssh conoha "$WP post create --post_type=page --post_title='$PAGE' --post_status=publish --porcelain"done# ブログカテゴリを作成ssh conoha "$WP term create category 'AI活用ノウハウ' --slug=ai-knowhow"ssh conoha "$WP term create category '導入事例' --slug=case-study"# フロントページ設定ssh conoha "$WP option update show_on_front page"

このアプローチが有効な理由は、Claude Code（AI）がコマンドの生成・実行・結果確認をすべて自動で行えるためです。人間は何もしなくても、WPの初期設定が完了します。Claude Code × WordPressで記事公開を完全自動化した方法はこちら →

プラグインをCLIで一括インストールする

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

インストールしたプラグインは以下の通りです。

プラグイン	用途
Contact Form 7	お問い合わせフォーム
SEO SIMPLE PACK	SEOメタ設定
Google XML Sitemaps	サイトマップ自動生成
SiteGuard WP Plugin	セキュリティ対策
EWWW Image Optimizer	画像最適化

＼ AI活用の「次の一手」を一緒に考えませんか／

法人向けClaude Code個別指導の無料相談はこちら

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

テーマ・設定が整ったら、本番ドメインをWordPressに向けます。StudioのドメインをConoHAに切り替えるDNS変更が最後の関門です。

Studioのドメイン解除手順

まず、StudioのプロジェクトからカスタムドメインをDetach（解除）します。Studioの管理画面「設定 → ドメイン → Disconnect」から解除できます。この操作を行わないと、同じドメインに2つのサイトが紐づいた状態になり、意図しない挙動が起きる可能性があります。

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

ドメインをお名前.comで取得している場合、ネームサーバーをConoHAのものに変更します。agent-browserでお名前.com Navi（ログイン済み状態）を操作し、以下のネームサーバーに変更しました。

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

DNS反映確認とSSL有効化

ネームサーバー変更後、DNS反映には通常1〜数時間（最大72時間）かかります。反映の確認はコマンドで行えます。

# ネームサーバー確認dig ドメイン名 NS +short# Aレコード確認（ConoHAのIPに変わっていればOK）dig ドメイン名 A +short

DNS反映が確認できたら、ConoHa管理画面の「かんたんSSL化」ボタンをクリックしてSSL証明書を発行します。このフェーズもagent-browserで自動操作できますが、SSL発行には数分〜数十分かかるため、証明書の発行完了を待つ必要があります。

SSL有効化後、WordPressのサイトURLをhttps://に変更するのも忘れずに設定します。

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

基本的な移行作業は6フェーズで完了しますが、コンテンツ面の作業が残ります。また、長時間の作業ではClaude Codeのコンテキスト（会話の長さ制限）が問題になることがあります。

コンテキスト切れによるファイル消失と対処

今回の移行で実際に遭遇したトラブルが、コンテキスト切れによる作業状態の喪失です。

フェーズ2でテーマファイルを構築したものの、コンテキスト切れで新しいセッションを開始したところ、前のセッションで作成したファイルが参照できない状態になりました。原因は、Claude Codeがファイルを保存するパスが正しく設定されていなかったためです。

対処方法:– 作業フォルダのパスを最初に明確に指定する（例: ~/Desktop/Claude Code実行フォルダ/プロジェクト名/）- 各フェーズの完了時に「どのファイルをどこに保存したか」をClaude Codeに確認させる- 次のセッション開始時には「前回のサマリーを記載したファイル（STATUS.mdなど）」を参照させる

このトラブルを回避するために、長大な作業では各フェーズ完了後にサマリーファイルを保存するようにすると効果的です。

各固定ページのコンテンツ入力を自動化する

固定ページの内容（プライバシーポリシー・特定商取引法・会社概要・サービス説明）は、既存のStudioサイトからagent-browserで取得し、WP-CLIでWordPressに投稿しました。

既存サイトの内容と完全に一致させるため、一度Studioのライブページをagent-browserで読み取り、テキストを抽出→WP-CLIで投稿という流れで自動化しました。細かい表記の差異（設立年など）はユーザーが確認して修正を依頼するだけで、Claude Codeが自動的に修正します。

よくある質問

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

ありません。StudioにはWordPress形式（WXR）へのエクスポート機能がないため、コンテンツは手作業またはClaude Code＋agent-browserで収集する必要があります。デザインはゼロから作り直しになりますが、Claude Codeを使えばデザイン分析→テーマ構築を自動化できます。