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

# 最初のプロンプトから始める

> 平易な言葉でのプロンプト作成、プランモードの使用、既存 URL からの開始、Figma デザインのインポートなど、最初のプロンプトから Base44 で構築を始める方法を紹介します。

Base44 のすべてのアプリと web サイトは、最初のプロンプトから始まります。[Base44](https://app.base44.com/) にアクセスし、構築したいものを自分の言葉で説明してください。すでに持っているものに応じて、いくつかの始め方があります。

<Note>
  開始時にサインアップを求められます。これにより作業が保存され、いつでもプロジェクトに戻れます。
</Note>

***

## プロンプトを使う

作りたいものを平易な言葉で書くことが、最もシンプルな始め方です。好きなだけ詳細を共有し、デザイン、文言、構造は後から調整できます。

アイデアを自分の言葉で説明します。例えば、「シンプルな ToDo リスト」「ユーザーがログインできるクライアントポータル」「ギャラリーとお問い合わせフォームのある、写真事業向けのすっきりした 1 ページのサイト」などです。この最初のプロンプトで構築が始まり、機能の追加や変更はいつでもできます。

<Tip>
  入力の代わりに音声で話すこともできます。プロンプトボックスの **Speech to text** アイコンをクリックして、プロンプトを話してください。
</Tip>

<Frame caption="Base44 でプロンプトを入力して構築を開始する">
  <img src="https://mintcdn.com/base44/OBkc8zuoeePyF-u3/images/use-a-prompt.png?fit=max&auto=format&n=OBkc8zuoeePyF-u3&q=85&s=1b0d77895b32807ff3b9435426fff5eb" alt="Typing your first prompt in Base44" width="1001" height="547" data-path="images/use-a-prompt.png" />
</Frame>

<Tip>
  どこから始めるべきか迷っていますか? [プロンプトライブラリ](/Getting-Started/Prompt-library)でコピーして応用できる既成のプロンプトを閲覧し、[プロンプトガイド](/Getting-Started/Prompt-guide)で自分のプロンプトを形にしてください。
</Tip>

***

## プランモードを使う

構築を始める前にアプリや web サイトの形を整える手助けが欲しいときは、プランモードを使います。短い会話が、Base44 が何かを構築する前に調整できる構造化されたプランになります。

プロンプトボックスで Mode ドロップダウン (デフォルトでは **Build** と表示) を開き、**Plan** を選択します。AI は、誰のためのものか、何をすべきか、何を含めたいかなど、構築したいものについて質問します。回答すると、アイデアが進行に合わせて調整できる構造化されたプランに変わります。質問を待たずに追加することもできます。質問が画面に表示されている間もチャットに入力し続けると、AI は回答とあわせてメッセージを考慮します。

一部の質問は、テキストではなくデザインモックアップとして表示されます。その場合、モックアップは一般的なサンプルではなく、あなた自身のプロンプトと回答から生成されるため、アプリの方向性を選ぶことになります。クリックして選択するか、展開して先にページ全体を確認します。

<Frame caption="最初のプロンプトからプランモードを使う">
  <img src="https://mintcdn.com/base44/OBkc8zuoeePyF-u3/images/plan-mode.png?fit=max&auto=format&n=OBkc8zuoeePyF-u3&q=85&s=a2b848200d59eda3ceb7987b801694d5" alt="Using plan mode from the first prompt" width="875" height="467" data-path="images/plan-mode.png" />
</Frame>

**プランモードは次のことに役立ちます:**

* 意図に沿った、より高品質な最初のビルドを得る
* 重要な詳細を事前に追加して、後のやり取りを減らす
* 事前に何を指定すべきか知らなくても、アイデアをじっくり考える
* フロー、ロール、制約を含む、より完全な要件を捉える
* 集中した流れの中で、アイデアから実行へ素早く移る

プランの準備ができると、Base44 は自動的にプランドキュメントを開きます。**Start building** をクリックする前に、課題、対象ユーザー、コアフロー、デザインの好みなどのセクションを確認してください。不足や変更が必要な場合は、同じ会話で入力を続けて詳細を追加したり、既存の内容を更新したりします。

<Frame caption="プランモードで質問に答えてプランを形にする">
  <img src="https://mintcdn.com/base44/OBkc8zuoeePyF-u3/images/plan-mode-questions.png?fit=max&auto=format&n=OBkc8zuoeePyF-u3&q=85&s=b5a7836182ccb03a6597b37786a6a496" alt="Answering questions in plan mode to shape your plan" width="420" style={{ maxWidth: "100%", margin: "0 auto", display: "block" }} data-path="images/plan-mode-questions.png" />
</Frame>

準備ができたら、**Start building** をクリックします。最終的なプランはアプリエディターの AI チャットに送信されるため、後からいつでもスクロールして戻れます。Base44 はアプリエディターを開き、プランから構築を開始します。

<Warning>
  **重要:**

  * プランモードは、メッセージごとにクレジットのごく一部しか消費しません。**Start building** をクリックすると、最初のビルドは約 1 クレジットを使用し、以降の変更は、必要な作業と使用するモデルに応じてクレジットを消費します。
  * ビルド後も、プロンプトや手動の変更を使用して、アプリエディターで編集を続けられます。
  * プランモードを再度使用するには、ホーム画面から新しいビルドを開始し、プロンプトボックスの Mode ドロップダウンで **Plan** を選択します。
</Warning>

**プランモードで新しいビルドを開始するには:**

1. [Base44](https://app.base44.com/) にアクセスします。
2. 最初のプロンプトを入力し、プロンプトボックスの **Build** の横にあるドロップダウン矢印をクリックして **Plan** を選択します。
3. 質問に答え、必要に応じて詳細を追加します。
4. 準備ができたら、プランの **Start building** をクリックします。

***

## 既存の URL から始める

**Start from URL** を使うと、すでに所有している web サイトから始められます。Base44 は、ページ構造、主要なコンテンツセクション、視覚的階層、ヒーローセクション、カード、リストなどのおなじみの UI パターンを含む、目に見えるフロントエンドを再現します。これにより、ゼロから作り直す代わりに、アプリエディターで AI とともに改良できる、見覚えのある出発点が得られます。

Base44 によるサイトの使用方法を選択できます:

* **Content & Design:** サイトのコンテンツとレイアウトを再現し、類似のサイトを構築します。
* **Design only:** サイトのビジュアルスタイルを使用して、同じルックアンドフィールの新しいサイトを作成します。

<Tip>
  既存のサイトやプロジェクト全体を Base44 に移行する場合は、[プロジェクトを Base44 に移行する](/Getting-Started/migrating-an-existing-app)を参照してください。
</Tip>

<Frame caption="既存の URL から始める">
  <img src="https://mintcdn.com/base44/OBkc8zuoeePyF-u3/images/start-from-url.png?fit=max&auto=format&n=OBkc8zuoeePyF-u3&q=85&s=ebad5cced75a9f2683f0b5f4929d1f8b" alt="Starting a new build from an existing URL" width="905" height="568" data-path="images/start-from-url.png" />
</Frame>

**URL から始めることは、次のことに役立ちます:**

* 所有するサイトを、デザインをゼロからやり直さずに再現する
* ブランド、レイアウト、視覚的階層を保持する
* 推測ではなく、しっかりしたページ構造で移行を始める
* 本物のように見える高精度なプロトタイプを作成する

例えば、個人の web サイトを再現したり、小規模ビジネスのサイトを Orders や Customers などのエンティティを備えたよりスマートなアプリにアップグレードしたり、ランディングページを認証とダッシュボードを備えた製品に変えたり、公開されたコンセプトページを社内ツールに変換したりできます。ビルドが完了したら、プロンプトで構造を調整し、エンティティと API を接続し、フローとロジックを追加して改良します。

<Warning>
  **重要:**

  * この機能は、Free プランを含むすべてのプランで利用できます。
  * URL からの開始は、生成中にクレジットを使用します。
  * 開始元の web サイトの正当な所有者であるか、そのコンテンツ、デザイン、画像に対する完全な権利を持っている必要があります。許可なくサードパーティのサイトや著作権のあるサイトを使用しないでください。
  * URL からの開始は、非公開のバックエンドコード、隠れたデータ、サードパーティのインテグレーションをコピーしないため、それらの部分は手動でセットアップする必要があります。
</Warning>

**既存の URL から始めるには:**

1. [Base44](https://app.base44.com/) にアクセスします。
2. プロンプトボックスの **+** アイコンをクリックします。
3. **Start from URL** をクリックします。
4. 使用したい web サイトの URL を貼り付けます。そのコンテンツを使用する権利があることを確認してください。
5. 再利用したい内容に応じて、**Content & Design** または **Design only** を選択します。
   <Frame caption="URL からコンテンツとデザイン、またはデザインのみを選択する">
     <img src="https://mintcdn.com/base44/jp4-lCa7eN9jI_K-/images/copycontentanddesign.jpg?fit=max&auto=format&n=jp4-lCa7eN9jI_K-&q=85&s=4edb912b0b28449121077538c488c312" alt="Choosing content and design, or just the design" width="1194" height="736" data-path="images/copycontentanddesign.jpg" />
   </Frame>
6. **Add** をクリックします。

***

## Figma デザインから始める

**Import from Figma** を使うと、既存の Figma デザインを動作するアプリや web サイトに変えられます。Base44 はフレームからレイアウト、構造、ビジュアルスタイルを再現するため、ゼロから作り直す代わりに、見慣れた出発点から続けられます。

<Frame caption="最初のプロンプトで Figma からデザインをインポートする">
  <img src="https://mintcdn.com/base44/OBkc8zuoeePyF-u3/images/start-a-new-app-figma.png?fit=max&auto=format&n=OBkc8zuoeePyF-u3&q=85&s=ca9d47570921a12a6149a414bb160931" alt="Importing a design from Figma" width="874" height="530" data-path="images/start-a-new-app-figma.png" />
</Frame>

手順、要件、ガイドラインについては、[Figma からのインポート](/Getting-Started/import-from-figma)を参照してください。

<Tip>
  最初のプロンプトだけでなく、後からアプリエディター内で Figma のページを追加することもできます。
</Tip>

***

## ファイルを添付する

最初のプロンプトにファイルを添付すると、Base44 は白紙のページから始める代わりに、あなた自身のコンテンツ、データ、参考資料から構築できます。画像、PDF、ドキュメント、スプレッドシートなど、さまざまなファイルタイプを添付できます。

Base44 は、添付したものをビルドのコンテキストとして使用します:

* 画像と PDF は視覚的な参考資料になり、Base44 はデザイン、スクリーンショット、ドキュメントに合わせられます。
* スプレッドシートと CSV ファイルは、列とサンプルデータが読み取られ、Base44 はデータを中心に構築できます。
* Word ドキュメント、テキスト、Markdown ファイルは、コンテンツと構造の参考として読み取られます。

プロンプトボックスの **+** メニューをクリックし、**Attach files** を選択して、コンピューターまたは Google Drive からアップロードします。Google Drive を初めて使用するときは、Google アカウントの接続を求められます。

<Frame caption="最初のプロンプトにファイルを添付する">
  <img src="https://mintcdn.com/base44/PemJQ6X3xNifkNqI/images/attach-files-first-prompt.png?fit=max&auto=format&n=PemJQ6X3xNifkNqI&q=85&s=0dee26ff9567bb7c81b2d8b63a743bdf" alt="Attaching files to your first prompt" width="932" height="551" data-path="images/attach-files-first-prompt.png" />
</Frame>

***

## ツールを接続する

Google Workspace、Slack、GitHub など、すでに使用しているツールにアプリや web サイトを接続できます。これにより、Base44 は最初のプロンプトからあなたのデータとサービスを考慮して構築します。例えば、Google Calendar を接続してアプリで予定の読み取りと作成をしたり、Slack を接続してチームに更新を投稿したりできます。

プロンプトボックスの **+** メニューをクリックし、**Connectors** を選択して、目的のツールを選び、プロンプトを送信します。詳しくは、[共有コネクタのセットアップ](/Integrations/setting-up-shared-connectors)を参照してください。

<Frame caption="最初のプロンプトにコネクタを追加する">
  <img src="https://mintcdn.com/base44/k3sNAfveGo73dLRa/images/connectors-first-prompt.png?fit=max&auto=format&n=k3sNAfveGo73dLRa&q=85&s=9ebf5a442ba30eb32f741411772b09a9" alt="Adding connectors to your first prompt" width="905" height="568" data-path="images/connectors-first-prompt.png" />
</Frame>

***

## FAQ

詳しく知るには、以下の質問をクリックしてください。

<AccordionGroup>
  <Accordion title="最初のプロンプトの後、アプリや web サイトを改良できますか?">
    はい。最初のプロンプトは出発点にすぎません。アプリエディターに入ったら、AI チャットや手動編集を使用して、構築を続け、すべてを変更できます。[AI チャットの使い方を学びましょう](/Building-your-app/AI-chat-modes)。
  </Accordion>

  <Accordion title="アプリや web サイトを構築する AI モデルを選択できますか?">
    はい、[Builder プラン](/Account-and-billing/Billing-and-plans)以上で可能です。プロンプトボックスの **Tools** アイコンをクリックして、ビルドを動かす AI モデルを選択します。[AI チャットとそのコントロールについて詳しく学びましょう](/Building-your-app/AI-chat-modes)。
  </Accordion>
</AccordionGroup>

<Note>このページは AI によって翻訳されました。最も正確で最新の情報については、[英語版](/) を参照してください。</Note>
