🤖 一言で言うと
「こんなサイトを作って」と日本語で話しかけるだけで、AIが自動的にコードを書いてホームページを作ってくれるツールです。プログラミングの知識は一切不要です。
🌍 どんなツール？
2023年に登場し、わずか1年でARR（年間経常収益）316億円を達成した世界的に注目のAIツール。現在も急速に成長中で、世界中の起業家・フリーランサーが愛用しています。
🏗️ 何が作れる？
ランディングページ・ポートフォリオ・コーポレートサイト・ブログ・ECサイト・予約フォーム・会員制サイトなど、あらゆるWebサイト・アプリが作れます。
⚡ どれくらい速い？
通常、Webサイト制作には数日〜数週間かかります。Lovableなら最短10分でプロ品質のサイトが完成します。修正もチャットで数秒。
Lovableが向いている人
- 副業・起業のためにHPを作りたい方
- 外注費を節約して自分でサイトを作りたい方
- アイデアをすぐに形にしたい起業家・フリーランサー
- プログラミングを学ぶ時間がない方
| 比較項目 | Web制作会社に外注 | WordPress | Lovable |
|---|---|---|---|
| 費用 | 10〜100万円+ | 月1,000〜5,000円 | 無料〜月$25 |
| 制作期間 | 2週間〜2ヶ月 | 1週間〜1ヶ月 | 10分〜数時間 |
| 技術知識 | 不要（依頼するだけ） | ある程度必要 | 完全不要 |
| 修正の手軽さ | 都度依頼・費用発生 | 自分で操作 | チャットで即修正 |
| デザイン品質 | プロ品質 | テーマ依存 | プロ品質 |
①日本語で話しかけるだけ
「おしゃれなカフェのHPを作って」と入力するだけ。AIが自動でデザインからコードまで全部やってくれます。
②リアルタイムプレビュー
AIが作業している様子がリアルタイムで見えます。完成を待たずに途中経過を確認できるので安心です。
③ワンクリックで公開
「Publish」ボタンを押すだけで、インターネット上に即座に公開。URLが発行されてすぐに共有できます。
④外部サービスと連携
Supabase（データベース）・Stripe（決済）・Google Analytics（アクセス解析）など主要サービスと連携可能。
⑤スマホ対応が自動
作ったサイトは自動的にスマホ・タブレット・PCすべてに対応（レスポンシブデザイン）。別途作業不要。
⑥Figmaデザインを読み込める
デザインツールFigmaで作ったデザインをアップロードすれば、そのままコードに変換してくれます。
登録に必要なもの
GoogleアカウントまたはGitHubアカウントがあれば、3クリックで登録完了です。メールアドレスのみでも登録できます。クレジットカードは不要です。
公式サイトにアクセスする
ブラウザで lovable.dev を開きます。右上の「Get started」または「Sign up for free」ボタンをクリックします。
サインアップ方法を選ぶ
3つの方法から選べます。Googleアカウントが最も簡単でおすすめです。
ダッシュボードが開く → 登録完了！
ログインが完了すると、ダッシュボード（プロジェクト管理画面）が表示されます。これで準備完了です！
登録完了！無料で使える機能
無料プランでは毎日5クレジット（月最大30クレジット）が付与されます。まずは無料で試してみましょう！
新規プロジェクトを作成する
ダッシュボードの中央にある大きなテキスト入力エリアが表示されます。ここに作りたいサイトの説明を入力します。
最初のプロンプトを入力する
以下のようなプロンプトを入力してみましょう。詳しく書くほど、イメージ通りのサイトができます。
ポイント：Enterキーで送信！
入力が終わったら Enterキー または送信ボタンをクリックします。数十秒〜2分でサイトが完成します。
AIが作業中…プレビューを確認する
AIがコードを生成している様子がリアルタイムで見えます。完成したら右側のプレビューエリアでサイトの見た目を確認しましょう。
気に入らない部分を修正する
完成したサイトを見て、修正したい部分があればチャットで指示を出します。何度でも無料で修正できます（クレジットを消費します）。
テキストはクリックで直接編集できる
プレビュー画面上のテキストをクリックすると、直接文字を書き換えることもできます。チャットを使わずに素早く修正できます。
📌 基本の3ルール
具体的に書く
「いい感じにして」はNG。「背景は白、文字は黒、余白を広めに」と具体的に伝えましょう。
役割を与える
「あなたはプロのWebデザイナーです」と前置きすると、デザインの質が上がります。
段階的に作る
一度に全部指示せず「まずヘッダーを作って」「次にフッターを追加して」と順番に指示すると精度UP。
📋 コピペで使えるプロンプトテンプレート集
🚀 上級テクニック
テキストを直接編集する
プレビュー画面上の文字をクリックすると、その場で文字を書き換えられます。会社名・キャッチコピー・連絡先などを自分の情報に変更しましょう。
テキストをクリック → 編集 → Enterで確定。チャットを使わずに素早く変更できます。
画像を変更する
LovableはUnsplash（無料フォトサービス）と連携しています。チャットで「ヒーローの画像をオフィスで働く女性の写真に変えて」と指示するだけで、自動的に検索・差し替えてくれます。
カラーテーマを変更する
サイト全体の色を一括で変更できます。ブランドカラーに合わせて調整しましょう。
「Publish」ボタンをクリック
画面右上の紫色の「Publish」ボタンをクリックします。
公開設定を選んで「Deploy」
公開範囲を選択します。無料プランでは「Public（公開）」のみ選択可能です。「Deploy」をクリックして数秒待ちます。
URLが発行される → 公開完了！
数秒後にURLが表示されます。このURLをコピーしてSNSや名刺に載せましょう！
発行されるURL例
https://my-site-name.lovable.app
無料プランでは「lovable.app」のサブドメインが付きます。独自ドメイン（例：mysite.com）を使いたい場合はProプランにアップグレードしてください。
🌐 独自ドメインを設定する（Proプラン以上）
| 手順 | 作業内容 | 備考 |
|---|---|---|
| ① | お名前.com・ムームードメインなどでドメインを取得 | 年間1,000〜2,000円程度 |
| ② | LovableのProject Settings → Custom Domainを開く | Proプラン以上が必要 |
| ③ | 取得したドメインを入力して「Add Domain」をクリック | |
| ④ | 表示されたDNSレコードをドメイン管理画面に設定 | 反映に最大48時間かかる場合あり |
| ⑤ | 「Verify」をクリックして設定完了 | SSL証明書も自動発行 |
- 月100クレジット＋毎日5クレジット
- クレジットの繰り越し
- 独自ドメイン設定
- プライベートプロジェクト
- Lovableバッジ非表示
- 追加クレジット購入可
- Proの全機能
- チームワークスペース
- SSO（シングルサインオン）
- デザインテンプレート
- ロールベースアクセス制御
- セキュリティセンター
💎 クレジットとは？
クレジット = AIへの指示1回分
Lovableでは、AIにプロンプトを送るたびに「クレジット」を消費します。1つのプロンプト送信 = 約1クレジット。無料プランは毎日5クレジット（月最大30回）まで使えます。
学生は50%オフ！
学生証を確認することで、Proプランが最大50%オフになります。lovable.dev/student-discountから申請できます。
参考サイトのURLを貼る
「このサイト（URL）のようなデザインにして」と参考URLを貼ると、イメージ通りのデザインに近づきます。言葉で説明するより何倍も精度が上がります。
スクリーンショットを貼る
参考にしたいデザインの画像をそのまま貼り付けて「このデザインを参考にして」と伝えるだけ。Figmaのデザインも読み込めます。
「元に戻す」を活用する
気に入らない変更は画面左下の「⟳ 元に戻す」ボタンで即座に戻せます。失敗を恐れずどんどん試しましょう。
セクションごとに修正する
「ヘッダーだけ修正して」「フッターの色だけ変えて」と部分指定すると、他の部分が崩れにくくなります。一度に全部変えようとしないのがコツ。
プロンプトに「〜は変えないで」を追加
「ヘッダーのデザインは変えないで、フォントだけ変えて」と制約を加えると、意図しない変更を防げます。
モバイル表示を必ず確認する
プレビュー画面のスマホアイコンをクリックしてモバイル表示を確認しましょう。「スマホ表示でヘッダーが崩れているので修正して」と指示するだけで直ります。
複数バージョンを作って比較する
「ヒーローセクションのデザインを3パターン提案して」と依頼すると複数案を出してくれます。気に入ったものを選んで採用しましょう。
アニメーションを追加する
「スクロールしたときにカードがふわっと表示されるアニメーションを追加して」と伝えるだけで、動きのあるサイトになります。
SEO対策も忘れずに
「このページのSEO対策をして。タイトル・メタディスクリプション・alt属性を最適化して」と指示すると、検索エンジンに強いサイトになります。
完成したらGitHubに保存する
Proプラン以上ではGitHub連携が可能。コードをGitHubに保存しておくと、バックアップになり他のツールでも編集できます。