UXを最大化する「ヒューマン・イン・ザ・ループ」：生成AIアプリの最新UI/UX事例

import React from 'react';

const CaseCard = ({ title, description, sourceUrl, sourceName }) => (
  <div className="bg-white rounded-lg shadow-md p-6 border border-gray-200 hover:shadow-lg transition-shadow duration-300">
    <h3 className="text-xl font-semibold text-gray-800 mb-3">{title}</h3>
    <p className="text-gray-600 mb-4">{description}</p>
    <a href={sourceUrl} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700 text-sm">
      出典: {sourceName}
    </a>
  </div>
);

const App = () => {
  const uiDesignCases = [
    {
      title: '対話を通じたUIの段階的な改善',
      description: 'ユーザーがAIと対話しながらUIを構築。「TODOアプリをSPAで実装して」という指示から始め、「一括削除機能を追加して」といった追加のプロンプトでAIがUIを改善していく。',
      sourceUrl: 'https://aws.amazon.com/jp/builders-flash/202406/generative-ai-ux/',
      sourceName: 'AWS Builders Flash'
    },
    {
      title: '手書きスケッチからのUI生成と修正',
      description: 'Claude 3のマルチモーダル機能を活用し、手書きのラフスケッチからダッシュボード画面を生成。人間が抽象的なアイデアを提示し、AIが具現化、その後人間がプロンプトで微調整を行う。',
      sourceUrl: 'https://aws.amazon.com/jp/builders-flash/202406/generative-ai-ux/',
      sourceName: 'AWS Builders Flash'
    },
    {
      title: '詳細なプロンプトによるデザイン指示',
      description: 'AIに「役割」「コンテキスト」「具体的要件」「出力形式」を詳細に指示することで、高品質なUIデザイン案を引き出す。人間がAIの能力を最大限に引き出すための実践例。',
      sourceUrl: 'https://zenn.dev/tomo0108/articles/d4fd8c1e7a359d',
      sourceName: 'Zenn'
    }
  ];

  const businessSystemCases = [
    {
      title: 'フリーマーケットの出品物管理',
      description: 'AIがガイドライン違反の可能性がある出品物を自動検知し、その結果を人間が目視で最終確認・判断する。AIの網羅性と人間の精緻な判断を組み合わせる。',
      sourceUrl: 'https://www.cloud-contactcenter.jp/blog/what-is-human-in-the-loop',
      sourceName: 'Cloud-ContactCenter.jp'
    },
    {
      title: '生命保険の契約査定業務',
      description: 'AIが健康診断書データに基づき引受可否を自動査定。ただし、AIの確信度が低いケースに限り、人間の査定担当者に判断を委ねることでエッジケースに対応する。',
      sourceUrl: 'https://www.cloud-contactcenter.jp/blog/what-is-human-in-the-loop',
      sourceName: 'Cloud-ContactCenter.jp'
    },
    {
      title: 'コンタクトセンターでの顧客対応',
      description: 'チャットボットが一次対応を行い、AIが対応困難と判断した場合や顧客の感情的な高まりを検知した場合に、スムーズに人間のオペレーターへ引き継ぐ。',
      sourceUrl: 'https://www.cloud-contactcenter.jp/blog/what-is-human-in-the-loop',
      sourceName: 'Cloud-ContactCenter.jp'
    }
  ];

  const otherInfo = [
      {
          title: 'Generative “UI”という新しい概念',
          description: 'ユーザーのニーズやコンテキストに合わせて、AIがリアルタイムで動的にUIを生成する概念。将来的には、個々のユーザーに最適化されたUIのリアルタイム提供が期待される。',
          sourceUrl: 'https://aws.amazon.com/jp/builders-flash/202406/generative-ai-ux/',
          sourceName: 'AWS Builders Flash'
      },
      {
          title: 'AIエージェントにおけるHITLの不可欠性',
          description: '自律的に計画・実行するAIエージェントは、誤情報（ハルシネーション）のリスクを伴うため、人間が重要なアウトプットを確認・承認するプロセスが不可欠。',
          sourceUrl: 'https://mieru-ca.com/ai-seo/ai_agent/',
          sourceName: 'ミエルカAI'
      },
      {
          title: 'UI生成プロセスにおけるUXの工夫',
          description: 'AWS LambdaのResponse Streaming機能を利用し、生成されるHTMLソースコードを少しずつ表示。ユーザーは生成プロセスをリアルタイムで確認でき、待ち時間を感じさせない。',
          sourceUrl: 'https://aws.amazon.com/jp/builders-flash/202406/generative-ai-ux/',
          sourceName: 'AWS Builders Flash'
      }
  ]

  return (
    <div className="bg-gray-50 min-h-screen p-4 sm:p-6 md:p-8">
      <div className="max-w-5xl mx-auto">
        <header className="mb-10 text-center">
          <h1 className="text-3xl sm:text-4xl font-bold text-gray-900">生成AIにおけるヒューマン・イン・ザ・ループ(HITL) UI/UX事例</h1>
          <p className="text-gray-600 mt-2">AIの自動化能力と人間の判断力を組み合わせたUI/UXの設計事例</p>
        </header>

        <section className="mb-12">
          <h2 className="text-2xl font-bold text-gray-800 border-b-2 border-blue-500 pb-2 mb-6">UI/UXデザイン生成における事例</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {uiDesignCases.map((item, index) => <CaseCard key={index} {...item} />)}
          </div>
        </section>

        <section className="mb-12">
          <h2 className="text-2xl font-bold text-gray-800 border-b-2 border-green-500 pb-2 mb-6">業務システムにおける事例</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {businessSystemCases.map((item, index) => <CaseCard key={index} {...item} />)}
          </div>
        </section>

        <section>
          <h2 className="text-2xl font-bold text-gray-800 border-b-2 border-purple-500 pb-2 mb-6">関連する概念と情報</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {otherInfo.map((item, index) => <CaseCard key={index} {...item} />)}
          </div>
        </section>

      </div>
    </div>
  );
};

export default App;