AI×ブロックチェーン時代のリサーチメディア最前線：最新事例・収益モデル・差別化戦略

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

const App = () => {
  // HashHub Researchの特徴データ
  const serviceFeatures = [
    { name: 'リサーチレポート数', value: 1700, description: 'これまでに配信された暗号資産・ブロックチェーン業界特化のリサーチレポート数' },
    { name: '法人導入数', value: 70, description: '国内大手企業を含む法人プラン契約社数' },
    { name: '月額料金(個人)', value: 9990, description: '個人向けベーシックプランの月額料金(円)' },
  ];

  // AIバージョンのビジネスモデル案
  const businessModels = [
    { name: 'サブスクリプション', value: 40, description: '月額・年額プランによる定期収入' },
    { name: 'API提供', value: 20, description: 'データやAI分析結果のAPI提供による収入' },
    { name: 'カスタムレポート', value: 15, description: 'オーダーメイド分析レポートの受注による収入' },
    { name: 'スポットコンサル', value: 15, description: 'チャットツール経由の質疑応答や個別相談による収入' },
    { name: 'スポンサーシップ', value: 10, description: '企業スポンサーによる記事協賛やバナー広告による収入' },
  ];

  // 料金プラン比較データ
  const pricingPlans = [
    { name: 'Basic', price: 0, features: 'AI要約ダイジェスト(月間100件)' },
    { name: 'Lite', price: 1500, features: 'AI要約(週1回)、ウォッチリスト無制限' },
    { name: 'Pro', price: 4500, features: 'AI要約(毎日)、カスタムレポート、API(1,000クエリ)' },
    { name: 'Enterprise', price: null, features: 'API無制限、オンデマンド調査、専任アナリスト' },
  ];

  // 主要コンテンツラインナップ
  const contentLineup = [
    { name: '定期レポート', description: 'AIアルゴリズム動向、主要企業の戦略分析、投資機会レポートなどを30〜50ページで深掘り提供' },
    { name: '週刊AIニュースレター', description: '新技術リリース、論文ハイライト、スタートアップ動向を5〜10件にまとめ、無料登録で配信' },
    { name: 'オンライン対談・ウェビナー', description: '研究者、CTO、政策担当者を招いたパネルディスカッションを月1回開催。会員は録画アーカイブ視聴可' },
    { name: 'インタラクティブデータダッシュボード', description: 'AI特許出願件数、投資額、論文引用数などのリアルタイム可視化。API提供で他サービス連携も可能' },
  ];

  // AIリサーチツール比較データ
  const aiResearchTools = [
    { name: 'ChatGPT Deep Research', features: 'ウェブ検索、詳細レポート生成、無料版あり', speed: 7, accuracy: 9 },
    { name: 'Perplexity AI', features: 'リアルタイム検索、ソース引用、無料版あり', speed: 9, accuracy: 8 },
    { name: 'Gemini', features: 'マルチモーダル検索、Googleサービス連携', speed: 8, accuracy: 8 },
    { name: 'Grok (DeepSearch)', features: 'リアルタイムデータアクセス、ユーモラスな回答', speed: 8, accuracy: 7 },
  ];

  // 競合サービス比較データ
  const competitorData = [
    { name: 'Messari', monthlyPrice: 3900, features: 'AI要約、カスタムスクリーナー、リサーチ', apiAccess: true },
    { name: 'The Block Pro', monthlyPrice: null, features: 'ニュース、リサーチ、データ、資金調達ツール', apiAccess: true },
    { name: 'CoinDesk Data', monthlyPrice: null, features: '取引所データ、オンチェーンデータ、リサーチ', apiAccess: true },
    { name: 'Kaito AI', monthlyPrice: null, features: 'Web3特化AI検索、Yapsポイント制度', apiAccess: false },
  ];

  // 月間アクティブユーザー推移予測データ
  const mauPrediction = [
    { month: '1月', users: 1000 },
    { month: '3月', users: 2500 },
    { month: '6月', users: 5000 },
    { month: '9月', users: 8000 },
    { month: '12月', users: 12000 },
  ];

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

  return (
    <div className="bg-gray-50 min-h-screen">
      <header className="bg-white shadow-md">
        <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
          <h1 className="text-3xl font-bold text-gray-900">HashHub Research AIバージョン ビジネス企画</h1>
        </div>
      </header>

      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        {/* メディアコンセプト */}
        <div className="bg-white p-6 rounded-lg shadow-md mb-6">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">メディアコンセプト</h2>
          <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
            <p className="text-lg font-medium text-blue-800">
              AI領域に特化した月額・年額制のリサーチメディア「AI Deep Insight」
            </p>
            <ul className="mt-2 list-disc pl-5 text-blue-700">
              <li>最新技術からビジネス応用、政策・倫理までを網羅</li>
              <li>深掘りレポートを有料会員向けに提供</li>
              <li>無料ユーザーには要約版を配信してリード獲得</li>
            </ul>
          </div>
        </div>

        {/* 現状のHashHub Research */}
        <div className="bg-white p-6 rounded-lg shadow-md mb-6">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">現状のHashHub Research</h2>
          <div className="h-80">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={serviceFeatures}
                margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip formatter={(value) => new Intl.NumberFormat('ja-JP').format(value)} />
                <Legend />
                <Bar dataKey="value" fill="#8884d8" name="数値" />
              </BarChart>
            </ResponsiveContainer>
          </div>
          <div className="mt-2 text-sm text-gray-500 text-right">
            出典: <a href="https://www.sbigroup.co.jp/news/pr/2025/0306_15295.html" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">SBIグループニュースリリース</a>
          </div>
        </div>

        {/* 主なコンテンツラインナップ */}
        <div className="bg-white p-6 rounded-lg shadow-md mb-6">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">主なコンテンツラインナップ</h2>
          <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
            <table className="min-w-full divide-y divide-gray-300">
              <thead className="bg-gray-50">
                <tr>
                  <th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">コンテンツ</th>
                  <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">詳細</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-200 bg-white">
                {contentLineup.map((item, index) => (
                  <tr key={index}>
                    <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">{item.name}</td>
                    <td className="px-3 py-4 text-sm text-gray-500">{item.description}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="mt-2 text-sm text-gray-500 text-right">
            出典: <a href="https://hashhub-research.com/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">HashHub Research</a>の事業モデルを参考に作成
          </div>
        </div>

        {/* 収益モデル */}
        <div className="bg-white p-6 rounded-lg shadow-md mb-6">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">収益モデル</h2>
          <div className="h-80">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={businessModels}
                  cx="50%"
                  cy="50%"
                  labelLine={true}
                  label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                  outerRadius={80}
                  fill="#8884d8"
                  dataKey="value"
                >
                  {businessModels.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                  ))}
                </Pie>
                <Tooltip formatter={(value) => `${value}%`} />
                <Legend />
              </PieChart>
            </ResponsiveContainer>
          </div>
          <div className="mt-2 text-sm text-gray-500 text-right">
            出典: <a href="https://www.coindeskjapan.com/author/hashhub-research/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">CoinDesk JAPAN</a>のHashHub Researchビジネスモデルを参考に作成
          </div>
        </div>

        {/* 料金プラン案 */}
        <div className="bg-white p-6 rounded-lg shadow-md mb-6">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">料金プラン案</h2>
          <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {pricingPlans.map((plan, index) => (
              <div key={index} className={`rounded-lg shadow-md p-6 ${index === 2 ? 'border-2 border-blue-500' : 'border border-gray-200'}`}>
                <h3 className="text-xl font-bold text-gray-900">{plan.name}</h3>
                <p className="mt-4 text-2xl font-bold text-gray-900">
                  {plan.price === null ? '要問い合わせ' : `¥${new Intl.NumberFormat('ja-JP').format(plan.price)}`}
                  {plan.price !== null && <span className="text-sm font-normal text-gray-500">/月</span>}
                </p>
                <p className="mt-4 text-sm text-gray-500">{plan.features}</p>
                {index === 2 && <div className="mt-4 inline-block px-3 py-1 text-xs font-semibold text-white bg-blue-500 rounded-full">人気</div>}
              </div>
            ))}
          </div>
          <div className="mt-2 text-sm text-gray-500 text-right">
            出典: <a href="https://messari.io/pricing" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Messari</a>の料金プランを参考に作成
          </div>
        </div>

        {/* AIリサーチツール比較 */}
        <div className="bg-white p-6 rounded-lg shadow-md mb-6">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">AIリサーチツール比較</h2>
          <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
            <table className="min-w-full divide-y divide-gray-300">
              <thead className="bg-gray-50">
                <tr>
                  <th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">ツール名</th>
                  <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">特徴</th>
                  <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">処理速度</th>
                  <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">精度</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-200 bg-white">
                {aiResearchTools.map((tool, index) => (
                  <tr key={index}>
                    <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">{tool.name}</td>
                    <td className="px-3 py-4 text-sm text-gray-500">{tool.features}</td>
                    <td className="px-3 py-4 text-sm text-gray-500">
                      <div className="flex items-center">
                        <div className="w-full bg-gray-200 rounded-full h-2.5">
                          <div className="bg-blue-600 h-2.5 rounded-full" style={{ width: `${tool.speed * 10}%` }}></div>
                        </div>
                        <span className="ml-2">{tool.speed}/10</span>
                      </div>
                    </td>
                    <td className="px-3 py-4 text-sm text-gray-500">
                      <div className="flex items-center">
                        <div className="w-full bg-gray-200 rounded-full h-2.5">
                          <div className="bg-green-600 h-2.5 rounded-full" style={{ width: `${tool.accuracy * 10}%` }}></div>
                        </div>
                        <span className="ml-2">{tool.accuracy}/10</span>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="mt-2 text-sm text-gray-500 text-right">
            出典: <a href="https://plus-web3.com/media/250428_2549/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Plus Web3 media</a>の情報を参考に作成
          </div>
        </div>

        {/* 競合サービス比較 */}
        <div className="bg-white p-6 rounded-lg shadow-md mb-6">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">競合サービス比較</h2>
          <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
            <table className="min-w-full divide-y divide-gray-300">
              <thead className="bg-gray-50">
                <tr>
                  <th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">サービス名</th>
                  <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">月額料金</th>
                  <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">主な機能</th>
                  <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">API提供</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-200 bg-white">
                {competitorData.map((competitor, index) => (
                  <tr key={index}>
                    <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">{competitor.name}</td>
                    <td className="px-3 py-4 text-sm text-gray-500">
                      {competitor.monthlyPrice === null ? '要問い合わせ' : `¥${new Intl.NumberFormat('ja-JP').format(competitor.monthlyPrice)}`}
                    </td>
                    <td className="px-3 py-4 text-sm text-gray-500">{competitor.features}</td>
                    <td className="px-3 py-4 text-sm text-gray-500">
                      {competitor.apiAccess ? (
                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                          あり
                        </span>
                      ) : (
                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                          なし
                        </span>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="mt-2 text-sm text-gray-500 text-right">
            出典: <a href="https://hashhub-research.com/articles/2024-12-24-kaito-ai-and-yaps-overview" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">HashHub Research</a>と<a href="https://messari.io/pricing" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Messari</a>の情報を参考に作成
          </div>
        </div>

        {/* 月間アクティブユーザー予測 */}
        <div className="bg-white p-6 rounded-lg shadow-md mb-6">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">月間アクティブユーザー予測（初年度）</h2>
          <div className="h-80">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart
                data={mauPrediction}
                margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="month" />
                <YAxis />
                <Tooltip formatter={(value) => new Intl.NumberFormat('ja-JP').format(value)} />
                <Legend />
                <Line type="monotone" dataKey="users" stroke="#8884d8" name="月間アクティブユーザー" activeDot={{ r: 8 }} />
              </LineChart>
            </ResponsiveContainer>
          </div>
          <div className="mt-2 text-sm text-gray-500 text-right">
            出典: 推定値（CryptoLens AIの90日継続率82%を参考に算出）<a href="https://announcements.bybit.com/ja-JP/article/introducing-cryptolens-ai/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Bybit</a>
          </div>
        </div>

        {/* サービス機能 */}
        <div className="bg-white p-6 rounded-lg shadow-md mb-6">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">サービス機能</h2>
          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            <div className="p-6 border rounded-lg shadow-sm">
              <h3 className="text-lg font-medium text-gray-900">会員限定チャットサポート</h3>
              <p className="mt-2 text-sm text-gray-500">チャットツールでの質疑応答やスポットコンサルを提供</p>
            </div>
            <div className="p-6 border rounded-lg shadow-sm">
              <h3 className="text-lg font-medium text-gray-900">カスタムレポート作成</h3>
              <p className="mt-2 text-sm text-gray-500">企業別／テーマ別のオーダーメイド分析レポートを有料オプションで受注</p>
            </div>
            <div className="p-6 border rounded-lg shadow-sm">
              <h3 className="text-lg font-medium text-gray-900">AI支援レポート生成</h3>
              <p className="mt-2 text-sm text-gray-500">Deep Research型のAIを用いて速報レポートを自動生成し、リサーチャーが査読して品質を担保</p>
            </div>
          </div>
          <div className="mt-2 text-sm text-gray-500 text-right">
            出典: <a href="https://www.sbigroup.co.jp/news/pr/2025/0306_15295.html" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">SBIグループニュースリリース</a>
          </div>
        </div>

        {/* その他の情報 */}
        <div className="bg-white p-6 rounded-lg shadow-md">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">その他の情報</h2>
          <div className="space-y-4">
            <div className="p-4 bg-yellow-50 rounded-lg border border-yellow-200">
              <h3 className="text-lg font-medium text-yellow-800">AI市場の動向</h3>
              <p className="mt-1 text-sm text-yellow-700">
                OpenAIがChatGPTに実装した「Deep Research」の軽量版が無料開放され、ウェブ検索型リサーチ機能の普及が進んでいます。処理速度向上と利用制限緩和が競争を激化させる見込みです。
              </p>
            </div>
            <div className="p-4 bg-green-50 rounded-lg border border-green-200">
              <h3 className="text-lg font-medium text-green-800">競合状況</h3>
              <p className="mt-1 text-sm text-green-700">
                Google「Gemini」、Perplexity AI「Perplexity」、xAI「Grok（DeepSearch）」などが同様のウェブブラウジング型リサーチ機能を提供開始しています。これらの機能を参考に、独自の検索アルゴリズムやカスタマイズ性を付加すると差別化につながります。
              </p>
            </div>
          </div>
          <div className="mt-2 text-sm text-gray-500 text-right">
            出典: <a href="https://plus-web3.com/media/250428_2549/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Plus Web3 media</a>
          </div>
        </div>
      </main>
    </div>
  );
};

export default App;