> ## 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 は、すべてのプロンプトがあなただけのために構築された強力でカスタムなソリューションを形作るのに役立つ [アプリビルダー](https://base44.com/ai-app-builder) です。

## 最初のプロンプトを書く

プロンプトを書くことは、いつも欲しかったアプリを構築するための最初のステップです。アプリに何をしてほしいかを入力するだけで、AI が代わりに構築します。開発者である必要も、コードを理解する必要もありません。これはバイブコーディング - 自分の言葉で説明するだけで、アイデアを実際のアプリに変えます。

<Frame caption="Base44 で最初のプロンプトを書く">
  <img src="https://mintcdn.com/base44/fCsD6TFSgV2N3VrG/images/prompt.png?fit=max&auto=format&n=fCsD6TFSgV2N3VrG&q=85&s=1c8d23bbc00c336c3babb1768b21f287" alt="Prompt Pn" width="909" height="434" data-path="images/prompt.png" />
</Frame>

AI は指示を理解し、アイデアを進めながら更新および洗練できる実際の動作するアプリに変えます。

**プロンプトの例:**

> ワークアウトジェネレーターを構築して。フィットネス目標、利用可能な機器、週の中で使える時間に基づいてパーソナライズされたワークアウトプランを作成すべき。

> 写真家向けの CRM を構築して。クライアントのギャラリー、写真撮影予約、価格パッケージの機能を含めて。

<Card title="始める準備ができたら?" color="#FF5500" icon="arrow-right-long" href="https://base44.com/">
  Base44 に行って、アプリを構築する
</Card>

***

## プロンプトの公式

「\[機能] Web サイトを作成。\[レイアウト] 構造を使用。\[ビジュアルスタイル] の美学を適用。」

### ステップ 1 | 機能を定義する

AI に、Web サイトが行っている「ジョブ」を正確に伝えます。ポートフォリオは大胆である必要があり、銀行は安全に見える必要があります。

* **SaaS ランディングページ:** コンバージョン、機能、信頼に焦点を当てます。
* **クリエイティブポートフォリオ:** 個性、ビジュアル、「ワオ」要因に焦点を当てます。
* **E コマースストア:** 製品グリッド、明瞭さ、速度に焦点を当てます。
* **編集またはブログ:** 読みやすさとタイポグラフィに焦点を当てます。

### ステップ 2 | ビジュアルスタイルを選ぶ

欲しい特定の雰囲気を説明します。これは「クリーン」や「モダン」を超えています。

* **テックと信頼:** グラスモーフィズム (すりガラス) またはオーロラグラデーション (柔らかい光)。
* **ラグジュアリーとストーリー:** ダークアカデミア (ムーディーなセリフフォント)、エコミニマリズム (アーストーン)、またはモノクローム (白黒)。
* **クリエイティブで大胆:** ネオブルータリズム (生のアウトライン、衝突する色)、Y2K、またはヴェイパーウェイブ (レトロな美学)。

### ステップ 3 | レイアウトを選択する

AI にコンテンツを画面でどう整理するかを伝えて、推測する必要がないようにします。

* **ベントグリッド:** すべてが異なるボックスやセルに整理されています。これは機能の多いサイトに最適です。
* **スクロリーテリング:** サイトは 1 つの長いキャンバスです。スクロールすると、要素が組み立てられたり、フェードインしたりします。これはストーリーの多いサイトに最適です。
* **スプリットスクリーン:** 画面は半分に切られています。一方は固定 (テキスト)、もう一方は動きます (画像)。これは製品の多いサイトに最適です。

## 避けるべきこと

AI がビジョンを明確に理解するために、これらの一般的なプロンプトのミスを避けてください:

* **あいまいなリクエスト:** コンテキストなしでの「もっと良くして」や「修正して」などのコメントは、AI に推測させます。何を変更する必要があるかを具体的にしてください。
* **一度に多すぎる:** 1 つのメッセージで「支払い、在庫、レビュー、分析のある完全な e コマースサイトを構築して」は混乱を引き起こす可能性があります。コア構造から始めて、機能を段階的に追加してください。
* **AI がすべてを覚えていると仮定する:** 数日前または別のチャットで AI と話した場合は、コンテキストを思い出させてください。
* **AI に心を読んでもらうことを期待する:** 特定のデザインフローやレイアウトを考えている場合は、できるだけ正確に説明してください。

***

## 優れたプロンプトのためのヒント

これら 4 つのシンプルな戦略は、Base44 で最強の結果をもたらすプロンプトを書くのに役立ちます。

<Card title="明確で具体的に" icon="megaphone" iconType="regular" color="#FF5500">
  共有する詳細が多いほど、結果は良くなります。後で追加機能を定義できますが、最も重要なものから始めてください。**機能** を明確に定義する (上記の公式のステップ 1) のに役立てるため、シンプルな Who、What、Why フレームワークを試してください:

  * **WHO:** このアプリは誰のためのものですか? (例: 独立コンサルタント)
  * **WHAT:** 何をするのを助けますか? (例: クライアントプロジェクトと締め切りを管理する)
  * **WHY:** なぜ誰かがそれを使うのですか? (例: 時間を節約し、整理された状態を保つため)

  このような明確なプロンプトで、Base44 はアイデアを動作するアプリに素早く変えることができます。
</Card>

<Card title="誰がアプリを使うかを考える" icon="head-side-gear" iconType="regular" color="#FF5500">
  あなたまたは他の誰かがアプリをどう使うかを想像してください。サインアップ、情報の追加、進捗の追跡など、ユーザーが取る主なステップやジャーニーを説明してください。これは、AI が自然で役立つ体験をデザインするのに役立ちます。

  例えば、AI に「ユーザーがサインアップし、新しいプロジェクトを作成し、マイルストーンを設定し、毎日進捗を追跡する」と伝えることができます。
</Card>

<Card title="プロセスではなく結果に焦点を当てる" icon="microchip-ai" iconType="regular" color="#FF5500">
  技術的なステップを説明したり、舞台裏でどう機能すべきかを説明したりする必要はありません。

  「教師が宿題をアップロードして、学生にフィードバックを送れるようにする」など、欲しい最終結果を共有するだけです。AI がすべての複雑な詳細を処理します。
</Card>

<Card title="アプリを進化させ続ける" icon="arrow-trend-up" iconType="regular" color="#FF5500">
  最初のプロンプトは始まりに過ぎません。いつでも変更、更新、または新機能を依頼できます。

  より大きい、または複雑なアプリには、ステップで構築してみてください。シンプルに始めて、機能やデザインの詳細を一度に 1 つずつ追加します。アプリがビジョンに一致するまで実験してください。フィードバックを与えるたびに、Base44 はアプリを改善し続けます。
</Card>

***

## より良い結果のためのテクニック

アプリを洗練するときには、ビジョンを実行するのに役立つ Base44 との話し方があります。

| **テクニック**                | **使用するタイミング**                      | **例**                                                                 | **プロのヒント**                                                                     |
| :----------------------- | :--------------------------------- | :-------------------------------------------------------------------- | :----------------------------------------------------------------------------- |
| **「もっと…」/「もっと少なく…」**     | トーン、レイアウト、強調を調整                    | - 「ヘッダーをもっと太字を少なく。」<br />- 「CTA をもっと説得力のあるものに。」                       | <u>理由</u>を追加: 「ユーザーのジャーニーの最後のステップなので、CTA をもっと説得力のあるものに。」                       |
| **「…を追加」/「…を削除」**        | 特定の機能や UI ブロックを追加/削除               | - 「各タスクにコメントセクションを追加。」<br />- 「今のところ価格ページを削除。」                        | <u>効率を高めるためにアクションをグループ化</u>: 「コメントセクションを追加して、タスクリストの下に移動。」                     |
| **「\[これ] を \[それ] に変更」**  | テキスト、ビジュアル、レイアウト、コンポーネントロジックを調整    | - 「サイドバーの色を炭にして。」<br />- 「'Submit' ボタンを 'Send Request' と言うように変更して。」   | <u>コンテキストをレイヤー化</u>: 「ボタンのテキストを、アプリの残りで使用される友好的なトーンに合わせて変更。」                   |
| **「…のような感じ」**            | レイアウトや動作をガイドするために馴染みのあるアプリスタイルを借りる | - 「Duolingo と Habitica の組み合わせのような感じ。」<br />- 「Airtable の軽量版のような感じ。」   | <u>どの部分</u>かを明確に: 「Duolingo の遊び心のあるトーンと Habitica のゲーミフィケーションの進捗システムを使用。」       |
| **「…のロジックを追加」***(オプション)* | コードを必要とせずに機能ルールやフローを追加             | - 「完了したアイテムをデフォルトビューから隠すロジックを追加。」<br />- 「3 日間アクションがない場合にリマインダーを送信。」  | <u>ロジックが追加された後の望ましい結果を説明</u>: 「1 週間ログインしていない場合にユーザーがナッジされるようにロジックを追加。」         |
| **「グループ化または整理…」**        | 明瞭さやワークフローのためにコンテンツを構造化            | - 「タスクをカテゴリ別にグループ化」<br />- 「設定を折りたためるセクションに整理」                        | <u>ユーザーのニーズを言及</u>: 「ユーザーが必要なものをすばやく見つけられるように、タスクをカテゴリ別に整理。」                   |
| **「条件付き動作を追加…」**         | スマートな分岐や状態ベースの機能を導入                | - 「支払いが確認された後にダウンロードボタンを表示。」                                          | <u>シンプルに始めて、後で展開</u>: 「最初に条件を追加して、その後ユーザータイプごとのバリエーションを追加します。」                 |
| **「ユーザーに…させる」文**         | エンドユーザーの視点から機能を構築                  | - 「ユーザーにドキュメントをアップロードしてタグ付けさせる。」<br />- 「ユーザーに後で見るためのリソースをブックマークさせる。」 | <u>ユーザーの価値を解き放つように機能をフレーム化</u>: 「ユーザーにドキュメントをアップロードしてタグ付けさせ、後で簡単に見つけられるようにする。」 |

***

## AI とのチャット

アプリを構築することは、1 回のコマンドではなく、会話です。上記のテクニックを使ってビジョンを洗練したら、チャットインターフェースを使用してアプリを段階的に形成できます。

質問したり、新機能を追加したり、詳細を更新したり、いつでも気を変えたりできます。加えられる変更の数に制限はありません。新しいレイアウトを試したり、ページを追加したり、何かを削除したりしたい場合は、新しいリクエストを入力するだけで、AI が数秒でアプリを更新します。

<Frame caption="最初のプロンプトの後に機能を追加するために AI とチャットする">
  <img src="https://mintcdn.com/base44/5uWmFRQLZyu-FDko/images/convo.png?fit=max&auto=format&n=5uWmFRQLZyu-FDko&q=85&s=f71e17ffba3bcf4f5dd9341352c4c20a" alt="Convo Pn" width="1911" height="954" data-path="images/convo.png" />
</Frame>

道中に役立つツールもあります:

* **Discuss モード:** 変更を加える前に AI とアイデアをブレインストーミングしたり、話したりしたいときはいつでも Discuss モードを使用してください。これは、準備ができるまでライブアプリに影響を与えずにオプションを探索したり、フィードバックを得たりするのに最適な方法です。[チャットモードについて詳しく学ぶ](https://docs.base44.com/Building-your-app/AI-chat-modes)
* **元に戻す履歴:** 気が変わったり戻りたい場合は、簡単にアプリの以前のバージョンを復元できます。必要に応じていつでも以前のバージョンを元に戻したり再訪したりできることを知って、自由に実験してください。[変更の元に戻しについて詳しく学ぶ](https://docs.base44.com/Building-your-app/AI-chat-modes#reverting-changes)

***

## FAQ

AI チャットでのプロンプトの使用について詳しく学ぶには、以下の質問をクリックしてください。

<AccordionGroup>
  <Accordion title="欲しい機能を実装できないのはなぜですか?">
    一部の機能はサポートされていない可能性があります。不明な場合は、[<u>Discord</u>](https://discord.gg/ThpYPZpVts) ヘルプチャンネルで質問できます。
  </Accordion>

  <Accordion title="AI が言及していないアプリの部分を変更するのはなぜですか? また、これを制御するには?">
    AI コントロールを使用して、AI の変更を更新したい領域のみに制限できます。これは、アプリの他の部分が意図的に変更されている場合に特に役立ちます。[AI チャットのカスタマイズについて詳しく学ぶ](/Building-your-app/AI-chat-modes#setting-ai-controls)
  </Accordion>

  <Accordion title="変更にクレジットを使う前に、AI とアイデアをレビューするには?">
    AI チャットの下部にある Discuss モードを使用します。これにより、変更を加えたりクレジットを使ったりする前に、AI とアイデアを話し合ったり、ロジックをレビューしたり、ステップを計画したりできます。更新をアプリに適用する前に、目標が明確であることを確認し、代替案を検討するのに理想的です。 [チャットモードについて詳しく学ぶ](https://docs.base44.com/Building-your-app/AI-chat-modes)
  </Accordion>

  <Accordion title="AI が指示に正しく従わないのはなぜですか?">
    AI が完璧なソリューションを得るまでに数回試行することがあります。意図は常に完全に明確とは限らず、小さなバグが現れる可能性があります。チャットからより良い結果を得るためには、参照している要素について可能な限り具体的にすることが本当に役立ちます。

    お勧めするヒントをいくつか紹介します:

    * Visual Edits を使用して要素を直接ハイライトし、欲しい変更を説明する
    * 何が起こることを望むかを説明する (何が間違っているかではなく)
    * プロンプトを繰り返す場合は、再設計や再構築などのキーワードで言い換えてみてください
    * 自然な言葉で書くこと、リクエストがシンプルで明確であるほど、応答はより正確になります。
  </Accordion>

  <Accordion title="AI の応答が遅い、または詰まる場合はどうすればよいですか?">
    AI が時間がかかりすぎている、または詰まっているように見える場合は、ページを更新するか、プロンプトを再送信してみてください。これにより通常は問題が解決し、再び動き始めます。
  </Accordion>

  <Accordion title="AI が生成したコードでコード変更を失わないように、よりよくプロンプトを出すには?">
    AI 生成のコードで作業しているとき、結果は常に期待どおりとは限りません。変更を失うリスクを減らすには:

    * AI コントロールを使用して、すべてのプロンプトで AI に覚えてほしいカスタム指示や重要なメモを追加します。
    * 特にコンテキストが重要な場合、プロンプトで重要な詳細や要件を繰り返します。
    * 作業を定期的に保存し、コードの重要なバージョンのバックアップコピーを保管します。
    * 効果的なプロンプトはスキルであることを覚えておいてください。経験を積んで AI ツールが改善されるにつれて、結果は向上します。
    * プロンプトと AI の出力の両方を慎重にレビューして、コンテキストと要件が意図どおりに処理されていることを確認します。
  </Accordion>
</AccordionGroup>

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