良いプロンプトとは?
AI から最良の結果を得るためには、以下の3つの基本原則に焦点を当ててください。コンテキスト
変更の目的に関するコンテキストを提供しましょう。なぜそのアイデアをテストしたいのかを説明することで、AI が目的に沿った出力を行えるようになります。- 良い例: “ユーザーへの視認性を高めるために、CTA の色を青に変更してください。” ✅
- 曖昧すぎる例: “この CTA をもっと良くしてください。” ❌
精度
行いたい変更について具体的に述べましょう。サイズ、色、形状、位置、スタイルなど、視覚的な詳細を正確に説明してください。- 良い例: “クリック率を改善するために、送料無料テキストの隣に白い配送トラックのアイコンを追加してください。アイコンの高さはテキストの高さに合わせてください。” ✅
- 明確な目標がない例: “デザインを変更してください。” ❌
シンプルさ
シンプルで実行可能な用語を使用しましょう。明確な指示に絞り、1つのプロンプトにつき1つのリクエストだけにしてください。技術的な専門用語でプロンプトを複雑にしないようにしましょう。- 良い例: “白い背景を
#2b5d50から#dae995への上下グラデーションに置き換えてください。” ✅ - 指示が多すぎる例: “ボタンの色を変えて、プロモーション画像を追加して、テキストを移動してください。” ❌
明確なプロンプト構造に従う
プロンプトが明確な構造に従うと、ユーザーは PBX で成功を収められます。より複雑なリクエストには、次の4つのステップを使用してください:- 変更内容を定義する
- どのような変換を達成したいかを正確に述べます。
- 視覚とレイアウトの変更を指定する
- 対象要素の視覚的な変更、レイアウトのガイドライン、デザイン要素を詳細に記述します。ここでモックアップやデザインファイルを参照することもできます。
- 動作を説明する
- 対象要素がユーザー操作にどのように応答すべきかを記述します。
- 境界と制限を設定する(任意)
- 技術的制限、レスポンシブ要件、起こるべきでないことを定義します。
実例
これらの例を確認して、プロンプト構造が実際にどのように機能するかを確認してください。“ホテルを比較” プロンプト
この例は複雑な機能に対する明確な構造を示しています:“モックアップのような『ホテルを比較』機能を構築してください。左サイドバーに『プロパティを比較』トグルを追加して、オン/オフを切り替えられるようにしてください。トグルがオンのとき、各プロパティカードの右下に『比較』チェックボックスを表示します。プロパティが少なくとも1つ選択されている場合、サムネイル、『X/5 選択中』カウンタ、『キャンセル』および『比較』ボタンを持つスティッキー底部トレイを表示します。『比較』をクリックすると、選択したリストの詳細を表示するシンプルなモーダルが開きます。選択は5件までに制限してください。”
このプロンプトは機能するか?
プロンプト: “『地図に表示』ブロックを、移動可能なフローティング『地図』ボタンに置き換えてください。ユーザーはページ上のどこにでもドラッグできるようにし、クリックすると地図ビューが開くようにしてください。” 判定: ✅ はい。 推奨されるプロンプト構造に従い、変換内容を明確に記述しています。
迷ったときは…
プロンプトの表現方法がわからない場合は、次のヒントを覚えておきましょう:- 大きく考えるが、現実的に: AI は新しいバックエンド機能を作成できません。UI と UX の変更に集中しましょう。
- シンプルに保つ: 直球の変更には複雑なプロンプトは必要ありません。
- AI をチームメイトのように扱う: 開発者に依頼するのと同じくらい明確にプロンプトを書きましょう。
更新したい領域を視覚的に囲む スケッチを描く 機能、AI が参照するモックアップを提供する ファイルをインポート 機能、または Figma から直接デザインをインポート する機能も活用できます。