VPS+Claude Codeで作るWordPressコーポレートサイト構築手順

こんにちは、AIシステムズです。
この記事は、代表コバが現場で蓄積してきた知見をもとに、AIを活用して構成・執筆し、弊社にて最終チェックを行ったものです。

このサイト（弊社コーポレートサイト）は、VPSサーバーと Claude Code（Anthropic 社の AI 開発エージェント）の組み合わせで構築しました。デザインカンプもコーディングも、ほぼ自然言語の指示だけで作っています。
この記事では、同じやり方で WordPress のコーポレートサイトを立ち上げたい方向けに、実際に踏んだ手順を整理して紹介します。

VPS の初期設定から Web サーバー構築まで
WordPress を導入してテーマ開発に入るまで
Claude Code に自作テーマを書かせるときの指示の組み立て方
公開後の運用で詰まりやすいポイント

このサイトをどう作ったか（全体像）
事前に用意するもの
手順1：VPS の初期設定
手順2：Web サーバー・PHP・データベースの構築
手順3：WordPress のインストール
手順4：Claude Code のセットアップ
手順5：自作テーマを Claude Code に書かせる
手順6：カスタム投稿タイプと SEO 設定
手順7：公開と運用
Claude Code に任せるときのコツと落とし穴

このサイトをどう作ったか（全体像）

構築の流れを先にまとめると、次のとおりです。

国内 VPS 事業者で 1 台契約（メモリ 2GB クラスで十分）
OS は Linux ディストリビューション（RHEL 系または Debian 系）
Apache + PHP + MySQL／MariaDB を導入
WordPress 本体をインストール
サーバーに Claude Code をインストールし、テーマディレクトリで起動
「こういうコーポレートサイトを作りたい」と自然言語で指示し、テーマファイルを生成・編集
ブラウザで確認しながら、Claude Code と対話で修正を繰り返す

ポイントは「Claude Code をサーバー上で直接動かす」ことです。ローカルでファイルを作ってアップロードするのではなく、本番サーバーのファイルを Claude Code が直接読み書きするので、編集と確認のサイクルが極めて短くなります。

事前に用意するもの

VPS：1〜2 vCPU、メモリ 2GB、ストレージ 50GB 程度
ドメイン：DNS が VPS の IP を向くよう設定
SSH 接続環境：手元の PC から VPS に root 権限で入れること
Anthropic の API キーまたは Claude サブスクリプション：Claude Code を動かすために必要
Node.js 環境：Claude Code のインストールに使用

事前知識として、Linux の基本コマンド、ファイル権限の概念、WordPress の管理画面操作くらいは押さえておくとスムーズです。コードが書けなくても問題ありませんが、「何が起きているか読める」レベルは必要です。

手順1：VPS の初期設定

契約直後の VPS は、最小限のセキュリティ設定から始めます。

OS のパッケージを最新化（dnf update または apt update && apt upgrade）
SSH ポートを変更、または公開鍵認証に切り替えてパスワード認証を無効化
ファイアウォール（firewalld または ufw）で 22／80／443 のみ許可
タイムゾーンを Asia/Tokyo に設定
swap が無い場合は 1〜2GB 用意

ここは Claude Code に任せず、人の手で確認しながら進めるのを勧めます。サーバーが踏み台にされると、その後の作業すべてが無駄になります。

手順2：Web サーバー・PHP・データベースの構築

弊社サイトは Apache + PHP + MariaDB の構成です。Nginx + PHP-FPM でも問題ありません。

Apache（または Nginx）を導入し、自動起動を有効化
PHP は 8.1 以上を推奨。mbstring／gd／mysqli／xml／curl 拡張を入れる
MariaDB（または MySQL）を導入し、初期セキュリティスクリプトを実行
WordPress 用のデータベースとユーザーを作成、必要最小限の権限のみ付与
Let’s Encrypt（certbot）で SSL 証明書を発行し、自動更新を仕込む

この段階で、ドメインにアクセスすると Apache または Nginx のテストページが表示される状態にしておきます。

手順3：WordPress のインストール

公式サイトから WordPress 本体を取得し、Web ルート直下に展開します。

wp-config.php にデータベース接続情報を記述
ファイル所有者を Web サーバーの実行ユーザーに合わせる
ブラウザでドメインにアクセスし、5 分インストールを完了させる
WP-CLI も一緒に入れておくと、後の運用が圧倒的に楽になります

WP-CLI は wp post list、wp term create、wp db export などをコマンド 1 発で叩けます。Claude Code とも相性が良く、「カテゴリを 5 つ作って各記事を割り当てて」のような指示を実行レベルまで自動化できます。

手順4：Claude Code のセットアップ

Claude Code は、ターミナル上で動く AI 開発エージェントです。サーバー側の Node.js を 18 以上にして、Anthropic 公式の手順でインストールします。

サーバーに SSH でログイン
テーマを置くディレクトリへ移動（自作テーマのフォルダ）
claude コマンドを起動し、初回はログイン認証を済ませる
必要に応じて CLAUDE.md をプロジェクト直下に置き、「このサイトの目的」「使ってよい技術」「守ってほしいコーディング規約」を書いておく

CLAUDE.md は「AI に渡す前提条件のメモ」です。例えば「PHP 8.1 で動く構成」「WordPress 標準関数を優先」「不要なプラグインは追加しない」など、毎回繰り返し説明したくないルールをここに書いておくと、対話が一段安定します。

手順5：自作テーマを Claude Code に書かせる

ここが本題です。Claude Code に「こういうサイトを作りたい」と日本語で渡し、テーマファイルを生成させます。指示の組み立て方には型があります。

1. 全体像をまず合意する

最初に「サービス紹介・料金・お役立ち情報・実績・お問い合わせ」のようなページ構成と、それぞれの目的を一気に伝えます。Claude Code は内部でディレクトリ構成案を返してきます。その時点で気になる点はすべて指摘し、進行前に齟齬をつぶします。

2. 共通パーツから作る

header.php／footer.php／functions.php を先に固めます。ナビゲーションやフッターのリンク構造、SEO 用のメタタグ出力など、全ページで共通する処理を最初に整えると、後段の作業が驚くほど早くなります。

3. ページテンプレートを 1 枚ずつ作る

page-templates/page-{slug}.php として 1 ページずつ作ります。Claude Code に「料金ページを作りたい。中身は LP15万〜、コーポレートサイト30万〜、業務システム50万〜の表と FAQ」のように具体的な要素まで指定すると、構造の整った HTML を返してきます。

4. 微調整は対話で詰める

ブラウザで開いて「ファーストビューの文字が大きすぎる」「価格表のセル間がきつい」と返すだけで、CSS を直してくれます。

手順6：カスタム投稿タイプと SEO 設定

コーポレートサイトでは、お役立ち情報や実績をカスタム投稿タイプ（CPT）で分けると管理が楽です。

register_post_type で CPT を登録（弊社の場合は tips／works）
register_taxonomy でカテゴリ用のタクソノミーを追加
固定ページのテンプレートから、各 CPT の一覧・詳細ページを描画

SEO は Yoast SEO、解析は Site Kit by Google（Search Console と Analytics の統合）を入れています。functions.php の出力と Yoast の出力が二重にならないよう、片方に寄せておくのが重要です。Claude Code に「Yoast SEO を使う前提で、独自の og:title 出力は Yoast 側に寄せて」と伝えれば、整合性のある形に直してくれます。

手順7：公開と運用

公開前後で必ずやることをまとめます。

本番公開前に、別ドメイン（または subdomain）でステージング確認
パーマリンク構造を決めて固定化（後から変えると SEO 評価がリセットされやすい）
サイトマップ XML を Search Console に登録
定期的な DB バックアップの自動化（弊社は /root/wp-backups/{サイト名}/ へ日次出力）
改修前は必ず DB をバックアップしてから着手する（Claude Code に大規模な構造変更を任せる前は特に）

Claude Code に任せるときのコツと落とし穴

弊社が現場で繰り返し感じている、効くコツと注意点を整理します。

「やってほしいこと」と「やってほしくないこと」を両方書く：例「コメントは必要最小限。長い解説コメントは入れない」
1 回の指示で詰め込みすぎない：1 ファイル単位、1 機能単位に区切る
大きな書き換え前は必ず Git コミット or DB バックアップ：戻せる状態を確保
ブラウザで実物を確認：差分だけ見て「動いてるはず」と判断しない
機密情報を直接渡さない：DB 認証情報・API キーは wp-config.php や .env に置き、Claude Code には「wp-config.php を参照して接続して」と伝える

落とし穴で一番多いのは、「動いた風に見えるが、要件と微妙にズレた実装」になっていることです。必ず人がサイトを操作して、想定の挙動になっているか目視確認してください。

まとめ

VPS + Claude Code でコーポレートサイトを作る流れは、次の通りでした。

VPS を契約し、最低限のセキュリティを整える
Apache／Nginx・PHP・DB を導入し、WordPress を入れる
Claude Code をサーバーにセットアップ
テーマを Claude Code との対話で作っていく
SEO・解析・バックアップを整えて公開

弊社サイトは、ライブラリ知識やデザインセンスよりも、「何を作りたいかを言葉で詰める力」のほうが重要だと痛感した案件でした。エンジニア出身でない経営者や担当者でも、要件を整理できれば AI 主導で十分に作れます。

本記事は代表コバの現場知見をもとに AI で構成し、弊社にて最終確認を行っています。

「自社でも同じやり方を試したい」「途中までやってみたが詰まっている」など、相談ベースでも対応しています。費用感だけ知りたい方も、お気軽にご相談ください。

AI Systemsへの無料相談はこちら

「何から始めればいいか分からない」段階からでも、お気軽にご相談ください。
まずは、お話を聞かせていただくだけでも大丈夫です。

無料で相談する

コバ

AI活用 / Web制作 / 業務自動化支援

中小企業さま向けに「お手頃に・早く・成果が出る」開発支援を行っています。AI・Web・自動化の3分野を、まとめてサポートしています。