生成AIと広告業界の未来：対立から協業への道筋

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

const App = () => {
  // 広告主の生成AI活用に関する調査データ
  const surveyData = [
    { name: '積極的に活用してもよい', value: 29.2 },
    { name: 'ルール付きで活用してもよい', value: 47.0 },
    { name: 'ルール付きでやむを得ない', value: 13.9 },
    { name: '禁止すべき', value: 4.8 },
    { name: 'その他', value: 5.1 }
  ];

  // 生成AIの業務利用状況データ
  const usageData = [
    { name: 'アイデア出し・ブレスト', value: 70.0 },
    { name: '文章作成', value: 54.4 },
    { name: '情報収集', value: 52.3 },
    { name: '議事録作成', value: 50.5 }
  ];

  // 円グラフの色設定
  const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8'];

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-7xl mx-auto px-4">
        
        {/* タイトルセクション */}
        <div className="mb-12 text-center">
          <h1 className="text-3xl font-bold text-gray-900 mb-4">広告業界と生成AIの関係性分析</h1>
          <p className="text-gray-600">
            出典: <a href="https://www.so-tech.co.jp/news/press-release/588" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">SO Technologies株式会社による広告主438人への調査</a>
          </p>
        </div>

        {/* 主要な分析結果 */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
          {/* 生成AI活用への態度 */}
          <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 width="100%" height="100%">
                <PieChart>
                  <Pie
                    data={surveyData}
                    cx="50%"
                    cy="50%"
                    labelLine={false}
                    label={({ name, value }) => `${name}: ${value}%`}
                    outerRadius={100}
                    fill="#8884d8"
                    dataKey="value"
                  >
                    {surveyData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                    ))}
                  </Pie>
                  <Tooltip />
                  <Legend />
                </PieChart>
              </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 width="100%" height="100%">
                <BarChart
                  data={usageData}
                  layout="vertical"
                  margin={{ top: 5, right: 30, left: 100, bottom: 5 }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis type="number" unit="%" />
                  <YAxis dataKey="name" type="category" width={100} />
                  <Tooltip />
                  <Legend />
                  <Bar dataKey="value" fill="#8884d8" name="利用率" />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </div>
        </div>

        {/* 対立要因と課題のセクション */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {/* 対立要因 */}
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <h3 className="text-lg font-semibold mb-4">主な対立要因</h3>
            <ul className="space-y-2 text-gray-700">
              <li className="flex items-start">
                <span className="w-2 h-2 mt-2 mr-2 bg-red-500 rounded-full"></span>
                <span>広告代理店の役割の変化と存在意義への疑問</span>
              </li>
              <li className="flex items-start">
                <span className="w-2 h-2 mt-2 mr-2 bg-red-500 rounded-full"></span>
                <span>クリエイティブの独自性と品質の担保</span>
              </li>
              <li className="flex items-start">
                <span className="w-2 h-2 mt-2 mr-2 bg-red-500 rounded-full"></span>
                <span>人間のクリエイターとAIの共存</span>
              </li>
            </ul>
          </div>

          {/* 技術的課題 */}
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <h3 className="text-lg font-semibold mb-4">技術的課題</h3>
            <ul className="space-y-2 text-gray-700">
              <li className="flex items-start">
                <span className="w-2 h-2 mt-2 mr-2 bg-yellow-500 rounded-full"></span>
                <span>著作権と知的財産権の保護</span>
              </li>
              <li className="flex items-start">
                <span className="w-2 h-2 mt-2 mr-2 bg-yellow-500 rounded-full"></span>
                <span>データセキュリティとプライバシー保護</span>
              </li>
              <li className="flex items-start">
                <span className="w-2 h-2 mt-2 mr-2 bg-yellow-500 rounded-full"></span>
                <span>AIの出力品質の一貫性確保</span>
              </li>
            </ul>
          </div>

          {/* 倫理的課題 */}
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <h3 className="text-lg font-semibold mb-4">倫理的課題</h3>
            <ul className="space-y-2 text-gray-700">
              <li className="flex items-start">
                <span className="w-2 h-2 mt-2 mr-2 bg-blue-500 rounded-full"></span>
                <span>AIの判断の透明性と説明責任</span>
              </li>
              <li className="flex items-start">
                <span className="w-2 h-2 mt-2 mr-2 bg-blue-500 rounded-full"></span>
                <span>バイアスと差別の防止</span>
              </li>
              <li className="flex items-start">
                <span className="w-2 h-2 mt-2 mr-2 bg-blue-500 rounded-full"></span>
                <span>人間の創造性との調和</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;