DX変革ゲージの設計と実装——「L1を積まないとL3は無意味」を見える化する

# DX変革ゲージの設計と実装——「L1を積まないとL3は無意味」を見える化する

「DXに投資したのに変革が起きない」

これはゲームの参加者がよく陥るパターンだ。L3（変革推進）への投資だけを積み上げ、L1（IT基盤整備）やL2（業務・販売デジタル化）を疎かにしている。

DX変革の確率計算式は以下だ。

if digitization < 1.5:    # L1 IT基盤
    continue  # 変革不可
if digitalization < 2.5:  # L2（auto+sales）
    continue  # 変革不可

readiness = min(digitization/5.0, 1.0) * min(digitalization/3.0, 1.0)
prob = min(transformation/6.0, 1.0) * readiness * 0.50 * dx_prob_mult

L1が1.5未満なら、どれだけL3に投資しても変革は起きない。L2が2.5未満でも同様だ。

ところが参加者にはこの「なぜ変革が起きないか」が見えていなかった。数字は全部、ダッシュボードの奥深くにある。

ゲージUIの設計思想

「DX変革への道」というカードを結果画面に追加することにした。

要件は3つ：

L1/L2a/L2b/L3の現在値を視覚的に見せる
閾値（L1:1.5, L2合計:2.5）を明示する
現在の状態（未達/達成/確率）を言語で表示する

// L1未達：赤警告
'⚠️ L1 IT基盤が不足（${dxd.toFixed(1)}/1.5）。L1達成がDX変革の前提条件です'

// L2未達：橙警告
'⚠️ L2（業務+販売）が不足（${(dxa+dxs).toFixed(1)}/2.5）。引き続きL2に投資しましょう'

// 両方達成：確率表示
'✅ L1・L2クリア → DX変革確率 約${prob}%（L3投資でさらに上昇）'

// 変革達成済み：祝福
'🎉 DX変革達成済み！競争スコア×3.0の恩恵中'

状態に応じて4種類のメッセージが出る。

プログレスバーとマーカーの実装

プログレスバーはシンプルなdivで作った。ポイントは「閾値マーカー」だ。

const bar = (val, max, color, threshPct) => {
  const w = Math.min(100, val/max*100);
  return `<div style="height:7px;background:#e5e7eb;border-radius:4px;position:relative">
    <div style="height:100%;width:${w}%;background:${color};border-radius:4px;transition:width .6s"></div>
    ${threshPct!=null
      ? `<div style="position:absolute;top:-2px;left:${threshPct}%;width:2px;height:11px;background:#f59e0b"></div>`
      : ''}
  </div>`;
};

黄色の縦線が閾値の位置を示す。バーがその線を超えれば達成——という直感的な見せ方だ。

L1のバーなら、10段階中1.5の位置（15%地点）に黄色マーカーが出る。参加者は「あとどれだけ投資すれば線を超えるか」を視覚的に把握できる。

L2の「合計」という発想

L2はL2a（業務デジタル化）とL2bの（販売・顧客DX）に分かれている。それぞれ個別に表示しつつ、合計値も別途表示した。

// L2合計バー（これが本当の閾値）
`<div style="margin-bottom:9px">
  <div style="display:flex;justify-content:space-between;margin-bottom:2px">
    <span>L2 合計（業務+販売）</span>
    <span style="color:${l2ok?'#16a34a':'#64748b'}">${(dxa+dxs).toFixed(1)} / 2.5 ${l2ok?'✓':''}</span>
  </div>
  ${bar(dxa+dxs, 10, l2ok?'#16a34a':'#8b5cf6', 2.5/10*100)}
</div>`

L2aを5、L2bを0にしても合計5で閾値2.5を超える。あるいはL2aを1、L2bを2でも合計3で超える。

この「どちらかに偏っても合計で見る」という設計は、現実のDXにも当てはまる。業務DXだけ、あるいは販売DXだけでも、一定の基盤があれば変革の準備はできている。

実装してみて分かったこと

このゲージを実装した後、シミュレーターで100ゲームを走らせた。

DX変革を達成したゲームのほぼ全てで、L1が1.5を超えたターンとL2が2.5を超えたターンの後に変革が起きていた。当たり前のことだが、数字で見ると腹落ちする。

参加者も同様だ。ゲージがあれば「L1が足りない」「L2をもう少し積もう」という判断ができる。数字の羅列より、バーの視覚情報は意思決定を速める。

「見える化」はシステム設計の基本だが、何を見せるかの選択が全てだ。データは持っていた。見せ方を変えるだけで、研修の質が上がった。