> ## 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.

# アプリの構築

> 最初の Base44 アプリの構築方法、エディタの使用方法、クレジットの管理方法を学びます。

## Base44 の使い方

Base44 は AI 搭載の Web サイトおよび [アプリビルダー](https://base44.com/ai-app-builder) です。コーディングや技術スキルは必要ありません。構築したいものを説明するだけで、Base44 がアイデアを実現します。

<Frame caption="Base44 でアプリの構築を始める">
  <img src="https://mintcdn.com/base44/bT9cpHsm4SL4QcYz/images/2025-11-09_15-21-32.png?fit=max&auto=format&n=bT9cpHsm4SL4QcYz&q=85&s=fdabd0a739cb2cf4743367a18c43e44b" alt="Getting started with a prompt in Base44" width="2184" height="1356" data-path="images/2025-11-09_15-21-32.png" />
</Frame>

自分のためにシンプルなものを構築したり、ビジネスのための完全な製品を作成したりできます。Base44 は、デザイン、データベース、サインアップ、ユーザー権限、ホスティングなど、舞台裏のすべてを処理します。

<Card title="Base44 で構築できるものの例">
  * 新しいビジネスアイデアのプロトタイプ作成
  * 個人的な To-Do リストの作成
  * リマインダー付きのイベントサインアップページの設定
  * アンケートを構築して、回答をすぐに見る
  * ダッシュボードでプロジェクトや売上を追跡
  * 安全な予約システムまたは CRM の構築
  * クライアントとファイルをプライベートに共有
  * チャットと分析を備えたコミュニティサイトをローンチ
</Card>

<Card title="アイデアを実現する準備はできましたか?" color="#FF5500" icon="arrow-right-long" href="https://base44.com/">
  今すぐアプリを構築する
</Card>

***

## ステップ 1 | アイデアを説明する

[Base44](https://app.base44.com/) に行って、自分の言葉で構築したいものを伝えるところから始めます。

開始すると、サインアップを求められます。これにより、作業が保存され、いつでもアプリに戻ることができます。

<Tip>
  [Builder プラン](/Account-and-billing/Billing-and-plans) 以上では、**Tools** アイコン <Icon icon="sliders-simple" /> をクリックして、リクエストを動かす AI モデルを選択できます。
</Tip>

### プロンプトを使用する

構築したいアプリを自分の言葉で書くだけです。例えば、「シンプルな To-Do リスト」、「ユーザーがログインできるクライアントポータル」、または考えていることなどを入力できます。好きなだけ詳細を共有してください。この最初のプロンプトはアプリの開始に役立ち、後で機能を追加したり変更したりできます。

Google Workspace ツール、Slack、GitHub などの人気ツールにアプリを接続することから始めることもできます。**+** メニューをクリックして **Connectors** を選択し、プロンプトを送信します。詳細については、[共有コネクタの設定](/Integrations/setting-up-shared-connectors) を参照してください。

<Frame caption="Base44 でアプリの構築を開始するためにプロンプトを入力する">
  <img src="https://mintcdn.com/base44/Uz8xdKDF2UWD4NXf/images/first-prompt-connectors.png?fit=max&auto=format&n=Uz8xdKDF2UWD4NXf&q=85&s=a971f42fef12b4349742fb2024e3b318" alt="First Prompt Connectors" width="919" height="597" data-path="images/first-prompt-connectors.png" />
</Frame>

<Tip>
  最初のプロンプトを書いて AI チャットを最大限に活用するために、[プロンプトガイド](/Getting-Started/Prompt-guide) を使用してください。
</Tip>

### plan モードを使用する

構築を開始する前にアプリを計画するためのヘルプが必要な場合は、plan モードを使用します。最初のプロンプトの下で **Plan** をオンにして、構築したいものについての集中した会話を始めます。AI は、アプリが誰のためで、何をすべきか、何を含めたいかなど、アプリについての質問をします。答えるにつれて、アイデアを進めながら調整できる構造化された計画に変えていきます。

<Frame caption="最初のプロンプトから plan モードを使用する">
  <img src="https://mintcdn.com/base44/1fxVSlU_nGLBlh0f/images/planbeautysalon.png?fit=max&auto=format&n=1fxVSlU_nGLBlh0f&q=85&s=9670b2d8cf125809151a919e46169da5" alt="Using plan mode from the first prompt" width="802" height="359" data-path="images/planbeautysalon.png" />
</Frame>

**plan モードは以下に役立ちます:**

* 意図に合わせてアプリを整列させることで、より高品質の最初の構築を得る
* 重要な詳細を前面に追加することで、後でのやり取りを減らす
* 何を指定すべきかを事前に知る必要なしにアイデアを考える
* フロー、ロール、制約を含むより完全な要件をキャプチャする
* 集中したフローに留まりながら、アイデアから実行までより速く移動する

計画が表示されたら、問題、オーディエンス、コアフロー、デザイン設定などのセクションを確認します。何かが欠けているか変更が必要な場合は、同じ会話で入力を続けて、詳細を追加したり、そこにあるものを更新したりします。plan モードは計画に留めるので、さまざまなオプションを探索し、適切に感じるまで計画を洗練できます。

<Frame caption="計画を形作るために plan モードで質問に答える">
  <img src="https://mintcdn.com/base44/_wUx4EShRD_NIeoR/images/beautysalonplan.png?fit=max&auto=format&n=_wUx4EShRD_NIeoR&q=85&s=0e44fe0131150e533956b95bc6e988f3" alt="Answering questions in plan mode to shape your plan" width="1132" height="882" data-path="images/beautysalonplan.png" />
</Frame>

計画をアプリに変える準備ができたら、**Start building** をクリックします。最終計画はアプリエディタの AI チャットに送信されるので、後でいつでもスクロールバックできます。アプリエディタが開き、Base44 が計画からアプリの構築を開始します。構築が完了すると、ライブプレビューが表示され、追加のプロンプトや手動編集でレイアウト、コピー、データ、フローを洗練できます。

<Warning>
  **重要:**

  * plan モードはクレジットを使用しません。**Start Building** をクリックすると、アプリ作成プロセス中にクレジットが消費されます。構築に使用されるクレジットの量は、アプリの複雑さによって異なります。
  * アプリエディタ内でプロンプトと手動変更を使用して、構築後もアプリの編集を続けることができます。
  * plan モードを再度使用するには、**Plan** をオンにしてホーム画面から新しいアプリを開始します。
</Warning>

**plan モードを使用して新しいアプリを開始するには:**

1. [Base44](https://app.base44.com/) に移動します。
2. 最初のプロンプトを入力し、プロンプトボックスで **Plan** トグルをオンにします。
3. 質問に答え、必要に応じて詳細を追加します。
4. 準備ができたら、計画で **Start Building** をクリックします。

### 既存の URL から始める

所有している既存の Web サイトから新しい Base44 アプリを開始するには **Start from URL** を使用します。これは、見える公開ページのピクセルレベルの開始点を提供し、フロントエンドに焦点を当てます。これには、全体的なページ構造、キーコンテンツセクション、視覚階層、ヒーローセクション、カード、リストなどの馴染みのある UI パターンが含まれます。これにより、認識可能なものをすぐにアプリエディタに入れて、すべてを最初から再構築するのではなく、AI で繰り返すことができます。

Base44 がサイトをどう使うかを選択できます:

* **Content & Design:** サイトのコンテンツとレイアウトを再作成して、同様のサイトを構築します。
* **Design only:** サイトの視覚スタイルを使用して、同じ見た目と感じを持つ新しいサイトを作成します。

<Frame caption="既存の URL からアプリを開始する">
  <img alt="Starting your app from an existing URL" src="https://mintcdn.com/base44/jp4-lCa7eN9jI_K-/images/StartfromURL.jpg?fit=max&auto=format&n=jp4-lCa7eN9jI_K-&q=85&s=4c5af3b87a2d0c2206cd111b78d1b9bf" className="dark:hidden" width="1754" height="1020" data-path="images/StartfromURL.jpg" />

  <img alt="Starting your app from an existing URL" src="https://mintcdn.com/base44/_wUx4EShRD_NIeoR/images/capture.png?fit=max&auto=format&n=_wUx4EShRD_NIeoR&q=85&s=cf8cd76f140f5862e8e78e4b8b296b7a" className="hidden dark:block" width="843" height="497" data-path="images/capture.png" />
</Frame>

Create from URL は以下に役立ちます:

* 一から再設計せずに、所有している既存のサイトを再作成する
* ブランド、レイアウト、視覚階層を維持する
* 推測ではなく、堅固なページ構造で移行を開始する
* 実際のように見えて感じる高忠実度のプロトタイプを作成する

例えば、個人的な Web サイトを再作成したり、小規模ビジネスのサイトを Orders や Customers などのエンティティを持つスマートなアプリにアップグレードしたり、ランディングページを認証とダッシュボードを持つ製品に変えたり、公開コンセプトページを内部ツールに変換したりできます。

ビルドが完了したら、プロンプトでアプリを洗練できます: 構造を調整し、エンティティと API に接続し、フローとロジックを追加します。

<Warning>
  **重要:**

  * この機能は **Starter** プラン以上で利用可能です。
  * Create from URL を使用すると、アプリ生成中にクレジットが消費されます。
  * 作成元の Web サイトの正当な所有者であるか、そのコンテンツ、デザイン、画像に対する完全な権利を持っている必要があります。サードパーティや著作権で保護されたサイトを許可なく使用しないでください。
  * Create from URL は、プライベートなバックエンドコード、隠れたデータ、サードパーティ統合をコピーしないので、それらの部分は Base44 アプリ内で手動で設定する必要があります。
</Warning>

**既存の URL から新しいアプリを開始するには:**

1. [Base44](https://app.base44.com/) に移動します。
2. プロンプトボックスの **+** アイコンをクリックします。
3. **Start from URL** をクリックします。
4. 使用したい Web サイトの URL を貼り付けます。提供する 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="Copying the content and design, or just the design from a URL" title="Copycontentanddesign" className="mx-auto" style={{ width:"81%" }} width="1194" height="736" data-path="images/copycontentanddesign.jpg" />
   </Frame>
6. **Add** をクリックします。

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

既存の Figma デザインを動作する Base44 アプリに変えるには **Import from Figma** を使用します。Figma でデザインした特定のフレームやセクションから始めて、Base44 にレイアウト、構造、視覚スタイルを再作成させ、ページを一から再構築する代わりに馴染みのある開始点から続行できます。

<Frame caption="最初のプロンプトで Figma からデザインをインポートする">
  <img src="https://mintcdn.com/base44/sBrPFYKQ1EtwYWgo/images/import-from-figma.jpg?fit=max&auto=format&n=sBrPFYKQ1EtwYWgo&q=85&s=f92addd599080c8343444cdca3793f80" alt="Import From Figma" width="904" height="497" data-path="images/import-from-figma.jpg" />
</Frame>

<Warning>
  **重要:**

  * Import from Figma には Figma Editor シートが必要です。Figma は View および Collaborator シートのアカウントの API アクセスをブロックします。
  * ワークスペースごとに 1 つの Figma アカウントを接続できます。
</Warning>

**Figma デザインから新しいアプリを開始するには:**

1. [Base44](https://app.base44.com/) に移動します。
2. プロンプトボックスの **+** アイコンをクリックします。
3. **Import from Figma** をクリックします。
4. **Connect to Figma** をクリックします。
5. Base44 に Figma へのアクセスを与えるための画面の指示に従います。
6. Figma リンクを貼り付けて **Import** をクリックします。

<AccordionGroup>
  <Accordion title="Figma ファイルの要件">
    Figma ファイルを正しく準備することで、Base44 がデザインを読み取り、動作するレイアウトとして再作成しやすくなります。

    * **Figma Design** ファイルで作業していることを確認してください。FigJam、Slides、その他のファイルタイプはサポートされていません。
          <Frame caption="Base44 でサポートされている Figma デザインファイル">
            <img src="https://mintcdn.com/base44/392ibkP8vd5KkQv-/images/Figmadeisgnfiles.jpg?fit=max&auto=format&n=392ibkP8vd5KkQv-&q=85&s=5ae3cf918ed7cc0218c13cf2e67062bb" alt="Figmadeisgnfiles" width="1630" height="338" data-path="images/Figmadeisgnfiles.jpg" />
          </Frame>
    * インポートしたい **単一のフレームまたはセクション** を選択します。完全なドキュメントやページレベルのリンクを使用しないでください。
    * Figma で、**Share** をクリックして、**Who has access** の下で、リンクを **Anyone with the link – Can view** に設定します。選択したフレームまたはセクションのリンクをコピーして、Base44 の **Import from Figma** に貼り付けます。インポートが完了したら、必要に応じて Figma ファイルの権限をプライベートに戻すことができます。

    <Note>
      Import from Figma は選択したフレームまたはセクションに焦点を当てます。Figma ファイルの他の部分は、別途インポートしない限り Base44 には取り込まれません。
    </Note>
  </Accordion>

  <Accordion title="デザインの構造化">
    Figma での明確な構造により、Base44 が意図に一致するレスポンシブレイアウトを構築しやすくなります。

    <Tip>
      明確なセクションと一貫したコンポーネントを持つよく構造化されたホームページは、デザインを完全なアプリに拡張する際に最良の結果をもたらします。
    </Tip>

    * **ページを論理的なセクションに分割する:** 関連するコンテンツ (例えば、ヒーロー、機能の行、フッター) をフレームまたはグループ内にラップして、ページの各エリアが明確に定義されるようにします。
    * **階層に Auto Layout を使用する:** カード、ナビゲーションバー、繰り返しのコンテンツブロックなどのコンポーネントに `Auto Layout` を適用します。例えば、画像、タイトル、説明を持つ情報カードは、`Frame` または `Group`、できれば `Auto Layout` としてグループ化する必要があります。これにより、Base44 が要素同士の関係とそのリサイズ方法を理解しやすくなります。
          <Frame>
            <img src="https://mintlify.s3.us-west-1.amazonaws.com/base44/images/selectingtwoelementsforautolayout-1.jpg" alt="Selectingtwoelementsforautolayout 1" />
          </Frame>
    * **ネストを意味のあるものに保つ:** 一緒に属する要素 (例えば、カード内の画像 + タイトル + 説明) をグループ化し、視覚構造を反映しない深い不要なネストを避けます。
          <Frame>
            <img src="https://mintlify.s3.us-west-1.amazonaws.com/base44/images/Autolayout-1.jpg" alt="Autolayout 1" />
          </Frame>
    * **一貫してアラインメントと間隔を取る:** フレーム内で一貫したパディング、ギャップ、アラインメントを使用して、Base44 が間隔と階層を保持できるようにします。
  </Accordion>

  <Accordion title="ベクターと形の操作">
    インポート前にベクター要素をクリーンアップすると、配置とレンダリングがより正確になります。ベクターを平面化して簡素化することで、要素が Base44 で一度入った後の配置、スケール、レンダリング方法のサプライズが減ります。

    * **複雑なベクターを平面化:** ベクターが多くの別々のパス (例えば、複数の形から作られたアイコン) から構築されている場合は、可能な限り単一のベクターに平面化します。
          <Frame>
            <img src="https://mintlify.s3.us-west-1.amazonaws.com/base44/images/Flattencomplexvectorsintoasinglevector-1.jpg" alt="Flattencomplexvectorsintoasinglevector 1" />
          </Frame>
    * **平面化する前にストロークをアウトライン化:** 線、円、星、および同様の形に対して: **Outline Stroke** を使用してから、結果を単一のベクター要素に平面化します。
    * **隠れた要素を削除:** インポートされたレイアウトを妨げないように、完全に隠れている、またはキャンバスから遠くに押し出されたレイヤーを削除します。
          <Frame>
            <img src="https://mintlify.s3.us-west-1.amazonaws.com/base44/images/hiddenelements-1.jpg" alt="Hiddenelements 1" />
          </Frame>
    * **塗りを簡素化:** 要素に複数の塗りがある場合、実際に必要なものだけを保ちます。Base44 は要素の最後の塗りのみをインポートします。
          <Frame>
            <img src="https://mintlify.s3.us-west-1.amazonaws.com/base44/images/multiplfills-1.jpg" alt="Multiplfills 1" />
          </Frame>
  </Accordion>

  <Accordion title="注意事項と制限">
    Import from Figma は、フレームの視覚デザインとレイアウトを可能な限り正確に再作成することに焦点を当てますが、現時点ではいくつかの制限があります。

    * **フォント:** Google Fonts のみが完全にサポートされています。カスタムフォントはインポート中にデフォルトフォントに置き換えられます。Base44 内でタイポグラフィを後で調整できます。
    * **デザイン効果:** 一部の Figma 効果はまだサポートされていません。例えば: 画像フィルター、単一要素の複数の背景レイヤー、変数。
    * **インポート後の微調整:** アプリエディタの AI チャットまたは Edit モードを使用して、インポート後に間隔、レスポンシブ、インタラクションをいつでも洗練できます。
  </Accordion>

  <Accordion title="アプリの残りの部分の構築">
    Figma フレームがインポートされたら、新しいページを完全なアプリまたは Web サイトの基礎として扱うことができます。インポートされたページを **ホームページ** と、構造、レイアウト、視覚言語のメインリファレンスとして使用します。AI チャットに以下を依頼します:

    * どの追加ページが欠けているかを特定する (例えば、About、Pricing、Blog、Contact)。
    * 同じデザイン言語とレイアウト原則に従う新しいページを作成する。
    * ホームページのボタン、メニュー、リンクを新しい内部ページに接続する。

    **次のようなプロンプトを使用できます:**

    > `ホームページのコンテンツとデザインスタイルの両方を含めて、慎重にレビューしてください。ホームページを Web サイトの構造とデザイン言語を理解するためのメインリファレンスとして使用してください。完全な Web サイトを作成するために、どの追加ページが必要かを特定してください。同じデザイン言語、レイアウト原則、視覚スタイルを維持しながら、欠けているページを作成し、それらが直接の続きとして感じられ、切り離されていないようにしてください。完了したら、ホームページに戻って、すべての関連するボタンとリンクが適切な内部ページに移動するように接続してください。`

    <Tip>
      インポートされたデザインで繰り返しのパターン (カード、機能の行、コールトゥアクションブロックなど) を見つけた場合は、プロンプトでそれらを言及して、AI が新しいページでそれらのパターンを再利用できるようにしてください。
    </Tip>
  </Accordion>
</AccordionGroup>

***

## ステップ 2 | アプリが生き生きとするのを見る

アイデアを共有すると、Base44 の AI が残りを処理します。色を選び、ボタンを配置し、メニューを整理して、すべてがクリーンに見え、スムーズに機能するようにアプリの外観を自動的に設計します。カレンダー、フォーム、またはタスクリストなどの特別なページや機能が必要な場合、Base44 はそれらをすぐに追加するので、アプリは使用準備完了です。

すべての複雑な部分も、バックグラウンドで処理されます。Base44 は、アプリのすべてのデータを安全に保存し、必要に応じてアカウントとログインシステムを管理し、アプリを動かすテクノロジーをスムーズに動かし続けます。何もセットアップしたり管理したりする必要はありません。Base44 がすべての詳細を処理するので、アイデアに集中できます。

<Frame caption="ウェディングプランナー用の CRM アプリを構築する Base44">
  <img src="https://mintcdn.com/base44/8tvlbqCF8z7QWtN5/images/2025-11-09_16-02-34.png?fit=max&auto=format&n=8tvlbqCF8z7QWtN5&q=85&s=c32fd84b9ad15c2f32d097abbb39ddd2" alt="An app being built on Base44" width="3454" height="1918" data-path="images/2025-11-09_16-02-34.png" />
</Frame>

Base44 が動作する中、プレビューウィンドウでアプリが現れるのを見てください。プレビューをクリックすることで、すぐにアプリを探索し、任意の機能を試すことができます。

***

## ステップ 3 | アプリをカスタマイズする

アプリが構築されたら、それを本当に自分のものにできます。最も簡単な方法は AI チャットを使用することです。変更または追加したい内容を入力するだけで、Base44 がアプリを更新します。例えば、「メインカラーを緑に変えて」、「氏名と会社を収集するサインアップページを追加して」などと言えます。

<Tip>
  最初にブレインストーミングや質問をしたい場合は、AI チャットで Discuss モードを使用してください。Discuss モードでは、準備ができるまで変更を加えずにアイデアについて話すことができます。このモードは使用するクレジットも少なくなります。[さまざまな AI チャットモードについて詳しく学ぶ](/Building-your-app/AI-chat-modes)
</Tip>

ニーズに合わせてアプリを変更および改善する方法はたくさんあります。次のことができます:

<AccordionGroup>
  <Accordion title="アプリの機能を変更する">
    AI チャットで、新機能を追加したり、アプリの動作を変更したりできます:

    * ユーザーが対話するためのボタンやフォームを追加する
    * 誰かがサインアップしたときにウェルカムメールを送信するなどの自動化されたワークフローを作成する
    * 通知、リマインダー、または自動化されたメッセージを設定する
    * AI にページを追加または更新するように依頼する (例えば、「イベント用のカレンダーページを追加して」)
    * アプリがユーザーにどう応答するか、または異なるタスクを管理するかの背後にあるロジックを調整する
  </Accordion>

  <Accordion title="アプリをデザインする">
    AI とチャットするだけで、アプリの色、レイアウト、スタイルをカスタマイズできます。次のことができます:

    * 背景色、テキストの色、またはフォントスタイルを変更する
    * セクションを並べ替え、ボタンを移動、または画像とアイコンを更新する
    * 変更をグローバルに、または 1 つのページにのみ適用する (例えば、「すべての画面にこの新しいフォントを適用」、または「ログインページの背景のみを変更」)

    Edit モードを使用して、アプリの特定の要素に手動で変更を加えることもできます。
  </Accordion>

  <Accordion title="収集するデータを管理する">
    アプリが使用および収集する情報を決定します。

    * AI チャットを使用してデータフローを構築または変更する (例えば、「サインアップフォームに会社名のフィールドを追加して」)。
    * サインアップ、フィードバック、注文など、ユーザーから詳細を収集するためのフォームを作成または更新する。
    * アプリのダッシュボードの **Data** から、アプリが収集するデータを整理し、誰が情報を追加、編集、または表示できるかのルールを設定し、データを他の場所で使用するためにエクスポートできます。

    [アプリデータの管理について詳しく学ぶ](/Building-your-app/Managing-your-app-data)
  </Accordion>

  <Accordion title="アプリの設定を更新する">
    アプリにアクセスできる人と、できることを制御します。アプリのダッシュボードの **Settings** から、次のことができます:

    * 特定の人やロールのみが情報を見たり編集したりできるよう権限を設定する (一部のページを管理者のみに表示するなど)
    * アプリを公開、招待制、または特定のユーザーまたはワークスペースのメンバーに制限するかを決定する
    * Google などのソーシャルログインを含む、安全なログインと登録を設定する
    * カスタムユーザーロールを追加し、各ロールが何をできるかを正確に指定する (例えば、「Event Organizer というロールを作成して、イベントの追加と編集はできるがアプリ設定の変更はできないようにして」)
    * 機密データを安全に保つためにプライバシーとセキュリティのルールを調整する

    アプリが成長するにつれて、いつでも設定を確認および更新してニーズに合わせることができます。
  </Accordion>
</AccordionGroup>

***

## ステップ 4 | アプリをテストする

アプリを他の人と共有する前に、すべてがどう機能するかをテストすることが重要です。さまざまな視点からアプリを探索および確認する方法がいくつかあります:

* エンドユーザーのようにプレビューと対話します。クリックしたり、フォームに入力したり、すべての機能を確認したりします。
* トップバーの **More Actions** アイコン <Icon icon="ellipsis" /> をクリックして、**Act as a user** を選択し、特定の人物やロールとしてアプリを表示します。
* AI チャットに「ゲストとしてテストして」、「管理者が何をできるか見せて」など、主要なフローやエッジケースのテストを支援するように依頼します。
* 異なるロールや権限を持つテストユーザープロファイルを作成して、それぞれが何にアクセスできるかを確認します。
* シークレットまたはプライベートブラウザウィンドウを使用して、初めての訪問者が何を体験するかを確認します。
* デスクトップとモバイルの両方でアプリを確認して、レイアウトやナビゲーションの問題をキャッチします。

***

## ステップ 5 | アプリを共有して公開する

アプリを共有する準備ができたら、トップバーの **Publish** をクリックします。

そこから、次のことができます:

* アプリの Web URL をコピーします。
* **Connect a custom domain** または **Get Domain** をクリックして、独自のアドレスを接続します。
* **Share your app** をクリックして、メールやソーシャルで共有できるリンクを取得します。
* **App Visibility** を使用して、アプリにアクセスできる人を選択します。
* **Publish App** をクリックして、最新の変更をライブにプッシュします。

<Frame caption="Base44 アプリの共有と公開">
  <img alt="Sharing and publishing your Base44 app" lightAlt="Sharing and publishing your Base44 app" darkAlt="Sharing and publishing your Base44 app" src="https://mintcdn.com/base44/swwMzftHwM7v2BNX/images/publishapp.jpg?fit=max&auto=format&n=swwMzftHwM7v2BNX&q=85&s=126e908a4c30adc1e191c60f626e0252" className="dark:hidden" width="2330" height="1060" data-path="images/publishapp.jpg" />

  <img alt="Sharing and publishing your Base44 app" lightAlt="Sharing and publishing your Base44 app" darkAlt="Sharing and publishing your Base44 app" src="https://mintcdn.com/base44/swwMzftHwM7v2BNX/images/publishapp-1.jpg?fit=max&auto=format&n=swwMzftHwM7v2BNX&q=85&s=d6c61f3253901bd70e5928d8ef286aaf" className="hidden dark:block" width="2330" height="1060" data-path="images/publishapp-1.jpg" />
</Frame>

***

## アプリエディタのガイド付きツアー

アプリエディタ内には 3 つの主要な作業エリアがあります: AI チャット、プレビュー、アプリのダッシュボードです。トップバーはそれらの上にあり、プレビュー、ダッシュボード、コード、テストツール、公開へのクイックアクセスを提供します。

### AI チャット

ここで Base44 とチャットします。アプリエディタの左側にあるチャットに欲しいものを入力するだけで、Base44 がアイデアを実現します。

<Frame caption="Base44 アプリエディタ内の AI チャット">
  <img src="https://mintcdn.com/base44/JljAP63OiT-mOKWP/images/aichatwindow.png?fit=max&auto=format&n=JljAP63OiT-mOKWP&q=85&s=16d3906780c2d03f43927245e091534a" alt="The AI chat inside the Base44 app editor." width="1918" height="967" data-path="images/aichatwindow.png" />
</Frame>

作業方法とクレジットの使用方法に応じて、Discuss や Visual Edit を含むさまざまな AI チャットモードを使用できます。[AI チャットモードについて詳しく学ぶ](/Building-your-app/AI-chat-modes)

<Tip>
  プロンプトを元に戻す必要がある場合は、チャットでそのメッセージを見つけて、その下の **Revert** アイコンをクリックして、そのステップの直前にアプリを戻します。以前のメッセージの **Edit** アイコンをクリックして、それを再送信することもできます。再送信すると、Base44 はそのメッセージ以降に行われた変更を元に戻し、更新されたリクエストを適用します。
</Tip>

### プレビュー

画面の右側に、リアルタイムで更新されるアプリのプレビューバージョンが表示されます。プレビューを使用して、ユーザーと同じようにアプリと対話できます。アプリのさまざまな部分をクリックして、どう動作するかを確認したり、Visual Edit を使用してデザインの変更を行ったりします。

<Frame caption="Base44 アプリエディタのプレビュー">
  <img src="https://mintcdn.com/base44/WS_vTcfJJU13SAVt/images/preview.png?fit=max&auto=format&n=WS_vTcfJJU13SAVt&q=85&s=8061cbe0e5137bc8a51aded99f11e564" alt="Preview in the Base44 app editor" width="3498" height="2044" data-path="images/preview.png" />
</Frame>

### アプリダッシュボード

アプリを管理したいときはいつでも、アプリのダッシュボードに移動します。ダッシュボードでは、チームメイトを招待したり、アナリティクスとユーザーアクティビティを追跡したり、アクセスを制御したり、アプリを公開または非公開に設定したり、カスタムドメインを追加したりできます。

<Frame caption="Base44 アプリエディタでアプリのダッシュボードにアクセスする">
  <img alt="Accessing your app's dashboard in the Base44 app editor" src="https://mintcdn.com/base44/I5w2STnnP7mazOIA/images/appdashboardsearch.png?fit=max&auto=format&n=I5w2STnnP7mazOIA&q=85&s=9ad95e96995818d674a04dca5d7bedce" className="dark:hidden" width="1920" height="1046" data-path="images/appdashboardsearch.png" />

  <img alt="Accessing your app's dashboard in the Base44 app editor" src="https://mintcdn.com/base44/bT9cpHsm4SL4QcYz/images/2025-11-09_15-45-40.png?fit=max&auto=format&n=bT9cpHsm4SL4QcYz&q=85&s=8db7214b725d66939808736168660dd3" className="hidden dark:block" width="3452" height="2024" data-path="images/2025-11-09_15-45-40.png" />
</Frame>

<Tip>
  アプリのダッシュボードのサイドバー検索を使用して、ページ、セクション、エンティティ、コネクタをすばやく見つけます。結果は入力するにつれて更新され、エンティティとコネクタ名を含む動的キーワードをサポートします。
</Tip>

***

## クレジットとプランの開始

Base44 は、AI がアプリを構築または更新するたびにクレジットを使用します。アプリをプレビューして対話してもクレジットは使用されません。サインアップすると、開始するための無料クレジットを受け取ります。

もっとやる準備ができたら、プランをアップグレードすると、バックエンド関数、カスタムドメイン、GitHub 統合、より高いクレジット制限などの機能がアンロックされます。

[クレジット](/Account-and-billing/Credits) と [プラン](/Account-and-billing/Billing-and-plans) について詳しく学びましょう。

***

## FAQ

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

<AccordionGroup>
  <Accordion title="モバイルでアプリは良く見えますか?">
    はい。Base44 はモバイルデバイス用にアプリを自動的に適応させます。トップバーのデバイスメニューを使用してモバイルビューに切り替え、すべてがどう表示されるかを確認し、レイアウト、ボタン、テキストが任意の画面サイズで簡単に使えることを確認してください。

    <Frame>
      <img src="https://mintcdn.com/base44/swwMzftHwM7v2BNX/images/mobile.jpg?fit=max&auto=format&n=swwMzftHwM7v2BNX&q=85&s=8f7f5bb733fbf394486d98ef9c45602d" alt="Mobile" width="2318" height="432" data-path="images/mobile.jpg" />
    </Frame>

    モバイルレイアウトに変更を加えたい場合は、AI チャットに依頼するだけで実行できます。
  </Accordion>

  <Accordion title="アクティビティモニターは何を表示しますか?">
    アクティビティモニターは、アプリによって行われた最新のアクションとリクエストを表示します。これを使用して、ユーザーアクティビティを表示し、パフォーマンスを追跡し、リアルタイムで問題のトラブルシューティングを行うことができます。

    アクティビティモニターにアクセスするには、上部の **Code** をクリックしてから、**Activity Monitor** アイコンをクリックします:

    <Frame>
      <img src="https://mintcdn.com/base44/Nad-JPEs6QJ8MFeB/images/2026-03-18_14-46-33.jpg?fit=max&auto=format&n=Nad-JPEs6QJ8MFeB&q=85&s=f093354624b67b5e46dee9adaaec3ac9" alt="activity monitor" width="2316" height="362" data-path="images/2026-03-18_14-46-33.jpg" />
    </Frame>
  </Accordion>

  <Accordion title="アプリのファイルとコンポーネントを表示するには?">
    アプリを動かすファイルとコンポーネントを、トップバーとコードビューから確認できます。

    * トップバーの **More Actions** アイコン <Icon icon="ellipsis" /> をクリックして、**Files used in this page** を選択して、現在編集しているページで使用されているファイルを表示します。完全なファイルリストを開くには **See all files** を使用します。
    * トップバーの **Code** をクリックして、アプリの完全なファイル構造を開き、コンポーネントを参照します。
    * すべてを ZIP ファイルとしてダウンロードするには、**Code** を開いて、コードビューの右上にある **Export project as ZIP** アイコンをクリックします。
    * 高度なバージョン管理のためにプロジェクトを GitHub に接続するには、トップバーの **GitHub** アイコンをクリックして、セットアップ手順に従います。
  </Accordion>

  <Accordion title="アプリのコピーを作成できますか?">
    はい。いつでもアプリをクローンできます。これは、ライブアプリに影響を与えずに大きな変更をテストしたい場合や、既存のアプリを新しいプロジェクトの開始点として使用したい場合に便利です。

    **Apps ページからクローンするには:**

    1. [**Apps ページ**](https://app.base44.com/apps) に移動します。
    2. アプリカードの **More actions** <Icon icon="ellipsis" /> アイコンをクリックします。
    3. **Clone App** をクリックします。

    <Frame>
      <img src="https://mintcdn.com/base44/2A0rv1ybRmXzLr2-/images/cloneapp-1.png?fit=max&auto=format&n=2A0rv1ybRmXzLr2-&q=85&s=456d576905f323421620d2e2c6cd38ab" alt="Cloneapp 1" width="717" height="385" data-path="images/cloneapp-1.png" />
    </Frame>

    **アプリダッシュボードからクローンするには:**

    1. アプリエディタで **Dashboard** をクリックします。
    2. **Settings** をクリックします。
    3. **App Settings** をクリックします。
    4. **Clone App** の横にある **Create Copy** をクリックします。

    <Tip>
      クローンされたアプリは自動的に開き、サフィックス (Copy) が含まれます。
    </Tip>
  </Accordion>

  <Accordion title="Base44 アプリケーションはどのようにデプロイされますか?">
    自動的に処理されます。Base44 には組み込みのホスティングが付属しているので、デプロイプロセスはありません。アプリが作成されると、すぐにライブで共有可能になります。
  </Accordion>

  <Accordion title="アプリをエクスポートできますか?">
    はい。いつでもアプリのコードをエクスポートできます。

    * **ZIP ファイルとしてエクスポート:** トップバーの **Code** をクリックして、コードビューの右上にある **Export project as ZIP** アイコン <Icon icon="download" /> をクリックします。
    * **GitHub にエクスポート:** トップバーの **GitHub** アイコンをクリックして、セットアップフローに従います。

    GitHub にエクスポートするには、[Builder プラン](https://base44.com/pricing) 以上が必要です。
  </Accordion>

  <Accordion title="Base44 アプリのレビューのためにヘルプやコンサルティングを受けられますか?">
    作業中のセルフサーブガイダンスのためには、ワークスペースのアバターをクリックして、**Help Center** を選択してドキュメントを開くか、[https://docs.base44.com/](https://docs.base44.com/) にアクセスしてください。

    より実践的なヘルプが必要な場合は、Base44 アプリの専門家のヘルプを得るためのいくつかのオプションがあります。

    [Base44 パートナー](/Getting-Started/Hiring-a-partner) と協力して、大規模または継続的なプロジェクトでのカスタマイズされた 1 対 1 のサポートを受けることができます。パートナーは、完全なアプリの計画と構築、複雑な統合の処理、長期的な戦略的ガイダンスを提供できます。[パートナーを選ぶ](https://app.base44.com/partners) →

    Base44 で構築している他の人々からのフィードバックが欲しい場合は、[Discord コミュニティに参加](https://discord.com/invite/ThpYPZpVts) することもできます。自分のプロジェクトからアドバイス、ヘルプ、ヒントを共有できる他の人々と接続するための優れたスペースです。
  </Accordion>

  <Accordion title="アプリを非公開にできますか?">
    はい。いつでもアプリを非公開にできます。アプリが非公開になると、再度公開するまで人々はアクセスできなくなります。非公開にしてもすべてのデータと設定は保存されます。

    **アプリを非公開にするには:**

    1. アプリダッシュボードに移動します。
    2. **Settings** をクリックして **App Settings** をクリックします。
    3. **Danger Zone** までスクロールして、**Unpublish App** をクリックしてから、ダイアログで **Unpublish** をクリックします。
           <Frame>
             <img src="https://mintcdn.com/base44/_9S5Hk9Gs-FXfW-d/images/unpublish.jpg?fit=max&auto=format&n=_9S5Hk9Gs-FXfW-d&q=85&s=06e92ff1eeb4f3305750e9602757548b" alt="Unpublish" width="2314" height="734" data-path="images/unpublish.jpg" />
           </Frame>
  </Accordion>

  <Accordion title="Base44 はどのブラウザをサポートしていますか?">
    Base44 は、ES6+ JavaScript、CSS Grid、Flexbox、現代の DOM API をサポートするすべての主要な現代のブラウザでスムーズに動作するように構築されています。次のブラウザの現在および最近のバージョンで Base44 を使用できます:

    * **Google Chrome** (ES6 用バージョン 51 以上、CSS Grid 57+、Flexbox 29+)
    * **Mozilla Firefox** (ES6 用バージョン 54 以上、CSS Grid 52+、Flexbox 28+)
    * **Microsoft Edge (Chromium ベース)** (リリース以降フルサポート)
    * **Safari** (CSS Grid 10.1+、Flexbox 9+、ES6 10+)
    * **Opera** (ES6 用バージョン 38+、CSS Grid 44+、Flexbox 12.1+)

    Internet Explorer 11 以前、および一部の古い Android WebView やレガシーブラウザでは、サポートが制限されているか、コンテンツが正しく表示されない場合があります。

    一般的なガイドラインとして、自動更新する現代のブラウザを使用している場合は対応しています。Internet Explorer 11 は時代遅れで、Base44 には推奨されません。
  </Accordion>

  <Accordion title="Base44 アプリの使用に対して人々に課金できますか?">
    はい、Builder プラン以上にいる場合、アプリの使用に対して人々に課金できます。Stripe や API をサポートする他のサービスなどの支払いプロバイダーに接続して、アプリのユーザーから支払いを受け付けることができます。Secrets タブを使用して、API キーを安全に保存します。

    アプリの [支払いの設定](https://docs.base44.com/Setting-up-your-app/setting-up-wix-payments) 方法を確認してください。
  </Accordion>

  <Accordion title="Base44 プラットフォームバッジとは?">
    プラットフォームバッジは、'Edit with Base44' というテキストでライブアプリの右下に表示されるラベルです。Base44 でアプリを構築したことを人々に知らせ、誰でもアプリのコピーを自分のアカウントに作成して、独自のバージョンを編集できるようにします。

    <Note>
      **注意:**

      * プラットフォームバッジの削除は無料プランでは利用できません。バッジを非表示にするには、有料プランにアップグレードする必要があります。
      * アプリがプライベートに設定されている場合、バッジは表示されません。
      * アプリが公開に設定されている場合、誰もがバッジを見ることができます。誰かがそれをクリックすると、自分のアカウントにアプリのコピーを作成して、独自のバージョンのアプリを編集できます。
    </Note>

    <img src="https://mintcdn.com/base44/LM7WA0PKi5RjTjZj/images/Base44badge.png?fit=max&auto=format&n=LM7WA0PKi5RjTjZj&q=85&s=41300475e7b6c136c012d038bf68f436" alt="Base44badge Pn" width="2380" height="1446" data-path="images/Base44badge.png" />

    **バッジを表示または非表示にするには:**

    1. アプリのダッシュボードに移動して **Settings** をクリックします。
    2. **App Settings** をクリックします。
    3. **Platform Badge** トグルを有効または無効にします。
  </Accordion>

  <Accordion title="Base44 アカウントに国や地域の制限はありますか?">
    米国に拠点を置く企業として、米国財務省海外資産管理局 (OFAC) によって発行された要件に準拠しています。これらの規制により、OFAC 制裁リストに表示される特定の個人、団体、または管轄区域にサービスを提供することは禁止されています。次の国と地域は制限されています:

    * イラン
    * 北朝鮮
    * シリア
    * キューバ
    * クリミア地域
    * いわゆるドネツク人民共和国
    * いわゆるルガンスク人民共和国

    ロシア連邦からの活動にも実質的な制限があります。

    制限された国または地域にいる場合:

    * Base44 サービス (Base44 サイトを含む) に登録または使用することはできません。
    * 次の拡張子を持つドメインを Base44 に接続することはできません (ポインティングまたはネームサーバーによる):
      * キューバ: .cu
      * イラン: .ir、.xn--mgba3a4f16a (ایران.)
      * 北朝鮮: .kp
      * シリア: .sy、.xn--ogbpf8fl (سورية.)
  </Accordion>

  <Accordion title="キーボードショートカットを使用してアプリエディタをナビゲートできますか?">
    はい。**Cmd+K** (Mac) または **Ctrl+K** (Windows) を押して、コマンドパレットを開きます。そこから、ビュー間のナビゲート、ページの切り替え、ファイルの開放、エンティティへのジャンプ、公開やコラボレーターの招待などのクイックアクションのトリガー、アプリを離れることなく Base44 ドキュメントを検索できます。コマンドパレットは、ワークスペースのホーム画面とアプリエディタの両方から利用できます。

    <Frame>
      <img src="https://mintcdn.com/base44/Ii_lXe0tG_nK5Sie/images/keyboardcommands.jpg?fit=max&auto=format&n=Ii_lXe0tG_nK5Sie&q=85&s=b62a1a978d21d5eb2c0cd5560bcdd181" alt="Keyboardcommands" width="940" height="501" data-path="images/keyboardcommands.jpg" />
    </Frame>
  </Accordion>
</AccordionGroup>

<Tip>
  **もっとヘルプやインスピレーションが必要ですか?**

  アイデアを得るために [Base44 のテンプレート](https://app.base44.com/app-templates) を探索したり、アプリのベースから始めたりしてください。
</Tip>

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