LayerX『Ai Workforce』徹底解説：生成AIが拓く未来とビジネスモデルの全貌

import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Label } from 'recharts';

// データ
const populationData = [
  { year: 1915, value: 5275 },
  { year: 1967, value: 10000 },
  { year: 2008, value: 12810 },
  { year: 2023, value: 12441 },
  { year: 2110, high: 7488, medium: 5982, low: 4274 },
];

const useCases = [
  { task: '提案書生成・マスキング', department: '営業' },
  { task: 'データ活用', department: '営業' },
  { task: 'ヘルプデスク', department: '事業投資' },
  { task: '与信', department: '事業投資' },
  { task: 'ビジネスナレッジ', department: '事業投資' },
  { task: '稟議書', department: 'コーポレート, ストファイ' },
  { task: '内部監査', department: 'コーポレート' },
  { task: 'リスク管理', department: 'コーポレート' },
  { task: '貿易', department: 'コーポレート' },
  { task: '見積書', department: '調達' },
  { task: '契約管理・レビュー', department: 'ストファイ' },
  { task: '台帳作成', department: 'ファンド管理' },
  { task: '提案書シェア', department: 'M&A' },
  { task: '法規文書', department: '開発' },
];

const platformComponents = [
  {
    category: 'ナレッジ',
    platform: 'データベース・ファイル管理と検索',
    setup: '社内データ基盤との接続・ETL',
    result: '未整備・機密性の高いノウハウや事例の活用、社内データ基盤'
  },
  {
    category: 'スキル',
    platform: 'ワークフロー・エージェントビルダーと実行エンジン',
    setup: '個別チューニングされたワークフロー・エージェント',
    result: '特定の業界や企業に特化した専門能力や暗黙知的なスキル'
  },
  {
    category: 'ツール',
    platform: 'ツールの登録管理機能、各種標準ツール',
    setup: 'ユーザー特化ツール（特殊プログラムや社内システム操作）',
    result: '基幹システムとの連携、専門的なモジュール'
  },
  {
    category: 'UI',
    platform: 'UIの部品群',
    setup: '部品を組み合わせたエージェント別のUI定義',
    result: 'タスクの大きさや性質に応じたユーザーの介入、多様な可視化'
  },
];

const App = () => {
  return (
    <div className="bg-gray-50 min-h-screen font-sans text-gray-800">
      <header className="bg-white shadow-md sticky top-0 z-10">
        <div className="container mx-auto px-6 py-4">
          <div className="flex items-center">
             <svg className="h-8 w-auto mr-3" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M50 0C22.3858 0 0 22.3858 0 50C0 77.6142 22.3858 100 50 100C77.6142 100 100 77.6142 100 50C100 22.3858 77.6142 0 50 0Z" fill="url(#paint0_linear_1_2)"/>
                <defs>
                    <linearGradient id="paint0_linear_1_2" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
                        <stop stopColor="#8B5CF6"/>
                        <stop offset="1" stopColor="#EC4899"/>
                    </linearGradient>
                </defs>
             </svg>
            <h1 className="text-2xl font-bold text-gray-900">Ai Workforce: ビジョンとビジネスモデル分析</h1>
          </div>
        </div>
      </header>

      <main className="container mx-auto px-6 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          
          {/* Left Column */}
          <div className="lg:col-span-2 space-y-8">

            {/* Population Chart */}
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <h2 className="text-xl font-semibold mb-4">日本の長期的な人口推移と将来推計</h2>
              <ResponsiveContainer width="100%" height={400}>
                <LineChart margin={{ top: 5, right: 30, left: 20, bottom: 20 }}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="year" type="number" domain={[1900, 2120]} tickCount={8} tickFormatter={(tick) => `${tick}年`}>
                     <Label value="年" offset={-15} position="insideBottom" />
                  </XAxis>
                  <YAxis unit="万人" tickFormatter={(tick) => `${(tick/10000).toFixed(1)}億人`}>
                    <Label value="人口" angle={-90} position="insideLeft" style={{ textAnchor: 'middle' }} />
                  </YAxis>
                  <Tooltip formatter={(value) => new Intl.NumberFormat('ja-JP').format(value) + ' 万人'}/>
                  <Legend verticalAlign="top" height={36}/>
                  <Line type="monotone" data={populationData.slice(0, 4)} dataKey="value" name="実績" stroke="#8884d8" strokeWidth={2} dot={{ r: 4 }} />
                  <Line type="monotone" data={[{year: 2023, high: 12441}, {year: 2110, high: 7488}]} dataKey="high" name="将来推計(高位)" stroke="#82ca9d" strokeDasharray="5 5" />
                  <Line type="monotone" data={[{year: 2023, medium: 12441}, {year: 2110, medium: 5982}]} dataKey="medium" name="将来推計(中位)" stroke="#ffc658" strokeDasharray="5 5" />
                  <Line type="monotone" data={[{year: 2023, low: 12441}, {year: 2110, low: 4274}]} dataKey="low" name="将来推計(低位)" stroke="#ff8042" strokeDasharray="5 5" />
                </LineChart>
              </ResponsiveContainer>
              <p className="text-xs text-right text-gray-500 mt-2">
                出典: <a href="https://note.com/nrryuya/n/nb8af7e35a478" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">LayerX 中村龍矢氏 note</a> のグラフよりデータを抽出
              </p>
            </div>

            {/* Market Disruption */}
            <div className="bg-white p-6 rounded-lg shadow-lg">
                <h2 className="text-xl font-semibold mb-4">AIによるソフトウェア市場の境界線溶解</h2>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
                    <div className="text-center p-4 border rounded-md">
                        <h3 className="font-bold mb-2">従来型ソフトウェア</h3>
                        <div className="relative w-full h-48 bg-gray-100 rounded">
                            <div className="absolute bottom-0 left-0 w-24 h-24 bg-blue-500 opacity-70" style={{clipPath: 'polygon(0 0, 100% 100%, 0 100%)'}}></div>
                            <p className="absolute bottom-2 left-2 text-xs text-white">S&M/HR等<br/>全世界共通</p>
                            <div className="absolute top-2 right-2 p-2 bg-pink-500 text-white rounded-md text-sm">アナログ or 受託開発</div>
                            <div className="absolute bottom-0 left-0 w-full h-1 bg-gray-800"></div>
                             <div className="absolute bottom-0 left-0 w-1 h-full bg-gray-800"></div>
                        </div>
                         <p className="mt-2 text-sm">共通業務はSaaS化、固有業務は受託開発が主流だった</p>
                    </div>
                    <div className="text-center p-4 border rounded-md">
                        <h3 className="font-bold mb-2">Ai Workforceの領域</h3>
                        <div className="relative w-full h-48 bg-gray-300 rounded">
                             <div className="absolute inset-0 flex items-center justify-center">
  <div className="w-24 h-24 bg-purple-500 rounded-lg flex items-center justify-center text-white font-bold text-center text-xs">Ai<br/>Workforce</div>
                             </div>
                             <div className="absolute bottom-0 left-0 w-full h-1 bg-gray-800"></div>
                             <div className="absolute bottom-0 left-0 w-1 h-full bg-gray-800"></div>
                             <p className="absolute top-2 right-2 text-xs font-semibold">人間がカバー<br/>していた領域</p>
                        </div>
                        <p className="mt-2 text-sm">AIの適応力で、企業固有のルールや業務にも対応可能に</p>
                    </div>
                </div>
            </div>
            
            {/* Use Cases */}
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <h2 className="text-xl font-semibold mb-4">Ai Workforce 導入ユースケース</h2>
              <p className="text-sm text-gray-600 mb-4">MUFG様、三井物産様、三菱HCキャピタル様など、大手企業で固有性の高い業務に導入されています。</p>
              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
                {useCases.map((item, index) => (
                  <div key={index} className="bg-indigo-100 text-indigo-800 p-3 rounded-md text-center">
                    <p className="font-semibold text-sm">{item.task}</p>
                    <p className="text-xs">({item.department})</p>
                  </div>
                ))}
              </div>
            </div>

            {/* Platform Components */}
            <div className="bg-white p-6 rounded-lg shadow-lg">
                <h2 className="text-xl font-semibold mb-6 text-center">AIエージェントに必要な4要素とAi Workforceの構成</h2>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    {platformComponents.map((comp) => (
                        <div key={comp.category} className="border-2 rounded-lg overflow-hidden">
                            <h3 className={`text-center font-bold text-white p-2 bg-gradient-to-r from-purple-500 to-pink-500`}>{comp.category}</h3>
                            <div className="p-3 bg-gray-100">
  <p className="font-semibold text-sm">プラットフォーム(共通)</p>
  <p className="text-xs text-gray-700 min-h-[40px]">{comp.platform}</p>
                            </div>
                            <div className="p-3 bg-gray-200">
  <p className="font-semibold text-sm">セットアップ(個別)</p>
  <p className="text-xs text-gray-700 min-h-[40px]">{comp.setup}</p>
                            </div>
                            <div className="p-3 bg-purple-100">
  <p className="font-semibold text-sm text-purple-800">得られる結果</p>
  <p className="text-xs text-purple-700 min-h-[50px]">{comp.result}</p>
                            </div>
                        </div>
                    ))}
                </div>
            </div>

          </div>

          {/* Right Column */}
          <div className="space-y-8">
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <h2 className="text-xl font-semibold mb-4">Ai Workforceの進化</h2>
              <p className="text-sm text-gray-600 mb-4">知的単純作業をこなす「ワークフロー」から、人間と伴走する「エージェント」へ進化。</p>
              <div className="flex flex-col space-y-4">
                <div className="border rounded-lg p-4">
                    <h3 className="font-bold text-lg text-indigo-600">ワークフロー</h3>
                    <p className="text-sm font-semibold mt-1">一方向・手続き的な処理</p>
                    <ul className="list-disc list-inside text-sm text-gray-700 mt-2 space-y-1">
                        <li>営業資料のタグ付け・マスキング</li>
                        <li>監査結果のサマリー作成</li>
                        <li>契約書の限定的な項目レビュー</li>
                    </ul>
                </div>
                <div className="self-center text-2xl">↓</div>
                <div className="border rounded-lg p-4 border-purple-400 bg-purple-50">
                    <h3 className="font-bold text-lg text-purple-600">エージェント</h3>
                    <p className="text-sm font-semibold mt-1">試行錯誤しながら難しい仕事に伴走</p>
                    <ul className="list-disc list-inside text-sm text-gray-700 mt-2 space-y-1">
                        <li>営業提案ストーリーと資料を共同作成</li>
                        <li>問題点の発見・アセスメントに同行</li>
                        <li>過去の失敗事例から臨機応変な課題指摘</li>
                    </ul>
                </div>
              </div>
            </div>

            <div className="bg-white p-6 rounded-lg shadow-lg">
                <h2 className="text-xl font-semibold mb-4">アーキテクチャ概要</h2>
                <div className="relative p-4 bg-gray-100 rounded-lg text-xs">
                    <div className="grid grid-cols-3 gap-2 items-center">
                        {/* Left Side */}
                        <div className="space-y-2 col-span-1">
                            <div className="bg-gray-700 text-white p-2 rounded text-center">ユーザー定義ツール</div>
                            <div className="bg-purple-400 text-white p-2 rounded text-center">標準ツール</div>
                            <p className="text-center font-bold">ツールインベントリ</p>
                        </div>
                        {/* Center Flow */}
                        <div className="space-y-2 col-span-1">
                           <div className="bg-blue-500 text-white p-2 rounded text-center">ユーザー</div>
                           <div className="text-center font-bold">↓</div>
                           <div className="bg-gray-600 text-white p-2 rounded text-center">UI</div>
                           <div className="text-center font-bold">↓</div>
                           <div className="bg-gray-600 text-white p-2 rounded text-center">エージェント</div>
                           <div className="text-center font-bold">↓</div>
                           <div className="bg-gray-600 text-white p-2 rounded text-center">ワークフロー</div>
                        </div>
                        {/* Right Side */}
                        <div className="space-y-2 col-span-1">
                           <div className="bg-pink-400 text-white p-2 rounded text-center">UIコンポーネント</div>
                           <div className="bg-pink-400 text-white p-2 rounded text-center mt-10">エージェントビルダー</div>
                           <div className="bg-pink-400 text-white p-2 rounded text-center mt-10">ワークフロービルダー</div>
                        </div>
                    </div>
                    <div className="text-center font-bold my-2">↓</div>
                    <div className="grid grid-cols-2 gap-2">
                        <div className="bg-gray-100 border-2 border-dashed p-2 rounded col-span-1">
                            <div className="bg-purple-400 text-white p-2 rounded text-center">データベース</div>
                            <div className="bg-purple-400 text-white p-2 rounded text-center mt-2">ファイル</div>
                            <p className="text-center font-bold mt-2">ナレッジ</p>
                        </div>
                        <div className="col-span-1 flex items-center justify-center">
                            <div className="bg-pink-400 text-white p-2 rounded text-center">AIプロセスマイニング</div>
                        </div>
                    </div>
                </div>
            </div>

            <div className="bg-white p-6 rounded-lg shadow-lg">
              <h2 className="text-xl font-semibold mb-4">企業にもたらす価値</h2>
              <ul className="space-y-3">
                <li className="flex items-start">
                  <span className="bg-green-500 text-white rounded-full h-6 w-6 text-center font-bold mr-3 flex-shrink-0">1</span>
                  <span>圧倒的なビジネスのスピードアップ</span>
                </li>
                <li className="flex items-start">
                  <span className="bg-green-500 text-white rounded-full h-6 w-6 text-center font-bold mr-3 flex-shrink-0">2</span>
                  <span>自社の固有性の高い業務領域でもAIを活用</span>
                </li>
                <li className="flex items-start">
                  <span className="bg-green-500 text-white rounded-full h-6 w-6 text-center font-bold mr-3 flex-shrink-0">3</span>
                  <span>組織・バリューチェーン全体の変革を視野に入れる</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </main>
      
      <footer className="text-center py-6 mt-8 border-t">
        <p className="text-sm text-gray-600">
          この分析は <a href="https://note.com/nrryuya/n/nb8af7e35a478" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">Ai Workforceのビジョンとビジネスモデル｜中村 龍矢 | LayerX 執行役員 AI・LLM事業部長</a> の記事に基づいています。
        </p>
      </footer>
    </div>
  );
};

export default App;