Lovable の使い方:初心者向けアプリ制作チュートリアル
実際の初心者ビルドから再構築した Lovable 完全ウォークスルー — 構造化プロンプト、Plan モード、Google カレンダー連携、バグ修正、セキュリティスキャン、PWA としての公開まで。全ステップにスクリーンショット付き。
Lovable の要点
- 最初のプロンプトは 2 つに絞ります。アプリが何をするか(ゴール)、ユーザーがどう流れを進むか(フロー)。機能は 1〜2 個で十分です。
- 送信前に Build を Plan に切り替えましょう。Lovable はまず質問をしてきて、コードを書く前に修正可能な計画を立てます。
- 挙動がおかしいときは正確な日本語(英語)プロンプトで修正します。「タスクは 15 分刻みの開始で、過去には設定しない」が「時間を直して」より効きます。
- 公開前に詳細セキュリティスキャンを実行。「Try to fix all」での修正は無料です。自然言語の一文で PWA 化すればスマホにインストールできます。
Lovable AI Tutorial for Beginners - Build Your First App
ソース動画:Kevin Stratvert11:40
スクリーンショットはソース動画からの引用で、タイムスタンプ付きクレジットを併記しています。本文は完全な文字起こしに基づく独自の解説で、事実は動画と一致しています。
本チュートリアルは文章で学びたい方向けの独立した図解版です。クリエイターを支援したい方は上記の Lovable 公式コラボ動画をご覧ください。
Lovable でアプリを作る手順
- 1
ワークスペースを把握する
サインアップ後に着地するのが Lovable のワークスペースです。左サイドバーに Home・検索・リソース・コネクタ、その下に最近のチャット。中央のプロンプトボックスがすべての起点で、その下にテンプレートコレクションが並びます。
Lovable ワークスペース:中央にプロンプト、左にチャットとコネクタ。0:40 に視聴 - 2
構造化された最初のプロンプトを書く
入力前に 2 つ明確にします。ゴール(アプリの目的)とフロー(ユーザーの動線)。今回の題材は音声→カレンダーアプリ。タスクを呟くと Google カレンダーに予定として入る仕組みです。制約(タスクは特に指定がなければ 30 分、保存前にユーザー確認)を書き、clean・sleek・minimal といった言葉で見た目を指定し、最後に「要求を完全に理解するために、質問があれば何でも聞いて」と添えます。
完全な初回プロンプト:ゴール、フロー、制約、見た目、質問の招待。3:20 に視聴 - 3
送信前に Plan モードへ切替
プロンプトボックス下の Build ドロップダウンを開き、Plan(「議論してから構築」)を選択。Alt+P で切り替えられます。Plan モードでは Lovable が質問と計画を先に出すため、方向違いのアプリが作られるのを防げます。最初のプロジェクトでは最も価値のある習慣です。
Build/Plan ドロップダウン:議論してから構築する Plan を選択。2:40 に視聴 - 4
確認の質問に答える
Lovable から質問が返ってきます。アクセントカラーなどの見た目の選択に続き、音声文字起こしは無料内蔵かサードパーティか、Google カレンダーは Lovable コネクタでつなぐか、といった機能面の質問が来ます。ここでの曖昧な回答は後の曖昧な機能になります。正直に答えましょう。
確認の質問:アクセントカラーを選び、機能の選択肢に答える。4:12 に視聴 - 5
計画を読んで承認する
計画は「見た目」「画面とフロー」「動作の仕組み」といった平易なセクション+技術詳細に分かれます。コードを読めなくても「画面とフロー」は確認を。それが紙上のあなたのアプリです。おかしければ承認せずプロンプトボックスで修正を指示し、一致したら Approve を。
生成された計画:確認し、修正を指示し、承認する。5:00 に視聴 - 6
途中で Google カレンダーを接続
ビルドの途中で Lovable が止まり、Google カレンダーの接続を求めてきます。接続ボタンから Google アカウントでサインインし、プロジェクトにリンクしてください。このデモではカレンダーは自分のアカウントに固定。後からユーザーごとのサインインに切り替えれば共有もできます。
ビルドの途中で Google カレンダーの接続を求められる。5:35 に視聴 - 7
実際に話してタスク入力をテスト
プレビューが表示されたらマイクを押して本当に喋ってみます。「TPS レポートに新表紙をつけて Bill に送る、顧客リストの要約を Charles に送る」。録音を止めると、アプリが音声を承認待ちのタスクカードに変換します。
初回音声テスト:呟きがタスクに変換される。5:50 に視聴 - 8
正確なプロンプトで挙動を修正
最初のバグは、タスクが発話した瞬間の時刻に設定されたこと。修正指示は正確に:「タスクは現在時刻ではなく、最も近い 15 分刻みで開始(過去は不可)」。Lovable は修正を小さなカードとして記録します。計画フェーズを丁寧にやったからこそ、この精度の指示が効くのです。
正確な修正プロンプトでタスクが 15 分刻みにスナップ。8:00 に視聴 - 9
日付の言い回しを教える
「明日の午前 10 時に Kevin に電話」と言うと午前 3 時に設定されました。相対日付を解釈できないのです。ルールをプロンプトします:tomorrow・yesterday・Friday at 3 p.m. を認識、morning は午前 11 時まで、afternoon は 13〜16 時、next Monday は「その次の」月曜。例が具体的なほど、後の修正サイクルが減ります。
音声日付ルール:when の例と所要時間の例を明記。7:40 に視聴 - 10
スクリーンショットで Plan モードにデバッグさせる
時刻が約 7 時間ずれたまま。タイムゾーンバグです。誤った時刻のスクリーンショットをプロンプトに直接貼り、観察を伝えます。「時刻が約 7 時間ずれている。タイムゾーン問題に見える」。修正は Plan モードへ戻って行い、計画が技術的すぎるときは「技術なしでも分かる言葉で説明して」と頼みます。
バグを貼って現象を伝え、Plan モードに修正させる。8:55 に視聴 - 11
公開して URL を取得
公開前の最後のプロンプトで、アプリを「自分のカレンダー」から「ユーザー各自のカレンダー」方式へ切替。他の人にあなたの予定を触られません。右上の Publish を押すと無料の lovable.app URL を取得(カスタムドメインは Pro)。公開範囲は Public にし、タイトル・説明・ソーシャル画像を設定します。
公開フロー:無料の lovable.app URL とアプリのメタ情報。9:45 に視聴 - 12
セキュリティスキャンと PWA 化
公開前に詳細セキュリティスキャンの実行を推奨。AI 生成コードこそ価値があります。「Try to fix all」での修正はクレジット消費ゼロ。その後ひとことプロンプトでスマホ対応に:「スマホにアプリアイコンとしてインストールできるようにして。アイコンはティールのマイクで」。manifest とタッチアイコンが生成されます。
セキュリティ修正は無料。PWA プロンプトでインストール可能に。10:40 に視聴 - 13
スマホにインストールする
更新を公開し、スマホのブラウザで URL を開いて共有アイコンをタップ。「ホーム画面に追加」を選んで追加を確定すると、アプリアイコンがホーム画面に着地します。タップすればネイティブアプリのようにフルスクリーンで動作。アプリストアは不要です。
ホーム画面に追加で公開アプリがスマホのアイコンに。11:00 に視聴