クリエイター金融革命：最新フィンテックとスタートアップ資金調達の最前線

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

const startupData = [
  // General Creators
  { 
    name: 'Karat',
    description: 'クリエイターのソーシャルメディア実績を基に与信判断を行い、クレジットカードや運転資金を提供。',
    funding: '7,000万ドル',
    details: '2023年7月、俳優ウィル・スミスも出資。Stripe Issuingを活用し3ヶ月でサービス構築。',
    sourceUrl: 'https://forbesjapan.com/articles/detail/64802',
    category: 'General',
    imageUrl: 'https://cdn.sanity.io/images/mmb1hcvm/production/f507998b87c8db33c24d47ca19f5d29e979e0aca-800x496.webp?w=400&fm=webp'
  },
  { 
    name: 'Spotter',
    description: 'YouTubeクリエイターのコンテンツライセンスを買い取り、前払いキャッシュを提供。',
    funding: '2億ドル (シリーズD)',
    details: '2022年2月、評価額17億ドル。SoftBank Vision Fund 2が主導。YouTuberに10億ドル投資計画。',
    sourceUrl: 'https://visible.vc/blog/creator-economy-vcs/',
    category: 'General',
    imageUrl: 'https://images.fastcompany.com/image/upload/f_webp,q_auto,c_fit,w_1024,h_1024/wp-cms-2/2025/03/p-91304904-alchemy-100-million-dollar-creator-fund.jpg'
  },
  { 
    name: 'Kajabi',
    description: 'クリエイターがデジタルコンテンツを作成、マーケティング、販売するためのSaaSプラットフォーム。',
    funding: '5億5,000万ドル',
    details: '2021年5月、評価額20億ドル。Tiger Globalが主導。',
    sourceUrl: 'https://visible.vc/blog/creator-economy-vcs/',
    category: 'General',
    imageUrl: 'https://cdn.sanity.io/images/mmb1hcvm/production/7c93fb121ceb0b669f905f04b01cbadada7e38c1-757x548.png?w=400&fm=webp'
  },
  { 
    name: 'Alchemy',
    description: 'インフルエンサーの将来収入を予測し、手数料と引き換えに一括で前払いするサービス。',
    funding: '1億ドルのファンドを設立',
    details: '将来の収益を予測して先行支払いを推進。ローンではなく、収入予測が下回った場合のリスクは同社が負う。',
    sourceUrl: 'https://www.fastcompany.com/91304904/this-fintech-startups-100-million-fund-aims-to-get-influencers-paid-faster',
    category: 'General',
    imageUrl: 'https://images.fastcompany.com/image/upload/f_webp,q_auto,c_fit,w_1024,h_1024/wp-cms-2/2025/03/p-91304904-alchemy-100-million-dollar-creator-fund.jpg'    
  },
  { 
    name: 'Slice',
    description: 'インドネシアを拠点とするインフルエンサー向け支払いゲートウェイ。支払い、税金、契約を合理化。',
    funding: '総額84.5万ドル',
    details: '2024年4月、日本のW fundから投資を受け、組込型金融の強化へ。',
    sourceUrl: 'https://prtimes.jp/main/html/rd/p/000000027.000044286.html',
    category: 'General',
    imageUrl: 'https://startupsmagazine.co.uk/sites/default/files/styles/article_gallery/public/2024-09/How%20fintech%20startups%20can%20address%20key%20pain%20points%20in%20the%20creator%20economy.png?itok=bBJuFGmh'
  },
  // Music/Art
  { 
    name: 'Duetti',
    description: '独立系クリエイターの楽曲ロイヤリティや出版権を買収し、前払い金を提供。',
    funding: '2億ドルを確保',
    details: '2025年3月発表。年間2,000ドル以上の収益があるアーティストが対象。',
    sourceUrl: 'https://fintech.global/2025/03/05/music-fintech-duetti-secures-200m-to-expand-royalty-and-publishing-deals-for-independent-creators/',
    category: 'Music/Art',
    imageUrl: 'https://www.privatebankerinternational.com/wp-content/uploads/sites/5/2025/02/shutterstock_2014356176.jpg'
  },
  { 
    name: 'Pophouse Entertainment',
    description: '音楽カタログや知的財産権の取得を目的としたファンドを運営。',
    funding: '13億ドルのファンドを確保',
    details: '確保したファンドのうち30%は既に投資済み。',
    sourceUrl: 'https://www.vinylmeplease.com/blogs/music-industry-news/pophouse-entertainment-secures-1-3-billion-fund-for-music-rights-investment?srsltid=AfmBOor2Ldmp_Asa5Qket8dr4CUG9VEie5Ye8AGAQa0vmpsm7y1JOoxm',
    category: 'Music/Art',
    imageUrl: 'https://www.hypebot.com/hypebot/wp-content/uploads/2024/02/jukebox-768x432.png'
  },
    { 
    name: 'Masterworks',
    description: '著名な芸術家の作品の「株式」を購入できるプラットフォーム。',
    funding: '非公開',
    details: 'ピカソやウォーホルなどの作品への小口投資を可能にし、アート投資のハードルを下げる。',
    sourceUrl: 'https://www.masterworks.com/',
    category: 'Music/Art',
    imageUrl: 'https://edge.sitecorecloud.io/lewissilkin1267-lewissilkinc0b3-production2ebf-9a4c/media/Project/Lewis-Silkin/Lewis-Silkin/images/insights-1200-x-450/2025-q2/creator_economy_insight_tcls.jpg'
  },
  {
    name: 'Slingshot',
    description: 'アーティストやクリエイター向けの金融サービス（詳細未発表）。',
    funding: '220万ドル (プレシード)',
    details: '2024年5月発表。Dorm Room Fundなどが参加。',
    sourceUrl: 'https://techcrunch.com/2024/05/29/creator-fintech-slingshot-raises-2-2-million/',
    category: 'Music/Art',
    imageUrl: 'https://www.reprtoir.com/wp-content/uploads/2024/09/reprtoir-blog-music-meets-fintech.jpg'
  },

  // NFT
  {
    name: 'OIKOS MUSIC',
    description: 'NFTを活用した独立系アーティスト向けのサブスク型収益分配プラットフォーム。',
    funding: '1.5億円 (シード)',
    details: '2023年9月発表。',
    sourceUrl: 'https://thebridge.jp/2023/09/oikos-music-seed-round-funding',
    category: 'NFT',
    imageUrl: 'https://images.microcms-assets.io/assets/b7be238c1b5c4489ab95a097e5382113/0d157822f5d4422680e4d4d26194a073/nft.png?auto=compress&fm=webp&w=1200&h=630'
  },
  { 
    name: 'LaCollection',
    description: '大英博物館などと提携するアートNFTプラットフォーム。',
    funding: '1,000万ドル (シード)',
    details: 'Alvenが主導するラウンドで調達。',
    sourceUrl: 'https://alven.co/art-nft-startup-lacollection-closes-a-10-million-seed-round-led-by-alven-shortly-after-securing-an-exclusive-long-term-partnership-with-the-british-museum-%EF%BF%BC/',
    category: 'NFT',
    imageUrl: 'https://images.microcms-assets.io/assets/b7be238c1b5c4489ab95a097e5382113/dbdf622503c144da8c4b91bf2af8c67e/m_feature240206_CRYPTOLIER_top.jpg?fm=webp&fit=crop&w=1920'
  },
  {
    name: 'OneOf',
    description: '音楽やスポーツなど多様な分野のNFTを発行するプラットフォーム。',
    funding: '800万ドル以上',
    details: '戦略的資金調達ラウンドで調達。',
    sourceUrl: 'https://coinpost.jp/?p=373090',
    category: 'NFT',
    imageUrl: 'https://nft-now.net/wp-content/uploads/2022/05/Ayokenlabs.png'
  },
  { 
    name: '株式会社フィナンシェ',
    description: 'トークン発行型のクラウドファンディングプラットフォーム「FiNANCiE」を運営。',
    funding: '非公開',
    details: '「10億人の挑戦を応援するクリエイターエコノミーの実現」がビジョン。',
    sourceUrl: 'https://startup-db.com/companies/dnPXGnyUzzWJKlBN',
    category: 'NFT',
    imageUrl: 'https://cdn.sanity.io/images/mmb1hcvm/production/dbbd66f93dc646fd2348bd0d8a349e2f9b9693aa-757x548.png?w=400&fm=webp'
  }
];

const marketData = [
  { name: '2023年', value: 2500, label: '2,500億ドル' },
  { name: '2027年 (予測)', value: 4800, label: '4,800億ドル' },
];

const fundingData = [
    { name: '2023年 (通年)', value: 17, label: '約17億ドル' },
    { name: '2024年 Q1', value: 9.28, label: '$9億2,800万ドル' },
];

const App = () => {
  const [activeTab, setActiveTab] = useState('General');

  const tabs = [
    { id: 'General', label: '総合クリエイター向け' },
    { id: 'Music/Art', label: 'アーティスト・ミュージシャン向け' },
    { id: 'NFT', label: 'NFT/ブロックチェーン活用' },
  ];

  const filteredData = startupData.filter(item => item.category === activeTab);

  const COLORS = ['#8884d8', '#82ca9d', '#ffc658', '#ff8042'];

  return (
    <div className="min-h-screen bg-gray-900 text-white font-sans p-4 sm:p-8">
      <div className="max-w-7xl mx-auto">
        <header className="text-center mb-12">
            <div class="inline-block p-4 bg-gray-800 rounded-full mb-4">
                 <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 0121 11z" /></svg>
            </div>
          <h1 className="text-4xl sm:text-5xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-indigo-500">クリエイター向けFinTechサービス最前線</h1>
          <p className="text-gray-400 mt-4 text-lg">多様化するクリエイターの金融ニーズに応えるスタートアップと資金調達動向</p>
        </header>

        <section className="mb-16 bg-gray-800 p-6 rounded-2xl shadow-lg">
            <h2 className="text-2xl font-bold mb-6 text-center text-purple-300">クリエイターエコノミー市場の成長</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
                <div>
                    <h3 className="text-xl font-semibold mb-2 text-center">世界市場規模予測 (億ドル)</h3>
                    <p className="text-sm text-gray-500 text-center mb-4">出典: <a href="https://www.lewissilkin.com/our-thinking/the-collective/insights/2025/06/10/the-evolving-creator-economy-investment-trends-and-opportunities" target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:text-blue-300 underline">Goldman Sachs</a></p>
                    <ResponsiveContainer width="100%" height={300}>
                        <BarChart data={marketData} 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: '#2D3748', border: '1px solid #4A5568' }} labelStyle={{ color: '#E2E8F0' }}/>
                            <Bar dataKey="value" name="市場規模" fill="#8884d8" radius={[4, 4, 0, 0]} label={{ position: 'top', fill: '#E2E8F0' }}>
  {marketData.map((entry, index) => (
  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
  ))}
                            </Bar>
                        </BarChart>
                    </ResponsiveContainer>
                </div>
                <div>
                    <h3 className="text-xl font-semibold mb-2 text-center">米国スタートアップ資金調達額 (億ドル)</h3>
                    <p className="text-sm text-gray-500 text-center mb-4">出典: <a href="https://www.theinformation.com/articles/creator-startup-funding-hits-highest-level-since-2021" target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:text-blue-300 underline">The Information</a>, <a href="https://news.crunchbase.com/media-entertainment/creator-entrepreneurs-investor-assistance-salikhov-schwarzwald/" target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:text-blue-300 underline">Crunchbase</a></p>
                     <ResponsiveContainer width="100%" height={300}>
                        <BarChart data={fundingData} 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: '#2D3748', border: '1px solid #4A5568' }} labelStyle={{ color: '#E2E8F0' }}/>
                            <Bar dataKey="value" name="資金調達額" fill="#82ca9d" radius={[4, 4, 0, 0]} label={{ position: 'top', fill: '#E2E8F0' }}>
  {fundingData.map((entry, index) => (
  <Cell key={`cell-${index}`} fill={COLORS[index + 1 % COLORS.length]} />
  ))}
                            </Bar>
                        </BarChart>
                    </ResponsiveContainer>
                </div>
            </div>
        </section>

        <div className="mb-8 border-b border-gray-700">
          <nav className="-mb-px flex space-x-4 sm:space-x-8" aria-label="Tabs">
            {tabs.map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`${
                  activeTab === tab.id
                    ? 'border-purple-500 text-purple-400'
                    : 'border-transparent text-gray-500 hover:text-gray-300 hover:border-gray-400'
                } whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm sm:text-base transition-colors duration-200`}
              >
                {tab.label}
              </button>
            ))}
          </nav>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8">
          {filteredData.map((item) => (
            <div key={item.name} className="bg-gray-800 rounded-2xl shadow-lg overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out flex flex-col">
              <img src={item.imageUrl} alt={item.name} className="w-full h-40 object-cover"/>
              <div className="p-6 flex-grow flex flex-col">
                <h3 className="text-xl font-bold text-purple-300 mb-2">{item.name}</h3>
                <p className="text-gray-400 text-sm mb-4 flex-grow">{item.description}</p>
                <div className="mt-auto">
                    <div className="bg-gray-700 p-4 rounded-lg mb-4">
                        <p className="text-sm text-gray-300 font-semibold">最新の資金調達</p>
                        <p className="text-2xl font-bold text-green-400">{item.funding}</p>
                        <p className="text-xs text-gray-500 mt-1">{item.details}</p>
                    </div>
                    <a href={item.sourceUrl} target="_blank" rel="noopener noreferrer" className="block text-center w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-200">
                      情報源を見る
                    </a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default App;