メインコンテンツへスキップ

​
Lovable の概要

Lovable を使ってフルスタックアプリケーションを作成するためのステップバイステップガイドへようこそ。 Lovable Dashboard Pn

​
Lovable プラットフォームの概要

1

ステップ 1

始めるには、lovable.dev にアクセスしてアカウントを作成します。登録が完了すると、最初のプロジェクトを作成できるようになります。
2

ステップ 2

最初にプロンプトを入力するだけで、あとは Lovable がすべて行います！これは Lovable におけるあらゆるプロジェクトのスタート地点であり、あなたのアイデアをすぐに形にできます。
Lovable では、シンプルさが重要です。
  • ここ で、1 つのプロンプトからプロジェクトを開始できます。
  • 最新や注目のものを含む、すべてのプロジェクトを確認できます。
  • 厳選されたテンプレートからテンプレートで素早くスタートできます。
  • プロフィールを表示・編集して、自分の体験をパーソナライズできます。
  • アカウントを管理 して、月ごとのクレジットを確認し、設定を調整できます。
  • Chat mode などの Labs 機能を試し、オン・オフを切り替えられます。
  • プランをアップグレードまたはダウングレード して、スムーズに切り替えできます。
Lovable では、各プロジェクトが決まったワークフローに沿って進みます：
  • チャットベースのインターフェースで簡単に編集できます。
  • 画像を添付して、精度の高い編集やインスピレーションに活用できます。
  • コンポーネントを選択してビジュアルに編集し、シームレスなデザイン体験を得られます。
  • 編集モードと Chat mode をスムーズに切り替えできます。
  • バージョン履歴で変更を追跡し、任意の過去バージョンに戻せます。
  • プロジェクト内のページを簡単にナビゲートできます。
  • リミックスを有効化したり、必要に応じてプロジェクト名を変更できます。
  • バックエンド機能として Lovable Cloud を利用する（または Supabase と連携する）ことができます。
  • GitHub 経由でコラボレーションし、コードを編集・管理できます。
  • プロジェクトを公開・デプロイして共有し、プレビューリンクを使って確認できます（変更後は再度公開することを忘れないでください）。
  • Web 表示とモバイル表示を切り替えて、レスポンシブデザインを確認できます。
  • プレビューモーダルをリフレッシュして、更新を即座に確認できます。
  • プレビューリンクを使って、プロジェクトを直接開くことができます。
各プロジェクトの設定では、次のことができます：
  • 合計編集回数や作成日など、主要なプロジェクト情報を表示できます。
  • カスタムナレッジを設定して、プロジェクトのコンテキストを調整できます。
  • GitHub リポジトリに接続して、スムーズにコラボレーションできます。
  • 必要に応じて、プロジェクトの公開範囲を調整できます。
  • （有料プラン限定で）バッジの表示を管理できます。
  • プロジェクト名をいつでも変更できます。
  • プロジェクトを削除できます（⚠️ 危険ゾーン）。
次の項目には、いつでもすばやくアクセスできます：
  • プロジェクト全体の概要を確認するためのダッシュボード。
  • プロフィールや各種設定を管理するためのアカウント設定。
  • ガイドやヘルプのためのドキュメントとサポート。
  • Lovable アカウントから安全にログアウト。

​
プロジェクトを始める

Lovable を使い始める方法はいくつかあります。好みやリソースに応じて選べます。
Lovable のプロンプトベースの仕組みを使うと、アプリ作成が簡単になります。
  • 作りたいものをプロンプトボックスにそのまま書いてください。
  • 具体的に書くほど、より良い結果が得られます。
  • 明確で詳しいプロンプトから始めましょう。
  • 進めながら、プロジェクトを洗練・調整できます。
例:“Create a dashboard with user login, monthly sales in a line chart, and customer demographics in a pie chart.”
既存の公開プロジェクトや自分のプロジェクトをリミックスできます。リミックスすると、プロジェクトの現在の状態をそのまま出発点として再利用し、その上に構築できます。これは、新しいアイデアを試したり、調整を加えたり、元のバージョンを保ったままさまざまな変更を繰り返し試したりするのに最適な方法です。
他のユーザーの公開プロジェクトをリミックスできるのは、そのプロジェクトが Supabase に接続されていない場合のみです。
Figma にデザインがある場合は、その一部をスクリーンショットしてください。スクリーンショットをそのまま Lovable にペーストするか、画像ファイルをドラッグ＆ドロップできます。Enter キーを押すと、Lovable がデザインを動くコードに変換します。
1

ステップ 1

Excalidraw などのツールを使って UI をスケッチします。
2

ステップ 2

描いたスケッチのスクリーンショットを取り、それを Lovable にペーストするかドラッグ＆ドロップします。プラットフォームがスケッチを動くコードに変換します。
詳しくはこちら。
既存の Web ページを再現したい場合:
1

ステップ 1

Mac の Cmd+Shift+4 などのショートカットや GoFullPage Chrome Extension などのツールを使ってスクリーンショットを撮ります。
2

ステップ 2

スクリーンショットを Lovable にペーストするかドラッグ＆ドロップします。Lovable がその Web ページの構造をプロジェクト内に再現します。
詳しくはこちら。

​
プロジェクトを編集する

Lovable の Custom knowledge は、プロジェクトの機能、デザイン、目標を 1 か所にまとめて整理する 設計図 の役割を果たします。
Visual Edits を使うと、ページ上の要素を選択して、その場でテキストや色の更新を行ったり、プロンプトを使って機能やレイアウトを調整したりできます。詳細は Visual Edits を参照してください。
AI 駆動型のアプリを構築するうえでは速度が重要ですが、同時に安定性とコントロールも大切です。そのため、変更履歴の管理を簡単にするためにバージョン管理機能を強化しました。
1

過去のバージョンにすぐ戻す、または別のアプローチを試す

以前の問題なく動作していたバージョンをプレビューし、必要に応じてそのバージョンに戻すことができます。また、過去のメッセージを編集して元に戻し、別のアプローチを試すことも可能です。何も失われません — その時点より後に行ったすべての変更はチャット内に残り、いつでも再適用できます。
2

重要な編集をブックマークする

重要な編集内容をブックマークしておくことで、作業内容を整理し、後から簡単に見つけて再確認できるようにできます。
3

直感的なバージョン履歴

履歴パネルは Google ドキュメントのように動作するようになり、変更履歴の追跡がより簡単になりました。
チャットに直接画像を添付して、プロンプトにコンテキストを追加できます。これにより、説明するよりも見せたほうが分かりやすいアイデアやコンセプトも、簡単に伝えられるようになります。
プロジェクトを GitHub と連携して、アプリケーションをシームレスに継続的に改善できるようにします。GitHub やお好みの IDE でコード変更を行いながら、すべてを Lovable と同期した状態に保てます。
詳細は GitHub連携 を参照してください。

​
プロジェクトにフルスタック機能を追加する

アプリケーションにバックエンド機能を追加する必要がある場合は、次のいずれかの方法を利用できます。
  • Lovable の組み込みバックエンドである Lovable Cloud に接続する
  • Lovable のネイティブな Supabase 連携 を利用する
Stripe を Lovable に接続する方法はいくつかありますが、最もシンプルなのは、Stripe の組み込み決済リンクを利用する方法です。詳しくは Stripe 連携 を参照してください。
詳しくは Resend 連携 を参照してください。

​
プロジェクトをデプロイして公開する

SEO と GEO のベストプラクティスを実装するガイドに従って、最良の結果が得られるようにしましょう。
次のサービスを使って独自ドメインを追加できます：
  • Entri（Lovable ネイティブ）
  • Netlify
  • Vercel
  • Namecheap
詳しくは、Custom domain を参照してください。
プロジェクトの準備ができたら公開して、共有可能な URL を生成します。これにより、アプリケーションを簡単に紹介したり、共同作業者や関係者と共有したりできます。
詳しくは、Publish を参照してください。