現代のWordPress制作会社が競争優位性を確立するための鍵は、もはや優れたコードを書くことだけではありません。反復的な作業を自動化し、運用コストや市場投入までの時間を削減しながら、クライアントごとに最適化されたサービスを提供することが重要です。
制作会社がワークフローを自動化するうえで、制作プロセスへのAIツールの導入は欠かせません。そんな中、最近ではAIを活用した新しい開発手法である「バイブコーディング」が注目を集めています。
注意点として、バイブコーディングは、簡単にコードを書けるようになる手法ではありません。バイブコーディングを行うのに必ずしも長年の経験は必要ありませんが、プログラミングや使用する言語に関する確かな知識は必要です。また、従来のコーディングスキルに加え、より幅広いスキルセットを身につけることも重要になっています。そのひとつが、高性能なAIツールを効果的に活用する能力です。
この記事では、制作会社のWordPressワークフローにバイブコーディングを取り入れる方法を解説していきます。
WordPressワークフローでバイブコーディングを取り入れる
バイブコーディングとは、効率性とリソースの最適化を重視した開発手法です。開発者は1行ずつコードを記述するのではなく、Webプロジェクトのアーキテクチャ、ロジック、技術要件、ビジネス要件など、実現したい内容をAIに指示し、実際のコーディングはAIエージェントに任せます。
バイブコーディングをプロセスの自動化に取り入れることで、市場投入までの時間の短縮、自動化の民主化、さらにプロセスの柔軟性と適応性の向上といった大きなメリットが得られます。これらのメリットは、業務効率の向上とスケーラビリティの強化につながります。ワークフローの自動化とバイブコーディングの導入により、新規クライアントを受け入れても間接費が増えないため、より容易に事業を拡大できます。
とはいえ、バイブコーディングは、常に適切に動作する、保守性に優れたコードを魔法のように生成してくれるわけではありません。この新しい開発手法を活用するには、AIエージェントの仕組みを理解するとともに、WordPress制作会社にとって信頼性の高い開発手法となるよう、設計原則やベストプラクティスに沿って活用することが重要です。
今回は、実際のユースケースをもとに、WordPressプロジェクトのオンボーディングを自動化するワークフローの構築方法をご紹介します。具体的には、GitHub CopilotとKinsta APIを使用して、Kinstaでホストする事前設定済みのWordPressサイトのテンプレートを複製する方法を見ていきます。
この手順を通じて、自動化のメリットや、開発ワークフローにバイブコーディングを取り入れる具体的な方法が見えてくると思います。
自動化に必要なツール
まずは、Kinstaでホストされている事前設定済みのWordPressサイトを用意します。今回は、新規サイトを作成して、Astra、GeneratePress、Neveの各テーマをインストールしました。また、Yoast SEO、Starter Templates、Astraテーマ向けのサポートプラグインなどもインストールしています。
サイトを複製するには、Kinsta API経由でKinstaのサーバー環境にアクセスする必要があります。 これにはKinsta APIキー、企業ID、および複製したい環境のIDが必要です。
企業IDは、MyKinstaのURL（idCompanyパラメータ）、またはMyKinstaにログイン後、「サイト」＞（サイト名）＞「情報」画面で確認できます。同じセクションに、「環境ID」も表示されます。
最後に、開発に使用するIDE（統合開発環境）を用意します。Visual Studio CodeやCursorといった定番の開発環境や、LovableのようなAIを前提とした開発環境も利用できます。また、実際の開発に入る前にプロンプトを試せる、Google AI Studioのようなウェブベースのプロトタイピングプラットフォームを利用するのもおすすめです。
今回は、以下のような理由から、プロンプトの作成にはGoogle AI Studio、アプリケーションの開発にはVisual Studio Code上のGitHub Copilotを使用します。
- 広く普及している：GitHub Copilotは非常に多くの開発者に利用されており、多くのWordPress制作会社でも主要な開発ツールのひとつとして活用されてる。ワークフローの自動化プロジェクトに導入しても、新しい開発ツールの使い方を一から習得する必要がない。
- ファイルシステムに直接アクセスできる：GitHub Copilotはプロジェクトのファイルシステムにアクセスできるため、設定ファイルを含む必要なファイルを直接作成し、指示に基づいてコードを生成可能。
- エージェントへの指示を定義できる：
.github/copilot-instructions.md設定ファイルを使用して、プロジェクト全体に適用するルールを定義できる。AIエージェントはこれらの指示に従って動作するため、プロジェクトのコーディング規約や開発ルールに沿ったファイルを一貫して生成可能。
これらの特徴を踏まえながら、GitHub Copilotの仕組みを見ていきましょう。
GitHub Copilotで始めるバイブコーディング─モード、コンテキストウィンドウ、エージェントへの指示
GitHub Copilotの仕組みを理解することで、その可能性を最大限に引き出すことができます。まずは、Copilotの基本概念について見ていきます。
GitHub Copilotのモード
GitHub Copilotには3つの対話モードがあり、選択したモードによってAIとのやり取りの内容や進め方が変わります。
Plan：Planモードは、Copilotがプロジェクトをタスクごとに整理した実行計画を作成し、その後Agentモードに引き継いで実装を進めます（詳しくは後ほど）。これにより、AIエージェントはプロジェクト全体の目標を意識しながら作業を進められるため、進捗も効率的に管理できます。
このモードでは、実装手順や検証方法を含む詳細なロードマップが提示されます。内容を確認したうえで、必要に応じてフィードバックを送信し、計画を調整できます。提案された計画に問題がなければ、そのまま実装へ進みます。
また、チャットウィンドウ内の「Configure Tools（ツールの設定）」から利用するツールを細かく設定できます。
Agent：Agentモードでは、Copilotがリクエストの内容を分析し、AIモデルを活用して最適な実装方法を判断したうえで作業を開始します。最初の実装が完了すると、自動的にエラーチェックを実行し、必要に応じてコードの修正やターミナルコマンドの実行、各種ツールの呼び出しなどを行いながら、タスクを完了へと導きます。
このモードでは、デフォルトですべての利用可能なツールが有効になっています。
AIエージェントについて詳しくは、VS Codeの公式ドキュメントをご覧ください。
Ask：Askモードは、チャットを通じて質問をするためのモードです。使い方に関する相談や、一般的なコーディングに関する質問に適しています。
これら3つのGitHub Copilotモードは、アプリケーション開発のライフサイクルに沿ってそれぞれ異なる役割を担います。
プロジェクトの設計段階では、Planモードを使用して開発計画を立てます。作成するファイルや必要な依存関係、全体のアーキテクチャなどを整理し、実装のロードマップを構築できます。
実際の開発段階では、Agentモードがファイルの作成やコードの生成を担います。この段階では、AIエージェントが自律的に作業を進めるため、開発者は監督役として必要に応じてフィードバックを行い、問題の解決やコードの改善を進めます。
Askモードは、デバッグや問題解決の際に役立ちます。疑問点への回答や例外の原因調査、コードのドキュメント作成などをサポートしてくれます。
コンテキストウィンドウ
コンテキストとは、AIモデルが応答を生成する際に参照できるすべての情報を指します。チャットの履歴、ローカルまたはリモートのワークスペース内のファイル、システムやカスタムの指示、ツールの実行結果、チャットに明示的に追加した参照情報などが含まれます。
AIモデルの応答品質はコンテキストに大きく左右されるため、適切で関連性の高い情報を提供することが重要です。
AIモデルが扱える情報量には上限があります。コンテキストウィンドウ（Context Window）とは、LLM（大規模言語モデル）が1回のやり取りで処理し、一時的に保持できる情報量の上限を指します。この情報量は、単語やコードの一部を表す「トークン」という単位で測定されます。Visual Studio Codeでは、チャットウィンドウ右下のアイコンをクリックすると、コンテキストウィンドウで利用可能なトークン数を確認できます。
コンテキストウィンドウは、AIモデルの「短期記憶」のような役割を果たします。コンテキストウィンドウがいっぱいになると、AIエージェントが誤った情報や一貫性のない回答を返す可能性があります。さらに、無関係な情報でコンテキストウィンドウが埋まってしまうコンテキスト汚染（Context Pollution）が起こると、Copilotがバグのあるコードやハルシネーション（事実に基づかない内容）、最適化されていないコードを生成する原因になります。
こうした問題を避けて効率的に開発を進めるには、チャットのコンテキストを適切に管理することが重要です。不要なタブは閉じる、必要なファイルだけを明示的にコンテキストへ追加する、/compact コマンドでチャット履歴を整理する、あるいは新規チャットを開いてクリーンなコンテキストから作業を始めるといった方法が効果的です。
エージェントへの指示
エージェントへ指示は、AIエージェントがコードを生成したり、さまざまな開発タスクを実行したりする際のルールを定義するものです。これにより、会社のコーディング規約に準拠したコードを生成したり、許可されたライブラリだけを使用したり、APIキーなどの機密情報を安全に管理したりできます。
こうしたルールを毎回プロンプトに入力する代わりに、Markdownファイルにカスタム指示としてまとめておけば、ビジネス要件やプロジェクト要件に沿った回答を一貫して得られます。複数の指示ファイルがある場合は、Visual Studio Codeが自動的にそれらを結合し、チャットのコンテキストに追加します。
適切な指示を与えることで、CopilotがAPIリクエストのパラメータ名を取り違えたり、外部サービスから返されたレスポンスを誤って処理したりするのを防ぐことができます。
難しく感じるかもしれませんが、心配する必要はありません。GitHub Copilotは、指示ファイルを自動生成することもできます。詳しい手順は、公式ドキュメントをご覧ください。
ここまでで基本を押さえたところで、次のセクションでは、VS Code上のGitHub Copilotを使って、Kinsta APIを活用したWordPressワークフロー自動化アプリケーションをバイブコーディングで構築する方法を見ていきます。いよいよ実践に入っていきましょう。
実際のWordPress自動化ワークフローをバイブコーディングで構築する
従来のコーディングと同じように、WordPressワークフローの自動化のような高度なプロジェクトをバイブコーディングで構築する場合も、ソフトウェア開発ライフサイクルに沿って、いくつかの段階を踏んで進めていきます。
今回は、WordPressワークフロー自動化プロジェクトをバイブコーディングで構築するプロセスを、実践しやすいステップに分けてご説明していきます。各フェーズを通じて、バイブコーディングのアプローチによって何が変わるのかを見ていきます。
ルールの定義
このフェーズでは、AIエージェントが作業する際のガードレールとなる基本的な指示を定義します。具体的には、技術スタック、セキュリティガイドライン、構造化ログのパターンなどを定めたコンテキストファイルを作成します。
VS Codeでプロジェクトフォルダを作成したら、まずCopilotチャットを開き、AIエージェントとの会話を開始してプロジェクトの設計方針を定義します。この初期段階では、主にAskモードを使って、プロジェクトに最適な言語を判断し、エージェントに与える指示の構成を設計します。
プロジェクトに使用する言語の選択
まだ技術スタックが決まっていない場合は、まずプロジェクトに適した言語を見極めるための質問から始めます。今回の自動化ワークフローでは、Node.jsとPythonのメリットとデメリットをCopilotに比較してもらいました。
両言語の長所と短所を詳しく比較したうえで、最終的にNode.jsが推奨されました。
エージェントへの指示を設計
次に、ハルシネーションを最小限に抑え、コンテキストの消失を防ぐために、カスタムのエージェント指示をどのように設計すればよいかをCopilotに尋ねます。
Copilotは、コンテキスト汚染を防ぐため、エージェントへの指示を複数のファイルに分割することを推奨しました。
Copilotの提案内容を理解したところで、次はエージェントへの指示ファイルの構成を設計します。
CopilotをAskモードからPlanモードに切り替え、複数のMarkdown（.md）ファイルで構成するエージェント指示システムのファイル構成を作成するよう指示しました。
Copilotは、手順の整理を始め、明確な理由を示しながら、プロジェクトの構成に合わせてルールを調整するための質問をいくつか提示しました。
Copilotには、以下のリンクを参照するよう指示しました。
https://api-docs.kinsta.com/api-reference/wordpress-sites/get-list-of-company-sites
https://api-docs.kinsta.com/api-reference/wordpress-sites/get-site-by-id
https://api-docs.kinsta.com/api-reference/wordpress-sites/clone-existing-siteCopilotは実行フェーズを分解し、それぞれの選択における技術的な理由を説明したうえで、変更を適用する準備ができているかを確認しました。
提案された計画を承認すると、CopilotのモードはPlanからAgentへ自動的に切り替わります。その後、AIエージェントがローカルのファイルシステムに直接アクセスし、エージェントへの指示ファイルを作成します。
以下の画像は、copilot-instructions.md ファイルのプレビューです。
反復的な開発
このフェーズでは、実際にコードを作成します。AIエージェントがプロジェクトファイルやスクリプトを生成し、開発者はプロセス全体の設計者兼ディレクターとして関わります。つまり、この段階では、Copilotにアプリケーションの構成やコードを作成するよう指示し、必要な情報やフィードバックを与え、選択肢を評価しながら、重要な判断を行います。
WordPressワークフロー自動化プロジェクトの次のステップは、Node.jsプロジェクトを初期化し、ファイル構成を定義することです。そこで再びPlanモードに戻り、次の手順を計画するようCopilotに依頼しました。
Copilotは、関連ファイル、実行すべき確認事項、判断が必要な項目に関する補足情報を含む詳細な計画を作成しました。内容を慎重に確認したうえで、実装が開始されました。
やることが多いように感じるかもしれませんが、心配はいりません。必要な作業はすべてCopilotに依頼できます。
ファイルの生成中、Copilotは内容を確認したい点について質問したり、特定の操作を実行する前に許可を求めたりすることがあります。内容を確認し、必要に応じて回答や承認を行ってください。
操作が完了すると、次の手順が案内されました。
Copilotとのやり取りは、アプリケーションに必要なすべてのファイルとコードが作成されるまで続きます。次の例では、PlanモードでCopilotに.envファイルのテンプレートを生成し、適切なセキュリティチェック（フェイルファスト）を組み込むよう指示しました。
以下のスクリーンショットは、Copilotによって生成された.env.exampleファイルです。
次に、アプリケーション全体のロジックをまとめた index.js ファイルを生成するよう依頼しました。より高度なアプリケーションであれば、スクリプトを複数のファイルに分割する方が望ましいですが、今回のアプリケーションでは、すべてのロジックを1つのスクリプトにまとめることにしました。
いよいよスクリプトを実行します。サイトの複製を開始する前に、.env.exampleをもとに .envファイルを作成し、KINSTA_API_KEY、KINSTA_COMPANY_ID、SOURCE_ENVIRONMENT_IDのプレースホルダーを実際の値に置き換えました。
スクリプトと環境変数の準備ができたら、VS Codeのターミナルを開き、npm startと入力します。
すべてが想定どおりに動作すれば、MyKinstaに汎用的な名前の新しいサイトが表示されます。エラーが発生した場合は、ターミナルに表示されたエラーをコピーしてCopilotチャットに貼り付けるだけで、AIエージェントが内容を確認し、原因を特定して適切な修正案を提案してくれます。必要に応じて、追加の確認を求められることもあります。
この時点で、アプリケーションに改善や新機能を追加したくなるかもしれません。今回のユースケースでは、スクリプトによって生成された汎用的なサイト名が理想的ではなかったため、2回目のイテレーションに進みました。
アプリケーションの微調整
KinstaでホストするWordPressサイトを自動で複製するという最初の目標を達成したところで、次に、実行時にユーザーが任意のサイト名を指定できる機能を追加するようCopilotに依頼しました。
Kinsta APIの/sites/cloneエンドポイントでは、company、source_env_id、display_nameの3つのパラメータが必要です。このうち、最初の2つのパラメータは .envファイル内の環境変数として固定し、display_nameパラメータはスクリプトによって自動生成されるようにしています。
アプリケーションのユーザーがフォールバック用の環境変数を利用できるようにすれば、柔軟性を高めつつ、npm runコマンドから追加のパラメータを直接渡すこともできます。
このリクエストをCopilotに依頼したところ、AIエージェントは index.jsと.envの両方を変更し、必要な修正を実装しました。その後、以下の回答が返されました。
最後に、Copilotの指示に従って、さまざまな条件でアプリケーションをテストしました。
- パラメータを指定せずに `
npm run`を実行 .envファイル内のSITE_NAME定数にデフォルト値を設定し、npm runを再度実行npm runコマンドにSITE_NAME=your-site-nameパラメータを手動で追加npm start -- --site-name your-site-name構文とnpm start -- --site-name=your-site-name構文の両方を使用してスクリプトを実行
このような継続的な改善を重ねる中で、手動入力されたサイト名を読みやすい表示名へ自動変換しつつ、my-awesome-wordpress-websiteのようなスラッグ形式の値もそのまま受け付けられる機能を追加しました。
その結果、以下のどちらのコマンドでも実行できるようになりました。
npm start -- --site-name="My Awesome WordPress Website"
npm start -- --site-name=my-awesome-wordpress-websiteこれで、バイブコーディングによる初めてのワークフロー自動化アプリケーションが完成しました。続いて、プラグインやテーマ、フロントエンドの表示を確認してみましょう。さらに追加したい機能や改善点があれば、ここまで紹介した反復的なアプローチに沿って、引き続き開発を進めてみてください。
フェイルファストによるセキュリティチェック
APIキーのような機密情報を扱う重要なアプリケーションでは、スクリプトが実行時の重要なポイントで厳格なチェックを行うことが不可欠です。チェックに失敗した場合は、エラーの種類が分かる明確なメッセージを返し、ただちに処理を停止する必要があります（上記のプロンプト参照）。
GitHub Copilotは、次の3つの重要なレベルでフェイルファストを実装しました。
環境変数の検証：このレベルでは、API呼び出しやタスクの実行を行う前に、必要な環境変数が存在するかどうかをスクリプトが確認します。以下の画像は、このチェックについてCopilotがチャット内で説明している様子です。
もちろん、実際に生成されるコードは画像の内容と異なる場合がありますが、重要なのはコードそのものではなく、このアプローチです。
APIレスポンスの検証：サイトの複製処理が開始されると、スクリプトはまずオペレーションIDが正しく返されているかを確認します。無効なIDが返された場合は、その時点で処理を停止するため、存在しないオペレーションを30分近くポーリングし続けるような無駄な処理を防ぐことができます。以下は、このチェックについてCopilotが説明している様子です。
エラーの適切な伝播：検証、API呼び出し、ポーリングなど、処理のどの段階でエラーが発生しても、そのエラーは上位へ適切に伝えられ、ログに記録されたうえで、スクリプトの実行を安全に停止します。
フェイルファストには、次のようなメリットがあります。
- 不要なAPI呼び出しを防げる
- エラーの内容が明確に分かる
- 問題をすぐに特定できる
このようなアプリケーションを拡張し、多数のWordPressサイトを一括で複製する必要があるWordPress制作会社にとっては、スクリプトの異常をどの段階でも即座に検知できるため、エラーが連鎖して複数の処理が失敗する事態を防ぐことができます。
一方で、アプリケーションを本格的にスケールさせるのであれば、ユニットテストの仕組みも導入することをおすすめします。
Jestによるユニットテスト
開発中、Copilotは自律的にいくつかのローカルテストを実行しました。
npm run check：構文エラーを検出するため、編集のたびに実行npm start：APIレスポンスを確認し、バグを特定するために複数回実行npm start 2>&1 | head -30：構造化ログの出力をリアルタイムで取得して確認するために実行
これらのテストにより、Copilotは多くのバグを検出できましたが、内容としては基本的なもので、シンプルなアプリケーションでしか十分に機能しません。さらに大きな欠点として、npm start を実行するたびにサイトの複製が開始されます。そのため、以下の画像のように、プランの上限にすぐ達してしまう可能性があります。
さらに、これらのテストは認証情報を公開することなくCI/CDパイプラインで実行することができません。
アプリケーションを本格的にスケールさせるには、Jestのような堅牢なユニットテストフレームワークを導入することが重要です。
Jestを使用すれば、テストのたびにKinstaのサーバーへ実際のAPIリクエストを送信する代わりに、APIレスポンスをインターセプトしてシミュレート（モック）できます。これにより、実際の環境に依存せず、アプリケーションの動作を検証できます。
さらに、API呼び出しをモック化するため、本番環境の認証情報を使用することなく、GitHub Actionsのような自動化パイプラインでテストスイート全体を実行できます。
自動化プロジェクトにJestを導入するには、Copilotに手順を教えてもらうこともできますし、設定作業そのものを任せることも可能です。
Jestの設定が完了したら、npm testを実行してすべてのテストをまとめて実行できます。また、特定のテストファイルだけを実行したり、Watchモードでテストを継続的に実行したりすることも可能です。
なお、Copilotには、Jestを使ったユニットテストを支援するチャットコマンドも用意されています。
/tests：現在開いているファイルのテストファイルを生成します。チャットで/testsと入力すると、そのファイル内の関数をもとにJestのテストコードを生成します。@workspace /tests：前述のコマンドと同じ機能ですが、プロジェクト全体のコンテキストを考慮してテストコードを生成します。
また、AskモードでCopilotと対話していると、ユニットテストを進めるためのヒントやアドバイスも提案してくれます。
このテスト用に新しいチャットを開き、Agentモードに設定します。その後、Copilotが先ほど生成したコマンドをチャットにそのまま貼り付けてください。
@workspace /tests for pollUntilComplete and KinstaClient using fetch mocksEnterキーを押すと、Copilotの判断内容や実行手順がチャット上に順番に表示されます。Copilotはテストを実行するたびにコマンド実行の確認を求め、すべてのエラーが修正されるまで処理を進めていきます。
ドキュメントとデプロイ
コードを適切に文書化することは、保守性を高めるうえで欠かせません。そこで、プロジェクトのルートディレクトリにREADME.mdファイルを生成するようCopilotに依頼しました。アプリケーションの概要、動作要件、.envファイルの設定方法、アプリケーションの起動方法、テストの実行方法を記載するよう指示しています。
新しいチャットをAskモードで開始し、index.jsとpackage.jsonをコンテキストに追加しました（Copilotの#filenameショートカットを使用）。そのうえで、Copilotに以下のプロンプトを入力しました。
CopilotによりREADME.mdファイルのプレビューが作成されました。内容を十分に確認したうえで、Agentモードに切り替え、実際にファイルを生成しました。
次に、コード自体のドキュメントを作成しました。index.js ファイルを開いた状態でコード全体を選択し、チャットのコンテキストに追加したうえで、Askモードから以下のプロンプトを入力しました。
Copilotにより、コードの内容を変更することなく、index.jsファイルにインラインドキュメントが追加されました。
今回も、Askモードではファイルを変更する権限がないため、Copilotは直接ファイルを編集できませんでした。そこでAgentモードに切り替え、提案された内容をもとにindex.jsファイルを更新するようCopilotに依頼しました。
最後のステップは、アプリケーションをデプロイすることです。主な方法は次の2つです。
- ローカル環境で運用する：新しいクライアントと契約した直後など、必要なタイミングで手動でサイトを作成したい場合に適しています。
- GitHubリポジトリにコードをプッシュしてCI/CDパイプラインに組み込む：サイト作成を手動で実行することも、特定のイベントをきっかけに自動実行することもできます。より体系的でスケーラブルなワークフローを構築したい場合に最適です。
ローカル環境やユーティリティサーバーで運用する場合はこれで準備完了です。一方、より本格的なCI/CDパイプラインを構築する場合は、適切なプロンプトの作成もCopilotにサポートしてもらえます。
これでアプリケーションは完成です。新規WordPressプロジェクトをオンボーディングするには、以下のコマンドを実行するだけでOKです。
npm start -- --site-name="My Awesome WordPress Website"バイブコーディングと自動化──先進的なWordPress制作会社の未来
バイブコーディングは、単にコードを書く作業を効率化する手法ではなく、探索、設計、コーディング、改善、テスト、デバッグ、ドキュメント作成、デプロイまでを含む反復的な開発プロセス全体を支える新しい開発手法です。開発者の役割も、従来のようにコードを書く人ではなく、AIを活用しながら開発全体を設計・管理するディレクターへと変わっていきます。
ソフトウェア開発や制作会社のスケーリングがこの方向へ進んでいくのであれば、AI時代に競争力を維持するには、先進的なサーバーを選ぶことも重要です。Kinsta APIを活用し、明確なルール、十分なテスト、適切なドキュメントのもとでAIエージェントを運用することで、トラブル対応に追われる時間を減らし、より効率的で、予測しやすく、拡張性の高い開発体制を実現できます。
WordPressの開発ワークフローを進化させ、開発時間を大幅に短縮したい方は、ぜひKinstaのプランをご覧いただくか、営業チームまでお気軽にお問い合わせください。自動化パイプラインの構築を始めましょう。
