生成AIが変革する広告の未来：市場動向と実例から見る展望

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

const App = () => {
  // 市場規模予測データ
  const marketGrowthData = [
    { year: '2023', value: 1188 },
    { year: '2024', value: 1748 },
    { year: '2025', value: 2573 },
    { year: '2026', value: 3787 },
    { year: '2027', value: 5574 },
    { year: '2028', value: 8205 },
    { year: '2029', value: 12078 },
    { year: '2030', value: 17774 }
  ];

  // 生成AIの広告活用メリット
  const aiAdvantagesData = [
    { name: '業務効率化', value: 95 },
    { name: 'クリエイティブ創出', value: 85 },
    { name: 'コスト削減', value: 80 },
    { name: '24時間稼働', value: 75 },
    { name: 'ABテスト最適化', value: 70 },
    { name: 'パーソナライズ', value: 65 },
    { name: '波及効果', value: 60 }
  ];

  // 広告市場のデジタル化率
  const digitalAdShareData = [
    { name: 'デジタル広告', value: 62.7 },
    { name: '従来型広告', value: 37.3 }
  ];

  // 広告種別の成長率
  const adTypeGrowthData = [
    { type: 'リテールメディア', growth: 21.9 },
    { type: 'ペイドソーシャル', growth: 8.7 },
    { type: 'ペイドサーチ', growth: 6.7 }
  ];

  return (
    <div className="container mx-auto px-4 py-8 bg-gray-50">
      <div className="grid gap-8">
        {/* 市場規模予測 */}
        <div className="bg-white p-6 rounded-lg shadow">
          <h2 className="text-xl font-bold mb-4">日本の生成AI市場規模予測（単位：億円）</h2>
          <p className="text-sm text-gray-500 mb-2">出典: <a href="https://metaversesouken.com/ai/generative_ai/market-size-2/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">メタバース総研</a></p>
          <ResponsiveContainer width="100%" height={300}>
            <AreaChart data={marketGrowthData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="year" />
              <YAxis />
              <Tooltip />
              <Area type="monotone" dataKey="value" stroke="#8884d8" fill="#8884d8" />
            </AreaChart>
          </ResponsiveContainer>
        </div>

        {/* 生成AIの広告活用メリット */}
        <div className="bg-white p-6 rounded-lg shadow">
          <h2 className="text-xl font-bold mb-4">生成AIの広告活用メリット（推定有効度）</h2>
          <p className="text-sm text-gray-500 mb-2">出典: <a href="https://metaversesouken.com/ai/generative_ai/advertisement/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">AI総研</a></p>
          <ResponsiveContainer width="100%" height={300}>
            <RadarChart data={aiAdvantagesData}>
              <PolarGrid />
              <PolarAngleAxis dataKey="name" />
              <PolarRadiusAxis angle={30} domain={[0, 100]} />
              <Radar name="メリット" dataKey="value" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.6} />
            </RadarChart>
          </ResponsiveContainer>
        </div>

        {/* 広告市場のデジタル化率 */}
        <div className="bg-white p-6 rounded-lg shadow">
          <h2 className="text-xl font-bold mb-4">2025年広告市場のデジタル化率（%）</h2>
          <p className="text-sm text-gray-500 mb-2">出典: <a href="https://dmp.intimatemerger.com/media/posts/12638" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">IMデジタルマーケティングニュース</a></p>
          <ResponsiveContainer width="100%" height={300}>
            <PieChart>
              <Pie data={digitalAdShareData} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={100} fill="#8884d8" label />
              <Tooltip />
              <Legend />
            </PieChart>
          </ResponsiveContainer>
        </div>

        {/* 広告種別の成長率 */}
        <div className="bg-white p-6 rounded-lg shadow">
          <h2 className="text-xl font-bold mb-4">広告種別の成長率（%）</h2>
          <p className="text-sm text-gray-500 mb-2">出典: <a href="https://dmp.intimatemerger.com/media/posts/12638" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">IMデジタルマーケティングニュース</a></p>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={adTypeGrowthData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="type" />
              <YAxis />
              <Tooltip />
              <Bar dataKey="growth" fill="#82ca9d" />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>
    </div>
  );
};

export default App;