生成AI時代における富士通の戦略と競争力強化

import React from 'react';
import { AreaChart, Area, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const App = () => {
  // 生成AI市場規模の予測データ
  const aiMarketData = [
    { year: '2024', value: 1016 },
    { year: '2025', value: 6879 },
    { year: '2030', value: 17000 }
  ];

  // 富士通の戦略的取り組みデータ
  const strategyData = [
    { 
      category: 'コンサルティング人材',
      current: 5000,
      target: 10000,
      source: 'https://www.fujitsu.com/global/documents/about/ir/library/presentations/Technology_Strategy_presentation_20241212.pdf'
    },
    {
      category: 'Uvance売上目標',
      current: 3679,
      target: 7000,
      source: 'https://global.fujitsu/-/media/Project/Fujitsu/Fujitsu-HQ/about/integrated-report/2024/integrated-report-2024-en.pdf'
    }
  ];

  return (
    <div className="p-8 bg-gray-50">
      <div className="max-w-7xl mx-auto">
        <div className="bg-white rounded-lg shadow-lg p-6 mb-8">
          <h2 className="text-2xl font-bold mb-6 text-gray-800">国内生成AI市場規模予測</h2>
          <div className="h-80">
            <ResponsiveContainer width="100%" height="100%">
              <AreaChart data={aiMarketData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="year" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Area type="monotone" dataKey="value" name="市場規模（億円）" stroke="#8884d8" fill="#8884d8" />
              </AreaChart>
            </ResponsiveContainer>
          </div>
          <div className="text-sm text-gray-500 mt-2">
            出典: <a href="https://www.ai-souken.com/article/ai-generation-next" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">AI総研 - 生成AIの今後の展望</a>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow-lg p-6">
          <h2 className="text-2xl font-bold mb-6 text-gray-800">富士通の戦略目標（2025年度）</h2>
          <div className="h-80">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={strategyData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="category" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar dataKey="current" name="現在値" fill="#82ca9d" />
                <Bar dataKey="target" name="目標値" fill="#8884d8" />
              </BarChart>
            </ResponsiveContainer>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
            <div className="bg-blue-50 p-4 rounded-lg">
              <h3 className="font-bold text-lg mb-2">主要な戦略的取り組み</h3>
              <ul className="list-disc pl-5 space-y-2">
                <li>生成AI活用によるシステム開発の効率化</li>
                <li>SAPコンサルタントのリスキリング推進</li>
                <li>Fujitsu Uvanceを通じた新規事業開発</li>
                <li>グローバルな人材活用の促進</li>
              </ul>
            </div>
            <div className="bg-purple-50 p-4 rounded-lg">
              <h3 className="font-bold text-lg mb-2">ベンチマーク企業の特徴</h3>
              <ul className="list-disc pl-5 space-y-2">
                <li>Palantir: AIプラットフォームによる意思決定支援</li>
                <li>C3 AI: エンタープライズAIソリューション提供</li>
                <li>データ駆動型の事業モデル展開</li>
                <li>高度なAI技術の実用化</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;