AI性能を最大化！プロンプトエンジニアリング最新テクニックと分野別実践例

import React from 'react';

const promptEngineeringData = {
  mainTechniques: {
    title: "主要なプロンプトエンジニアリング技術",
    items: [
      { name: "ゼロショット (Zero-Shot)", description: "AIにタスクの例を与えずに指示のみで応答させる。" },
      { name: "フューショット (Few-Shot)", description: "AIに少数の例（入力と出力のペア）を提示し、パターンを学習させる。" },
      { name: "思考の連鎖 (Chain-of-Thought)", description: "複雑な問題をステップ・バイ・ステップで解くように促し、推論過程を生成させる。" },
      { name: "自己整合性 (Self-Consistency)", description: "複数の思考の連鎖を生成し、最も多数派の回答を採用して精度を高める。" },
      { name: "役割ベース (Role-Based)", description: "AIに特定の役割（例：「専門家として」）を与え、その視点から応答させる。" },
      { name: "ネガティブ (Negative Prompting)", description: "生成してほしくない要素を明示的に指示する。（例：Midjourneyの`--no`）" },
      { name: "プロンプト連鎖 (Prompt Chaining)", description: "複雑なタスクを複数の単純なプロンプトに分割し、連続して実行する。" },
      { name: "思考の木 (Tree-of-Thought)", description: "複数の推論経路を木構造で探求・評価させ、最適な解を見つけ出す。" }
    ],
    source: "https://mirascope.com/blog/advanced-prompt-engineering"
  },
  bestPractices: {
    title: "効果的なプロンプト作成のベストプラクティス",
    items: [
      { name: "明確かつ具体的に", description: "曖昧な表現を避け、強いアクション動詞で指示を開始する。" },
      { name: "出力フォーマットを指定", description: "JSON、リスト、表など、希望する出力形式を明示する。" },
      { name: "良い例を示す", description: "フューショット技術で期待するスタイルや構造を伝える。" },
      { name: "段階的思考を促す", description: "思考の連鎖を活用し、複雑なタスクを分解させる。" },
      { name: "適切なコンテキストを提供", description: "背景情報や制約条件を伝え、応答の精度を高める。" },
      { name: "反復と微調整", description: "一度で完璧を求めず、対話を重ねて出力を改善する。" },
      { name: "モデルに役割を与える", description: "特定のペルソナを割り当て、専門的な視点からの応答を促す。" }
    ],
    source: "https://www.eweek.com/artificial-intelligence/guide-to-prompt-engineering"
  },
  midjourneyPractices: {
    title: "画像生成AI (Midjourney) のベストプラクティス",
    items: [
      { name: "パラメータの活用", description: "プロンプトの末尾に `--` で始まるパラメータを追加して画像を制御する。" },
      { name: "アスペクト比 (--ar)", description: "`--ar 16:9` のように画像の縦横比を指定する。" },
      { name: "品質 (--q)", description: "`--q 2` のようにGPU時間を増やし、画像の品質と詳細度を高める。" },
      { name: "スタイライズ (--s)", description: "`--s 750` のように芸術的なスタイルの強さを調整する。" },
      { name: "ネガティブプロンプト (--no)", description: "`--no text, signature` のように、画像から除外したい要素をカンマ区切りで指定する。" },
      { name: "簡潔な表現", description: "「たくさんの花」より「3本の花」のように、具体的かつシンプルな言葉を選ぶ。" }
    ],
    source: "https://docs.midjourney.com/hc/en-us/articles/32859204029709-Parameter-List"
  },
  commonMistakes: {
    title: "プロンプトエンジニアリングの一般的な間違い",
    items: [
      { name: "曖昧な指示", description: "焦点の定まらない出力の原因となる。具体的で明確な指示が不可欠。" },
      { name: "過度な複雑化", description: "一つのプロンプトに多くの概念を詰め込みすぎると、AIが混乱する。" },
      { name: "コンテキスト不足", description: "背景情報がないと、AIは意図を正確に理解できず、出力の質が低下する。" },
      { name: "反復の欠如", description: "一度のプロンプトで満足せず、対話を通じて改善する機会を逃すこと。" },
      { name: "AIの能力の誤解", description: "AIの知識は最新ではなく、時に不正確な情報（ハルシネーション）を生成する可能性がある。" }
    ],
    source: "https://www.eweek.com/artificial-intelligence/guide-to-prompt-engineering"
  },
  supportingTools: {
    title: "プロンプトエンジニアリング支援ツール",
    items: [
      { name: "Lilypad (Mirascope)", description: "プロンプトとコードを一体でバージョン管理し、チームでの共同作業を促進する。" },
      { name: "OpenAI Playground", description: "リアルタイムでプロンプトをテストし、結果を確認しながら調整できる。" },
      { name: "PromptBase", description: "様々なタスクに最適化された高品質なプロンプトを売買できるマーケットプレイス。" },
      { name: "Helicone", description: "プロンプトのパフォーマンスを追跡・分析し、最適化を支援する。" }
    ],
    source: "https://www.geeksforgeeks.org/blogs/prompt-engineering-best-practices/"
  }
};

const Diagram = () => (
  <div className="w-full max-w-2xl mx-auto bg-gray-50 p-4 rounded-lg shadow-inner">
    <h3 className="text-lg font-semibold text-center mb-4">概念比較: Prompt Chaining vs Chain of Thoughts</h3>
    <div className="flex flex-col md:flex-row justify-around items-center space-y-4 md:space-y-0 md:space-x-4">
      {/* Prompt Chaining */}
      <div className="text-center">
        <p className="font-bold mb-2">Prompt chaining (プロンプト連鎖)</p>
        <div className="flex flex-col items-center space-y-2">
          <div className="w-24 h-12 bg-blue-200 rounded-md flex items-center justify-center text-sm p-1">入力</div>
          <div className="w-px h-6 bg-gray-400 border-l border-dashed"></div>
          <div className="w-24 h-12 bg-blue-200 rounded-md flex items-center justify-center text-sm p-1">出力</div>
        </div>
        <p className="text-xs mt-2 text-gray-600">タスクを分割し、<br/>複数のプロンプトを繋げる</p>
      </div>

      {/* Chain of Thoughts */}
      <div className="text-center">
        <p className="font-bold mb-2">Chain of thoughts (思考の連鎖)</p>
        <div className="flex flex-col items-center space-y-2">
          <div className="w-24 h-12 bg-green-200 rounded-md flex items-center justify-center text-sm p-1">入力</div>
          <div className="w-px h-6 bg-gray-400 border-l border-dashed"></div>
          <div className="w-40 h-16 bg-white border border-gray-300 rounded-md flex items-center justify-center text-xs p-1 shadow-sm">推論ステップ1...</div>
          <div className="w-px h-6 bg-gray-400 border-l border-dashed"></div>
          <div className="w-40 h-16 bg-white border border-gray-300 rounded-md flex items-center justify-center text-xs p-1 shadow-sm">推論ステップ2...</div>
           <div className="w-px h-6 bg-gray-400 border-l border-dashed"></div>
          <div className="w-24 h-12 bg-green-200 rounded-md flex items-center justify-center text-sm p-1">出力</div>
        </div>
        <p className="text-xs mt-2 text-gray-600">単一のプロンプト内で<br/>段階的な思考を促す</p>
      </div>
    </div>
    <p className="text-xs text-center mt-4 text-gray-500">出典: <a href="https://www.ibm.com/think/topics/chain-of-thoughts" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">IBM</a></p>
  </div>
);

const SectionCard = ({ title, items, source }) => (
  <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 flex flex-col h-full">
    <h3 className="text-xl font-bold mb-4 text-gray-800">{title}</h3>
    <ul className="space-y-3 flex-grow">
      {items.map((item, index) => (
        <li key={index} className="text-gray-700">
          <strong className="font-semibold text-gray-900">{item.name}:</strong> {item.description}
        </li>
      ))}
    </ul>
    <div className="mt-4 pt-4 border-t border-gray-200 text-right">
        <a href={source} target="_blank" rel="noopener noreferrer" className="text-sm text-blue-600 hover:underline">出典元を見る</a>
    </div>
  </div>
);

const App = () => {
  return (
    <div className="min-h-screen bg-gray-100 font-sans p-4 sm:p-6 md:p-8">
      <header className="text-center mb-10">
        <h1 className="text-4xl md:text-5xl font-extrabold text-gray-900 mb-2">プロンプトエンジニアリング・ベストプラクティス</h1>
        <p className="text-lg text-gray-600">AIとの対話を最適化するためのテクニックと知識</p>
      </header>

      <main className="max-w-7xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-10">
          <SectionCard title={promptEngineeringData.mainTechniques.title} items={promptEngineeringData.mainTechniques.items} source={promptEngineeringData.mainTechniques.source} />
          <SectionCard title={promptEngineeringData.bestPractices.title} items={promptEngineeringData.bestPractices.items} source={promptEngineeringData.bestPractices.source} />
          <SectionCard title={promptEngineeringData.midjourneyPractices.title} items={promptEngineeringData.midjourneyPractices.items} source={promptEngineeringData.midjourneyPractices.source} />
        </div>

        <div className="mb-10">
           <Diagram />
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <SectionCard title={promptEngineeringData.commonMistakes.title} items={promptEngineeringData.commonMistakes.items} source={promptEngineeringData.commonMistakes.source} />
            <SectionCard title={promptEngineeringData.supportingTools.title} items={promptEngineeringData.supportingTools.items} source={promptEngineeringData.supportingTools.source} />
        </div>
      </main>

      <footer className="text-center mt-12 py-6 border-t border-gray-300">
        <p className="text-sm text-gray-500">本コンテンツは、複数の情報源を統合して作成されています。</p>
      </footer>
    </div>
  );
};

export default App;