a16z最新版「生成AIアプリTop100」から読み解く市場の6大潮流

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

const allStars = [
  { name: 'ChatGPT', category: '汎用アシスタンス' },
  { name: 'Perplexity', category: '汎用アシスタンス' },
  { name: 'Poe', category: '汎用アシスタンス' },
  { name: 'Character AI', category: 'コンパニオンシップ' },
  { name: 'Midjourney', category: '画像生成' },
  { name: 'Leonardo', category: '画像生成' },
  { name: 'Veed', category: '画像・動画編集' },
  { name: 'Cutout Pro', category: '画像・動画編集' },
  { name: 'Eleven Labs', category: '音声生成' },
  { name: 'Photoroom', category: '生産性ツール' },
  { name: 'Gamma', category: '生産性ツール' },
  { name: 'Quillbot', category: '生産性ツール' },
  { name: 'Civitai', category: 'モデルホスティング' },
  { name: 'HuggingFace', category: 'モデルホスティング' },
];

const llmWebData = [
  { name: 'ChatGPT', value: 100, rank: 1 },
  { name: 'Gemini', value: 12, rank: 2 },
  { name: 'Grok', value: 8, rank: 4 },
  { name: 'Perplexity', value: 6, rank: 'N/A' },
  { name: 'DeepSeek', value: 2, rank: 'N/A' },
  { name: 'Meta AI', value: 1, rank: 46 },
];

const modelStrategyData = [
  { name: 'API/OSS利用', value: 7 },
  { name: '独自モデル保有', value: 5 },
  { name: 'アグリゲーター', value: 2 },
];

const COLORS = ['#8884d8', '#82ca9d', '#ffc658'];

const Section = ({ title, children }) => (
  <div className="bg-white p-6 rounded-lg shadow-lg mb-8">
    <h2 className="text-2xl font-bold mb-4 text-gray-800 border-b-2 pb-2">{title}</h2>
    <div className="text-gray-700">{children}</div>
  </div>
);

const TrendCard = ({ title, children }) => (
    <div className="bg-gray-50 rounded-lg p-4 shadow-md">
        <h3 className="font-bold text-lg text-indigo-600">{title}</h3>
        <p className="text-gray-600 mt-2">{children}</p>
    </div>
);

const App = () => {
  return (
    <div className="bg-gray-100 min-h-screen p-4 sm:p-8 font-sans">
      <header className="text-center mb-10">
        <h1 className="text-4xl sm:text-5xl font-extrabold text-gray-900">a16z最新版「生成AIアプリTop100」市場トレンド分析</h1>
        <p className="text-lg text-gray-600 mt-2">
          出典: <a href="https://a16z.com/100-gen-ai-apps-5/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">The Top 100 Gen AI Consumer Apps - 5th Edition</a>
        </p>
      </header>

      <div className="max-w-7xl mx-auto">
        <Section title="主要トレンド">
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <TrendCard title="エコシステムの安定化">
                    ウェブ版の新規参入企業は17社から11社に減少し、市場の成熟を示唆。一方、モバイルでは模倣アプリ取締強化により、新規参入が14社と活発化しています。
                </TrendCard>
                <TrendCard title="Googleの躍進">
                    Geminiがウェブで2位、モバイルでもChatGPTの約半分のMAUを獲得。AI StudioやNotebookLMなど計4製品がランクインし、存在感を増しています。
                </TrendCard>
                <TrendCard title="中国発アプリの台頭">
                    国内市場向け(Quark, Doubao)と、グローバル市場向け(Kling, Cutout Pro)の両方で影響力が拡大。モバイルTop50のうち22が中国開発と推定されています。
                </TrendCard>
                <TrendCard title="「vibe coding」の本格化">
                    AIによるアプリ生成プラットフォーム(Lovable, Replit)がリスト入り。一部では収益維持率100%超を記録し、持続的なビジネスモデルの可能性を示しています。
                </TrendCard>
                <TrendCard title="「オールスター」企業の継続性">
                    14社が5回連続でTop50にランクイン。多様なカテゴリを代表し、市場の中核を形成しています。
                </TrendCard>
                <TrendCard title="LLMアシスタント競争激化">
                    ChatGPTが首位を維持するも、Google GeminiやX社のGrokが猛追。特にGrokはモバイルでMAU 2,000万人超と急成長しています。
                </TrendCard>
            </div>
        </Section>

        <Section title="汎用LLMアシスタント市場シェア (Webトラフィック・推定値)">
            <p className="text-sm text-gray-500 mb-4">※ChatGPTを100とした場合の相対的なトラフィック指数。Gemini以外は順位と市場動向に基づく推定値です。</p>
            <div style={{ width: '100%', height: 400 }}>
                <ResponsiveContainer>
                    <BarChart data={llmWebData} margin={{ top: 5, right: 20, left: 10, bottom: 5 }}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="name" />
                        <YAxis />
                        <Tooltip formatter={(value) => `${value.toLocaleString()}`} />
                        <Legend />
                        <Bar dataKey="value" name="相対トラフィック指数" fill="#4f46e5" />
                    </BarChart>
                </ResponsiveContainer>
            </div>
        </Section>

        <Section title="市場を牽引する14の「オールスター」企業">
            <div className="grid lg:grid-cols-2 gap-8">
                <div>
                    <h3 className="font-semibold text-xl mb-3 text-gray-800">企業リストとカテゴリ</h3>
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2">
                        {allStars.map(star => (
                            <div key={star.name} className="flex items-center">
  <span className="font-semibold w-28 mr-2">{star.name}</span>
  <span className="text-sm text-gray-600">{star.category}</span>
                            </div>
                        ))}
                    </div>
                </div>
                <div>
                    <h3 className="font-semibold text-xl mb-3 text-gray-800">基盤モデル戦略</h3>
                    <div style={{ width: '100%', height: 250 }}>
                        <ResponsiveContainer>
                            <PieChart>
  <Pie data={modelStrategyData} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={100} label>
  {modelStrategyData.map((entry, index) => (
  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
  ))}
  </Pie>
  <Tooltip formatter={(value) => `${value}社`} />
  <Legend />
                            </PieChart>
                        </ResponsiveContainer>
                    </div>
                     <ul className="text-sm text-gray-600 mt-4 list-disc list-inside">
                        <li><b>独自モデル保有 (5社):</b> 自社で基盤モデルを開発・保有。</li>
                        <li><b>API/OSS利用 (7社):</b> 他社のモデルやオープンソースモデルを活用。</li>
                        <li><b>アグリゲーター (2社):</b> 複数のモデルを集約して提供。</li>
                    </ul>
                </div>
            </div>
        </Section>
      </div>
    </div>
  );
};

export default App;