行動変容の鍵「B=MAT」モデルとは？3要素と応用事例を徹底解説

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

const actionLineData = Array.from({ length: 101 }, (_, i) => {
  const x = i;
  if (x < 10) return null; // Avoid extreme values near zero
  return { x, y: 3000 / x }; // y = k/x inverse proportion
}).filter(Boolean);

const examplePoints = [
  { ability: 25, motivation: 20, z: 1, label: '失敗例：毎朝6時に起きて10マイル(約16km)走る' },
  { ability: 75, motivation: 80, z: 1, label: '成功例：2マイル(約3.2km)走り、前夜に準備し、ご褒美を用意する' },
];

const CustomTooltip = ({ active, payload }) => {
  if (active && payload && payload.length) {
    return (
      <div className="p-2 bg-gray-700 border border-gray-600 rounded-md shadow-lg">
        <p className="text-white font-semibold">{payload[0].payload.label}</p>
        <p className="text-gray-300">{`能力 (実行しやすさ): ${payload[0].value}`}</p>
        <p className="text-gray-300">{`モチベーション: ${payload[1].value}`}</p>
      </div>
    );
  }
  return null;
};

const App = () => {
  return (
    <div className="bg-gray-900 text-white min-h-screen p-4 sm:p-6 lg:p-8 font-sans">
      <div className="max-w-7xl mx-auto space-y-8">

        <header className="text-center">
          <h1 className="text-4xl sm:text-5xl font-extrabold text-yellow-300 tracking-tight">フォグ式消費者行動モデルの分析</h1>
          <p className="mt-3 text-lg text-gray-300">出典: <a href="https://productled.com/blog/the-bj-fogg-behavior-model-in-saas" target="_blank" rel="noopener noreferrer" className="text-blue-400 underline hover:text-blue-300">ProductLed</a>, <a href="https://behaviormodel.org/" target="_blank" rel="noopener noreferrer" className="text-blue-400 underline hover:text-blue-300">BehaviorModel.org</a></p>
        </header>

        <div className="bg-gray-800 rounded-xl shadow-2xl p-6 text-center">
          <h2 className="text-3xl font-bold text-white">B = MAP</h2>
          <p className="text-xl text-yellow-400 mt-2">Behavior = Motivation × Ability × Prompt</p>
          <div className="mt-4">
            <img src="https://cdn.prod.website-files.com/635754018bfa6476addffaf9/67a1eef08bcf4410fe65a136_BJ-Fogg-Behaviour-Model-1024x576.png" alt="B=MAP Formula" className="mx-auto rounded-lg max-w-full h-auto"/>
          </div>
          <p className="mt-4 text-gray-400">ある <span className="font-bold text-white">行動 (Behavior)</span> が発生するには、<span className="font-bold text-yellow-400">動機 (Motivation)</span>、<span className="font-bold text-yellow-400">能力 (Ability)</span>、<span className="font-bold text-yellow-400">きっかけ (Prompt)</span> の3要素が同時に揃う必要があります。</p>
        </div>

        <div className="bg-gray-800 rounded-xl shadow-2xl p-6">
          <h2 className="text-3xl font-bold text-center text-white mb-4">行動ライン (Action Line)</h2>
          <p className="text-center text-gray-400 mb-6">行動が「行動ライン」の上にあれば、きっかけによって行動が実行されます。</p>
          <ResponsiveContainer width="100%" height={400}>
            <ScatterChart margin={{ top: 20, right: 20, bottom: 40, left: 20 }}>
              <CartesianGrid strokeDasharray="3 3" stroke="#4A5568" />
              <XAxis type="number" dataKey="ability" name="Ability" unit="" stroke="#A0AEC0" label={{ value: '能力 (実行しやすさ) →', position: 'insideBottom', offset: -25, fill: '#CBD5E0' }} tick={{ fill: '#A0AEC0' }} domain={[0, 100]} ticks={[0, 25, 50, 75, 100]} />
              <YAxis type="number" dataKey="motivation" name="Motivation" unit="" stroke="#A0AEC0" label={{ value: '↑ モチベーション', angle: -90, position: 'insideLeft', offset: 10, fill: '#CBD5E0' }} tick={{ fill: '#A0AEC0' }} domain={[0, 100]} ticks={[0, 25, 50, 75, 100]}/>
              <Tooltip content={<CustomTooltip />} cursor={{ strokeDasharray: '3 3' }} />
              <Line data={actionLineData} dataKey="y" stroke="#FBBF24" strokeWidth={3} dot={false} name="Action Line" />
              <Scatter name="Examples" data={examplePoints} fill="#4299E1" shape="circle">
                {examplePoints.map((point, index) => <ZAxis key={`z-${index}`} dataKey="z" range={[100, 101]} />)}
              </Scatter>
            </ScatterChart>
          </ResponsiveContainer>
        </div>

        <div className="grid md:grid-cols-3 gap-8">
          <div className="bg-gray-800 rounded-xl shadow-2xl p-6">
            <h3 className="text-2xl font-bold text-yellow-300">動機 (Motivation)</h3>
            <ul className="mt-4 space-y-2 text-gray-300 list-disc list-inside">
              <li><span className="font-semibold text-white">感覚:</span> 喜びと痛みを求める・避ける</li>
              <li><span className="font-semibold text-white">期待:</span> 希望と恐怖を求める・避ける</li>
              <li><span className="font-semibold text-white">帰属:</span> 社会的受容と拒絶を求める・避ける</li>
            </ul>
          </div>
          <div className="bg-gray-800 rounded-xl shadow-2xl p-6">
            <h3 className="text-2xl font-bold text-yellow-300">能力 (Ability)</h3>
            <ul className="mt-4 space-y-2 text-gray-300 list-disc list-inside">
              <li><span className="font-semibold text-white">時間:</span> 行動にかかる時間</li>
              <li><span className="font-semibold text-white">お金:</span> 行動にかかる費用</li>
              <li><span className="font-semibold text-white">身体的労力:</span> 身体的な手間</li>
              <li><span className="font-semibold text-white">頭脳的労力:</span> 思考や集中の度合い</li>
              <li><span className="font-semibold text-white">社会的逸脱:</span> 社会規範から外れていないか</li>
              <li><span className="font-semibold text-white">非日常性:</span> 習慣から外れていないか</li>
            </ul>
          </div>
          <div className="bg-gray-800 rounded-xl shadow-2xl p-6">
            <h3 className="text-2xl font-bold text-yellow-300">きっかけ (Prompt)</h3>
            <ul className="mt-4 space-y-2 text-gray-300 list-disc list-inside">
              <li><span className="font-semibold text-white">火花(Spark):</span> 動機が低い人向け</li>
              <li><span className="font-semibold text-white">ファシリテーター(Facilitator):</span> 能力が低い人向け</li>
              <li><span className="font-semibold text-white">合図(Signal):</span> 動機も能力も高い人向け</li>
            </ul>
          </div>
        </div>

        <div>
          <h2 className="text-3xl font-bold text-center text-white mb-6">ビジネスへの応用例</h2>
          <div className="grid md:grid-cols-2 gap-8">
            <div className="bg-gray-800 rounded-xl shadow-2xl p-6 flex flex-col items-center">
              <h3 className="text-2xl font-bold text-yellow-300 mb-4">SaaSオンボーディング</h3>
              <img src="https://cdn.prod.website-files.com/635754018bfa6476addffaf9/681c5522299b27de9f42458b_Wave%20Step%201.png" alt="Wave Onboarding Example" className="rounded-lg mb-4 w-full h-auto object-cover"/>
              <p className="text-gray-300">会計ソフトWaveは「3倍速く支払われる」と伝え、ユーザーの「早く支払いを受けたい」という<span className="text-white font-bold">動機</span>を高める。</p>
            </div>
            <div className="bg-gray-800 rounded-xl shadow-2xl p-6 flex flex-col items-center">
              <h3 className="text-2xl font-bold text-yellow-300 mb-4">ボーリングのレーン・フレームワーク</h3>
              <img src="https://cdn.prod.website-files.com/635754018bfa6476addffaf9/680f81c5e5b3f4e687d85233_Bowling%20Alley%20Framework.png" alt="Bowling Alley Framework" className="rounded-lg mb-4 w-full h-auto object-contain"/>
              <p className="text-gray-300">ユーザー（ボール）が離脱（ガター）しないよう、<span className="text-white font-bold">きっかけ</span>（バンパー）で導き、価値体験（ストライク）をさせる。</p>
            </div>
          </div>
        </div>

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

export default App;