> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.
# 効果的なプロンプトの書き方
> コンテキスト、精度、シンプルさの原則に従って、PBX 向けに明確で具体的かつ実行可能なプロンプトを作成し、最高の AI 生成バリエーションを得る方法を学びます。
プロンプトベースの実験(PBX)は、AI を活用してアイデアを素早く構築・テストできるようにします。高パフォーマンスのバリエーションを作成するためにコーディングスキルは必要なく、AI に対して自分のビジョンをどのように伝えるかを知っていれば十分です。
AI を熟練したコラボレーターとして考えてください。明確な指示とコンテキストを与えれば、AI は精度の高い成果を提供できます。本ガイドを参考に、効果的なプロンプティングの原則を学びましょう。
## 良いプロンプトとは?
AI から最良の結果を得るためには、以下の3つの基本原則に焦点を当ててください。
### コンテキスト
変更の目的に関するコンテキストを提供しましょう。なぜそのアイデアをテストしたいのかを説明することで、AI が目的に沿った出力を行えるようになります。
* **良い例:** "ユーザーへの視認性を高めるために、CTA の色を青に変更してください。" ✅
* **曖昧すぎる例:** "この CTA をもっと良くしてください。" ❌
### 精度
行いたい変更について具体的に述べましょう。サイズ、色、形状、位置、スタイルなど、視覚的な詳細を正確に説明してください。
* **良い例:** "クリック率を改善するために、送料無料テキストの隣に白い配送トラックのアイコンを追加してください。アイコンの高さはテキストの高さに合わせてください。" ✅
* **明確な目標がない例:** "デザインを変更してください。" ❌
### シンプルさ
シンプルで実行可能な用語を使用しましょう。明確な指示に絞り、1つのプロンプトにつき1つのリクエストだけにしてください。技術的な専門用語でプロンプトを複雑にしないようにしましょう。
* **良い例:** "白い背景を `#2b5d50` から `#dae995` への上下グラデーションに置き換えてください。" ✅
* **指示が多すぎる例:** "ボタンの色を変えて、プロモーション画像を追加して、テキストを移動してください。" ❌
## 明確なプロンプト構造に従う
プロンプトが明確な構造に従うと、ユーザーは PBX で成功を収められます。より複雑なリクエストには、次の4つのステップを使用してください:
1. **変更内容を定義する**
* どのような変換を達成したいかを正確に述べます。
2. **視覚とレイアウトの変更を指定する**
* 対象要素の視覚的な変更、レイアウトのガイドライン、デザイン要素を詳細に記述します。ここでモックアップやデザインファイルを参照することもできます。
3. **動作を説明する**
* 対象要素がユーザー操作にどのように応答すべきかを記述します。
4. **境界と制限を設定する(任意)**
* 技術的制限、レスポンシブ要件、起こるべきでないことを定義します。
複雑なプロンプトを Kameleoon で使用する前に、LLM で洗練させましょう。上記のプロンプト構造を LLM 向けのテンプレートとして提供することも可能です。
## 実例
これらの例を確認して、プロンプト構造が実際にどのように機能するかを確認してください。
### "ホテルを比較" プロンプト
この例は複雑な機能に対する明確な構造を示しています:
> "モックアップのような『ホテルを比較』機能を構築してください。左サイドバーに『プロパティを比較』トグルを追加して、オン/オフを切り替えられるようにしてください。トグルがオンのとき、各プロパティカードの右下に『比較』チェックボックスを表示します。プロパティが少なくとも1つ選択されている場合、サムネイル、『X/5 選択中』カウンタ、『キャンセル』および『比較』ボタンを持つスティッキー底部トレイを表示します。『比較』をクリックすると、選択したリストの詳細を表示するシンプルなモーダルが開きます。選択は5件までに制限してください。"
### このプロンプトは機能するか?
**プロンプト:** "『地図に表示』ブロックを、移動可能なフローティング『地図』ボタンに置き換えてください。ユーザーはページ上のどこにでもドラッグできるようにし、クリックすると地図ビューが開くようにしてください。"
**判定:** ✅ **はい。** 推奨されるプロンプト構造に従い、変換内容を明確に記述しています。
**プロンプト:** "リピーター顧客に15%の割引を表示してください。"
**判定:** ❌ **いいえ。** AI は現在、動的データやバックエンドロジックを伴う新機能の作成が苦手です。
**プロンプト:** "グリッドビューをデフォルトのビューにしてください。"
**判定:** ✅ **はい。** グリッドビューがすでにページ上に存在する場合、AI はデフォルト状態を変更できます。
## 迷ったときは...
プロンプトの表現方法がわからない場合は、次のヒントを覚えておきましょう:
* **大きく考えるが、現実的に:** AI は新しいバックエンド機能を作成できません。UI と UX の変更に集中しましょう。
* **シンプルに保つ:** 直球の変更には複雑なプロンプトは必要ありません。
* **AI をチームメイトのように扱う:** 開発者に依頼するのと同じくらい明確にプロンプトを書きましょう。
更新したい領域を視覚的に囲む **スケッチを描く** 機能、AI が参照するモックアップを提供する **ファイルをインポート** 機能、[Figma から直接デザインをインポート](./import-designs-from-figma) する機能、または外部ウェブサイトをインスピレーションとして参照する機能も活用できます—たとえば、「この旅行予約サイトのフィルターレイアウトを複製してください: `www.example.com/search`」のように指定します。