【2026年5月更新】Lovable最新の使い方｜初期設定からプロジェクト作成までの完全手順

Lovableは2026年に大きな進化を遂げました。新規プロジェクトのデフォルトスタックがTanStack Start v1になり、SSR・Server Functionsが標準サポートされたほか、MCPコネクタ17種類が追加され、外部ツールとの連携が劇的に容易になりました。本記事では、2026年5月時点の最新UI・最新機能を前提に、『初めてLovableを触る人』がアカウント作成からプロジェクト公開まで進む手順を整理します。

2026年のLovableに変わった主なポイント#

• 新規プロジェクトのスタックがVite + React Router から TanStack Start v1 に変更（SSR/SSG標準対応）
• MCPコネクタ17種類が追加（Linear・Notion・Figma・Sentryなど、チャットから直接操作可能）
• Lovable Cloudにアジアリージョン（シンガポール）が追加、日本ユーザーのDBレイテンシが改善
• エディタUIが刷新（プレビュー領域が広く、チャット入力が中央寄せに）
• AI GatewayにGPT-5.4 / Gemini 3.1 Proが追加、アプリ内AIの品質が向上

ステップ1：アカウント作成と初期設定#

1. lovable.dev にアクセスし、画面中央の『Get Started』をクリック
2. Googleアカウントまたはメールアドレスでサインアップ（メールの場合、確認メールが届くまで数秒〜数分）
3. ワークスペース名を入力（日本語OK、後から変更可）
4. 利用目的を選択（個人開発 / チーム開発 / 企業利用）
5. ダッシュボード画面が表示されたら準備完了。無料プランで月5メッセージまで試用可能

ステップ2：新規プロジェクト作成（2026年版）#

ダッシュボード左上の『New Project』ボタンからプロジェクト作成を開始します。2026年以降、スタック選択の流れが少し変わっています。

1. 『New Project』→『Start from scratch』を選択
2. プロジェクト名を入力（URLの一部になるので英数字推奨、後から変更可）
3. スタックは自動で『TanStack Start v1』が選択される（2026年デフォルト）
4. 必要に応じて『Lovable Cloud』を有効化するか選択（DB・認証が必要ならON推奨）
5. 『Create Project』で作成完了。数秒でエディタ画面が開きます

ステップ3：エディタ画面の使い方#

2026年のエディタUIは中央にチャット入力欄、左側にファイルツリー、右側にプレビュー画面という3ペイン構成です。

• 左ペイン：ファイルツリー。生成されたコードがリアルタイムで反映され、クリックで編集も可能
• 中央下部：チャット入力欄。日本語で指示を入力し、Enterまたは送信ボタンで送信
• 右ペイン：プレビュー画面。コード変更が即座に反映され、操作感を確認できます
• 上部バー：Undo / Redo / Publish / 設定アイコン

ステップ4：最初の機能を作る（日本語プロンプト）#

チャット入力欄に、作りたい機能を日本語で具体的に書きます。2026年のLovableは日本語の理解精度がさらに向上しており、自然な文章でOKです。例えば以下のようなプロンプトで顧客管理アプリ（CRM）の雛形を一気に生成できます。

シンプルな顧客管理アプリ（CRM）を作って。
・会社名・担当者名・メール・ステータスを登録できる
・ステータスは「商談中」「契約済」「失注」の3つ
・一覧表示と新規登録画面の2画面構成
・デザインはダークモードで、shadcn/uiのTableとDialogを使う

送信後、30秒〜2分でコードが生成され、右のプレビュー画面に反映されます。生成中は画面下部に進捗インジケータが表示されます。

ステップ5：プレビュー確認とイテレーション#

プレビュー画面で動作確認し、気になる点をチャットで追加指示します。2026年のLovableは『1メッセージに複数の小修正をまとめる』ことで、メッセージ消費を抑えられます。例えば次のように複数依頼をまとめて投げます。

プレビュー確認しました。以下を修正してください：
・一覧の会社名をクリックしたら詳細ダイアログが開くように
・ステータスは色分けして表示（商談中=黄、契約済=緑、失注=赤）
・登録フォームにメール形式のバリデーションを追加

このように複数の修正を1メッセージにまとめることで、Proプランの月120メッセージを効率的に使えます。

ステップ6：Lovable Cloudでバックエンドを追加#

データの保存やユーザー認証が必要になったら、Lovable Cloudを有効化します。2026年からはアジアリージョン（シンガポール）が選べるようになり、日本ユーザーにとってレイテンシが大幅に改善されています。

1. チャットで『Lovable Cloudを有効化して、データベースと認証も追加して』と依頼
2. 自動でSupabaseプロジェクトが作成され、必要なテーブル・RLSポリシーが生成される
3. リージョン選択が表示されたら『Asia (Singapore)』を選択（日本から最速）
4. 認証方法はメール・Google・Magic Linkから選べる（デフォルトはメール＋Google）
5. 生成された認証画面（ログイン・サインアップ）が自動でアプリに組み込まれる

ステップ7：MCPコネクタで外部ツールと連携#

2026年2月以降、Lovableは17種類のMCPコネクタに標準対応しています。プロジェクト作成後、特別な設定なしで以下のような連携が可能です。

• Linear：『Linearで未解決のバグを3件取得して、ダッシュボードに表示して』
• Notion：『Notionの「API設計書」を読み込んで、この画面の仕様に反映して』
• Sentry：『Sentryの直近24時間のエラーを取得して、管理画面に表示して』

MCPコネクタはチャット内でツール名を明示するだけで動作します。個別のAPIキー設定は不要なものが多く、Lovable側ですでに認証基盤が整っています。

ステップ8：公開（デプロイ）#

アプリが完成したら、右上の『Publish』ボタンで世界に公開します。2026年のLovableではカスタムドメインの自動DNS検証が導入され、独自ドメイン接続がさらに簡単になりました。

1. エディタ右上の『Publish』ボタンをクリック
2. 数秒で xxx.lovable.app の公開URLが発行される
3. 独自ドメインを使う場合：『Custom Domain』タブでドメインを入力
4. DNSレコードが自動検証される（AレコードまたはCNAMEをレジストラに設定する必要あり）
5. 再デプロイは『Publish』を再度クリックするだけ（数秒で更新）

2026年から変わった旧スタックとの違い#

2025年までにLovableを使っていた方は、スタック変更に注意が必要です。

• 旧スタック（Vite + React Router）：クライアントサイドルーティングのみ、SSR不可
• 新スタック（TanStack Start v1）：SSR/SSG・Server Functions標準対応、SEO大幅改善
• 旧プロジェクトは継続編集可能だが、新機能（Server Functions最適化）の恩恵を受けるには移行が必要
• Lovableに『TanStack Startに移行して』と依頼すれば自動移行可能

日本語ユーザーが2026年に気をつけるべきポイント#

• UI文言の日本語保持：『UI文言は日本語のままにして』と毎回明記すると英語化を防げます
• 日付形式：『日付はYYYY-MM-DD形式で』と指定すると米国式（MM/DD）を回避できます
• 全角スペース：プロンプト内の全角スペースがコードに混入してSyntax Errorになることがあります。エラー時は『全角スペースを半角に直して』と指示
• メッセージ消費：2026年のProプランは月120メッセージに増量。複数の小修正を1メッセージにまとめる習慣を付けると十分運用できます

FAQ#

Q. プログラミング未経験でも2026年のLovableは使えますか？

はい、変わりありません。自然言語で指示を書けばコードが生成されます。ただしTanStack StartではServer FunctionsやSSRの概念が出てくるため、『なぜ動くのか』を理解するには基礎的なWeb知識が役立ちます。

Q. 旧スタックのプロジェクトはどうなりますか？

引き続き動作・編集可能ですが、新機能の恩恵を受けるにはTanStack Startへの移行が推奨されます。移行はLovableに依頼すれば自動で行われます。

Q. 無料プランでLovable Cloudは使えますか？

はい、無料プランでもLovable Cloud（DB・認証・ストレージ）を試用できます。ただし本番トラフィックが増えると従量課金が発生するため、長期運用には有料プランが現実的です。

Q. MCPコネクタは追加料金がかかりますか？

Lovable組み込みのMCPコネクタは追加料金なしで利用できます。ただし、連携先サービス側（Linear・Notionなど）の有料プランが必要な場合は別途契約が必要です。

Q. 生成されたコードはGitHubに同期できますか？

はい、エディタの設定からGitHubリポジトリと連携できます。双方向同期が可能で、Lovableで編集した内容がGitHubにプッシュされ、逆にGitHubで編集した内容もLovableに反映されます。

Q. 日本語でプロンプトを書いても精度は落ちませんか？

2026年現在、英語と比べて顕著な精度低下はありません。GPT-5系・Gemini 2.5 Pro系はいずれも日本語の指示理解が高水準で、UI文言の自動翻訳も安定しています。曖昧な指示は英語でも精度が下がるため、『誰が・何を・どう操作するか』を具体的に書くことが最も重要です。

Q. 1プロジェクトを完成させるのに何メッセージくらい必要ですか？

小規模なツール（フォーム＋一覧）なら20〜40メッセージ、CRMやSaaS MVPなら80〜150メッセージが目安です。複数の修正を1メッセージにまとめる、プレビューで動作確認してから依頼する、といった工夫で大幅に節約できます。

Q. スマートフォンからもLovableは使えますか？

ブラウザからアクセス可能で、簡単な指示出しやプレビュー確認はスマホでも問題なくできます。ただしファイル編集やデバッグはPC環境が圧倒的に効率的なため、本格的な開発はデスクトップ推奨です。

Q. 公開後にアプリを非公開に戻せますか？

はい、エディタ右上の『Publish』設定から公開状態を切り替えられます。非公開に戻すと公開URLは404になりますが、プロジェクト本体とデータは保持されます。再公開もワンクリックです。

関連記事#