> ## Documentation Index
> Fetch the complete documentation index at: https://lovable.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

# はじめに

> 最初のプロンプトからフルスタックアプリまで

<div id="overview-of-lovable">
  ## Lovable の概要
</div>

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

<img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/lovable-dashboard.png?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=9740705cec0501ed75b6bddb02ad9dd1" alt="Lovable Dashboard Pn" width="2376" height="1748" data-path="images/lovable-dashboard.png" />

<div id="the-lovable-platform-overview">
  ### Lovable プラットフォームの概要
</div>

<AccordionGroup>
  <Accordion title="最初のプロジェクトを作成する">
    <Steps>
      <Step title="ステップ 1">
        始めるには、[lovable.dev](https://lovable.dev) にアクセスしてアカウントを作成します。登録が完了すると、最初のプロジェクトを作成できるようになります。
      </Step>

      <Step title="ステップ 2">
        最初にプロンプトを入力するだけで、あとは Lovable がすべて行います！これは Lovable におけるあらゆるプロジェクトの**スタート地点**であり、あなたのアイデアをすぐに形にできます。
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="Lovable ダッシュボード">
    Lovable では、シンプルさが重要です。

    * [**ここ**](https://lovable.dev/) で、1 つのプロンプトから**プロジェクトを開始**できます。
    * 最新や注目のものを含む、**すべてのプロジェクトを確認**できます。
    * 厳選されたテンプレートから**テンプレートで素早くスタート**できます。
    * プロフィールを表示・編集して、**自分の体験をパーソナライズ**できます。
    * [**アカウントを管理**](https://lovable.dev/settings) して、月ごとのクレジットを確認し、設定を調整できます。
    * Chat mode などの [**Labs**](https://lovable.dev/settings/account) **機能を試し**、オン・オフを切り替えられます。
    * [**プランをアップグレードまたはダウングレード**](https://lovable.dev/settings/plans) して、**スムーズに切り替え**できます。
  </Accordion>

  <Accordion title="プロジェクトの概要">
    Lovable では、各プロジェクトが決まったワークフローに沿って進みます：

    * **チャットベースのインターフェース**で簡単に編集できます。
    * **画像を添付**して、精度の高い編集やインスピレーションに活用できます。
    * **コンポーネントを選択してビジュアルに編集**し、シームレスなデザイン体験を得られます。
    * 編集モードと Chat mode を**スムーズに切り替え**できます。
    * **バージョン履歴で変更を追跡**し、任意の過去バージョンに戻せます。
    * プロジェクト内のページを**簡単にナビゲート**できます。
    * **リミックスを有効化**したり、必要に応じてプロジェクト名を変更できます。
    * バックエンド機能として **Lovable Cloud** を利用する（または Supabase と連携する）ことができます。
    * **GitHub 経由でコラボレーション**し、コードを編集・管理できます。
    * プロジェクトを**公開・デプロイして共有**し、プレビューリンクを使って確認できます（変更後は再度公開することを忘れないでください）。
    * **Web 表示とモバイル表示を切り替え**て、レスポンシブデザインを確認できます。
    * **プレビューモーダルをリフレッシュ**して、更新を即座に確認できます。
    * プレビューリンクを使って、**プロジェクトを直接開く**ことができます。
  </Accordion>

  <Accordion title="プロジェクト設定">
    各プロジェクトの設定では、次のことができます：

    * 合計編集回数や作成日など、**主要なプロジェクト情報を表示**できます。
    * **カスタムナレッジを設定**して、プロジェクトのコンテキストを調整できます。
    * **GitHub リポジトリに接続**して、スムーズにコラボレーションできます。
    * 必要に応じて、**プロジェクトの公開範囲を調整**できます。
    * （有料プラン限定で）**バッジの表示を管理**できます。
    * **プロジェクト名をいつでも変更**できます。
    * **プロジェクトを削除**できます（⚠️ 危険ゾーン）。
  </Accordion>

  <Accordion title="プロジェクトへのクイックアクセス">
    次の項目には、いつでもすばやくアクセスできます：

    * プロジェクト全体の概要を確認するための**ダッシュボード**。
    * プロフィールや各種設定を管理するための**アカウント設定**。
    * ガイドやヘルプのための**ドキュメントとサポート**。
    * Lovable アカウントから安全に**ログアウト**。
  </Accordion>
</AccordionGroup>

<div id="start-your-project">
  ### プロジェクトを始める
</div>

Lovable を使い始める方法はいくつかあります。好みやリソースに応じて選べます。

<AccordionGroup>
  <Accordion title="プロンプト">
    Lovable のプロンプトベースの仕組みを使うと、アプリ作成が簡単になります。

    * 作りたいものをプロンプトボックスにそのまま書いてください。
    * 具体的に書くほど、より良い結果が得られます。
    * 明確で詳しいプロンプトから始めましょう。
    * 進めながら、プロジェクトを洗練・調整できます。

    <Info>
      例:

      *"Create a dashboard with user login, monthly sales in a line chart, and customer demographics in a pie chart."*
    </Info>
  </Accordion>

  <Accordion title="既存のプロジェクトをリミックスする">
    既存の公開プロジェクトや自分のプロジェクトをリミックスできます。リミックスすると、プロジェクトの現在の状態をそのまま出発点として再利用し、その上に構築できます。これは、新しいアイデアを試したり、調整を加えたり、元のバージョンを保ったままさまざまな変更を繰り返し試したりするのに最適な方法です。

    <Note>
      他のユーザーの公開プロジェクトをリミックスできるのは、そのプロジェクトが Supabase に接続されていない場合のみです。
    </Note>
  </Accordion>

  <Accordion title="Figma を使う">
    Figma にデザインがある場合は、その一部をスクリーンショットしてください。スクリーンショットをそのまま Lovable にペーストするか、画像ファイルをドラッグ＆ドロップできます。Enter キーを押すと、Lovable がデザインを動くコードに変換します。
  </Accordion>

  <Accordion title="スケッチを使う">
    <Steps>
      <Step title="ステップ 1">
        [**Excalidraw**](https://excalidraw.com/) などのツールを使って UI をスケッチします。
      </Step>

      <Step title="ステップ 2">
        描いたスケッチのスクリーンショットを取り、それを Lovable にペーストするかドラッグ＆ドロップします。プラットフォームがスケッチを動くコードに変換します。
      </Step>
    </Steps>

    [詳しくはこちら。](https://www.youtube.com/watch?v=c0zhLzcVJRI)
  </Accordion>

  <Accordion title="Web サイトやアプリケーションをクローンする">
    既存の Web ページを再現したい場合:

    <Steps>
      <Step title="ステップ 1">
        Mac の *Cmd+Shift+4* などのショートカットや [GoFullPage Chrome Extension](https://chromewebstore.google.com/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl) などのツールを使ってスクリーンショットを撮ります。
      </Step>

      <Step title="ステップ 2">
        スクリーンショットを Lovable にペーストするかドラッグ＆ドロップします。Lovable がその Web ページの構造をプロジェクト内に再現します。
      </Step>
    </Steps>

    [詳しくはこちら。](https://www.youtube.com/watch?v=tYDqBMilHkM)
  </Accordion>
</AccordionGroup>

<div id="edit-your-project">
  ### プロジェクトを編集する
</div>

<AccordionGroup>
  <Accordion title="プロジェクトに Custom knowledge を追加する">
    Lovable の [Custom knowledge](/ja/features/knowledge) は、プロジェクトの機能、デザイン、目標を 1 か所にまとめて整理する **設計図** の役割を果たします。
  </Accordion>

  <Accordion title="Visual Edits を使う">
    Visual Edits を使うと、ページ上の要素を選択して、その場でテキストや色の更新を行ったり、プロンプトを使って機能やレイアウトを調整したりできます。

    詳細は [Visual Edits](https://docs.lovable.dev/features/visual-edit) を参照してください。
  </Accordion>

  <Accordion title="変更を元に戻す、またはメッセージを編集して別のアプローチを試す">
    AI 駆動型のアプリを構築するうえでは速度が重要ですが、同時に安定性とコントロールも大切です。そのため、変更履歴の管理を簡単にするためにバージョン管理機能を強化しました。

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

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

      <Step title="直感的なバージョン履歴">
        履歴パネルは Google ドキュメントのように動作するようになり、変更履歴の追跡がより簡単になりました。

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/history.png?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=b0b6b8829cd6db5c9b48c09e7c70aba4" alt="" width="391" height="37" data-path="images/history.png" />

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/redesign-history.jpeg?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=ff8031e1fe0ac2cf85b22ad5eb26065a" alt="" width="1512" height="982" data-path="images/redesign-history.jpeg" />
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="21st dev でアニメーションコンポーネントを追加する">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/MJ9pB741sXw?si=7vPZVpe0TyHIgTLp" title="YouTube 動画プレーヤー" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
  </Accordion>

  <Accordion title="プロンプトに画像を追加する">
    チャットに直接画像を添付して、プロンプトにコンテキストを追加できます。これにより、説明するよりも見せたほうが分かりやすいアイデアやコンセプトも、簡単に伝えられるようになります。

    <iframe width="100%" height="315" src="https://www.youtube.com/embed/uaGnrK5Dkkc" title="YouTube 動画プレーヤー" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
  </Accordion>

  <Accordion title="プロジェクトに新しいページを追加する">
    <iframe width="100%" height="315" src="https://www.youtube.com/embed/h6vnvFKzd0Y?si=cw_zapDQW3hQfVOc" title="YouTube 動画プレーヤー" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
  </Accordion>

  <Accordion title="コードをリファクタリングする">
    <iframe width="100%" height="315" src="https://www.youtube.com/embed/epVlkdNSVrs?si=ufy8WTXkPcpbhkW6" title="YouTube 動画プレーヤー" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
  </Accordion>

  <Accordion title="GitHub に接続する">
    プロジェクトを GitHub と連携して、アプリケーションをシームレスに継続的に改善できるようにします。GitHub やお好みの IDE でコード変更を行いながら、すべてを Lovable と同期した状態に保てます。

    <iframe width="100%" height="315" src="https://www.youtube.com/embed/zgNkhU4SYgQ" title="YouTube 動画プレーヤー" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />

    詳細は [GitHub連携](https://docs.lovable.dev/integrations/git-integration) を参照してください。
  </Accordion>
</AccordionGroup>

<div id="add-fullstack-capabilities-to-your-project">
  ### プロジェクトにフルスタック機能を追加する
</div>

<AccordionGroup>
  <Accordion title="バックエンドを接続する">
    アプリケーションにバックエンド機能を追加する必要がある場合は、次のいずれかの方法を利用できます。

    * Lovable の組み込みバックエンドである [Lovable Cloud](https://docs.lovable.dev/features/cloud) に接続する
    * Lovable のネイティブな [Supabase 連携](https://docs.lovable.dev/integrations/supabase) を利用する
  </Accordion>

  <Accordion title="Stripe でアプリケーションに決済機能を追加する">
    Stripe を Lovable に接続する方法はいくつかありますが、最もシンプルなのは、Stripe の組み込み決済リンクを利用する方法です。詳しくは [Stripe 連携](https://docs.lovable.dev/integrations/stripe) を参照してください。
  </Accordion>

  <Accordion title="Resend でメール機能を追加する">
    <iframe width="100%" height="315" src="https://www.youtube.com/embed/w5Xq-Kvt3J0?si=wdSxtbhg3-uH3NZt" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />

    詳しくは [Resend 連携](https://docs.lovable.dev/integrations/resend) を参照してください。
  </Accordion>
</AccordionGroup>

<div id="deploy-and-publish-your-project">
  ### プロジェクトをデプロイして公開する
</div>

<AccordionGroup>
  <Accordion title="SEO を設定する">
    [SEO と GEO のベストプラクティスを実装する](https://docs.lovable.dev/tips-tricks/seo-geo)ガイドに従って、最良の結果が得られるようにしましょう。
  </Accordion>

  <Accordion title="独自ドメインを追加する">
    次のサービスを使って独自ドメインを追加できます：

    * Entri（Lovable ネイティブ）
    * Netlify
    * Vercel
    * Namecheap

    詳しくは、[Custom domain](https://docs.lovable.dev/features/custom-domain) を参照してください。
  </Accordion>

  <Accordion title="プロジェクトを公開する">
    プロジェクトの準備ができたら公開して、共有可能な URL を生成します。これにより、アプリケーションを簡単に紹介したり、共同作業者や関係者と共有したりできます。

    <iframe width="100%" height="315" src="https://www.youtube.com/embed/GFtWVXkZDTw" title="YouTube 動画プレーヤー" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />

    詳しくは、[Publish](https://docs.lovable.dev/features/publish) を参照してください。
  </Accordion>
</AccordionGroup>