LovableはWordPressのテーマを直接書き換えてはくれません。それでも、本番を変える前に「こう並べたらどう見えるか」を画面にして選ぶ用途には使えました。
Lovableは、文章で指示するとWebサイトやアプリの画面を作るAIサービスです。私はこのブログ(WordPress)のトップページを変える前に、2026年6月にLovableで画面案を作りました。この記事はそのときの記録と、2026年9月11日に公式ページで確認した現在の仕様です。
既存のWordPressに、Lovableは何をしてくれた?
トップページの画面案を作ってくれました。
私が入力したのは、このサイトが何のためのサイトで、誰に読んでほしいかという文章です。そこからトップページの案が生成され、配色とカードの配置を画面で見比べられました。本番のテーマに触らない段階で、残す案と見送る案を選べたのが、文章だけで考えていたときとの違いです。
採用しなかった案は、WordPressを触る前にそこで外しました。
実際にどう進めた?
- このサイトの目的と読者を文章で伝える。 どんなサイトを、誰に見てもらいたいかを書きました。
- トップページの画面案を生成する。 配色とカード配置を目で比べられる状態になりました。
- 使う部分だけを選ぶ。 生成された案を丸ごと採用せず、取り入れる要素を絞りました。
- 既存のWordPressテーマへ小さく反映する。 ここからは手作業です。
- 反映後の表示を確認する。 ページが開くこと、スマホ幅で横にはみ出さないことを見ました。
最初はどこで止まった?
初回は画面案を取り出せませんでした。利用開始時の案内と生成画面で止まったまま進まず、操作をやり直したところ生成できました。
同じ手順で毎回うまくいくとは限らない、とだけ言えます。
WordPress側にどんな作業が残った?
広告の位置、記事一覧の見え方、スマホでの表示の3つです。画面案をどれだけ作り込んでも、ここは自動では片づきませんでした。
Lovableで生成できた画面と、既存のWordPressテーマへ入れられる変更は別物です。私が実際にテーマへ移したのは案の一部だけで、移したあとにページがきちんと開くか、スマホ幅で横スクロールが出ないかを自分で見ています。
Lovableに任せられるのは「どう見せるかを決めるまで」で、既存サイトへ入れて表示を保つ作業は残る。そう分けて考えると、頼む範囲を決めやすくなります。
2026年9月現在、LovableはWordPressと連携できる?
公式の連携機能があります。2026年9月11日の公式文書では、WordPress.com向けと、自分のサーバーで動かすWordPress向けの2つが案内されています。ただし、どちらも扱えるのは投稿・固定ページ・メディアといった中身で、テーマやプラグイン、サイト設定を書き換える機能ではありません。
2つの連携でできることは次のとおりです。
| 連携 | できること | 必要なもの |
|---|---|---|
| WordPress.com | 投稿・固定ページ・メディアの読み取りと、投稿・下書きの作成・更新。権限を追加するとカテゴリとタグも管理できる | WordPress.comのアカウントでサインインするだけ。APIキーや自作アプリは不要 |
| 自分のサーバーのWordPress | REST API経由で投稿・固定ページ・メディア・ユーザーを読み書き | HTTPS、WordPress 5.6以降、「基本」以外のパーマリンク設定、必要な権限を持つユーザーと、そのユーザーのアプリケーションパスワード |
自分のサーバーで動かすWordPressの方は、公式が「できないこと」も明記しています。パーマリンク、ホスティング、SSL、プラグイン、サイト設定をLovable側が設定することはなく、接続したユーザーの権限を超える操作もできません。アプリケーションパスワードの発行も自分で行います。
言い換えると、これはWordPressの中身を扱うアプリをLovableで作るための機能で、既存テーマのデザインを差し替えるものではありません。私はこの連携自体は使っていません。
詳しい条件はWordPress.com連携とセルフホスト型WordPress連携の公式説明で確認できます。
無料で試せる? クレジットはどれくらい減る?
無料枠で試せます。2026年9月11日の公式料金ページでは、作成用のクレジットが1日5、月の上限30と案内されています。このほかに、公開したアプリを動かすためのクレジットが月20、アプリに組み込むAI機能用が月4付きます。作成用の1日分は毎日UTCの0時に入れ替わり、その日のうちに使わないと消えます。
減り方は操作によって違います。
| 操作 | 消費 |
|---|---|
| 通常の作成(Build) | 依頼の複雑さと実際に行われた作業量で変動。公式の例では、ボタンの色替えが0.5、ランディングページの作成が1.7程度 |
| 計画を立てるPlan Mode | 1メッセージにつき1クレジット。加えて、計画中にLovableが走らせた調査の分が上乗せされる |
つまり「1回頼めば1クレジット」ではありません。トップページの案を何度か作り直すなら、1日5クレジットという枠を頭に入れておく量です。枠や消費の決まりは変わることがあるので、使う前にクレジットの公式説明と自分の画面で確認してください。
どんな人に向いている?
WordPressを変更する前に、見た目の候補を画面で見比べたい人に向いています。
| やりたいこと | 今回の経験からの判断 |
|---|---|
| 配色や配置を、本番を触らずに比べたい | 向いている。画面で並べて選べた |
| 実装前に、採用する要素を絞りたい | 向いている。採用しない案をここで外せた |
| 既存テーマをボタン一つで完成させたい | 向かない。テーマへの反映は手作業 |
| 広告やスマホ表示の確認まで任せたい | 向かない。WordPress側で自分が見る |
| 生成結果を確認せず本番へ置きたい | 向かない。表示確認は省けない |
小さな管理アプリづくりも気になる方には、Base44を無料で試した記録があります。記事や投稿の管理そのものを整えたい方は、Airtableを投稿管理に使った記録もどうぞ。
今から画面案を頼むなら、どう伝える?
「本番に入れる完成品」ではなく「検討用の案が欲しい」と最初に書きます。次は当時の入力そのものではなく、今の私が頼むならこう書く、という例です。
既存のWordPressブログのトップページを改善したいです。いまの記事や情報は残したまま、記事を探しやすくする画面案を作ってください。スマホでも読みやすく、装飾は増やしすぎないでください。まずは配色と情報の配置を決めたいので、WordPressへの反映はせず、画面案として見せてください。
案が出たあとは、「カードを増やして」ではなく「どの記事を見つけやすくしたいか」を伝えると、直すたびに目的がぶれません。
よくある疑問
既存サイトを参考にできますか?
目的や読者を文章で伝えれば、それに沿った画面案を作れます。既存テーマが自動で読み込まれて、そのまま作り替えられるわけではありません。
LovableだけでWordPressサイトを作れますか?
今回の使い方では作れませんでした。公式連携は投稿や固定ページを扱うためのもので、テーマの置き換えは対象外です。
最初の生成で止まったらどうすればよいですか?
私は操作をやり直したら生成できました。画面に出ている案内やエラー表示を確認し、解決しなければ公式サポートに聞く場面です。
この記事に書いていないことはありますか?
当時入力したプロンプト、消費したクレジット数、最初に止まった原因は記録が残っておらず、書いていません。また、この記事のリンクはすべて公式ページか当ブログ内への通常リンクで、収益リンクはありません。
本番を変える前に、画面案を1つ作る
Lovableで画面案を作り、配色と配置を見比べ、使う部分だけを既存テーマへ入れて、表示を確認する。この順番なら、WordPressを触る前に方向を決められます。
サイト全体を作り直す前に、トップページの案を1つ作ってみるところからで十分でした。
