日本のサブスクリプションサービス市場の動向と将来予測

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

const App = () => {
  // 市場規模の推移データ
  const marketData = [
    { year: '2018', value: 5627.36 },
    { year: '2019', value: 6220.54 },
    { year: '2020', value: 7890.12 },
    { year: '2021', value: 9615.50 },
    { year: '2022', value: 10524.75 },
    { year: '2023', value: 9430.30 },
    { year: '2024', value: 9831.00 },
  ];

  // サービス分野別シェアデータ（2023年推定）
  const serviceData = [
    { name: 'デジタルコンテンツ', value: 35 },
    { name: 'ファッション', value: 20 },
    { name: '飲食店サービス', value: 15 },
    { name: 'ライフスタイル', value: 12 },
    { name: 'レジャー・エンタメ', value: 8 },
    { name: '教育', value: 6 },
    { name: 'メディカル・ヘルス', value: 4 },
  ];

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

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-8 text-center">日本のサブスクリプションサービス市場の動向と将来予測</h1>

      <div className="bg-white rounded-lg shadow-lg p-6 mb-8">
        <h2 className="text-2xl font-semibold mb-4">市場規模の推移と予測</h2>
        <p className="mb-4">
          <a href="https://www.yano.co.jp/press-release/show/press_id/3416" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">矢野経済研究所の調査</a>
          によると、2023年の国内サブスクリプションサービス市場は約9,430億円に達し、2024年には
          <a href="https://www.nikkeibp.co.jp/atcl/newsrelease/corp/20240514/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">前年比4.2％増の9,831億円</a>
          になると予測されています。
        </p>
        <div className="h-[400px] w-full">
          <ResponsiveContainer>
            <AreaChart data={marketData} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="year" />
              <YAxis />
              <Tooltip formatter={(value) => `${value.toLocaleString()}億円`} />
              <Legend />
              <Area type="monotone" dataKey="value" name="市場規模" stroke="#8884d8" fill="#8884d8" />
            </AreaChart>
          </ResponsiveContainer>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
        <div className="bg-white rounded-lg shadow-lg p-6">
          <h2 className="text-2xl font-semibold mb-4">サービス分野別シェア（2023年推定）</h2>
          <div className="h-[300px]">
            <ResponsiveContainer>
              <PieChart>
                <Pie
                  data={serviceData}
                  cx="50%"
                  cy="50%"
                  labelLine={true}
                  label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                  outerRadius={80}
                  fill="#8884d8"
                  dataKey="value"
                >
                  {serviceData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow-lg p-6">
          <h2 className="text-2xl font-semibold mb-4">市場の特徴と今後の展望</h2>
          <ul className="list-disc pl-6 space-y-2">
            <li>
              <a href="https://www.moneypost.jp/1184571" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">現在1000以上のサービスが存在</a>
              し、市場は毎年約10％の成長を示しています。
            </li>
            <li>
              <a href="https://subscription-store.com/know-how/no_0112" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">20代の50.2%、30代の41.5%</a>
              が「サブスクリプションサービス」を認知しています。
            </li>
            <li>
              <a href="https://www.yano.co.jp/press-release/show/press_id/3416" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">物価高騰の影響</a>
              を受けつつも、市場は堅調に推移する見込みです。
            </li>
            <li>
              <a href="https://payproglobal.com/ja/%E5%9B%9E%E7%AD%94/saas%E3%81%AE%E3%83%88%E3%83%AC%E3%83%B3%E3%83%89%E3%81%A8%E3%82%A4%E3%83%8E%E3%83%99%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A8%E3%81%AF/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">デジタルコンテンツとメディアのサブスクリプション</a>
              からの収益は、2021年から2025年までに13.5%の成長が予測されています。
            </li>
          </ul>
        </div>
      </div>

      <div className="bg-white rounded-lg shadow-lg p-6">
        <h2 className="text-2xl font-semibold mb-4">注目トレンド</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="border rounded-lg p-4">
            <h3 className="text-xl font-semibold mb-2">デジタルコンテンツ</h3>
            <p>動画・音楽配信が市場を牽引。
              <a href="https://research.impress.co.jp/internetvideo-report" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Amazonプライム・ビデオが72.6％</a>
              のシェアを獲得。</p>
          </div>
          <div className="border rounded-lg p-4">
            <h3 className="text-xl font-semibold mb-2">ライフスタイル</h3>
            <p>
              <a href="https://www.yano.co.jp/press-release/show/press_id/3416" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">家電セグメント</a>
              がコロナ禍を契機に急成長。新たな利用形態として試用後購入モデルが台頭。</p>
          </div>
          <div className="border rounded-lg p-4">
            <h3 className="text-xl font-semibold mb-2">将来展望</h3>
            <p>
              <a href="https://www.nikkeibp.co.jp/atcl/newsrelease/corp/20240514/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">2024年上半期のトレンド</a>
              として、サブスクリプション型コマース、CX、チャットbotが注目。</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;