Skip to main content
PBX Build は、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件までに制限してください。”
Compare hotels prompt
Compare hotels modal

​
このプロンプトは機能するか?

プロンプト: “『地図に表示』ブロックを、移動可能なフローティング『地図』ボタンに置き換えてください。ユーザーはページ上のどこにでもドラッグできるようにし、クリックすると地図ビューが開くようにしてください。” 判定: ✅ はい。 推奨されるプロンプト構造に従い、変換内容を明確に記述しています。
Show on map prompt
プロンプト: “リピーター顧客に15%の割引を表示してください。” 判定: ❌ いいえ。 AI は現在、動的データやバックエンドロジックを伴う新機能の作成が苦手です。 プロンプト: “グリッドビューをデフォルトのビューにしてください。” 判定: ✅ はい。 グリッドビューがすでにページ上に存在する場合、AI はデフォルト状態を変更できます。
Grid view prompt

​
迷ったときは…

プロンプトの表現方法がわからない場合は、次のヒントを覚えておきましょう:
  • 大きく考えるが、現実的に: AI は新しいバックエンド機能を作成できません。UI と UX の変更に集中しましょう。
  • シンプルに保つ: 直球の変更には複雑なプロンプトは必要ありません。
  • AI をチームメイトのように扱う: 開発者に依頼するのと同じくらい明確にプロンプトを書きましょう。
更新したい領域を視覚的に囲む スケッチを描く 機能、AI が参照するモックアップを提供する ファイルをインポート 機能、Figma から直接デザインをインポート する機能、または外部ウェブサイトをインスピレーションとして参照する機能も活用できます—たとえば、「この旅行予約サイトのフィルターレイアウトを複製してください: www.example.com/search」のように指定します。

​
FAQ

フロントエンドコードで管理する任意のバリアント を作成できます。ただし、Kameleoon は バックエンドロジックやサーバーサイドの変更 を必要とするプロンプトのコードは生成できません。そのようなケースは、バックエンドシステムに精通した開発者が処理する必要があります。
PBX は次のようなタスクに優れています:
  • ヘッドライン、CTA、免責事項などのテキストやコンテンツの変更。
  • 色、フォント、レイアウト調整などのスタイル更新。
  • バナーとコンテンツの挿入。
  • ボタンの再配置、リンク、モーダルなどのシンプルなインタラクティブ変更。
マルチステップフロー、ギャラリー、カスタムインタラクティブ要素にも PBX を使用できます。高度なケースには、ハイブリッドアプローチを使用してください。まず PBX に初期実装を生成させ、その後手動で洗練します。この方法は、自動化のスピードとカスタム開発の精度を組み合わせます。
Kameleoon の AI はリクエストを満たすために多くの可能な方法を探索するため、固定的な結果は生成しません。同じプロンプトでも毎回異なる出力を生み出すことがあります。出力が変わるのは次の理由によります:
  • 制御されたランダム性: モデルは繰り返しを避け、創造性を促進するために回答を変えます。
  • プロンプト解釈: 細かなコンテキストの違いにより、モデルが異なる詳細に焦点を当てることがあります。
  • トレーニングの多様性: モデルは多様なトレーニングデータセットからのパターンを利用します。
より一貫した結果を得るには、制約を追加してください。モックアップやデザインファイルを提供するか、すべての生成に対する包括的なルールとブランドコンテキストを設定する マスタープロンプト を定義してください。
はい、フォローアッププロンプトで出力を洗練できますが、プロンプト履歴を念頭に置いてください。PBX が覚えていること:
  • 最新に生成したコード(コンテキストとして使用)。
PBX が覚えていないこと:
  • 以前のプロンプトの指示。
  • 完全な会話履歴。
  • 以前のプロンプトで追加されたモックアップやスケッチ。
“X と Y の問題を修正してください” のような曖昧なフォローアッププロンプトは、PBX に完全なコンテキストがないために失敗することがあります。フォローアッププロンプトのベストプラクティス:
  • 効果が低い: “矢印ナビゲーションが動作しません。”
  • より効果的: “新しいカルーセルで、矢印ナビゲーションが期待通りに動作していません。前回のプロンプトで生成されたコードを使用して修正してください。矢印は左右に表示され、クリックごとに 1 つの画像を進めるべきです。”
フォローアッププロンプトでは具体的にしてください:
  • 修正する要素や機能を特定します。
  • 期待される動作を記述します。
  • 生成されたコードを明示的に参照します。
  • 関連する技術的詳細を含めます。
はい、ページの DOM にホバートリガー要素の HTML コードが含まれている場合に限ります。ホバー操作後に JavaScript が要素を動的に注入する場合、Kameleoon の AI はそれを正しく検出または変更できない可能性があります。最良の結果を得るには、次のことを確認してください:
  • ホバー要素が、たとえ非表示でも、初期 HTML に存在すること。
  • 構造が安定しており、非同期で生成されないこと。