2024年最新資金調達動向：カーボンオフセット×フィンテック市場の注目企業

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

// データ
const fundingData = [
  { company: 'Bees & Bears', amount: 540, currency: 'USD', date: '2025-01-21', description: '家庭のエネルギー転換を金融技術で支援するプラットフォーム。', source: 'https://fintech.global/2025/01/21/climate-fintech-bees-bears-secures-e500m-to-advance-household-energy-transition/' },
  { company: 'Greenly', amount: 52, currency: 'USD', date: '2024-03-20', description: '中小企業向けカーボン会計SaaS。', source: 'https://techcrunch.com/2024/03/20/greenly-series-b/' },
  { company: 'BeZero Carbon', amount: 32, currency: 'USD', date: '2024年以降', description: 'カーボンクレジットの格付けプラットフォーム。', source: 'https://netzeroinvestor.net/news-and-views/inside-the-climate-tech-financing-ladder-part-iii-climate-fintech' },
  { company: 'Plan A', amount: 27, currency: 'USD', date: '2023-09-19', description: '欧州を拠点とする炭素会計・ESG報告プラットフォーム。', source: 'https://techcrunch.com/2023/09/19/plan-a-carbon-accounting/' },
  { company: 'GreenFi', amount: 17, currency: 'USD', date: '2024', description: '米国のクライメート・フィンテック企業。', source: 'https://www.fintechfutures.com/fintech-start-ups/us-climate-fintech-greenfi-launches-with-17m-seed-funding' },
  { company: 'Carbonfact', amount: 15, currency: 'USD', date: '2024-04-29', description: 'ファッション業界特化型カーボン管理SaaS。', source: 'https://techcrunch.com/2024/04/29/carbonfact-is-a-carbon-management-platform-designed-specifically-for-the-fashion-industry/' },
  { company: 'Iceberg Data Lab', amount: 10, currency: 'USD', date: '2024', description: '金融機関向けの気候・環境データ分析プラットフォーム。', source: 'https://netzeroinvestor.net/news-and-views/inside-the-climate-tech-financing-ladder-part-iii-climate-fintech' },
  { company: 'Carbon Maps', amount: 7.6, currency: 'USD', date: '2023-12-05', description: '食品業界特化型環境会計SaaS。', source: 'https://techcrunch.com/2023/12/05/carbon-maps-a-carbon-accounting-startup-for-the-food-industry-gets-new-backers/' },
].sort((a, b) => b.amount - a.amount);

const regionalFundingData = [
    { name: '欧州', value: 1950, source: 'https://fintechnews.ch/green-fintech/climate-fintech-investments-reached-us2-7-billion-in-2024/74663/' },
    { name: '北米', value: 765, source: 'https://fintechnews.ch/green-fintech/climate-fintech-investments-reached-us2-7-billion-in-2024/74663/' },
];

const sectorFundingData = [
    { name: 'エネルギー×フィンテック', value: 870, source: 'https://fintechnews.ch/green-fintech/climate-fintech-investments-reached-us2-7-billion-in-2024/74663/' },
    { name: 'カーボン市場', value: 460, source: 'https://fintechnews.ch/green-fintech/climate-fintech-investments-reached-us2-7-billion-in-2024/74663/' },
    { name: '気候リスク', value: 404, source: 'https://fintechnews.ch/green-fintech/climate-fintech-investments-reached-us2-7-billion-in-2024/74663/' },
];

const keyPlayers = [
    { name: 'Stripe Climate', description: '決済APIを通じてカーボン除去プロジェクトへの資金提供を可能にする。', source: 'https://www.pcbb.com/bid/2025-02-18-harnessing-green-fintech-for-a-sustainable-future', category: '大手企業' },
    { name: 'Y Combinator', description: '高品質なカーボンオフセット調達プラットフォーム「Abatable」など、気候変動分野のスタートアップに投資。', source: 'https://www.ycombinator.com/companies/industry/climate', category: 'アクセラレーター' },
    { name: 'Atmos', description: '気候投資家向けのAI駆動型プラットフォーム。3,000以上のプロジェクトデータを分析し、投資判断を支援。', source: 'https://www.startus-insights.com/innovators-guide/new-carbon-offset-companies/', category: '新興企業' },
    { name: 'Totam Earth', description: 'ブロックチェーンを活用し、透明性の高いカーボンオフセットのデジタルマーケットプレイスを運営。', source: 'https://www.startus-insights.com/innovators-guide/new-carbon-offset-companies/', category: '新興企業' },
];

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#AF19FF'];

const App = () => {
  return (
    <div className="bg-gray-900 text-white min-h-screen p-4 sm:p-6 lg:p-8 font-sans">
      <div className="max-w-7xl mx-auto">
        <header className="mb-8">
          <h1 className="text-4xl font-bold text-green-400 mb-2">クライメート・フィンテック 資金調達動向 (2023-2025)</h1>
          <p className="text-lg text-gray-300">カーボン・オフセットとフィンテックを組み合わせたスタートアップの直近の資金調達ニュースと市場トレンドの分析</p>
        </header>

        <section className="mb-12">
            <h2 className="text-2xl font-semibold mb-4 border-l-4 border-green-400 pl-4">市場概況: 2024年のクライメート・フィンテック投資</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
                <div className="bg-gray-800 p-6 rounded-lg">
                    <h3 className="text-4xl font-bold text-green-400">$27億</h3>
                    <p className="text-gray-400 mt-2">2024年 総投資額</p>
                    <a href="https://fintechnews.ch/green-fintech/climate-fintech-investments-reached-us2-7-billion-in-2024/74663/" target="_blank" rel="noopener noreferrer" className="text-xs text-blue-400 hover:underline">出典: Fintech News Switzerland</a>
                </div>
                <div className="bg-gray-800 p-6 rounded-lg">
                    <h3 className="text-4xl font-bold text-green-400">+17%</h3>
                    <p className="text-gray-400 mt-2">前年比成長率</p>
                     <a href="https://fintechnews.ch/green-fintech/climate-fintech-investments-reached-us2-7-billion-in-2024/74663/" target="_blank" rel="noopener noreferrer" className="text-xs text-blue-400 hover:underline">出典: Fintech News Switzerland</a>
                </div>
                 <div className="bg-gray-800 p-6 rounded-lg">
                    <h3 className="text-4xl font-bold text-green-400">>50%</h3>
                    <p className="text-gray-400 mt-2">プレシード/シード段階のラウンド比率</p>
                     <a href="https://fintechnews.ch/green-fintech/climate-fintech-investments-reached-us2-7-billion-in-2024/74663/" target="_blank" rel="noopener noreferrer" className="text-xs text-blue-400 hover:underline">出典: Fintech News Switzerland</a>
                </div>
            </div>
        </section>

        <section className="mb-12">
          <h2 className="text-2xl font-semibold mb-4 border-l-4 border-green-400 pl-4">主要な資金調達ニュース (直近1年以内)</h2>
          <div className="overflow-x-auto bg-gray-800 rounded-lg">
            <table className="min-w-full text-sm text-left text-gray-300">
              <thead className="text-xs text-gray-400 uppercase bg-gray-700">
                <tr>
                  <th scope="col" className="px-6 py-3">企業名</th>
                  <th scope="col" className="px-6 py-3">調達額 (百万ドル)</th>
                  <th scope="col" className="px-6 py-3">発表時期</th>
                  <th scope="col" className="px-6 py-3">サービス概要</th>
                </tr>
              </thead>
              <tbody>
                {fundingData.map((item, index) => (
                  <tr key={index} className="border-b border-gray-700 hover:bg-gray-600">
                    <th scope="row" className="px-6 py-4 font-medium text-white whitespace-nowrap">
                        <a href={item.source} target="_blank" rel="noopener noreferrer" className="text-green-400 hover:underline">
                            {item.company}
                        </a>
                    </th>
                    <td className="px-6 py-4 text-xl font-bold text-right">{item.amount.toLocaleString()}</td>
                    <td className="px-6 py-4">{item.date}</td>
                    <td className="px-6 py-4">{item.description}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>
        
        <section className="grid md:grid-cols-2 gap-8 mb-12">
            <div>
                <h3 className="text-xl font-semibold mb-4 text-center">スタートアップ別資金調達額 (百万ドル)</h3>
                 <div className="bg-gray-800 p-4 rounded-lg h-96">
                    <ResponsiveContainer width="100%" height="100%">
                        <BarChart data={fundingData} layout="vertical" margin={{ top: 5, right: 20, left: 20, bottom: 5 }}>
                            <CartesianGrid strokeDasharray="3 3" stroke="#4A5568" />
                            <XAxis type="number" stroke="#A0AEC0" />
                            <YAxis dataKey="company" type="category" width={80} stroke="#A0AEC0" tick={{ fontSize: 12 }} />
                            <Tooltip contentStyle={{ backgroundColor: '#1A202C', border: '1px solid #4A5568' }} cursor={{ fill: '#2D3748' }}/>
                            <Legend wrapperStyle={{ color: '#A0AEC0' }}/>
                            <Bar dataKey="amount" name="調達額" fill="#48BB78" />
                        </BarChart>
                    </ResponsiveContainer>
                </div>
                 <p className="text-xs text-gray-500 mt-2 text-center">出典: TechCrunch, Fintech Global, Net Zero Investorなど複数ソースに基づく</p>
            </div>
            <div>
                <h3 className="text-xl font-semibold mb-4 text-center">地域別投資額 (2024年, 百万ドル)</h3>
                 <div className="bg-gray-800 p-4 rounded-lg h-96">
                    <ResponsiveContainer width="100%" height="100%">
                         <BarChart data={regionalFundingData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
                            <CartesianGrid strokeDasharray="3 3" stroke="#4A5568" />
                            <XAxis dataKey="name" stroke="#A0AEC0"/>
                            <YAxis stroke="#A0AEC0"/>
                            <Tooltip contentStyle={{ backgroundColor: '#1A202C', border: '1px solid #4A5568' }} cursor={{ fill: '#2D3748' }}/>
                             <Legend wrapperStyle={{ color: '#A0AEC0' }}/>
                            <Bar dataKey="value" name="投資額" fill="#38B2AC" />
                        </BarChart>
                    </ResponsiveContainer>
                </div>
                <p className="text-xs text-gray-500 mt-2 text-center">出典: <a href="https://fintechnews.ch/green-fintech/climate-fintech-investments-reached-us2-7-billion-in-2024/74663/" target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:underline">Fintech News Switzerland</a></p>
            </div>
        </section>

         <section className="mb-12">
          <h2 className="text-2xl font-semibold mb-4 border-l-4 border-green-400 pl-4">注目のプレイヤーと新興企業</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {keyPlayers.map((player, index) => (
              <div key={index} className="bg-gray-800 p-6 rounded-lg flex flex-col">
                <h3 className="text-xl font-bold text-green-400 mb-2">{player.name}</h3>
                <p className="text-sm text-gray-300 flex-grow">{player.description}</p>
                <div className="mt-4 pt-4 border-t border-gray-700">
                     <span className="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">{player.category}</span>
                     <a href={player.source} target="_blank" rel="noopener noreferrer" className="text-xs text-blue-400 hover:underline ml-2">出典</a>
                </div>
              </div>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
};

export default App;