AI時代の競合分析：生成AIとエージェントで実現する自動化・高度化戦略

import React, { useState } from 'react';

const App = () => {
  const [activeTab, setActiveTab] = useState('frameworks');

  const frameworks = {
    swot: {
      title: 'SWOT分析',
      description: '企業の「強み(Strengths)」「弱み(Weaknesses)」「機会(Opportunities)」「脅威(Threats)」の4要素からビジネスを評価する手法。',
      source: 'https://blog.hubspot.com/marketing/swot-analysis',
      categories: [
        { name: '内部要因', bg: 'bg-blue-100', text: 'text-blue-800' },
        { name: '外部要因', bg: 'bg-green-100', text: 'text-green-800' },
      ],
      items: [
        {
          name: '強み (Strengths)',
          type: '内部要因',
          description: '競争優位性をもたらす独自の利点や能力。',
          example: 'Apple: 強力なブランド認知度、革新的な製品、製品間の相互接続性。',
          exampleSource: 'https://blog.hubspot.com/marketing/swot-analysis'
        },
        {
          name: '弱み (Weaknesses)',
          type: '内部要因',
          description: 'パフォーマンスを妨げる内部的な課題や欠点。',
          example: 'Apple: 高価格、クローズドなエコシステム、実験の欠如。',
          exampleSource: 'https://blog.hubspot.com/marketing/swot-analysis'
        },
        {
          name: '機会 (Opportunities)',
          type: '外部要因',
          description: 'ビジネスの成長に貢献しうる外部の状況やトレンド。',
          example: 'Apple: 流通チャネルの拡大、新製品ラインの創出、技術進歩。',
          exampleSource: 'https://blog.hubspot.com/marketing/swot-analysis'
        },
        {
          name: '脅威 (Threats)',
          type: '外部要因',
          description: 'ビジネスに悪影響を及ぼす可能性のある外部の要因。',
          example: 'Apple: 激しい競争（Samsungなど）、訴訟、国際問題。',
          exampleSource: 'https://blog.hubspot.com/marketing/swot-analysis'
        },
      ]
    },
    porters: {
      title: 'ポーターのファイブフォース分析',
      description: '業界の魅力度と収益性を決定づける5つの競争要因を分析するモデル。',
      source: 'https://www.cascade.app/blog/porters-5-forces',
      forces: [
        { name: '業界内の競争', description: '既存企業間の競争の激しさ。', example: 'Starbucks: 多数のコーヒーハウスが存在し、顧客の乗り換えコストが低い。 (強い力)', exampleSource: 'https://panmore.com/starbucks-coffee-five-forces-analysis-porters-model' },
        { name: '新規参入の脅威', description: '新しい企業が市場に参入する際の容易さ。', example: 'Starbucks: 事業運営コストが中程度であるため、新規参入は中程度の脅威。', exampleSource: 'https://panmore.com/starbucks-coffee-five-forces-analysis-porters-model' },
        { name: '代替品の脅威', description: '同じ顧客ニーズを異なる方法で満たす製品やサービスのリスク。', example: 'Starbucks: 自販機の飲料や自家製コーヒーなど、手頃な代替品が多数存在する。 (強い力)', exampleSource: 'https://panmore.com/starbucks-coffee-five-forces-analysis-porters-model' },
        { name: '買い手の交渉力', description: '顧客が価格引き下げや品質向上を要求する力。', example: 'Starbucks: 代替飲料の入手が容易で、乗り換えコストも低いため、顧客の力が強い。 (強い力)', exampleSource: 'https://panmore.com/starbucks-coffee-five-forces-analysis-porters-model' },
        { name: '供給者の交渉力', description: '原材料や部品の供給者が価格や品質に影響を与える力。', example: 'Starbucks: 供給者の多様性が限定的で、供給不足のリスクがあるため、中程度の力。', exampleSource: 'https://panmore.com/starbucks-coffee-five-forces-analysis-porters-model' },
      ]
    },
    pest: {
      title: 'PEST分析',
      description: '企業を取り巻く外部の「マクロ環境要因」を評価するための戦略的フレームワーク。',
      source: 'https://www.ebsco.com/research-starters/social-sciences-and-humanities/pest-analysis',
      factors: [
        { name: '政治 (Political)', description: 'データプライバシーや知的財産に関する規制の変更など。', color: 'bg-red-200' },
        { name: '経済 (Economic)', description: '経済成長、インフレ率、消費支出の動向など。', color: 'bg-green-200' },
        { name: '社会 (Social)', description: '持続可能性への意識の高まり、モバイルデバイスへの需要増など。', color: 'bg-blue-200' },
        { name: '技術 (Technological)', description: '人工知能(AI)やブロックチェーン技術の発展によるビジネスモデルの破壊。', color: 'bg-purple-200' },
      ],
      note: 'PEST分析で特定した外部環境の「機会」と「脅威」は、SWOT分析のインプットとして活用できます。',
      noteSource: 'https://www.wordstream.com/blog/ws/2017/12/20/swot-analysis'
    }
  };

  const aiTools = {
    searchEngines: {
      title: 'AI検索エンジンを活用した競合分析',
      description: 'Perplexity AIとChatGPTはそれぞれ異なる強みを持ち、両者を組み合わせることで効果的な分析が可能です。',
      source: 'https://aicompetence.org/deep-dive-perplexity-vs-chatgpt-in-research/',
      comparison: [
        { feature: '得意なこと', perplexity: 'データ分析、事実確認、研究統合', chatgpt: 'クリエイティブライティング、ブレインストーミング' },
        { feature: '情報の正確性', perplexity: '高い（情報源を引用）', chatgpt: '高いが、事実確認が必要な場合がある' },
        { feature: '最適な用途', perplexity: '学術研究、金融分析、技術文書作成', chatgpt: 'ブログ執筆、事業計画、ストーリーテリング' },
      ],
      workflow: [
        { step: 1, name: 'データ収集 (Perplexity AI)', description: '市場トレンド、競合の財務レポート、顧客レビューなど事実に基づいたデータを信頼できる情報源から迅速に収集。' },
        { step: 2, name: '分析・戦略立案 (ChatGPT)', description: '収集したデータを入力し、「このデータから競合の弱点は何か？」といった質問で洞察を引き出し、戦略を策定。' },
      ]
    },
    agents: {
      title: 'AIエージェントによる競合インテリジェンスの自動化',
      description: 'AIエージェントは、競合のウェブサイト、SNS、ニュースなどを24時間365日監視し、重要な変化があった際に自動でレポートを生成・通知します。',
      source: 'https://odsc.medium.com/agentic-systems-for-competitive-intelligence-enhancing-business-decision-making-81f591dadbdc',
      tools: [
        { name: 'Klue', description: 'リアルタイムの競合ディールインテリジェンスを提供。', source: 'https://klue.com/blog/klue-launches-compete-agent' },
        { name: 'Crayon', description: '競合のウェブサイト、価格、レビューなどオンライン上の変化追跡に特化。', source: 'https://www.panoramata.co/benchmark-marketing/ai-tools-competitor-analysis' },
        { name: 'Browse AI', description: 'コーディング不要でウェブサイトからデータをスクレイピングし、変更を監視。', source: 'https://www.browse.ai/' },
        { name: 'Relevance AI Agents', description: '市場データを分析し、競合を監視してトレンドを予測するデジタルチームメイトとして機能。', source: 'https://nogood.io/2025/01/31/ai-agents-for-marketers/' },
      ]
    }
  };

  const TabButton = ({ tabName, label }) => (
    <button
      className={`px-4 py-2 text-sm font-medium rounded-t-lg ${activeTab === tabName ? 'bg-gray-800 text-white' : 'bg-gray-200 text-gray-700 hover:bg-gray-300'}`}
      onClick={() => setActiveTab(tabName)}
    >
      {label}
    </button>
  );

  const SourceLink = ({ href, children }) => (
    <a href={href} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700 text-xs ml-2">[出典]</a>
  );

  return (
    <div className="min-h-screen bg-gray-100 p-4 sm:p-6 lg:p-8 font-sans">
      <div className="max-w-7xl mx-auto">
        <header className="text-center mb-8">
          <h1 className="text-4xl font-bold text-gray-800">AI時代の競合分析</h1>
          <p className="text-lg text-gray-600 mt-2">伝統的フレームワークとAI活用アプローチの統合</p>
        </header>

        <div className="mb-8">
          <div className="border-b border-gray-400">
            <nav className="-mb-px flex space-x-2">
              <TabButton tabName="frameworks" label="伝統的フレームワーク" />
              <TabButton tabName="ai" label="AI活用アプローチ" />
            </nav>
          </div>
        </div>

        <main>
          {activeTab === 'frameworks' && (
            <div id="frameworks" className="space-y-12">
              {/* SWOT Analysis */}
              <section className="bg-white p-6 rounded-lg shadow-md">
                <h2 className="text-2xl font-bold text-gray-800">{frameworks.swot.title}<SourceLink href={frameworks.swot.source} /></h2>
                <p className="text-gray-600 mt-1">{frameworks.swot.description}</p>
                <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                  {frameworks.swot.items.map(item => (
                    <div key={item.name} className={`p-4 rounded-lg ${frameworks.swot.categories.find(c => c.name === item.type).bg}`}>
                      <h3 className={`text-lg font-semibold ${frameworks.swot.categories.find(c => c.name === item.type).text}`}>{item.name} <span className="text-xs font-normal">({item.type})</span></h3>
                      <p className="text-gray-700 mt-2 text-sm">{item.description}</p>
                      <p className="text-gray-600 mt-3 text-sm italic">例: {item.example}<SourceLink href={item.exampleSource} /></p>
                    </div>
                  ))}
                </div>
              </section>

              {/* Porter's 5 Forces */}
              <section className="bg-white p-6 rounded-lg shadow-md">
                <h2 className="text-2xl font-bold text-gray-800">{frameworks.porters.title}<SourceLink href={frameworks.porters.source} /></h2>
                <p className="text-gray-600 mt-1">{frameworks.porters.description}</p>
                <div className="mt-6 space-y-4">
                  {frameworks.porters.forces.map(force => (
                    <div key={force.name} className="bg-gray-50 p-4 rounded-md">
                      <h3 className="font-semibold text-gray-700">{force.name}</h3>
                      <p className="text-sm text-gray-600">{force.description}</p>
                      <p className="text-sm text-gray-500 italic mt-1">Starbucksの事例: {force.example}<SourceLink href={force.exampleSource} /></p>
                    </div>
                  ))}
                </div>
              </section>

              {/* PEST Analysis */}
              <section className="bg-white p-6 rounded-lg shadow-md">
                <h2 className="text-2xl font-bold text-gray-800">{frameworks.pest.title}<SourceLink href={frameworks.pest.source} /></h2>
                <p className="text-gray-600 mt-1">{frameworks.pest.description}</p>
                <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                  {frameworks.pest.factors.map(factor => (
                    <div key={factor.name} className={`${factor.color} p-4 rounded-lg`}>
                      <h3 className="font-bold text-gray-800">{factor.name}</h3>
                      <p className="text-sm text-gray-700 mt-2">{factor.description}</p>
                    </div>
                  ))}
                </div>
                 <div className="mt-4 p-3 bg-yellow-100 text-yellow-800 rounded-md text-sm">
                  <p>{frameworks.pest.note}<SourceLink href={frameworks.pest.noteSource} /></p>
                </div>
              </section>
            </div>
          )}

          {activeTab === 'ai' && (
            <div id="ai" className="space-y-12">
               {/* AI Search Engines */}
              <section className="bg-white p-6 rounded-lg shadow-md">
                <h2 className="text-2xl font-bold text-gray-800">{aiTools.searchEngines.title}<SourceLink href={aiTools.searchEngines.source} /></h2>
                <p className="text-gray-600 mt-1">{aiTools.searchEngines.description}</p>
                <div className="mt-6 overflow-x-auto">
                    <table className="w-full text-sm text-left text-gray-600">
                        <thead className="text-xs text-gray-700 uppercase bg-gray-200">
                            <tr>
  <th scope="col" className="px-6 py-3">機能</th>
  <th scope="col" className="px-6 py-3">Perplexity AI</th>
  <th scope="col" className="px-6 py-3">ChatGPT</th>
                            </tr>
                        </thead>
                        <tbody>
                            {aiTools.searchEngines.comparison.map(row => (
  <tr key={row.feature} className="bg-white border-b">
  <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">{row.feature}</th>
  <td className="px-6 py-4">{row.perplexity}</td>
  <td className="px-6 py-4">{row.chatgpt}</td>
  </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
                <h3 className="text-xl font-bold text-gray-800 mt-8">ハイブリッドワークフロー</h3>
                <div className="mt-4 flex flex-col md:flex-row items-center gap-4">
                    {aiTools.searchEngines.workflow.map(item => (
                        <React.Fragment key={item.step}>
                            <div className="flex-1 bg-gray-100 p-4 rounded-lg text-center">
  <span className="text-2xl font-bold text-blue-600">{item.step}</span>
  <h4 className="font-semibold mt-2">{item.name}</h4>
  <p className="text-sm text-gray-600 mt-1">{item.description}</p>
                            </div>
                            {item.step < aiTools.searchEngines.workflow.length && <div className="text-2xl font-bold text-gray-400 mx-4 hidden md:block">→</div>}
                        </React.Fragment>
                    ))}
                </div>
              </section>
              
              {/* AI Agents */}
              <section className="bg-white p-6 rounded-lg shadow-md">
                <h2 className="text-2xl font-bold text-gray-800">{aiTools.agents.title}<SourceLink href={aiTools.agents.source} /></h2>
                <p className="text-gray-600 mt-1">{aiTools.agents.description}</p>
                <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
                    {aiTools.agents.tools.map(tool => (
                        <div key={tool.name} className="bg-indigo-50 p-4 rounded-md">
                            <h3 className="font-semibold text-indigo-800">{tool.name}<SourceLink href={tool.source}/></h3>
                            <p className="text-sm text-indigo-700 mt-1">{tool.description}</p>
                        </div>
                    ))}
                </div>
              </section>
            </div>
          )}
        </main>
      </div>
    </div>
  );
};

export default App;