Google Workspace×Claude Research：ビジネスAI検索の新標準を徹底解説！GeminiやChatGPTとの比較は？

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

const App = () => {
  // Claudeの新機能「Research」の主な特徴データ
  const featureData = [
    { name: 'エージェント型リサーチ', description: '複数の検索を自律的に実行し、次に調査すべき内容も自分で判断' },
    { name: 'Google Workspace連携', description: 'Gmail、Googleカレンダー、Googleドキュメントと連携し業務データを横断的に検索・分析' },
    { name: '引用付き回答', description: '情報源が明記され、ユーザー自身が情報の正確性を確認可能' },
    { name: '高速レスポンス', description: '1～5分以内に高品質かつ包括的な回答を提供（ChatGPTの最大30分と比較）' },
    { name: 'カタログ化機能', description: 'Enterprise向けに組織内ドキュメントの専門インデックスを活用した検索機能' }
  ];

  // 利用可能なプランと提供地域データ
  const planData = [
    { name: 'Max', price: '$100-200/月', research: true, workspace: true },
    { name: 'Team', price: '$25-30/月/ユーザー', research: true, workspace: true },
    { name: 'Enterprise', price: '要問合せ', research: true, workspace: true },
    { name: 'Pro', price: '$20/月', research: '予定', workspace: true },
    { name: '無料', price: '$0', research: false, workspace: false }
  ];

  // 他社AIとの比較データ
  const comparisonData = [
    { name: 'Claude', speed: 5, workspaceIntegration: 5, citation: 5, autonomy: 5 },
    { name: 'ChatGPT', speed: 2, workspaceIntegration: 3, citation: 4, autonomy: 4 },
    { name: 'Gemini', speed: 3, workspaceIntegration: 4, citation: 4, autonomy: 3 },
    { name: 'Perplexity', speed: 4, workspaceIntegration: 2, citation: 4, autonomy: 3 }
  ];

  // ユーザー評価の分布データ（推定値）
  const userRatingData = [
    { name: '業務効率化', value: 35 },
    { name: '情報統合力', value: 25 },
    { name: '引用・信頼性', value: 20 },
    { name: 'スピード', value: 15 },
    { name: 'UI/UX', value: 5 }
  ];

  const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8'];

  // 具体的な活用例データ
  const useCaseData = [
    {
      title: '会議準備・フォローアップ',
      description: 'メールと議事録から要点・タスクを自動抽出・検索',
      examples: [
        '「来週の〇〇プロジェクト定例会議に向けて、関連する過去の議事録と最新のメールスレッドを要約して」',
        '「□□会議に関するメールから、担当者別のアクションアイテムをリストアップして」'
      ]
    },
    {
      title: '競合調査・市場分析',
      description: '社内外データを統合したレポートを数分で作成',
      examples: [
        '「競合企業A社の最新動向について、Webニュースと社内の関連ドキュメントをまとめて分析レポートを作成して」',
        '「業界の最新トレンドについて、過去6ヶ月の社内レポートとウェブ情報を統合して要約して」'
      ]
    },
    {
      title: '情報集約',
      description: '散らばったプロジェクト情報を横断検索し、即座に状況把握',
      examples: [
        '「〇〇プロジェクトに関する過去の決定事項をすべて教えて」',
        '「あの件、どうなってる？（文脈を理解して関連情報を提示）」'
      ]
    }
  ];

  return (
    <div className="bg-gray-50 min-h-screen p-6">
      <header className="max-w-6xl mx-auto mb-10">
        <h1 className="text-3xl font-bold text-center text-indigo-800 mb-2">AnthropicのClaudeの新しい検索機能「Research」</h1>
        <p className="text-center text-gray-600">ユーザーの感想・評判・使い方の総合分析</p>
      </header>

      <main className="max-w-6xl mx-auto">
        {/* 概要セクション */}
        <section className="bg-white rounded-lg shadow-md p-6 mb-8">
          <h2 className="text-2xl font-semibold text-indigo-700 mb-4">Research機能の概要</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="bg-indigo-50 p-4 rounded-lg">
              <h3 className="font-semibold text-indigo-700 mb-2">主な特徴</h3>
              <ul className="space-y-2">
                {featureData.map((feature, index) => (
                  <li key={index} className="flex items-start">
                    <span className="inline-flex items-center justify-center h-6 w-6 rounded-full bg-indigo-600 text-white text-sm mr-2 flex-shrink-0">
                      {index + 1}
                    </span>
                    <div>
                      <span className="font-medium">{feature.name}:</span> {feature.description}
                    </div>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <h3 className="font-semibold text-indigo-700 mb-2">提供状況</h3>
              <div className="overflow-x-auto">
                <table className="min-w-full bg-white border border-gray-200">
                  <thead>
                    <tr>
                      <th className="py-2 px-4 border-b border-gray-200 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">プラン</th>
                      <th className="py-2 px-4 border-b border-gray-200 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">価格</th>
                      <th className="py-2 px-4 border-b border-gray-200 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Research</th>
                      <th className="py-2 px-4 border-b border-gray-200 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Workspace連携</th>
                    </tr>
                  </thead>
                  <tbody>
                    {planData.map((plan, index) => (
                      <tr key={index} className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}>
                        <td className="py-2 px-4 border-b border-gray-200">{plan.name}</td>
                        <td className="py-2 px-4 border-b border-gray-200">{plan.price}</td>
                        <td className="py-2 px-4 border-b border-gray-200">
                          {plan.research === true ? (
                            <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                              利用可能
                            </span>
                          ) : plan.research === '予定' ? (
                            <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                              予定
                            </span>
                          ) : (
                            <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                              利用不可
                            </span>
                          )}
                        </td>
                        <td className="py-2 px-4 border-b border-gray-200">
                          {plan.workspace ? (
                            <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                              利用可能
                            </span>
                          ) : (
                            <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                              利用不可
                            </span>
                          )}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <p className="text-sm text-gray-500 mt-2">
                提供地域: 米国・日本・ブラジル（ベータ版）
                <br />
                出典: <a href="https://www.zdnet.com/article/claude-ai-adds-two-powerful-new-features-but-youll-have-to-pay-to-use-them/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">ZDNET</a>、
                <a href="https://bgr.com/tech/claudes-big-upgrade-supposedly-does-deep-research-faster-than-chatgpt/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">BGR</a>
              </p>
            </div>
          </div>
        </section>

        {/* 他社AIとの比較セクション */}
        <section className="bg-white rounded-lg shadow-md p-6 mb-8">
          <h2 className="text-2xl font-semibold text-indigo-700 mb-4">他社AIとの比較</h2>
          <div className="mb-4">
            <ResponsiveContainer width="100%" height={300}>
              <BarChart
                data={comparisonData}
                margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis domain={[0, 5]} />
                <Tooltip />
                <Legend />
                <Bar dataKey="speed" name="速度" fill="#8884d8" />
                <Bar dataKey="workspaceIntegration" name="Workspace連携" fill="#82ca9d" />
                <Bar dataKey="citation" name="引用・検証性" fill="#ffc658" />
                <Bar dataKey="autonomy" name="自律性" fill="#ff8042" />
              </BarChart>
            </ResponsiveContainer>
            <p className="text-sm text-gray-500 text-center">
              タイトル: 主要AI検索機能の比較（5点満点、推定値）<br />
              出典: <a href="https://the-decoder.com/anthropics-ai-assistant-claude-gets-agent-based-research-and-google-workspace-integration/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">The Decoder</a>、
              <a href="https://bgr.com/tech/claudes-big-upgrade-supposedly-does-deep-research-faster-than-chatgpt/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">BGR</a>の情報を基に作成
            </p>
          </div>
          <div className="bg-indigo-50 p-4 rounded-lg">
            <h3 className="font-semibold text-indigo-700 mb-2">Claudeの強み</h3>
            <ul className="space-y-2">
              <li className="flex items-start">
                <span className="inline-flex items-center justify-center h-6 w-6 rounded-full bg-indigo-600 text-white text-sm mr-2 flex-shrink-0">✓</span>
                <div>
                  <span className="font-medium">圧倒的な「即応性」:</span> 1～5分という短時間で高品質な回答を提供（ChatGPTの最大30分と比較して大きなアドバンテージ）
                </div>
              </li>
              <li className="flex items-start">
                <span className="inline-flex items-center justify-center h-6 w-6 rounded-full bg-indigo-600 text-white text-sm mr-2 flex-shrink-0">✓</span>
                <div>
                  <span className="font-medium">強力な「情報統合力」:</span> Google Workspaceとの深い連携により、ユーザーの業務データを横断的に検索・分析
                </div>
              </li>
              <li className="flex items-start">
                <span className="inline-flex items-center justify-center h-6 w-6 rounded-full bg-indigo-600 text-white text-sm mr-2 flex-shrink-0">✓</span>
                <div>
                  <span className="font-medium">「エージェント型」アプローチ:</span> AIが自律的に調査計画を立て、複数の検索を並行・連続実行し、次に何を検索すべきかを判断
                </div>
              </li>
            </ul>
          </div>
        </section>

        {/* ユーザー評価セクション */}
        <section className="bg-white rounded-lg shadow-md p-6 mb-8">
          <h2 className="text-2xl font-semibold text-indigo-700 mb-4">ユーザー評価のポイント</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <ResponsiveContainer width="100%" height={300}>
                <PieChart>
                  <Pie
                    data={userRatingData}
                    cx="50%"
                    cy="50%"
                    labelLine={true}
                    label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                    outerRadius={80}
                    fill="#8884d8"
                    dataKey="value"
                  >
                    {userRatingData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                    ))}
                  </Pie>
                  <Tooltip />
                </PieChart>
              </ResponsiveContainer>
              <p className="text-sm text-gray-500 text-center">
                タイトル: Claude Research機能の高評価ポイント（推定値）<br />
                出典: <a href="https://www.mirrorreview.com/news/anthropic-claude-ai/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Mirror Review</a>、
                <a href="https://bgr.com/tech/claudes-big-upgrade-supposedly-does-deep-research-faster-than-chatgpt/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">BGR</a>の情報を基に作成
              </p>
            </div>
            <div className="bg-indigo-50 p-4 rounded-lg">
              <h3 className="font-semibold text-indigo-700 mb-2">ユーザーの声</h3>
              <ul className="space-y-3">
                <li className="border-l-4 border-indigo-500 pl-4 py-1">
                  「手作業での情報検索から解放された。メールの山を掘り返したり、複数のドキュメントを読み比べたりしていた時間が、AIへの簡単な指示一つで済むようになった」
                </li>
                <li className="border-l-4 border-green-500 pl-4 py-1">
                  「まるで専属アシスタント。ユーザーのスケジュールやプロジェクトの文脈を理解し、常に状況に合わせた的確なサポートを提供してくれる」
                </li>
                <li className="border-l-4 border-yellow-500 pl-4 py-1">
                  「引用付きで回答が得られるので安心。AIの回答を鵜呑みにせず、自分でファクトチェックできる透明性が業務での活用に不可欠」
                </li>
                <li className="border-l-4 border-red-500 pl-4 py-1">
                  「スピードと品質のバランスが優れている。複雑な調査依頼であっても、業務フローを中断することなくAIのサポートを受けられる」
                </li>
              </ul>
              <p className="text-sm text-gray-500 mt-2">
                出典: <a href="https://www.mirrorreview.com/news/anthropic-claude-ai/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Mirror Review</a>、
                <a href="https://www.theverge.com/ai-artificial-intelligence/648595/anthropic-claude-research-google-workplace" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">The Verge</a>
              </p>
            </div>
          </div>
        </section>

        {/* 具体的な使い方セクション */}
        <section className="bg-white rounded-lg shadow-md p-6 mb-8">
          <h2 className="text-2xl font-semibold text-indigo-700 mb-4">具体的な使い方</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {useCaseData.map((useCase, index) => (
              <div key={index} className="bg-indigo-50 p-4 rounded-lg">
                <h3 className="font-semibold text-indigo-700 mb-2">{useCase.title}</h3>
                <p className="text-gray-700 mb-3">{useCase.description}</p>
                <h4 className="font-medium text-indigo-600 mb-1">使用例:</h4>
                <ul className="space-y-2">
                  {useCase.examples.map((example, i) => (
                    <li key={i} className="text-sm bg-white p-2 rounded border border-indigo-100">
                      {example}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
          <p className="text-sm text-gray-500 mt-4 text-center">
            出典: <a href="https://www.mirrorreview.com/news/anthropic-claude-ai/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Mirror Review</a>、
            <a href="https://the-decoder.com/anthropics-ai-assistant-claude-gets-agent-based-research-and-google-workspace-integration/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">The Decoder</a>
          </p>
        </section>

        {/* 注意点セクション */}
        <section className="bg-white rounded-lg shadow-md p-6">
          <h2 className="text-2xl font-semibold text-indigo-700 mb-4">注意点と今後の展望</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="bg-red-50 p-4 rounded-lg">
              <h3 className="font-semibold text-red-700 mb-2">注意すべき点</h3>
              <ul className="space-y-2">
                <li className="flex items-start">
                  <span className="inline-flex items-center justify-center h-6 w-6 rounded-full bg-red-600 text-white text-sm mr-2 flex-shrink-0">!</span>
                  <div>
                    <span className="font-medium">ハルシネーションリスク:</span> AIが事実に基づかない情報や誤った情報を生成する可能性があり、引用元の確認が重要
                  </div>
                </li>
                <li className="flex items-start">
                  <span className="inline-flex items-center justify-center h-6 w-6 rounded-full bg-red-600 text-white text-sm mr-2 flex-shrink-0">!</span>
                  <div>
                    <span className="font-medium">利用可能な地域が限定:</span> 現状では米国・日本・ブラジルのみで利用可能
                  </div>
                </li>
                <li className="flex items-start">
                  <span className="inline-flex items-center justify-center h-6 w-6 rounded-full bg-red-600 text-white text-sm mr-2 flex-shrink-0">!</span>
                  <div>
                    <span className="font-medium">個人向けGoogleアカウント非対応:</span> Google Workspace連携は個人向けGoogleアカウントでは利用できない
                  </div>
                </li>
              </ul>
            </div>
            <div className="bg-green-50 p-4 rounded-lg">
              <h3 className="font-semibold text-green-700 mb-2">今後の展望</h3>
              <ul className="space-y-2">
                <li className="flex items-start">
                  <span className="inline-flex items-center justify-center h-6 w-6 rounded-full bg-green-600 text-white text-sm mr-2 flex-shrink-0">→</span>
                  <div>
                    <span className="font-medium">Proプランへの展開:</span> 今後、より手頃な月額$20のProプランにも機能提供予定
                  </div>
                </li>
                <li className="flex items-start">
                  <span className="inline-flex items-center justify-center h-6 w-6 rounded-full bg-green-600 text-white text-sm mr-2 flex-shrink-0">→</span>
                  <div>
                    <span className="font-medium">コンテンツソースの拡充:</span> 今後数週間で利用可能なコンテンツソースの拡充や、より深いリサーチ能力の追加を予定
                  </div>
                </li>
                <li className="flex items-start">
                  <span className="inline-flex items-center justify-center h-6 w-6 rounded-full bg-green-600 text-white text-sm mr-2 flex-shrink-0">→</span>
                  <div>
                    <span className="font-medium">音声アシスタント機能の追加:</span> 音声アシスタント機能の追加も噂されており、より多様なインターフェースでの使い方が可能に
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <p className="text-sm text-gray-500 mt-4 text-center">
            出典: <a href="https://bgr.com/tech/claudes-big-upgrade-supposedly-does-deep-research-faster-than-chatgpt/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">BGR</a>、
            <a href="https://the-decoder.com/anthropics-ai-assistant-claude-gets-agent-based-research-and-google-workspace-integration/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">The Decoder</a>、
            <a href="https://www.theverge.com/ai-artificial-intelligence/648595/anthropic-claude-research-google-workplace" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">The Verge</a>
          </p>
        </section>
      </main>

      <footer className="max-w-6xl mx-auto mt-10 text-center text-gray-500 text-sm">
        <p>データ出典: <a href="https://www.anthropic.com/news/research" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Anthropic公式</a>、
        <a href="https://www.mirrorreview.com/news/anthropic-claude-ai/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Mirror Review</a>、
        <a href="https://bgr.com/tech/claudes-big-upgrade-supposedly-does-deep-research-faster-than-chatgpt/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">BGR</a>、
        <a href="https://the-decoder.com/anthropics-ai-assistant-claude-gets-agent-based-research-and-google-workspace-integration/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">The Decoder</a>、
        <a href="https://www.theverge.com/ai-artificial-intelligence/648595/anthropic-claude-research-google-workplace" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">The Verge</a>、
        <a href="https://www.zdnet.com/article/claude-ai-adds-two-powerful-new-features-but-youll-have-to-pay-to-use-them/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">ZDNET</a>
        </p>
        <p className="mt-2">作成日: 2025-04-17</p>
      </footer>
    </div>
  );
};

export default App;