MENU

LovableをWordPress改善に使ってみた|画面案づくりの実録

Lovableのロゴと「WordPressの見た目」「変える前に試した」の見出し

LovableはWordPressのテーマを直接書き換えてはくれません。それでも、本番を変える前に「こう並べたらどう見えるか」を画面にして選ぶ用途には使えました。

Lovableは、文章で指示するとWebサイトやアプリの画面を作るAIサービスです。私はこのブログ(WordPress)のトップページを変える前に、2026年6月にLovableで画面案を作りました。この記事はそのときの記録と、2026年9月11日に公式ページで確認した現在の仕様です。

TOC

既存のWordPressに、Lovableは何をしてくれた?

トップページの画面案を作ってくれました。

私が入力したのは、このサイトが何のためのサイトで、誰に読んでほしいかという文章です。そこからトップページの案が生成され、配色とカードの配置を画面で見比べられました。本番のテーマに触らない段階で、残す案と見送る案を選べたのが、文章だけで考えていたときとの違いです。

採用しなかった案は、WordPressを触る前にそこで外しました。

実際にどう進めた?

  1. このサイトの目的と読者を文章で伝える。 どんなサイトを、誰に見てもらいたいかを書きました。
  2. トップページの画面案を生成する。 配色とカード配置を目で比べられる状態になりました。
  3. 使う部分だけを選ぶ。 生成された案を丸ごと採用せず、取り入れる要素を絞りました。
  4. 既存のWordPressテーマへ小さく反映する。 ここからは手作業です。
  5. 反映後の表示を確認する。 ページが開くこと、スマホ幅で横にはみ出さないことを見ました。

最初はどこで止まった?

初回は画面案を取り出せませんでした。利用開始時の案内と生成画面で止まったまま進まず、操作をやり直したところ生成できました。

同じ手順で毎回うまくいくとは限らない、とだけ言えます。

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つ作ってみるところからで十分でした。

Let's share this post !

Author of this article

TOC