観光業における生成AIスタートアップの資金調達最新動向

import React from 'react';
import { AreaChart, Area, BarChart, Bar, LineChart, Line, ComposedChart, PieChart, Pie, Cell, RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis, RadialBarChart, ScatterChart, Scatter, Treemap, Tooltip, XAxis, YAxis, CartesianGrid, Legend, ResponsiveContainer } from 'recharts';

const App = () => {
  const marketSizeData = [
    { year: 2022, value: 632.18, growth: 0 },
    { year: 2023, value: 751.53, growth: 18.9 },
    { year: 2024, value: 893.63, growth: 18.9 },
    { year: 2025, value: 1063.05, growth: 19.0 },
    { year: 2026, value: 1264.37, growth: 18.9 },
    { year: 2027, value: 1503.85, growth: 18.9 },
    { year: 2028, value: 1788.58, growth: 18.9 },
    { year: 2029, value: 2127.53, growth: 19.0 },
    { year: 2030, value: 2530.76, growth: 18.9 },
    { year: 2031, value: 3010.27, growth: 18.9 },
    { year: 2032, value: 3581.95, growth: 19.0 }
  ];

  const fundingData = [
    { name: 'Lighthouse', value: 370, year: 2024 },
    { name: 'Flyr', value: 295, year: 2024 },
    { name: 'Hostaway', value: 365, year: 2024 },
    { name: 'Mindtrip', value: 20, year: 2024 },
    { name: 'Otto', value: 6, year: 2024 },
    { name: 'Runnr.ai', value: 1.1, year: 2024 },
    { name: 'Canary Technologies', value: 50, year: 2024 },
    { name: 'Hotel 4013', value: 40, year: 2024 }
  ];

  const aiUseCaseData = [
    { subject: 'パーソナライズ旅程', A: 95, fullMark: 100 },
    { subject: 'リアルタイム更新', A: 85, fullMark: 100 },
    { subject: '予約支援', A: 80, fullMark: 100 },
    { subject: 'チャットボット', A: 90, fullMark: 100 },
    { subject: '旅行計画', A: 88, fullMark: 100 },
    { subject: 'スマートショッピング', A: 75, fullMark: 100 },
    { subject: '自動アップグレード', A: 70, fullMark: 100 },
    { subject: 'ポストトリップ', A: 65, fullMark: 100 }
  ];

  const investmentDistributionData = [
    { name: 'B2B', value: 51, description: '企業向けソリューション' },
    { name: 'B2C', value: 49, description: '消費者向けアプリケーション' }
  ];

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

  const formatValue = (value) => {
    return new Intl.NumberFormat('ja-JP').format(value);
  };

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">観光業における生成AIスタートアップの資金調達分析</h1>
          <p className="text-lg text-gray-600">
            出典: <a href="https://www.leewayhertz.com/generative-ai-in-travel/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">LeewayHertz</a>
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <h2 className="text-xl font-semibold mb-4">観光業における生成AI市場規模の推移</h2>
            <div className="h-80">
              <ResponsiveContainer>
                <ComposedChart data={marketSizeData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="year" />
                  <YAxis yAxisId="left" />
                  <YAxis yAxisId="right" orientation="right" />
                  <Tooltip formatter={(value) => formatValue(value) + '百万ドル'} />
                  <Legend />
                  <Area yAxisId="left" type="monotone" dataKey="value" name="市場規模" stroke="#8884d8" fill="#8884d8" fillOpacity={0.3} />
                  <Line yAxisId="right" type="monotone" dataKey="growth" name="成長率 (%)" stroke="#82ca9d" />
                </ComposedChart>
              </ResponsiveContainer>
            </div>
          </div>

          <div className="bg-white p-6 rounded-lg shadow-lg">
            <h2 className="text-xl font-semibold mb-4">主要な資金調達事例（2024年）</h2>
            <div className="h-80">
              <ResponsiveContainer>
                <BarChart data={fundingData.sort((a, b) => b.value - a.value)}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" angle={-45} textAnchor="end" height={60} />
                  <YAxis tickFormatter={(value) => formatValue(value)} />
                  <Tooltip formatter={(value) => formatValue(value) + '百万ドル'} />
                  <Bar dataKey="value" name="調達額" fill="#82ca9d">
                    {fundingData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                    ))}
                  </Bar>
                </BarChart>
              </ResponsiveContainer>
            </div>
          </div>

          <div className="bg-white p-6 rounded-lg shadow-lg">
            <h2 className="text-xl font-semibold mb-4">AIの活用分野と導入率</h2>
            <div className="h-80">
              <ResponsiveContainer>
                <RadarChart data={aiUseCaseData}>
                  <PolarGrid />
                  <PolarAngleAxis dataKey="subject" />
                  <PolarRadiusAxis angle={30} domain={[0, 100]} />
                  <Radar name="導入率 (%)" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
                  <Legend />
                  <Tooltip formatter={(value) => value + '%'} />
                </RadarChart>
              </ResponsiveContainer>
            </div>
          </div>

          <div className="bg-white p-6 rounded-lg shadow-lg">
            <h2 className="text-xl font-semibold mb-4">投資分布（B2B/B2C）</h2>
            <div className="h-80">
              <ResponsiveContainer>
                <PieChart>
                  <Pie
                    data={investmentDistributionData}
                    cx="50%"
                    cy="50%"
                    labelLine={false}
                    label={({ name, value, description }) => `${name} (${value}%)\n${description}`}
                    outerRadius={100}
                    fill="#8884d8"
                    dataKey="value"
                  >
                    {investmentDistributionData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                    ))}
                  </Pie>
                  <Tooltip />
                  <Legend />
                </PieChart>
              </ResponsiveContainer>
            </div>
          </div>
        </div>

        <div className="bg-white p-6 rounded-lg shadow-lg mb-8">
          <h2 className="text-xl font-semibold mb-4">主要な調査結果</h2>
          <ul className="list-disc pl-6 space-y-2">
            <li>2022年の市場規模は約632.18百万ドルで、2032年には約3,581.95百万ドルに達する見込み（年平均成長率 18.94%）</li>
            <li>2024年の主要な資金調達では、Lighthouseが370百万ドルで最大規模を記録</li>
            <li>B2B向け投資が51%を占め、特に企業向けソリューションの需要が拡大</li>
            <li>AIの活用分野では、パーソナライズ旅程（95%）とチャットボット（90%）が最も高い導入率を示す</li>
          </ul>
        </div>
      </div>
    </div>
  );
};

export default App;