【ヘッドレスCMS】Lovableを使ったWordPressサイト構築入門

AIや日々改良される開発ツール、そして最新のサーバー環境により、WordPressをヘッドレスCMSとして利用する手法がデザイナーや開発者の間で注目されてきています。こうした変化は、分散型のデジタル体験がどのように設計・構築・デプロイされるかにも影響を与えています。

今回は、AI主導のフロントエンドビルダーであるLovableを使って、WordPressをヘッドレスCMSとして活用した最新のウェブサイトを構築する方法をご紹介します。

現在見られる動きは、ヘッドレスか従来型かに関わらず、WordPressが向かう未来の方向性を示しています。それはコンテンツ管理とデザインの自由度を融合させた、よりオープンで協調的、かつAIの力を活用したデジタル体験の創出です。

WordPressのヘッドレスCMS化とは？

WordPressのヘッドレスCMS化は、WordPressを2つに分割すると考えるとわかりやすいです。

• バックエンド─WordPressが通常通りコンテンツ、メディア、データを管理
• フロントエンド─別のアプリが見た目と動作を処理

別の言い方をすれば、WordPressは構造（コンテンツ）を処理し、フロントエンドはスタイル（コンテンツの見え方）を処理します。バックエンドとフロントエンドを2つに分けることで、WordPressの優れたコンテンツ管理システムをそのまま活用しながら、ReactやVueのような最新のフロントエンドフレームワークで自由に設計・構築できるようになります。つまり、WordPressの長所を生かしながら、従来の構成でできること以上にアプリケーションを拡張することが可能です。

Lovableを使用するメリット

WordPressをヘッドレスCMS化するかどうかは、プロジェクトの目的によります。一般的なプロジェクトでは、標準のWordPress構成の方が効率的ですが、より高い柔軟性、より速いイテレーション、あるいは従来のテーマやプラグインを超えた高度なウェブアプリを構築する方法が必要な場合は、ヘッドレスCMS化するのがおすすめです。

今回は、フロントエンドコードの生成、編集、管理を支援するAI搭載の開発プラットフォーム、Lovableを使用したWordPressのヘッドレスCMS化をご紹介します。Lovableは、React、Tailwind CSS、Viteのような最新ツールでビルドし、AIプロンプトを使ってレイアウト、スタイリング、コンポーネントロジックを処理することができます。

Lovableはフロントエンドそのものではなく、フロントエンドを作成・維持するための環境になります。

Lovableには以下のようなメリットがあります。

• バージョン管理の柔軟性：GitHub、GitLab、Bitbucketと簡単に双方向同期ができる
• クロスプラットフォームデザイン：1つのWordPressバックエンドから、ウェブ、モバイル、キオスク端末用に構築可能
• 即時イテレーション：AIプロンプトを使用して、レイアウト、スタイル、コンポーネントを数秒で更新
• セキュリティの分離：フロントエンド側から直接データベースにアクセスする必要がない
• 静的ビルド対応：パフォーマンスと信頼性を高めるため、静的なHTML、CSS、JavaScriptとして簡単にデプロイ可能

もちろん、ヘッドレスCMSにもトレードオフがあります。例えば、マルチレイヤースタックの維持はデバッグをより複雑にします。また、フロントエンドでコンテンツをレンダリングするプラグインには、カスタムAPIブリッジが必要になるかもしれません。それでも、静的サイトやコンテンツ主導のサイトでは、WordPressとLovableを組み合わせることで、ヘッドレスCMSの可能性を効率的に追求することができます。

サイト構築前の準備

構築を始める前に、フロントエンドにLovable、バックエンドにWordPressという2つの主要コンポーネントを準備します。

1. Lovableプロジェクトの作成

lovable.devにアクセスし、無料アカウントを作成します。管理画面に入ったら、短いプロンプトを入力して新規プロジェクトを立ち上げます。

チャットインターフェースは、同僚と話しているような感覚になるような使用で、実際に会話するように自然に入力することができます。例えば、以下のような簡単な質問をしてみます。

How do we start building a frontend with WordPress on the backend?
（WordPressをバックエンドにしたフロントエンド開発はどう始めたらいいですか？）

すると、以下のような説明が返ってきます。

Building a React frontend with WordPress as a headless CMS is a solid approach.
You can use the built-in WordPress REST API or install WPGraphQL for more complex data queries.
（WordPressをヘッドレスCMS化し、Reactでフロントエンドを構築するのは堅実なアプローチです。
　WordPress標準のREST APIを利用するか、より複雑なデータ取得にはWPGraphQLを導入することも可能です）

この最初のやり取りが、全体の進め方の方向性を決めます。ここでは、実現できることの概要を把握し、WordPressがフロントエンドとどのように連携するのかを理解できます。

その後、シンプルさを重視するようAIに指示することで、アイデアをさらにブラッシュアップできます。

Let's keep it simple. We just want to build a demo blog site and have a page to serve as a dynamic style guide.
（できるだけシンプルに、デモ用のブログサイトと、動的なスタイルガイド用のページを作りたいです）

これで入力内容に基づいて処理が行われ、シンプルなデモサイトが生成されます。また、後から全体のデザイン調整に使用できるスタイルガイドページもセットアップされます。

その後は、プロンプトのやり取りを通じて作業を進めていきます。必要な内容を整理しながら指示を追加して詳細を調整しましょう。場合によっては、以下のような初期設定に関する情報の入力が求められます。

1. Do you have a WordPress site URL? (e.g., https://yoursite.com)  
2. Is the WordPress REST API publicly accessible?
3. What WordPress content should map to your blog? (posts, pages, or custom post types?) 
4. Are there custom fields you’d like to fetch? (e.g., read time or featured flag) 

1. WordPressサイトのURLはありますか？（例：https://yoursite.com）
2. WordPress REST APIは公開されていますか？
3. ブログに表示するWordPressのコンテンツはどれですか？（投稿、固定ページ、カスタム投稿タイプなど）
4. 取得したいカスタムフィールドはありますか？（例：読了時間、注目フラグ など）

上記の情報を提供すると統合ロジックが生成され、自動的にフロントエンドとWordPressバックエンドが接続されます。

2. WordPressのセットアップ

Lovableがコンテンツを取り込む前に、バックエンドとなるWordPressサイトが必要です。このWordPressサイトが、投稿・固定ページ・メディアの管理元となります。

スムーズなセットアップには、信頼性の高いWordPress用サーバーを使用しましょう。Kinstaを利用する場合は、アカウントの作成後、新規WordPressサイトを追加すると、以下のような一時的なサブドメインを取得することができます。

https://your-site.kinsta.cloud/

サイトを作成したら、REST APIが公開されていることを確認します。ブラウザの新しいタブを開き、以下にアクセスします。

https://your-site.kinsta.cloud/wp-json/wp/v2/posts

投稿データを表示するJSONフィードが表示されれば、バックエンドの準備は完了です。

3. WordPressをLovableに接続

WordPressサイトが稼動し、REST APIが動作するようになったら、次はバックエンドをLovableプロジェクトに接続します。このステップで、コンテンツとデザインが統合されます。

Lovableのチャットで、以下のようなプロンプトを作成します。

Ok, how do we connect your frontend to our WordPress CMS?
（フロントエンドをWordPressのCMSとどのように接続すればいいですか？）

以下のような返答が返ってきます。

You’ll connect to your WordPress backend using its REST API.
What you’ll need:
1. WordPress REST API (built-in, available at yoursite.com/wp-json/wp/v2/posts)
2. A CORS plugin if your frontend is on a different domain
3. (Optional) ACF or custom fields for extra data

WordPressのREST APIを使って、バックエンドに接続します。必要なものは以下のとおりです。
1. WordPress REST API（標準搭載。yoursite.com/wp-json/wp/v2/posts で利用可能）
2. CORS対応プラグイン（フロントエンドが別ドメインの場合）
3.（任意）ACFやカスタムフィールド（追加データを扱う場合）

また、バックエンドとフロントエンドの両側で何が行われるのか、その概要も把握できます。

• WordPress側：REST APIが有効になっていることを確認（通常はデフォルトで有効）
• フロントエンド側：静的なブログデータをWordPressのAPI呼び出しに置き換え、データ取得用のサービスを作成し、読み込み中の状態を適切に処理

こうした流れが分かりやすく整理されて示され、場合によっては次のような例が提示されることもあります。

const { data: posts } = useQuery({
  queryKey: ['posts'],
  queryFn: async () => {
    const response = await fetch('https://your-site.kinsta.cloud/wp-json/wp/v2/posts');
    return response.json();
  }
});

次に、指定したWordPressのURLをもとに処理が行われ、WordPressの投稿を表示するフロントエンドサイトがセットアップされます。

これで完了です。連携はすぐに有効化され、接続も確認されました。WordPressからLovableへ、コンテンツが正しく連携・反映されるフローが構築されています。

スタイリングとデザインシステム

WordPressとの接続が完了したら、サイトのルック＆フィールを洗練させることができます。この時点では、Tailwind CSSとブラウザのデフォルト設定によってスタイルが設定されています。

まずは例によって、Lovableにプロンプトを作成します。

Is all styling currently provided by TailwindCSS and the User Agent?
（現在のスタイルは、Tailwind CSSとブラウザのデフォルトスタイルのみで構成されていますか？）

以下のような返答が返ってきます。

Yes. All styling is currently provided by TailwindCSS (via index.css and tailwind.config.ts) and the User Agent's default styles. The App.css file exists but isn’t imported anywhere.
（はい。現在は、Tailwind CSSとブラウザのデフォルトスタイルのみが適用されています。App.css は存在しますが、使用されていません）

これを念頭に置いて、サイトの構造とナビゲーションのカスタマイズを始めることができます。

Connect to all pages, posts, and media, and set up a header navigation as follows:
（すべての固定ページ、投稿、メディアに接続し、次の内容でヘッダーナビゲーションを設定してください）
Home
Style Guide
Blog
    Trip To Santa Fe
    Hello World
Make the Home page the root of the site.
（Homeページをサイトのルートに設定してください）

これによりルーティングが再構成され、WordPressの投稿はBlogのドロップダウンに動的に連携されます。Home、Blog、動的スタイルガイド間のナビゲーションが有効になり、スタイルガイドは全体のデザイン管理の中心として機能します。

動的スタイルガイドでの作業

このページでは、サイト全体のグローバルスタイルを定義し、コントロールします。ここで変更を加えると、すべてのページが即座に更新されます。

まず、ベースとなるカラーパレットとタイポグラフィを設定します。

Set page background color to #7B3F00.
Set all text color to #eee.
Heading 1 = 2rem
Heading 2 = 1.5rem
Heading 3 = 1.25rem
Heading 4 = 0.84375rem
All other text = 1rem

すぐに新たなデザインシステムが適用され、サイトに暖かみのあるブラウンの背景、ソフトグレーのテキスト、一貫性のある書体階層がセットアップされます。

ここから、例えば以下のようにさらに洗練させていくことができます。

Double the size of all headings.
Add 10% left and right margin to the page.
Create a 2x2 image gallery with 20px spacing, rounded corners (20px radius), and a 2px solid white border.

見出しはすべて2倍のサイズにし、ページ左右に10％のマージンを追加してください。
20px間隔の2×2画像ギャラリーを作成し、角丸（20px）と白の2px実線ボーダーを設定してください。

レイアウトはリアルタイムで調整され、画像ギャラリーのフォームがすぐに表示されます。

グローバルなフォントと間隔の調整

サイト全体に一貫したフォントと間隔のルールを適用することで、デザインをさらに細かくカスタマイズできます。

Align the page title to the left.
Use the Cowboy (Rye) font for all headings and Roboto for all other text.
Double the line height for all paragraphs and quote elements.
Add 5% top/bottom and 10% left/right margins to the quote block.

すべての見出しのサイズを2倍にしてください。
ページの左右にそれぞれ10％のマージンを追加してください。
20pxの間隔を持つ2×2の画像ギャラリーを作成し、角丸（半径20px）と白の実線2pxのボーダーを適用してください。

指示通りにタイポグラフィ、行の高さ、余白が変更されます。

例えば、タイトルが左寄せになっていないなど、何か違和感がある場合には、またプロンプトを作成すればOKです。

The page title isn’t aligned left. Why?
（ページタイトルが左寄せになっていないのはなぜですか？）

以下のような返答が返ってきます。

The container has mx-auto, which centers it. I’ll remove that for true left alignment.
（コンテナに mx-auto が指定されていて中央寄せになっているため、左寄せにするために削除します）

グローバルなボタンスタイルの定義

続いて、ボタンの見た目に一貫性を持たせます。動的スタイルガイドで、明確なホバー状態を持つ3つのボタンサイズを作成するように指示します。

1. Buttons should be rectangular.
2. Use a black background with white text, and invert on hover.
3. The medium button is 125% the width of the small one; the large is 150%.
4. Add 20px border radius.

1. ボタンは長方形にしてください。
2. 背景は黒、文字色は白にし、ホバー時に反転させてください。
3. 中サイズのボタンは小サイズの125％の幅、大サイズは150％にしてください。
4. ボーダー半径を20pxに設定してください。

ボタンがすぐに表示されない場合、ショーケースセクションを追加してプレビューすることができます。表示されると、カスタムスタイルが適用されます。

以下は、WordPressでも使えるCSSの例です。

.wp-button {
  background: #000;
  color: #fff;
  border-radius: 20px;
  padding: 0.5rem 0.9375rem;
  transition: all 0.3s ease;
}

.wp-button:hover {
  background: #fff;
  color: #000;
}

.wp-button-sm { width: 100%; }
.wp-button-md { width: 125%; }
.wp-button-lg { width: 150%; }

また、変数をテーマのCSSにコピーし、ブロックエディターやテンプレート内で.wp-buttonクラスを適用することで、WordPressテーマにも反映できます。

デプロイメント

サイトを接続し、スタイルを設定したら、最後のステップはデプロイです。

Lovableのコードベースはポータブルであるため、フロントエンドをGitベースのプラットフォームにプッシュして、そこからデプロイすることができます。今回は例として、Kinstaが提供する強力なクラウドサーバーと開発者に配慮した自動化機能を組み合わせたプラットフォーム、Sevallaを使用します。

Sevallaでは、静的サイトを無料でホスティングすることができ、グローバルエッジデリバリとGitプッシュによる自動デプロイを行うことができます。コードをGitHub、GitLab、またはBitbucketに同期すると、数回のクリックでリポジトリをSevallaに接続可能です。

サイトの稼働方法は以下のとおりです。

1. Sevallaのコントロールパネルで、「Static Site（静的サイト）」を選択し「Add site（サイトを追加）」をクリック
2. Gitプロバイダとリポジトリを選択
3. デフォルトのブランチを確認し、「automatic deployment on commit（コミット時の自動デプロイ）」
4. Sevallaがフレームワークを検出（この場合はReact + Vite）
5. 「Create site（サイトを作成）」をクリックしてビルド開始

数分ほどで、無料の一時ドメインを使ってサイトが表示されるようになります。

ヒントとその他の考察

Lovable でヘッドレス構成を作っていく中で、プロセスがスムーズで分かりやすいと感じる点がいくつかあります。

• 無料プランと有料プラン：Lovableには無料プランと有料プランがあり、無料プランでも十分に試せるが、有料プランではより長いプロンプトセッションや高速な処理が利用可能。
• 頻繁にリフレッシュする必要なし：通常はWordPressでコンテンツを変更したり公開したりすると、Lovableのインターフェースも自動的に更新される。ライブ同期は高速で信頼できる。
• ファイルの直接編集：GitHubのように、プラットフォーム内で直接ファイルを編集可能。外部エディターに切り替えることなく、素早い調整や小さな問題のデバッグに便利。
• REST APIとWPGraphQLの比較：簡単なプロジェクトであれば、WordPressのREST APIで十分だが、より複雑なクエリやリレーションシップが必要な場合は、WPGraphQLプラグインがより強力で構造化されたオプションに。
• よくあるセットアップの問題：接続の問題が発生した場合、CORS（Cross-Origin Resource Sharing）やREST APIのアクセス許可に関連していることがよくあり、LovableのAIエージェントが問題解決を手助けしてくれる。
• キャッシュの考慮事項：フロントエンドは静的であるため、開発中に変更がすぐに表示されないことがある。大規模な変更を行う際には、キャッシュのクリアか再構築が必要。

まとめ

WordPressをヘッドレスCMS化することで、デザインと開発の自由度が大きく広がります。信頼性の高いコンテンツ基盤にWordPressを使用し、LovableのAI主導フロントエンド生成を組み合わせることで、アイデア段階から本番公開までをこれまで以上に効率的に進めることができます。

AIがワークフローを変えつつある今、ヘッドレスCMSは、スピード・自由度・コントロールをすべて求める開発者にとって、将来を見据えた柔軟なアプローチです。

WordPressのヘッドレスCMS化を検討中でしたら、まずはパフォーマンスと信頼性に優れたサーバー環境を整えましょう。標準WordPress、ヘッドレス、ハイブリッド構成のいずれにも適した基盤を提供するKinstaのWordPress専用マネージドクラウドサーバーをぜひお試しください。