Spotifyのレコメンド機能がユーザーに与える価値とその仕組み

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

const App = () => {
  // ユーザー満足度データ（推定値）
  const satisfactionData = [
    { name: 'アクティブユーザー', value: 88, description: '推定値: アクティブユーザーの88%が推薦に満足' },
    { name: '非アクティブユーザー', value: 49, description: '推定値: 非アクティブユーザーの49%が推薦に満足' }
  ];

  // レコメンド機能の主要要素データ
  const recommendationElements = [
    { name: 'パーソナライズ機能', value: 95, source: 'Understanding recommendations on Spotify' },
    { name: '人間とAIの協力', value: 85, source: 'Search & Recommendations - Spotify Research' },
    { name: 'コンテンツ分析', value: 80, source: 'The Inner Workings of Spotify\'s AI-Powered Music Recommendations' },
    { name: 'ユーザー行動分析', value: 75, source: 'How does the Spotify recommendation algorithm work?' }
  ];

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

  return (
    <div className="container mx-auto p-8 bg-gray-50">
      <div className="mb-12 bg-white rounded-lg shadow-lg p-6">
        <h2 className="text-2xl font-bold mb-6 text-center text-gray-800">スポティファイのレコメンド機能が有意義な理由</h2>
        
        {/* 満足度の比較 */}
        <div className="mb-8">
          <h3 className="text-xl font-semibold mb-4 text-gray-700">ユーザー満足度比較</h3>
          <div className="h-[300px]">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={satisfactionData}
                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="value" fill="#8884d8" name="満足度" />
              </BarChart>
            </ResponsiveContainer>
          </div>
          <p className="text-sm text-gray-500 mt-2 text-center">
            出典: <a href="https://research.atspotify.com/2018/07/understanding-and-evaluating-user-satisfaction-with-music-discovery/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Understanding and Evaluating User Satisfaction with Music Discovery</a>
          </p>
        </div>

        {/* レコメンド機能の主要要素 */}
        <div>
          <h3 className="text-xl font-semibold mb-4 text-gray-700">レコメンド機能の主要要素と有効性</h3>
          <div className="h-[300px]">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={recommendationElements}
                  cx="50%"
                  cy="50%"
                  labelLine={false}
                  outerRadius={100}
                  fill="#8884d8"
                  dataKey="value"
                  label={({ name, value }) => `${name}: ${value}%`}
                >
                  {recommendationElements.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </div>
          <div className="text-sm text-gray-500 mt-2">
            <p className="text-center">出典: 
              <a href="https://www.spotify.com/safetyandprivacy/understanding-recommendations" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700 mx-1">Spotify Safety & Privacy Center</a>
            </p>
          </div>
        </div>

        {/* 主要な機能の説明 */}
        <div className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="bg-blue-50 p-4 rounded-lg">
            <h4 className="font-semibold text-blue-800 mb-2">パーソナライズ機能</h4>
            <ul className="list-disc list-inside text-sm text-gray-700">
              <li>ユーザーの好みに基づく個別化された推薦</li>
              <li>リスニング履歴の分析</li>
              <li>音楽の特徴量分析</li>
            </ul>
          </div>
          <div className="bg-green-50 p-4 rounded-lg">
            <h4 className="font-semibold text-green-800 mb-2">人間とAIの協力</h4>
            <ul className="list-disc list-inside text-sm text-gray-700">
              <li>編集者によるキュレーション</li>
              <li>AIアルゴリズムによる個別化</li>
              <li>ユーザーフィードバックの反映</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;