生成AIの精度を劇的に向上！明日から使えるプロンプトフレームワーク徹底解説

import React, { useState } from 'react';

const frameworks = [
  {
    id: 'CRAFT',
    name: 'CRAFT',
    elements: 'Context, Role, Action, Format, Target',
    description: '汎用性が高く、具体的な指示を構造化しやすい。ビジネスシーンでの資料作成やアイデア出しに向いています。',
    sourceUrl: 'https://tech108.firenium.com/craft-framework/',
    sourceName: 'Tech108',
    example: {
      title: '新商品のキャッチコピー作成',
      context: '当社は、健康志向の30代男性向けに新しいプロテイン商品を発売します。',
      role: 'あなたは経験豊富なコピーライターです。',
      action: 'この新商品のキャッチコピーを3つ提案してください。',
      format: '提案は、箇条書きで、それぞれのキャッチコピーに簡単な説明を添えてください。',
      target: 'ターゲット顧客は、仕事で忙しく、手軽に栄養補給をしたいと考えています。'
    }
  },
  {
    id: 'RICE',
    name: 'RICE',
    elements: 'Role, Instruction, Context, Example',
    description: 'シンプルで初心者にも使いやすいフレームワークです。具体的な例を示すことで、AIの理解を深めることができます。',
    sourceUrl: 'https://www.ntt.com/bizon/glossary/e-0309.html',
    sourceName: 'NTT Com',
    example: {
      title: '新商品のキャッチコピー考案',
      role: 'あなたは、数々のヒット商品を生み出してきた天才コピーライターです。',
      instruction: '新発売する「睡眠サポートドリンク G\'Night」のキャッチコピーを10個提案してください。',
      context: '商品特徴：天然ハーブ配合、ノンカフェイン、リラックス効果のある香り。ターゲット：ストレスで寝つきが悪い20代〜40代男女。',
      example_text: '例1：「がんばるあなたの夜に、おやすみの新習慣。」\n例2：「脳を休めるスイッチ、見つけませんか？」'
    }
  },
    {
    id: 'CERO',
    name: 'CERO',
    elements: 'Goal, Execution, Restrictions, Output',
    description: 'シンプルで汎用性が高く、特にビジネス文書作成など目的が明確なタスクに適しています。AIへの指示を簡潔に整理できます。',
    sourceUrl: 'https://weel.co.jp/media/chatgpt/chatgpt-prompt-framework/',
    sourceName: 'weel',
    example: {
      title: '新サービスのプレスリリース作成',
      goal: '当社が開発したAI議事録作成ツール「Transcribe Pro」のプレスリリースを作成する。',
      execution: '以下の特徴を盛り込み、メディア関係者の興味を引くような魅力的な文章を作成してください。\n- 主要機能：リアルタイム文字起こし、話者分離、要約生成、タスク抽出\n- 対応言語：日本語、英語\n- ターゲット：業務効率化を目指す全てのビジネスパーソン',
      restrictions: '- 文字数は800字程度に収める。\n- 専門用語は避け、分かりやすい言葉で説明する。\n- 誇張した表現は使わない。',
      output: '- タイトル\n- リード文\n- 本文\n- 会社概要\n上記の構成で出力してください。'
    }
  },
  {
    id: 'CO-STAR',
    name: 'CO-STAR',
    elements: 'Context, Objective, Style, Tone, Audience, Response',
    description: 'ライティングやコンテンツ作成に特化しており、出力の文体や雰囲気を細かく指定したい場合に最適です。',
    sourceUrl: 'https://weel.co.jp/media/chatgpt/chatgpt-prompt-framework/',
    sourceName: 'weel',
    example: {
      title: 'サステナビリティに関するブログ記事作成',
      context: '企業の社会的責任（CSR）に関する社内向けブログ記事を作成します。',
      objective: '従業員にサステナビリティ活動の重要性を理解してもらい、日々の業務での実践を促す。',
      style: 'ストーリーテリングを取り入れた、共感を呼ぶスタイルで。',
      tone: 'ポジティブで、希望が感じられるトーン。',
      audience: '社内の全従業員（専門知識がない従業員も含む）。',
      response: 'ブログ記事として、タイトル、導入、具体例、まとめの構成で800字程度の文章を生成してください。'
    }
  }
];

const otherTechniques = [
  {
    name: '思考の連鎖 (Chain-of-Thought)',
    description: '「ステップバイステップで考えてください」のようにAIに思考のプロセスを記述させる手法。複雑な論理的推論や計算問題の正答率が向上します。',
    sourceUrl: 'https://www.promptingguide.ai/jp',
    sourceName: 'Prompt Engineering Guide'
  },
  {
    name: 'フューショット・プロンプティング (Few-shot Prompting)',
    description: 'AIにいくつかの回答例（ショット）を提示することで、出力の精度と形式を向上させる手法。特定のスタイルを求める場合に有効です。',
    sourceUrl: 'https://dryaki.gicloud.co.jp/articles/prompt-design',
    sourceName: 'GI Cloud エンジニアブログ'
  },
  {
    name: '明確な構文の使用',
    description: '句読点、見出し、セクションマーカーなどを用いてプロンプトの構造を明確にすることで、AIへの意図伝達を助け、出力の質を向上させます。',
    sourceUrl: 'https://learn.microsoft.com/en-us/azure/ai-foundry/openai/concepts/prompt-engineering',
    sourceName: 'Microsoft Azure Docs'
  }
];

const App = () => {
  const [activeTab, setActiveTab] = useState(frameworks[0].id);

  const activeFramework = frameworks.find(f => f.id === activeTab);

  return (
    <div className="bg-gray-50 font-sans p-4 md:p-8">
      <div className="max-w-4xl mx-auto">
        <header className="mb-8">
          <h1 className="text-3xl font-bold text-gray-800 mb-2">プロンプトフレームワーク・ガイド</h1>
          <p className="text-gray-600">生成AIから質の高い応答を引き出すための、代表的なプロンプトフレームワークとテクニックをまとめました。</p>
        </header>

        <section className="bg-white p-6 rounded-lg shadow-md">
          <h2 className="text-2xl font-bold text-gray-800 mb-4">主要フレームワーク</h2>
          <div className="border-b border-gray-200 mb-4">
            <nav className="-mb-px flex space-x-4 overflow-x-auto" aria-label="Tabs">
              {frameworks.map((framework) => (
                <button
                  key={framework.id}
                  onClick={() => setActiveTab(framework.id)}
                  className={`${
                    activeTab === framework.id
                      ? 'border-blue-500 text-blue-600'
                      : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                  } whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm transition-colors duration-200`}
                >
                  {framework.name}
                </button>
              ))}
            </nav>
          </div>

          {activeFramework && (
            <div className="bg-blue-50 p-4 rounded-md">
              <h3 className="font-bold text-lg text-gray-700">{activeFramework.name} フレームワーク</h3>
              <p className="text-sm text-gray-600 mt-1"><span className="font-semibold">構成要素:</span> {activeFramework.elements}</p>
              <p className="text-sm text-gray-600 mt-2">{activeFramework.description} 
                <a href={activeFramework.sourceUrl} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700 ml-1">[出典]</a>
              </p>
              
              <div className="mt-4 pt-4 border-t border-gray-200">
                 <h4 className="font-semibold text-gray-700 mb-2">具体例：{activeFramework.example.title}</h4>
                 <div className="text-xs text-gray-800 space-y-2 bg-white p-3 rounded">
                    {Object.entries(activeFramework.example).map(([key, value]) => {
                      if(key === 'title') return null;
                      const formattedKey = key.charAt(0).toUpperCase() + key.slice(1).replace('_text', '');
                      return (
                         <p key={key}><strong className="font-mono bg-gray-200 py-0.5 px-1 rounded">{formattedKey}:</strong> <span className="whitespace-pre-wrap">{value}</span></p>
                      )
                    })}
                 </div>
              </div>
            </div>
          )}
        </section>

        <section className="mt-8">
          <h2 className="text-2xl font-bold text-gray-800 mb-4">その他の主要テクニック</h2>
          <div className="grid md:grid-cols-3 gap-4">
            {otherTechniques.map(tech => (
              <div key={tech.name} className="bg-white p-4 rounded-lg shadow-md">
                <h3 className="font-semibold text-gray-800">{tech.name}</h3>
                <p className="text-sm text-gray-600 mt-2">{tech.description}</p>
                 <a href={tech.sourceUrl} target="_blank" rel="noopener noreferrer" className="text-xs text-blue-500 underline hover:text-blue-700 mt-2 inline-block">出典: {tech.sourceName}</a>
              </div>
            ))}
          </div>
        </section>

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

export default App;