最新AIプロンプト術：Claude、Gemini、OpenAI公式ガイドから学ぶ実践テクニック

import React from 'react';

const App = () => {
  const models = [
    {
      name: 'Claude (Opus 4)',
      logo: 'Anthropic',
      description: 'Anthropic社の最新・最高性能モデル。特に「ロールプロンプティング」という手法が極めて効果的です。',
      source: 'https://docs.anthropic.com/en/docs/build-with-claude/prompt-engineering/claude-4-best-practices',
      techniques: [
        {
          title: 'キーテクニック: ロールプロンプティング (役割の付与)',
          type: 'special',
          content: 'システムプロンプトを使い、AIに特定の専門家（例：「Fortune 500企業の法務顧問」）としての役割を与えることで、回答の質と深度が劇的に向上します。一般的なアシスタントから特定の分野に特化した専門家へと進化させることができます。',
          source: 'https://docs.anthropic.com/en/docs/build-with-claude/prompt-engineering/system-prompts',
          examples: [
            {
              title: '事例1：ソフトウェアライセンス契約の分析',
              comparison: [
                { header: '比較項目', items: ['分析の深度', '補償条項のリスク', '責任制限のリスク', 'IP所有権のリスク', '総合的な意見'] },
                { header: '役割なしの場合', items: ['主要点を要約し「標準的」と結論', '「ベンダーが免責される」と事実を述べるのみ', '「損害賠償が500ドルに制限される」と事実を述べるのみ', '「我々が所有権を保持する」と要約', '特になし'] },
                { header: '「法務顧問」の役割を与えた場合', items: ['「数百万ドルの損失に繋がる重要問題」を指摘', 'ベンダーの過失でも免責される点を「重大なリスク」と警告し修正案を提示', '500ドルの上限は「著しく不十分」と指摘し交渉を推奨', 'ベンダーが共同所有権を得る点は「競合に情報が渡るリスク」と指摘', '「署名すべきではない。再交渉を」と断固とした専門的意見を提示'] },
              ],
              source: 'https://docs.anthropic.com/en/docs/build-with-claude/prompt-engineering/system-prompts'
            },
            {
              title: '事例2：四半期財務分析',
              comparison: [
                { header: '比較項目', items: ['分析の深度', '収益分析', '利益率分析', 'キャッシュフロー分析', '総合的な意見'] },
                { header: '役割なしの場合', items: ['概要を提供し「現在の路線を維持」と総括', '「前年比22%増」と全体の成長を評価', '「EBITDA利益率が2%減」と事実を述べるのみ', '「営業キャッシュフローは410万ドル」と概要を説明', '特になし'] },
                { header: '「CFO」の役割を与えた場合', items: ['要因と懸念点を深掘りし、具体的行動を提示', 'SMBセグメントの5%減少を洞察し予算の再配分を提案', 'R&D投資が圧迫しているが「戦略的判断として維持すべき」と提示', '「ランウェイは15ヶ月。採用凍結と販売ファネル分析が必要」と具体的アクションを推奨', '「エンタープライズに注力し、SMBを合理化し、AIを収益化する」という明確な戦略を提示'] },
              ],
              source: 'https://docs.anthropic.com/en/docs/build-with-claude/prompt-engineering/system-prompts'
            }
          ]
        },
        {
          title: 'その他のベストプラクティス',
          type: 'list',
          items: [
            '明確な指示: タスク、文脈、制約、出力形式を具体的に指定する。',
            '豊富な例の提示: 望ましい出力の例をいくつか提示する（Few-shot）。',
            '構造化された入力: XMLタグ等でプロンプト内の要素を明確に区切る。',
            '思考プロセスの誘導: ステップバイステップで考えるよう促す（Chain-of-Thought）。'
          ],
          source: 'https://docs.anthropic.com/en/docs/build-with-claude/prompt-engineering/claude-4-best-practices'
        }
      ]
    },
    {
      name: 'Google Gemini',
      logo: 'Google AI',
      description: 'Google AIが開発したモデル群。タスクに応じて複数のプロンプト戦略が公式に紹介されています。',
      source: 'https://ai.google.dev/gemini-api/docs/prompting-strategies',
      techniques: [
        {
          title: '主要なプロンプト設計戦略',
          type: 'table',
          headers: ['戦略', '説明', '具体例'],
          rows: [
            ['指示プロンプティング', 'モデルに特定の役割や回答形式、明確な指示を与える。コンテキストを詳細に提供することで、より的確な応答が期待できる。', '「あなたはプロのマーケティング担当者です。以下の製品説明文を、若者向けのSNS投稿文に書き換えてください。」'],
            ['少数ショットプロンプティング', 'プロンプト内にいくつかの高品質な例（入力と出力のペア）を含め、モデルにタスクや形式を学習させる。', '入力: 「単語: happy, 反対語: sad」「単語: fast, 反対語:」\n期待される出力: slow'],
            ['思考の連鎖 (CoT)', '複雑な推論が必要な問題に対し、段階的な思考プロセスを説明させることで、最終的な回答の精度を向上させる。', '「リンゴが15個あり、5個売れ、20個入荷しました。今何個ありますか？ステップ・バイ・ステップで考えて。」']
          ],
          source: 'https://ai.google.dev/gemini-api/docs/prompting-strategies'
        },
        {
          title: '開発者向け高度なテクニック',
          type: 'list',
          items: [
            '構造化出力: モデルの出力を特定のJSON形式に固定するため、プロンプト内にスキーマを定義する。',
            '関数呼び出し: モデルが外部のツールやAPIを呼び出すように設定し、AIを外部システムと連携させる。'
          ],
          source: 'https://ai.google.dev/gemini-api/docs/structured-output'
        }
      ]
    },
    {
      name: 'OpenAI GPT',
      logo: 'OpenAI',
      description: 'GPT-4など、広く利用されているモデル群。公式ガイドで複数の戦略が紹介されています。',
      source: 'https://platform.openai.com/docs/guides/prompt-engineering',
      techniques: [
        {
          title: '主要なプロンプト戦略',
          type: 'list',
          items: [
            '明確な指示を書く: 指示は具体的で、曖昧さを排除する。',
            '参照テキストを提供する: モデルに外部の情報源を与え、それに基づいて回答させる。',
            '複雑なタスクを単純なサブタスクに分割する: 一度に一つのことを頼む。',
            'モデルに「考える」時間を与える: 思考の連鎖と同様に、結論を急がせず段階的に考えさせる。',
            '外部ツールを使用する: 他のAPIや計算エンジンと組み合わせて弱点を補う。',
            '変更を体系的にテストする: プロンプトの変更がパフォーマンスにどう影響するかを評価する。'
          ],
          source: 'https://platform.openai.com/docs/guides/prompt-engineering'
        }
      ]
    }
  ];

  const UnfoundModels = () => (
    <div className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mt-8 rounded-md shadow-sm">
      <p className="font-bold">ご指定のその他のモデルについて</p>
      <p>「GPT-O3」および「Gemini Pro 2.5」という名称のモデルに関する公式のプロンプトガイドは見つかりませんでした。これらの名称は、2025年7月26日現在、公式に発表されているものではないか、一般的な呼称とは異なる可能性があります。</p>
    </div>
  );

  return (
    <div className="bg-gray-50 font-sans p-4 sm:p-6 lg:p-8">
      <div className="max-w-7xl mx-auto">
        <header className="mb-8">
          <h1 className="text-3xl sm:text-4xl font-bold text-gray-800 text-center">主要AIモデル プロンプトエンジニアリングのコツ比較</h1>
          <p className="text-center text-gray-500 mt-2">公式情報に基づき、主要な推論モデルの効果的なプロンプト手法を整理しました。</p>
        </header>

        <div className="space-y-12">
          {models.map((model, index) => (
            <section key={index} className="bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-200">
              <div className="p-6 bg-gray-50 border-b border-gray-200">
                <h2 className="text-2xl font-bold text-gray-800">{model.name}</h2>
                <p className="text-sm text-gray-500 mt-1">提供: {model.logo}</p>
                <p className="mt-2 text-gray-600">{model.description}</p>
              </div>
              <div className="p-6 space-y-8">
                {model.techniques.map((tech, techIndex) => (
                  <div key={techIndex}>
                    <h3 className="text-xl font-semibold text-gray-700 mb-3">{tech.title}</h3>
                    {tech.type === 'special' && (
                      <div className="prose max-w-none text-gray-600">
                        <p>{tech.content} <a href={tech.source} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">出典</a></p>
                        {tech.examples && tech.examples.map((example, exIndex) => (
                          <div key={exIndex} className="mt-6 p-4 border rounded-lg bg-slate-50">
                            <h4 className="font-bold text-lg text-gray-800 mb-2">{example.title}</h4>
                            <div className="overflow-x-auto">
  <table className="min-w-full divide-y divide-gray-200 border">
  <thead className="bg-gray-100">
  <tr>
  {example.comparison.map((col, colIndex) => (
  <th key={colIndex} scope="col" className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{col.header}</th>
  ))}
  </tr>
  </thead>
  <tbody className="bg-white divide-y divide-gray-200">
  {example.comparison[0].items.map((_, rowIndex) => (
  <tr key={rowIndex}>
  {example.comparison.map((col, colIndex) => (
  <td key={colIndex} className={`px-4 py-3 text-sm text-gray-700 ${colIndex > 0 ? 'border-l' : ''}`}>{col.items[rowIndex]}</td>
  ))}
  </tr>
  ))}
  </tbody>
  </table>
                            </div>
                            <p className="text-right text-xs text-gray-500 mt-2">出典: <a href={example.source} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">Anthropic Docs</a></p>
                          </div>
                        ))}
                      </div>
                    )}
                    {tech.type === 'table' && (
                        <div className="overflow-x-auto">
                            <table className="min-w-full divide-y divide-gray-200 border rounded-lg">
  <thead className="bg-gray-100">
  <tr>
  {tech.headers.map(header => <th key={header} scope="col" className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{header}</th>)}
  </tr>
  </thead>
  <tbody className="bg-white divide-y divide-gray-200">
  {tech.rows.map((row, rowIndex) => (
  <tr key={rowIndex}>
  {row.map((cell, cellIndex) => <td key={cellIndex} className={`px-4 py-3 text-sm text-gray-700 whitespace-pre-wrap ${cellIndex > 0 ? 'border-l' : ''}`}>{cell}</td>)}
  </tr>
  ))}
  </tbody>
                            </table>
                            <p className="text-right text-xs text-gray-500 mt-2">出典: <a href={tech.source} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">Google AI Docs</a></p>
                        </div>
                    )}
                    {tech.type === 'list' && (
                        <ul className="list-disc list-inside space-y-2 text-gray-600">
                            {tech.items.map((item, itemIndex) => <li key={itemIndex}>{item}</li>)}
                            <p className="text-xs text-gray-500 mt-2">出典: <a href={tech.source} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">公式ドキュメント</a></p>
                        </ul>
                    )}
                  </div>
                ))}
              </div>
            </section>
          ))}
          <UnfoundModels />
        </div>
      </div>
    </div>
  );
}

export default App;