生成AIが音楽産業を変革する：創造性と倫理の交差点

import React from 'react';

const MusicAIAnalysis = () => {
  const marketData = {
    labels: ['2023年', '2028年（予測）'],
    datasets: [
      {
        name: '生成AI音楽市場規模',
        data: [294, 3637.1],
        color: '#4CAF50'
      }
    ]
  };

  const impactData = {
    nodes: [
      { id: '音楽産業', value: 100 },
      { id: '創造性', value: 80 },
      { id: '著作権', value: 70 },
      { id: '倫理', value: 60 },
      { id: '収益', value: 50 }
    ],
    links: [
      { source: '音楽産業', target: '創造性', value: 4 },
      { source: '音楽産業', target: '著作権', value: 3 },
      { source: '音楽産業', target: '倫理', value: 2 },
      { source: '音楽産業', target: '収益', value: 1 }
    ]
  };

  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <div className="max-w-7xl mx-auto">
        <div className="bg-white rounded-lg shadow-lg p-6 mb-8">
          <h1 className="text-3xl font-bold mb-6 text-center">音楽産業と生成AIの関わり分析</h1>
          
          {/* 市場規模の推移 */}
          <div className="mb-8">
            <div className="bg-gray-50 rounded-lg p-6">
              <h2 className="text-xl font-semibold mb-4">生成AI音楽市場規模の推移</h2>
              <div className="h-64">
                <div className="flex justify-between items-end h-full">
                  {marketData.datasets[0].data.map((value, index) => (
                    <div key={index} className="flex flex-col items-center w-1/3">
                      <div className="text-sm mb-2">{value.toLocaleString()}M USD</div>
                      <div 
                        className="bg-green-500 w-24" 
                        style={{
                          height: `${(value / 3637.1) * 100}%`,
                          transition: 'height 0.5s'
                        }}
                      ></div>
                      <div className="text-sm mt-2">{marketData.labels[index]}</div>
                    </div>
                  ))}
                </div>
              </div>
              <div className="text-xs text-gray-500 mt-2">
                出典: <a href="https://market.us/report/generative-ai-in-music-market/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Generative AI in Music Market Size, Share | CAGR of 28.6%</a>
              </div>
            </div>
          </div>

          {/* 主要な影響領域 */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* 技術的影響 */}
            <div className="bg-gray-50 rounded-lg p-6">
              <h3 className="text-lg font-semibold mb-4">技術的影響</h3>
              <ul className="space-y-2">
                <li className="flex items-center">
                  <div className="w-3 h-3 bg-blue-500 rounded-full mr-2"></div>
                  <span>AIによる音楽生成・作曲支援</span>
                </li>
                <li className="flex items-center">
                  <div className="w-3 h-3 bg-blue-500 rounded-full mr-2"></div>
                  <span>音声合成・ボーカル生成</span>
                </li>
                <li className="flex items-center">
                  <div className="w-3 h-3 bg-blue-500 rounded-full mr-2"></div>
                  <span>ミキシング・マスタリング自動化</span>
                </li>
              </ul>
              <div className="text-xs text-gray-500 mt-2">
                出典: <a href="https://www.dataart.com/blog/harmonizing-creativity-the-impact-and-evolution-of-generative-ai-in-music-by-doron-fagelson" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">The Impact and Evolution of Generative AI in Music - DataArt</a>
              </div>
            </div>

            {/* 倫理的課題 */}
            <div className="bg-gray-50 rounded-lg p-6">
              <h3 className="text-lg font-semibold mb-4">倫理的課題</h3>
              <ul className="space-y-2">
                <li className="flex items-center">
                  <div className="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
                  <span>著作権侵害リスク</span>
                </li>
                <li className="flex items-center">
                  <div className="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
                  <span>アーティストの権利保護</span>
                </li>
                <li className="flex items-center">
                  <div className="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
                  <span>データプライバシー</span>
                </li>
              </ul>
              <div className="text-xs text-gray-500 mt-2">
                出典: <a href="https://montrealethics.ai/the-ethical-implications-of-generative-audio-models-a-systematic-literature-review/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">The Ethical Implications of Generative Audio Models</a>
              </div>
            </div>

            {/* 収益への影響 */}
            <div className="bg-gray-50 rounded-lg p-6">
              <h3 className="text-lg font-semibold mb-4">収益への影響（2028年までの予測）</h3>
              <ul className="space-y-2">
                <li className="flex items-center">
                  <div className="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
                  <span>音楽クリエイターの収入: 27%減少</span>
                </li>
                <li className="flex items-center">
                  <div className="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
                  <span>ストリーミング収益: 20%がAI生成</span>
                </li>
                <li className="flex items-center">
                  <div className="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
                  <span>B2B音楽: 60%がAI生成</span>
                </li>
              </ul>
              <div className="text-xs text-gray-500 mt-2">
                出典: <a href="https://www.musicbusinessworldwide.com/market-for-gen-ai-outputs-to-be-worth-over-16bn-annually-by-2028-but-it-could-cannibalize-24-of-music-creators-revenues-cisac-predicts/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Market for Gen AI outputs impact prediction</a>
              </div>
            </div>

            {/* 主要プレイヤー */}
            <div className="bg-gray-50 rounded-lg p-6">
              <h3 className="text-lg font-semibold mb-4">主要AIプラットフォーム</h3>
              <ul className="space-y-2">
                <li className="flex items-center">
                  <div className="w-3 h-3 bg-purple-500 rounded-full mr-2"></div>
                  <span>AIVA: 250以上のスタイルで作曲</span>
                </li>
                <li className="flex items-center">
                  <div className="w-3 h-3 bg-purple-500 rounded-full mr-2"></div>
                  <span>Soundraw: カスタム作曲生成</span>
                </li>
                <li className="flex items-center">
                  <div className="w-3 h-3 bg-purple-500 rounded-full mr-2"></div>
                  <span>Boomy: 即時音楽生成</span>
                </li>
              </ul>
              <div className="text-xs text-gray-500 mt-2">
                出典: <a href="https://www.aiva.ai/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">AIVA</a>, 
                <a href="https://soundraw.io/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Soundraw</a>, 
                <a href="https://boomy.com/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Boomy</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MusicAIAnalysis;