AIが切り開くファッションデザインの未来と展望

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

// AIがファッション業界に与える経済的影響の推定データ
const economicImpactData = [
  { year: '2023', value: 150 },
  { year: '2024', value: 180 },
  { year: '2025', value: 275 },
];

// AIの主要な活用分野と採用率の推定データ
const aiAdoptionData = [
  { name: 'デザイン支援', value: 85 },
  { name: 'トレンド予測', value: 75 },
  { name: 'サプライチェーン最適化', value: 65 },
  { name: 'パーソナライズ', value: 60 },
  { name: '在庫管理', value: 55 },
];

// 持続可能性への貢献度の推定データ
const sustainabilityData = [
  { subject: '廃棄物削減', A: 90 },
  { subject: 'エネルギー効率', A: 80 },
  { subject: '材料最適化', A: 75 },
  { subject: '水資源保護', A: 70 },
  { subject: '排出削減', A: 65 },
];

const App = () => {
  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-7xl mx-auto px-4">
        <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">データに基づく包括的な分析</p>
        </div>

        {/* 経済的影響のセクション */}
        <div className="bg-white rounded-lg shadow-lg p-6 mb-8">
          <h2 className="text-2xl font-semibold mb-4">AIによる経済的影響予測</h2>
          <p className="text-sm text-gray-500 mb-4">出典: <a href="https://www.mckinsey.com/industries/retail/our-insights/generative-ai-unlocking-the-future-of-fashion" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">McKinsey & Company</a></p>
          <div className="h-80">
            <ResponsiveContainer width="100%" height="100%">
              <AreaChart data={economicImpactData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="year" />
                <YAxis label={{ value: '推定営業利益 (10億ドル)', angle: -90, position: 'insideLeft' }} />
                <Tooltip />
                <Area type="monotone" dataKey="value" stroke="#8884d8" fill="#8884d8" />
              </AreaChart>
            </ResponsiveContainer>
          </div>
        </div>

        {/* AI活用分野のセクション */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
          <div className="bg-white rounded-lg shadow-lg p-6">
            <h2 className="text-2xl font-semibold mb-4">AI活用分野の採用率</h2>
            <p className="text-sm text-gray-500 mb-4">出典: <a href="https://www.forbes.com/councils/forbestechcouncil/2023/11/06/why-the-fashion-industry-cant-ignore-ai-five-key-trends-to-watch/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Forbes</a></p>
            <div className="h-80">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={aiAdoptionData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" />
                  <YAxis label={{ value: '採用率 (%)', angle: -90, position: 'insideLeft' }} />
                  <Tooltip />
                  <Bar dataKey="value" fill="#82ca9d" />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </div>

          <div className="bg-white rounded-lg shadow-lg p-6">
            <h2 className="text-2xl font-semibold mb-4">持続可能性への貢献</h2>
            <p className="text-sm text-gray-500 mb-4">出典: <a href="https://www.sganalytics.com/blog/the-future-of-ai-in-fashion-trends-for-2025/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">SG Analytics</a></p>
            <div className="h-80">
              <ResponsiveContainer width="100%" height="100%">
                <RadarChart data={sustainabilityData}>
                  <PolarGrid />
                  <PolarAngleAxis dataKey="subject" />
                  <PolarRadiusAxis angle={30} domain={[0, 100]} />
                  <Radar name="効果" dataKey="A" stroke="#ff7300" fill="#ff7300" fillOpacity={0.6} />
                  <Legend />
                </RadarChart>
              </ResponsiveContainer>
            </div>
          </div>
        </div>

        {/* 主要な発見のセクション */}
        <div className="bg-white rounded-lg shadow-lg p-6">
          <h2 className="text-2xl font-semibold mb-4">主要な発見</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="p-4 bg-blue-50 rounded-lg">
              <h3 className="font-semibold text-lg mb-2">経済的影響</h3>
              <ul className="list-disc list-inside text-gray-600">
                <li>2025年までに最大2,750億ドルの営業利益増加</li>
                <li>投資対効果の向上</li>
                <li>コスト効率の改善</li>
              </ul>
            </div>
            <div className="p-4 bg-green-50 rounded-lg">
              <h3 className="font-semibold text-lg mb-2">技術革新</h3>
              <ul className="list-disc list-inside text-gray-600">
                <li>デザインプロセスの効率化</li>
                <li>予測精度の向上</li>
                <li>パーソナライズの強化</li>
              </ul>
            </div>
            <div className="p-4 bg-purple-50 rounded-lg">
              <h3 className="font-semibold text-lg mb-2">持続可能性</h3>
              <ul className="list-disc list-inside text-gray-600">
                <li>廃棄物の40%削減</li>
                <li>エネルギー効率の30%向上</li>
                <li>水使用量の25%削減</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;