メタプロンプト徹底解説：LLMの性能を最大限に引き出す最新技術

import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

// --- Data --- //
const performanceData = [
  { name: 'GPT-3.5*', Human: 55.0, APE: 69.0, PromptAgent: 78.0 },
  { name: 'GPT-4', Human: 76.5, APE: 77.0, PromptAgent: 84.0 },
  { name: 'PaLM 2', Human: 39.0, APE: 38.0, PromptAgent: 44.0 },
];

const improvementData = [
    { task: 'Game of 24', improvement: 60.0 },
    { task: 'Python Puzzles', improvement: 15.0 },
    { task: 'Sonnet Writing', improvement: 18.0 },
];


const approaches = [
  {
    title: '指揮者・専門家モデル (Conductor-Expert)',
    description: '単一のLLMが「指揮者」となり、複雑なタスクをサブタスクに分解し、同じLLMの異なる「専門家」インスタンスに割り当てる手法。指揮者は専門家間のコミュニケーションを監督し、出力を統合・検証して最終結果を生成します。',
    source: 'Stanford & OpenAI',
    sourceUrl: 'https://arxiv.org/pdf/2401.12954',
    diagram: (
      <div className="w-full text-center">
        <svg width="100%" height="220" viewBox="0 0 400 110">
          <defs>
            <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
              <path d="M 0 0 L 10 5 L 0 10 z" fill="#999" />
            </marker>
          </defs>
          <rect x="150" y="0" width="100" height="30" rx="5" ry="5" fill="#e0f2fe" stroke="#0ea5e9" />
          <text x="200" y="18" textAnchor="middle" fontSize="10">指揮者 LLM</text>
          
          <path d="M 200 30 V 45" stroke="#999" markerEnd="url(#arrow)"/>
          
          <rect x="10" y="80" width="80" height="30" rx="5" ry="5" fill="#fefce8" stroke="#eab308" />
          <text x="50" y="98" textAnchor="middle" fontSize="10">専門家 A</text>
          <path d="M 50 80 V 55 H 190" stroke="#999" strokeDasharray="4 2" markerEnd="url(#arrow)"/>

          <rect x="110" y="80" width="80" height="30" rx="5" ry="5" fill="#fefce8" stroke="#eab308" />
          <text x="150" y="98" textAnchor="middle" fontSize="10">専門家 B</text>
          <path d="M 150 80 V 55 H 195" stroke="#999" strokeDasharray="4 2" markerEnd="url(#arrow)"/>

          <rect x="210" y="80" width="80" height="30" rx="5" ry="5" fill="#fefce8" stroke="#eab308" />
          <text x="250" y="98" textAnchor="middle" fontSize="10">専門家 C</text>
           <path d="M 250 80 V 55 H 205" stroke="#999" strokeDasharray="4 2" markerEnd="url(#arrow)"/>

          <rect x="310" y="80" width="80" height="30" rx="5" ry="5" fill="#fefce8" stroke="#eab308" />
          <text x="350" y="98" textAnchor="middle" fontSize="10">...</text>
           <path d="M 350 80 V 55 H 210" stroke="#999" strokeDasharray="4 2" markerEnd="url(#arrow)"/>
        </svg>
      </div>
    )
  },
  {
    title: '構造指向アプローチ (Structure-Oriented)',
    description: 'タスクのコンテンツではなく、JSONやMarkdownのような「形式的な構造」に焦点を当てる手法。範疇論を用いて理論的に形式化され、LLMに問題解決の「方法」を教えます。トークン効率が高く、公平なモデル比較が可能です。',
    source: 'Zhang et al.',
    sourceUrl: 'https://arxiv.org/abs/2311.11482',
    diagram: (
        <div className="p-4 bg-gray-800 rounded-md font-mono text-xs text-white overflow-x-auto">
            <pre>{`{
  "ProblemStatement": "string",
  "ReasoningSteps": [
    {
      "step": 1,
      "description": "Let's think step by step..."
    },
    {
      "step": 2,
      "description": "..."
    }
  ],
  "FinalAnswer": "float | string"
}`}</pre>
        </div>
    )
  },
  {
    title: '自動プロンプトエンジニア (APE)',
    description: 'プロンプトを「プログラム」と見なし、スコア関数を最大化することを目標に、プロンプト候補を探索・最適化する手法。LLMが指示候補を生成し、それをスコアリング、高スコアのものを選択・再サンプリングして反復的に改善します。',
    source: 'Waterloo University',
    sourceUrl: 'https://arxiv.org/pdf/2211.01910',
    diagram: (
      <div className="w-full text-center">
        <svg width="100%" height="200" viewBox="0 0 400 100">
          <defs><marker id="arrow2" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="#999" /></marker></defs>
          <rect x="0" y="35" width="90" height="30" rx="5" ry="5" fill="#e0f2fe" stroke="#0ea5e9" /><text x="45" y="53" textAnchor="middle" fontSize="10">① 候補生成</text>
          <path d="M 90 50 L 120 50" stroke="#999" markerEnd="url(#arrow2)" />
          <rect x="120" y="35" width="90" height="30" rx="5" ry="5" fill="#fefce8" stroke="#eab308" /><text x="165" y="53" textAnchor="middle" fontSize="10">② スコアリング</text>
          <path d="M 210 50 L 240 50" stroke="#999" markerEnd="url(#arrow2)" />
          <rect x="240" y="35" width="90" height="30" rx="5" ry="5" fill="#dcfce7" stroke="#22c55e" /><text x="285" y="53" textAnchor="middle" fontSize="10">③ 選択</text>
          <path d="M 330 50 L 350 50 C 380 50 380 20 350 20 L 45 20 C 15 20 15 50 -10 50 " stroke="#999" markerEnd="url(#arrow2)" fill="none" transform="translate(15,0)" />
          <text x="180" y="15" textAnchor="middle" fontSize="10">反復的改善</text>
        </svg>
      </div>
    )
  },
  {
    title: 'LLMによるプロンプト生成 (LLM as Generator)',
    description: 'より高度なLLM（例: o1-preview, Claude 3）を用いて、ターゲットとなるLLM（例: GPT-4o, Claude 3 Sonnet）のためのプロンプトを生成・最適化する実践的なアプローチ。手動作成よりも詳細で構造化されたプロンプトを効率的に作成できます。',
    source: 'Anthropic, Cobus Greyling',
    sourceUrl: 'https://cobusgreyling.medium.com/meta-prompting-a-practical-guide-to-optimising-prompts-automatically-c0a071f4b664',
    diagram: (
      <div className="w-full text-center">
        <svg width="100%" height="180" viewBox="0 0 400 90">
            <defs><marker id="arrow3" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="#999" /></marker></defs>
            <rect x="0" y="30" width="120" height="30" rx="5" ry="5" fill="#e0f2fe" stroke="#0ea5e9" /><text x="60" y="48" textAnchor="middle" fontSize="10">高度なLLM (生成役)</text>
            <path d="M 120 45 L 140 45" stroke="#999" markerEnd="url(#arrow3)" />
            <rect x="140" y="30" width="120" height="30" rx="5" ry="5" fill="#fefce8" stroke="#eab308" /><text x="200" y="48" textAnchor="middle" fontSize="10">最適化されたプロンプト</text>
            <path d="M 260 45 L 280 45" stroke="#999" markerEnd="url(#arrow3)" />
            <rect x="280" y="30" width="120" height="30" rx="5" ry="5" fill="#dcfce7" stroke="#22c55e" /><text x="340" y="48" textAnchor="middle" fontSize="10">ターゲットLLM (実行役)</text>
            <text x="60" y="15" textAnchor="middle" fontSize="10">シンプルなタスク指示</text>
            <path d="M 60 28 V 20" stroke="#999" markerEnd="url(#arrow3)" transform="rotate(180 60 24)"/>
        </svg>
      </div>
    )
  }
];


// --- Components --- //
const Card = ({ title, children }) => (
  <div className="bg-white shadow-lg rounded-xl p-6 border border-gray-200">
    <h3 className="text-xl font-bold text-gray-800 mb-4">{title}</h3>
    {children}
  </div>
);

const App = () => {
  return (
    <div className="bg-gray-50 min-h-screen p-4 sm:p-6 md:p-8 font-sans">
      <div className="max-w-7xl mx-auto">
        
        <header className="mb-8">
          <h1 className="text-4xl font-extrabold text-gray-900 tracking-tight">メタプロンプト徹底解説</h1>
          <p className="mt-2 text-lg text-gray-600">LLMの性能を最大限に引き出す最新技術の定義、仕組み、実践アプローチ</p>
        </header>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {/* --- Definition --- */}
            <div className="md:col-span-2">
                <Card title="メタプロンプトとは？">
                    <div className="space-y-4 text-gray-700">
                        <p>LLM（大規模言語モデル）の能力を向上させるための高度なプロンプト技術です。従来のプロンプトがタスクの「内容」を直接指示するのに対し、メタプロンプトはタスク解決の<span className="font-bold text-sky-600">「構造」「プロセス」「形式」</span>といった、より高次の側面（メタレベル）からアプローチします。</p>
                        <div className="overflow-x-auto">
                          <table className="w-full text-sm text-left border-collapse">
                            <thead>
  <tr>
  <th className="border-b-2 p-2 bg-gray-100">特徴</th>
  <th className="border-b-2 p-2 bg-gray-100">従来プロンプト (Few-shot)</th>
  <th className="border-b-2 p-2 bg-sky-100">メタプロンプト</th>
  </tr>
                            </thead>
                            <tbody>
  <tr>
  <td className="border-b p-2 font-semibold">焦点</td>
  <td className="border-b p-2">コンテンツ駆動 (具体的な例)</td>
  <td className="border-b p-2 font-bold">構造駆動 (解決の型・パターン)</td>
  </tr>
  <tr>
  <td className="border-b p-2 font-semibold">目的</td>
  <td className="border-b p-2">「何を考えたか」を示す</td>
  <td className="border-b p-2 font-bold">「どう考えるか」を教える</td>
  </tr>
  <tr>
  <td className="border-b p-2 font-semibold">トークン効率</td>
  <td className="border-b p-2">低い (例が増えると増大)</td>
  <td className="border-b p-2 font-bold">高い (構造はコンテンツより軽量)</td>
  </tr>
  <tr>
  <td className="border-b p-2 font-semibold">汎用性</td>
  <td className="border-b p-2">限定的 (例に依存)</td>
  <td className="border-b p-2 font-bold">高い (多様なドメインに適用可能)</td>
  </tr>
                            </tbody>
                        </table>
                        </div>
                         <p className="text-xs text-right text-gray-500">出典: <a href="https://www.promptingguide.ai/techniques/meta-prompting" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">Prompt Engineering Guide</a>, <a href="https://arxiv.org/abs/2311.11482" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">Zhang et al. (2024)</a></p>
                    </div>
                </Card>
            </div>

            {/* --- Approaches --- */}
            <div className="md:col-span-2">
                <h2 className="text-2xl font-bold text-gray-900 mb-4">主要なアプローチと仕組み</h2>
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    {approaches.map((approach, index) => (
                        <div key={index} className="bg-white shadow-lg rounded-xl p-6 border border-gray-200 flex flex-col">
                            <h3 className="text-lg font-bold text-gray-800 mb-2">{approach.title}</h3>
                            <p className="text-sm text-gray-600 flex-grow">{approach.description}</p>
                            <div className="my-4">{approach.diagram}</div>
                             <p className="text-xs text-right text-gray-500 mt-auto">出典: <a href={approach.sourceUrl} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">{approach.source}</a></p>
                        </div>
                    ))}
                </div>
            </div>

            {/* --- Performance --- */}
            <Card title="性能比較：人手 vs 自動プロンプト最適化">
                <p className="text-sm text-gray-600 mb-4">ウォータールー大学の研究では、自動プロンプトエンジニア（APE）やPromptAgentが人手によるプロンプト作成の性能を上回る結果を示しています。</p>
                <ResponsiveContainer width="100%" height={300}>
                    <BarChart data={performanceData} margin={{ top: 5, right: 20, left: -10, bottom: 5 }}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="name" />
                        <YAxis unit="%" domain={[0, 100]}/>
                        <Tooltip formatter={(value) => `${value.toFixed(1)}%`} />
                        <Legend />
                        <Bar dataKey="Human" fill="#60a5fa" name="人間" />
                        <Bar dataKey="APE" fill="#86efac" name="APE" />
                        <Bar dataKey="PromptAgent" fill="#fb923c" name="PromptAgent" />
                    </BarChart>
                </ResponsiveContainer>
                <p className="text-xs text-right text-gray-500 mt-2">出典: <a href="https://www.prompthub.us/blog/a-complete-guide-to-meta-prompting" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">PromptHub - A Complete Guide to Meta Prompting</a></p>
            </Card>

            <Card title="指揮者モデルによる精度向上率">
                <p className="text-sm text-gray-600 mb-4">スタンフォード大学とOpenAIの研究では、指揮者・専門家モデルが標準的なプロンプトと比較して、様々なタスクで大幅な精度向上を達成しました。</p>
                 <ResponsiveContainer width="100%" height={300}>
                    <BarChart data={improvementData} layout="vertical" margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis type="number" unit="%" domain={[0, 'dataMax + 10']}/>
                        <YAxis dataKey="task" type="category" width={100} />
                        <Tooltip formatter={(value) => `${value.toFixed(1)}%`} />
                        <Bar dataKey="improvement" fill="#818cf8" name="精度向上率" />
                    </BarChart>
                </ResponsiveContainer>
                <p className="text-xs text-right text-gray-500 mt-2">出典: <a href="https://arxiv.org/pdf/2401.12954" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">Meta-prompting - arXiv</a></p>
            </Card>

            {/* --- Tools --- */}
            <div className="md:col-span-2">
                <Card title="実践ツールとプラットフォーム">
                    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                        <div className="bg-gray-100 p-4 rounded-lg">
                            <h4 className="font-bold">Anthropic Prompt Generator</h4>
                            <p className="text-sm text-gray-600">Claudeモデルに最適化されたプロンプトを生成。タスクを説明するだけで詳細なプロンプトテンプレートを作成。</p>
                            <a href="https://medium.com/@sam_witteveen/unleashing-the-power-of-the-anthropic-claude-models-with-meta-prompts-8dfb50a01530" target="_blank" rel="noopener noreferrer" className="text-xs text-blue-500 underline mt-2 inline-block">詳細を見る</a>
                        </div>
                         <div className="bg-gray-100 p-4 rounded-lg">
                            <h4 className="font-bold">PromptHub Tools</h4>
                            <p className="text-sm text-gray-600">プロンプトの反復的な改善を自動化する「Prompt Iterator」や、タスク内容からプロンプトを生成する機能を提供。</p>
                             <a href="https://www.prompthub.us/blog/a-complete-guide-to-meta-prompting" target="_blank" rel="noopener noreferrer" className="text-xs text-blue-500 underline mt-2 inline-block">詳細を見る</a>
                        </div>
                         <div className="bg-gray-100 p-4 rounded-lg">
                            <h4 className="font-bold">OpenAI System Instructions</h4>
                            <p className="text-sm text-gray-600">タスク記述に基づいてシステム指示プロンプトを生成する機能。o1モデルでは未対応（2025年8月時点）。</p>
                             <a href="https://www.prompthub.us/blog/a-complete-guide-to-meta-prompting" target="_blank" rel="noopener noreferrer" className="text-xs text-blue-500 underline mt-2 inline-block">詳細を見る</a>
                        </div>
                    </div>
                </Card>
            </div>

        </div>
      </div>
    </div>
  );
};

export default App;