生成AIが加速する新素材開発：MI最新トレンドと日米企業の戦略

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

// ヘルパー関数: 数値をフォーマットする
const formatNumber = (num) => {
  if (num >= 1_000_000_000) {
    return (num / 1_000_000_000).toFixed(1) + '十億';
  } 
  if (num >= 1_000_000) {
    return (num / 1_000_000).toFixed(1) + '百万';
  }
  return num.toLocaleString();
};

const formatCurrency = (num, currency = 'USD') => {
  if (currency === 'USD') {
      if (num >= 1_000_000_000) {
        return `$${(num / 1_000_000_000).toFixed(1)}B`;
      }
      if (num >= 1_000_000) {
        return `$${(num / 1_000_000).toFixed(1)}M`;
      }
      return `$${num.toLocaleString()}`;
  } 
  // 他の通貨のフォーマットを追加可能
  return num.toLocaleString();
};


// データセクション
const marketData = [
  {
    name: 'MI市場規模予測 (2030年)',
    value: 410400000,
    source: 'https://www.startus-insights.com/innovators-guide/materials-informatics-companies/',
    unit: 'ドル',
    cagr: '19.2%'
  },
];

const investmentData = [
  { name: '2023年', 'VC投資額(十億ドル)': 21.3 },
  { name: '2024年', 'VC投資額(十億ドル)': 44.2 },
  { name: '2025年上半期', 'VC投資額(十億ドル)': 49.2 },
];
const investmentSource = 'https://www.ey.com/en_ie/newsroom/2025/06/generative-ai-vc-funding-49-2b-h1-2025-ey-report';

const techTrends = [
  {
    title: '変分オートエンコーダ (VAE)',
    description: '高次元の材料データを低次元の連続的な潜在空間に圧縮・復元することで、新しい材料を生成。物性の連続的な変化の探索に優れる。',
    img: 'https://images-provider.frontiersin.org/api/ipx/w=1200&f=png/https://www.frontiersin.org/files/Articles/865270/fmats-09-865270-HTML/image_m/fmats-09-865270-g001.jpg',
    source: 'https://www.frontiersin.org/journals/materials/articles/10.3389/fmats.2022.865270/full'
  },
  {
    title: '敵対的生成ネットワーク (GAN)',
    description: '「生成器」と「識別器」を競わせることで、非常にリアルで多様な材料データを生成。未知の材料探索で強力な性能を発揮。',
    img: 'https://images-provider.frontiersin.org/api/ipx/w=1200&f=png/https://www.frontiersin.org/files/Articles/865270/fmats-09-865270-HTML/image_m/fmats-09-865270-g001.jpg',
    source: 'https://www.frontiersin.org/journals/materials/articles/10.3389/fmats.2022.865270/full'
  },
  {
    title: '拡散モデル (Diffusion Models)',
    description: 'データにノイズを加えてから除去するプロセスを学習し、高品質なデータを生成。炭素捕捉材料やバッテリー材料の設計で注目されている。',
    source: 'https://medium.com/@HitachiVentures/ai-is-powering-the-future-of-material-science-from-lab-to-real-world-breakthroughs-2f92cf56ed90'
  },
  {
    title: '物理情報ニューラルネットワーク (PINNs)',
    description: '物理法則をモデルに直接組み込み、高精度なシミュレーションを実現。実験コストと時間を大幅に削減する。',
    source: 'https://medium.com/@HitachiVentures/ai-is-powering-the-future-of-material-science-from-lab-to-real-world-breakthroughs-2f92cf56ed90'
  }
];

const startups = [
  {
    name: 'CuspAI',
    description: '生成AIと分子シミュレーションで新素材を発見する英国のスタートアップ。炭素捕捉材料などに特化。',
    funding: '1億ドル超の資金調達を協議中 (2025年8月時点)',
    source: 'https://www.bloomberg.com/news/articles/2025-08-04/cuspai-in-talks-to-raise-100-million-to-discover-new-materials'
  },
  {
    name: 'Orbital Materials',
    description: 'DeepMind出身者が設立。最速・最高精度の材料シミュレーションAI「Orb」を開発。',
    funding: 'Radical Ventures等が出資',
    source: 'https://radical.vc/investing-in-the-exponential-ai-in-sciences/'
  },
  {
    name: 'Aionics',
    description: '高性能バッテリー向け電解質を設計。電気自動車や航空宇宙分野がターゲット。',
    funding: 'Trousdale Venturesなどから戦略的投資を獲得 (2024年)',
    source: 'https://www.startus-insights.com/innovators-guide/materials-informatics-companies/'
  },
    {
    name: 'Kebotix',
    description: 'AIとロボットで新化合物のブレインストーミングとテストを自動化。',
    funding: '4,050万ドルを調達',
    source: 'https://www.seedtable.com/best-materials-science-startups'
  },
  {
    name: 'Polaron',
    description: 'AI駆動の材料設計ツールで微細構造イメージングデータから性能を予測・最適化。',
    funding: '英国政府主催のコンペティション候補に選出',
    source: 'https://www.startus-insights.com/innovators-guide/materials-informatics-companies/'
  },
];

const corporateActions = [
    {
        category: '大型提携 (デザインパートナーシップ)',
        examples: [
            { name: 'Eli Lilly & Genesis Therapeutics', value: '最大6億7,000万ドル', field: 'AI創薬', source: 'https://radical.vc/investing-in-the-exponential-ai-in-sciences/' },
            { name: 'Novo Nordisk & Aspect Biosystems', value: '最大26億ドル', field: '3Dバイオプリンティング', source: 'https://radical.vc/investing-in-the-exponential-ai-in-sciences/' }
        ]
    },
    {
        category: '大型買収',
        examples: [
            { name: 'Occidental Petroleum → Carbon Engineering', value: '11億ドル', field: '炭素回収技術', source: 'https://radical.vc/investing-in-the-exponential-ai-in-sciences/' }
        ]
    },
    {
        category: 'プラットフォーム提供・共同研究',
        examples: [
            { name: 'Google (DeepMind)', value: 'GNoMEで38万種の新材料を発見', field: '材料発見', source: 'https://medium.com/@HitachiVentures/ai-is-powering-the-future-of-material-science-from-lab-to-real-world-breakthroughs-2f92cf56ed90' },
            { name: 'Meta', value: 'Open Catalyst Projectを主導', field: '炭素捕捉データ', source: 'https://medium.com/@HitachiVentures/ai-is-powering-the-future-of-material-science-from-lab-to-real-world-breakthroughs-2f92cf56ed90' },
            { name: 'IBM', value: 'RXN for Chemistryを公開', field: '化学反応予測', source: 'https://medium.com/@HitachiVentures/ai-is-powering-the-future-of-material-science-from-lab-to-real-world-breakthroughs-2f92cf56ed90' }
        ]
    }
];

const hitachiCaseStudy = {
  title: 'ケーススタディ：日立製作所の取り組み',
  description: '日立はMI技術を研究開発から製造プロセス全体に拡張し、生成AIを活用した具体的なソリューションを展開しています。',
  solutions: [
    {
      name: '製造プロセス改善ソリューション',
      details: '生成AI(RAG)と独自DBを活用し、最適な製造プロセスを提案。半導体・電池・素材メーカー向けに展開。',
      source: 'https://www.hitachi.co.jp/New/cnews/month/2025/01/0123.html'
    },
    {
      name: '開発工程の大幅削減',
      details: 'MIと独自のCI(ケミカルズ・インフォマティクス)を連携させ、金属薄膜材料開発において開発工程数を8割以上削減。',
      source: 'https://www.hitachi-hightech.com/jp/ja/company/sustainability/materiality/materiality-book/article3-1.html'
    }
  ],
  strategy: '社内に「GenAIアンバサダー」を設置し、全社的に生成AI活用を推進。',
  strategy_source: 'https://japan.zdnet.com/article/35228620/'
};


const enterpriseAiData = {
  useCases: [
    { name: 'コード生成', value: 51 },
    { name: 'サポートチャットボット', value: 31 },
    { name: 'エンタープライズ検索', value: 28 },
    { name: 'データ抽出・変換', value: 27 },
    { name: '会議要約', value: 25 },
    { name: 'コピーライティング', value: 21 },
    { name: '画像生成', value: 20 },
  ],
  selectionCriteria: [
    { name: '定量化可能なROI', value: 30 },
    { name: 'カスタマイズ性', value: 26 },
    { name: '性能と精度', value: 7 },
    { name: '既存システムとの統合', value: 6 },
    { name: '堅牢な事後サービス', value: 5 },
  ],
  architecturalApproach: [
    { name: 'RAG', value: 51 },
    { name: 'プロンプトエンジニアリング', value: 16 },
    { name: 'エージェント', value: 12 },
    { name: 'ファインチューニング', value: 9 },
    { name: 'RLHF', value: 5 },
    { name: 'その他', value: 7 },
  ],
  llmMarketShare: [
    { name: 'OpenAI', value: 34, '2023': 50 },
    { name: 'Anthropic', value: 24, '2023': 12 },
    { name: 'Meta', value: 16, '2023': 16 },
    { name: 'Google', value: 12, '2023': 7 },
    { name: 'Mistral AI', value: 5, '2023': 6 },
    { name: 'Cohere', value: 3, '2023': 3 },
    { name: 'Internal model', value: 3, '2023': 3 },
    { name: 'Other', value: 3, '2023': 3 },
  ],
  source: 'https://menlovc.com/2024-the-state-of-generative-ai-in-the-enterprise/'
};

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


// カスタムシェイプ付きの円グラフ
const renderActiveShape = (props) => {
  const RADIAN = Math.PI / 180;
  const { cx, cy, midAngle, innerRadius, outerRadius, startAngle, endAngle, fill, payload, percent, value } = props;
  const sin = Math.sin(-RADIAN * midAngle);
  const cos = Math.cos(-RADIAN * midAngle);
  const sx = cx + (outerRadius + 10) * cos;
  const sy = cy + (outerRadius + 10) * sin;
  const mx = cx + (outerRadius + 30) * cos;
  const my = cy + (outerRadius + 30) * sin;
  const ex = mx + (cos >= 0 ? 1 : -1) * 22;
  const ey = my;
  const textAnchor = cos >= 0 ? 'start' : 'end';

  return (
    <g>
      <text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>
        {payload.name}
      </text>
      <Sector
        cx={cx}
        cy={cy}
        innerRadius={innerRadius}
        outerRadius={outerRadius}
        startAngle={startAngle}
        endAngle={endAngle}
        fill={fill}
      />
      <Sector
        cx={cx}
        cy={cy}
        startAngle={startAngle}
        endAngle={endAngle}
        innerRadius={outerRadius + 6}
        outerRadius={outerRadius + 10}
        fill={fill}
      />
      <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
      <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
      <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#333">{`${(value)}%`}</text>
    </g>
  );
};


const Section = ({ title, children, source, sourceUrl }) => (
  <div className="bg-white p-6 rounded-xl shadow-lg mb-8">
    <h2 className="text-2xl font-bold text-gray-800 mb-4 border-b-2 border-indigo-500 pb-2">{title}</h2>
    {children}
    {source && sourceUrl && (
      <div className="text-right text-xs text-gray-500 mt-4">
        出典: <a href={sourceUrl} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">{source}</a>
      </div>
    )}
  </div>
);

const App = () => {
  const [activeIndex, setActiveIndex] = useState(0);

  const onPieEnter = (_, index) => {
    setActiveIndex(index);
  };

  return (
    <div className="bg-gray-100 min-h-screen font-sans text-gray-700 p-4 sm:p-8">
      <div className="max-w-7xl mx-auto">
        <header className="mb-10 text-center">
          <h1 className="text-4xl md:text-5xl font-extrabold text-gray-900">生成AIが加速させるマテリアルズ・インフォマティクス(MI)の進化</h1>
          <p className="mt-4 text-lg text-gray-600">最新トレンド、資金調達、企業動向の分析 (2025年8月時点)</p>
        </header>

        {/* 主要サマリー */}
        <Section title="市場概観：成長するMIと生成AI投資">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className='bg-gray-50 p-4 rounded-lg'>
                    <h3 className="text-xl font-semibold mb-2 text-center">MI市場規模予測 (2030年)</h3>
                    <div className="text-center">
                        <p className="text-5xl font-bold text-indigo-600">{formatCurrency(marketData[0].value, 'USD')}</p>
                        <p className="text-lg text-gray-600 mt-2">年間平均成長率 (CAGR): <span className='font-bold'>{marketData[0].cagr}</span></p>
                        <p className="text-xs text-gray-500 mt-2">出典: <a href={marketData[0].source} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">StartUs Insights</a></p>
                    </div>
                </div>
                <div className='bg-gray-50 p-4 rounded-lg'>
                    <h3 className="text-xl font-semibold mb-2 text-center">生成AI分野へのVC投資額</h3>
                    <ResponsiveContainer width="100%" height={250}>
                        <BarChart data={investmentData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
                            <CartesianGrid strokeDasharray="3 3" />
                            <XAxis dataKey="name" />
                            <YAxis unit="十億ドル" />
                            <Tooltip formatter={(value) => `${value}十億ドル`} />
                            <Legend />
                            <Bar dataKey="VC投資額(十億ドル)" fill="#8884d8" />
                        </BarChart>
                    </ResponsiveContainer>
                    <p className="text-xs text-gray-500 text-center">出典: <a href={investmentSource} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">EY</a></p>
                </div>
            </div>
             <div className="mt-8 p-6 bg-indigo-50 rounded-lg text-center">
                 <h3 className="text-xl font-semibold mb-2">パラダイムシフト：発見から設計へ</h3>
                 <p className="text-lg">生成AIは、既知の材料から有望なものを「発見」する従来のアプローチから、特定の機能要件に基づき未知の材料を「設計(逆設計)」する新たなフェーズへとMIを進化させました。</p>
                 <p className="text-xs text-gray-500 mt-2">出典: <a href='https://www.weforum.org/stories/2025/06/ai-materials-innovation-discovery-to-design/' target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">World Economic Forum</a></p>
             </div>
        </Section>

        {/* 技術トレンド */}
        <Section title="主要な技術トレンド">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
            {techTrends.map((trend, index) => (
              <div key={index} className="bg-white rounded-lg shadow-md p-6 border border-gray-200 hover:shadow-xl transition-shadow duration-300">
                <h3 className="text-xl font-bold text-indigo-700 mb-3">{trend.title}</h3>
                <p className="text-gray-600 mb-4">{trend.description}</p>
                {trend.img && (
                     <div className='my-4 flex justify-center'>
                        <img src={trend.img} alt={trend.title} className="rounded-lg max-h-48 object-contain"/>
                    </div>
                )}
                <p className="text-xs text-gray-500 text-right">出典: <a href={trend.source} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">論文/記事</a></p>
              </div>
            ))}
          </div>
        </Section>

        {/* スタートアップ動向 */}
        <Section title="注目のマテリアルズ・インフォマティクス スタートアップ">
          <div className="overflow-x-auto">
            <table className="w-full text-left table-auto">
              <thead className="bg-gray-200">
                <tr>
                  <th className="px-4 py-2">企業名</th>
                  <th className="px-4 py-2">概要</th>
                  <th className="px-4 py-2">資金調達・実績</th>
                </tr>
              </thead>
              <tbody>
                {startups.map((startup, index) => (
                  <tr key={index} className="border-b hover:bg-gray-100">
                    <td className="px-4 py-3 font-semibold text-gray-800">{startup.name}</td>
                    <td className="px-4 py-3">{startup.description}</td>
                    <td className="px-4 py-3 font-medium text-indigo-600">
                      {startup.funding}
                      <a href={startup.source} target="_blank" rel="noopener noreferrer" className="text-blue-500 ml-2 text-xs underline">[出典]</a>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Section>

        {/* 大企業の動向 */}
        <Section title="大企業の動向：提携・買収・プラットフォーム提供">
          <div className="space-y-6">
            {corporateActions.map(action => (
              <div key={action.category} className="bg-gray-50 p-4 rounded-lg">
                  <h3 className="text-xl font-semibold mb-3 text-gray-700">{action.category}</h3>
                  <ul className="space-y-2 list-disc list-inside">
                  {action.examples.map(ex => (
                      <li key={ex.name}>
                          <span className="font-bold">{ex.name}:</span> {ex.field}で<span className="text-indigo-600 font-semibold">{ex.value}</span>規模の契約/成果。
                          <a href={ex.source} target="_blank" rel="noopener noreferrer" className="text-blue-500 ml-2 text-xs underline">[出典]</a>
                      </li>
                  ))}
                  </ul>
              </div>
            ))}
            <div className="bg-indigo-100 p-6 rounded-lg mt-6 border-l-4 border-indigo-500">
                <h3 className="text-xl font-bold text-gray-800 mb-2">{hitachiCaseStudy.title}</h3>
                <p className="mb-4">{hitachiCaseStudy.description}</p>
                <ul className="space-y-3 list-disc list-inside">
                    {hitachiCaseStudy.solutions.map(sol => (
                        <li key={sol.name}>
                            <span className='font-semibold'>{sol.name}:</span> {sol.details} <a href={sol.source} target="_blank" rel="noopener noreferrer" className="text-blue-500 text-xs underline">[出典]</a>
                        </li>
                    ))}
                </ul>
                <p className='mt-3'><span className='font-semibold'>全社戦略:</span> {hitachiCaseStudy.strategy} <a href={hitachiCaseStudy.strategy_source} target="_blank" rel="noopener noreferrer" className="text-blue-500 text-xs underline">[出典]</a></p>
            </div>
          </div>
        </Section>

        {/* 市場インサイト */}
        <Section title="企業における生成AI導入インサイト (2024年)" source="Menlo Ventures" sourceUrl={enterpriseAiData.source}>
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <div>
                    <h3 className="text-lg font-semibold mb-2 text-center">主要ユースケース</h3>
                    <ResponsiveContainer width="100%" height={300}>
                        <BarChart data={enterpriseAiData.useCases} layout="vertical" margin={{ top: 5, right: 30, left: 50, bottom: 5 }}>
                            <CartesianGrid strokeDasharray="3 3" />
                            <XAxis type="number" unit="%" />
                            <YAxis dataKey="name" type="category" width={100} tick={{ fontSize: 12 }}/>
                            <Tooltip formatter={(value) => `${value}%`} />
                            <Bar dataKey="value" fill="#82ca9d" />
                        </BarChart>
                    </ResponsiveContainer>
                </div>
                <div>
                    <h3 className="text-lg font-semibold mb-2 text-center">AIツール選定基準</h3>
                    <ResponsiveContainer width="100%" height={300}>
                        <BarChart data={enterpriseAiData.selectionCriteria} layout="vertical" margin={{ top: 5, right: 30, left: 80, bottom: 5 }}>
                            <CartesianGrid strokeDasharray="3 3" />
                            <XAxis type="number" unit="%" />
                            <YAxis dataKey="name" type="category" width={120} tick={{ fontSize: 12 }}/>
                            <Tooltip formatter={(value) => `${value}%`} />
                            <Bar dataKey="value" fill="#ffc658" />
                        </BarChart>
                    </ResponsiveContainer>
                </div>
                <div>
                    <h3 className="text-lg font-semibold mb-2 text-center">主流の技術アプローチ (2024年)</h3>
                    <ResponsiveContainer width="100%" height={300}>
                      <PieChart>
                        <Pie 
                          activeIndex={activeIndex}
                          activeShape={renderActiveShape}
                          data={enterpriseAiData.architecturalApproach} 
                          cx="50%" 
                          cy="50%" 
                          innerRadius={60}
                          outerRadius={80} 
                          fill="#8884d8"
                          dataKey="value"
                          onMouseEnter={onPieEnter}
                        />
                      </PieChart>
                    </ResponsiveContainer>
                </div>
                <div>
                    <h3 className="text-lg font-semibold mb-2 text-center">LLM市場シェア (2024 vs 2023)</h3>
                     <ResponsiveContainer width="100%" height={300}>
                        <BarChart data={enterpriseAiData.llmMarketShare} margin={{ top: 20, right: 30, left: 0, bottom: 5 }}>
                            <CartesianGrid strokeDasharray="3 3" />
                            <XAxis dataKey="name" tick={{ fontSize: 11 }} angle={-20} textAnchor="end" height={50}/>
                            <YAxis unit="%" />
                            <Tooltip formatter={(value) => `${value}%`} />
                            <Legend />
                            <Bar dataKey="2023" fill="#cccccc" name="2023年シェア"/>
                            <Bar dataKey="value" fill="#0088FE" name="2024年シェア"/>
                        </BarChart>
                    </ResponsiveContainer>
                </div>
            </div>
        </Section>

        <footer className="text-center text-sm text-gray-500 py-6">
          <p>このレポートは提供されたコンテキスト情報に基づき生成されました。</p>
          <p>© 2025 AI Analysis Report. All Rights Reserved.</p>
        </footer>
      </div>
    </div>
  );
};

export default App;