三菱重工の生成AI最前線：全社導入から事業創出までの最新事例

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

const CaseStudyCard = ({ title, partner, description, outcome, sourceUrl, children, badge }) => (
  <div className="bg-white rounded-lg shadow-lg p-6 mb-6 hover:shadow-xl transition-shadow duration-300">
    <div className="flex justify-between items-start mb-4">
      <h3 className="text-xl font-bold text-gray-800">{title}</h3>
      {badge && <span className="bg-red-600 text-white text-xs font-semibold mr-2 px-2.5 py-0.5 rounded-full">{badge}</span>}
    </div>
    <p className="text-sm text-gray-500 mb-2"><strong>パートナー/技術:</strong> {partner}</p>
    <p className="text-gray-700 mb-3"><strong>概要:</strong> {description}</p>
    <p className="text-green-700 font-semibold mb-4"><strong>目的・成果:</strong> {outcome}</p>
    {children}
    <div className="text-right mt-4">
      <a href={sourceUrl} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:text-blue-800 text-sm font-medium transition-colors duration-300">出典を見る &rarr;</a>
    </div>
  </div>
);

const CostReductionChart = () => {
  const data = [
    { name: '従来 (勘と経験)', '年間廃棄コスト': 60000000 },
    { name: 'AI導入後', '年間廃棄コスト': 0 },
  ];

  return (
    <div className="my-4">
      <h4 className="text-md font-semibold text-gray-700 mb-2 text-center">航空機シール材の年間廃棄コスト削減効果</h4>
      <p className="text-xs text-gray-500 text-center mb-2">※「年換算で数千万円」を6,000万円と仮定して表示しています。</p>
      <ResponsiveContainer width="100%" height={250}>
        <BarChart data={data} margin={{ top: 5, right: 20, left: 20, bottom: 5 }}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" tick={{fontSize: 12}} />
          <YAxis tickFormatter={(value) => `${value / 1000000}百万円`} tick={{fontSize: 12}} />
          <Tooltip formatter={(value) => [`${value.toLocaleString()}円`, 'コスト']} />
          <Legend wrapperStyle={{fontSize: '14px'}} />
          <Bar dataKey="年間廃棄コスト" fill="#E60012" />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}

const App = () => {
  const challenges = [
    { type: '技術開発', content: '各事業部門が個別に技術開発を進めることによる二重投資の懸念', source: 'https://xtech.nikkei.com/atcl/nxt/column/18/02897/071900003/' },
    { type: '組織連携', content: '事業部門やシステムが個別に最適化され連携が取れていない「システムのサイロ化」', source: 'https://active.nikkeibp.co.jp/atcl/wp/b/24/11/07/05066/' },
    { type: '生成AI特有', content: '事業価値のあるユースケースの特定、投資効率の向上、安全な利用のためのガバナンス整備', source: 'https://aws.amazon.com/jp/blogs/news/mitsubishi-heavy-industries-genai-challenge/' },
    { type: 'グローバル', content: '全世界のグループメンバーが連携するためのIT基盤変革や情報共有の効率化', source: 'https://www.mhi.com/jp/news/25052001.html' },
  ];

  return (
    <div className="bg-gray-100 font-sans p-4 md:p-8">
      <div className="max-w-6xl mx-auto">
        <header className="mb-8 text-center">
          <h1 className="text-4xl font-extrabold text-gray-900 mb-2">三菱重工の生成AI・DX活用事例</h1>
          <p className="text-lg text-gray-600">多様なパートナーと連携し、全社的なデジタルトランスフォーメーションを推進</p>
        </header>

        <section className="mb-12">
          <h2 className="text-2xl font-bold text-gray-800 border-b-4 border-red-600 pb-2 mb-6">主要な活用事例</h2>
          <div className="grid md:grid-cols-2 gap-8">
            <CaseStudyCard
              title="航空機製造の需要予測最適化"
              partner="Google Cloud (Vertex AI, BigQuery)"
              description="広島の江波工場にて、有効期限が短い航空機用シール材の需要をAIで予測。従来は熟練作業員の経験に依存し、多大な廃棄コストが発生していた課題に取り組んだ。"
              outcome="需要予測の算出時間を40時間から10分に短縮し、年間数千万円に及んだ廃棄コストをゼロに削減。"
              sourceUrl="https://cloud.google.com/customers/intl/ja-jp/mhi"
              badge="コスト削減"
            >
              <CostReductionChart />
            </CaseStudyCard>

            <CaseStudyCard
              title="全社的な生成AI活用と企業変革"
              partner="Amazon Web Services (AWS)"
              description="グループ全体のDXを推進するDI本部と事業会社が共同で、AWSのフレームワークを活用。戦略策定からユースケース特定、プロトタイピングまでを短期間で実践。"
              outcome="事業価値に直結する3つのユースケースを特定し、プロトタイプを開発。本番環境への移行が決定し、他事業への横展開も計画中。"
              sourceUrl="https://aws.amazon.com/jp/blogs/news/mitsubishi-heavy-industries-genai-challenge/"
              badge="企業変革"
            />

            <CaseStudyCard
              title="戦闘支援無人機の開発"
              partner="自社開発 / 防衛装備庁"
              description="有人の次期戦闘機と連携して任務を遂行する「チーミング」を実現するため、高度なAIを搭載した戦闘支援無人機を開発。ステルス設計や損耗許容性を特徴とする。"
              outcome="2024年にコンセプトモデルを公開。2025年中には実機による初の飛行試験を計画しており、日本の防衛技術高度化に貢献。"
              sourceUrl="https://news.yahoo.co.jp/expert/articles/e5915a9ab6626c0ebaeeaf61c5e094cabc5b495b"
              badge="防衛・安全保障"
            />

            <CaseStudyCard
              title="IR業務の効率化と高度化"
              partner="エクサウィザーズ (exaBase IRアシスタント)"
              description="IR（投資家向け広報）業務において、面談の議事録自動生成や想定問答作成を支援するIR業務特化型の生成AIサービスを導入。"
              outcome="定型業務を効率化し、担当者がより付加価値の高い戦略的な情報開示や、資本市場との対話の充実にリソースを集中させる体制を構築。"
              sourceUrl="https://exawizards.com/archives/29003/"
              badge="業務効率化"
            />
            
            <CaseStudyCard
              title="エネルギー・サービス「TOMONI®」の強化"
              partner="自社開発"
              description="自社ソリューションブランド「TOMONI®」にて、生成AIを活用し、火力発電プラント等のスマート保全と遠隔監視を強化。"
              outcome="蓄積された保全・運転データを基に、顧客の保全業務を強力に支援。将来的には顧客向けの新たなサービスとして展開予定。"
              sourceUrl="https://www.mhi.com/jp/technology/review/abstract-60-4-30"
              badge="サービス高度化"
            />

            <CaseStudyCard
              title="データセンター運用の最適化"
              partner="米国Modius社"
              description="データセンターのインフラ管理（DCIM）において、Modius社のAI/MLモジュールを統合。リアルタイムでの異常検知やエネルギー効率の最適化を行う。"
              outcome="データセンターの可視性を高め、エネルギー効率の改善とダウンタイムの最小化を支援。持続可能なデータセンター構築に貢献。"
              sourceUrl="https://www.mhi.com/jp/news/25072901.html"
              badge="事業連携"
            />
          </div>
        </section>

        <section>
          <h2 className="text-2xl font-bold text-gray-800 border-b-4 border-red-600 pb-2 mb-6">DX推進における認識された課題</h2>
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                <tr>
                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">課題の種類</th>
                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">具体的な内容</th>
                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">出典</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {challenges.map((challenge, index) => (
                  <tr key={index} className="hover:bg-gray-50">
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{challenge.type}</td>
                    <td className="px-6 py-4 whitespace-normal text-sm text-gray-700">{challenge.content}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-blue-600">
                      <a href={challenge.source} target="_blank" rel="noopener noreferrer" className="underline hover:text-blue-800">Link</a>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>

        <footer className="mt-12 text-center text-sm text-gray-500">
          <p>この情報は提供されたコンテキストに基づき生成されています。</p>
          <p>最終更新日: 2025-08-05</p>
        </footer>
      </div>
    </div>
  );
};

export default App;