法務・オンボーディング・クローズドベータ準備

1. なぜ法務ページが先なのか

日本でSaaSを公開・課金する場合、以下の法令対応が不可欠だ。

• 個人情報保護法 -- カメラ映像は個人情報に該当し得る。取得目的、利用範囲、第三者提供の有無を明示する義務がある
• 特定商取引法 -- オンラインでサブスクリプションを販売する事業者は、販売者の表示義務がある
• 電気通信事業法 -- 映像データをクラウドで処理する場合の通信の秘密保護

法務ページなしにクローズドベータを開始すると、初期ユーザーの信頼を損なう。特にカメラ映像を扱うサービスでは「映像データはどう扱われるのか」がユーザーの最大の関心事だ。技術の前に信頼。これが Cycle 6 の判断だ。

2. 法務ページ -- 3つのコンプライアンス文書

<!-- privacy.html -- カメラ映像セクション抜粋 -->
<section class="legal-section">
  <h2>4. カメラ映像データの取り扱い</h2>
  <p>当社は、お客様が接続したカメラから送信される
     映像フレームを以下の目的で処理します。</p>
  <ul>
    <li>AI推論による来客数カウント、属性分析、行動分析</li>
    <li>アラート（侵入検知、混雑検知等）の判定</li>
    <li>ダッシュボードへの分析結果の表示</li>
  </ul>
  <p>映像フレームはAI推論完了後、ご契約プランに応じた
     保持期間（Free: 7日、Starter: 30日、Pro: 90日、
     Enterprise: 最大10年）を経過した時点で自動削除されます。</p>
</section>

3. オンボーディングウィザード -- 初回体験を設計する

法務ページが「信頼」なら、オンボーディングは「体験」だ。初回ログインからカメラ接続までの導線が悪いと、Free ユーザーは価値を体感する前に離脱する。

// オンボーディングウィザード -- コア実装
const STORAGE_KEY = 'miseban_onboarding_done';

function initOnboarding() {
  // 既に完了済みならスキップ
  if (localStorage.getItem(STORAGE_KEY) === 'true') return;

  let currentStep = 1;
  const totalSteps = 4;
  const overlay = createOverlay();

  function renderStep(step) {
    switch (step) {
      case 1: return renderWelcome();
      case 2: return renderStoreInfo();
      case 3: return renderCameraSetup();
      case 4: return renderComplete();
    }
  }

  function nextStep() {
    if (!validateStep(currentStep)) return;
    currentStep = Math.min(currentStep + 1, totalSteps);
    overlay.innerHTML = renderStep(currentStep);
    if (currentStep === totalSteps) triggerConfetti();
  }

  function complete() {
    localStorage.setItem(STORAGE_KEY, 'true');
    overlay.remove();
  }

  // 初期表示
  document.body.appendChild(overlay);
  overlay.innerHTML = renderStep(1);
}

CSS-only 紙吹雪アニメーション

/* CSS-only confetti -- JSライブラリ不要 */
@keyframes confetti-fall {
  0%   { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.confetti-piece {
  position: fixed;
  width: 10px;
  height: 10px;
  top: -10px;
  animation: confetti-fall 3s ease-in-out forwards;
}
.confetti-piece:nth-child(odd)  { background: var(--indigo-500); }
.confetti-piece:nth-child(even) { background: var(--amber-500); }

/* 20個の紙吹雪を異なるタイミング・位置で配置 */
.confetti-piece:nth-child(1)  { left: 5%;  animation-delay: 0s; }
.confetti-piece:nth-child(2)  { left: 15%; animation-delay: .1s; }
.confetti-piece:nth-child(3)  { left: 25%; animation-delay: .2s; }
/* ... 20個まで展開 */

紙吹雪は純粋CSSで実装した。canvas-confetti 等の外部ライブラリを入れる選択肢もあったが、オンボーディングの最終ステップだけで使う演出に npm パッケージを追加するのはオーバーキル。20個の div と @keyframes だけで十分な達成感を演出できる。

4. セキュリティ強化

// セッション検証 -- 5分間隔
const SESSION_CHECK_INTERVAL = 5 * 60 * 1000; // 5分

function startSessionWatcher() {
  setInterval(async () => {
    const { data: { session }, error } = await supabase.auth.getSession();
    if (error || !session) {
      console.warn('Session expired, redirecting to login');
      window.location.href = '/dashboard/login.html';
    }
  }, SESSION_CHECK_INTERVAL);
}

// 401 インターセプター
async function apiFetch(url, options = {}) {
  const res = await fetch(url, {
    ...options,
    headers: {
      ...options.headers,
      'Authorization': `Bearer ${getAccessToken()}`,
    },
  });
  if (res.status === 401) {
    window.location.href = '/dashboard/login.html';
    return;
  }
  return res;
}

apiFetch はダッシュボード内の全API呼び出しを統一するラッパー関数だ。認証ヘッダーの付与と 401 ハンドリングを集約することで、各ページでの個別実装を排除した。

5. Before / After -- ベータ開始前後の比較

6. クローズドベータ開始チェックリスト

Cycle 1-6 の成果を総合すると、クローズドベータに必要な項目がすべて揃った。

6つのスプリントサイクルを経て、「技術デモ」から「ベータ公開可能なプロダクト」になった。法務、課金、オンボーディング。地味だが、これが本物のプロダクトと個人プロジェクトを分ける境界線だ。

7. 技術的判断

8. 成果と数字

作成・更新したファイル

1. web/landing/privacy.html -- プライバシーポリシー (新規、約180行)
2. web/landing/terms.html -- 利用規約 (新規、約160行)
3. web/landing/legal.html -- 特定商取引法に基づく表記 (新規、約100行)
4. web/dashboard/onboarding.js -- オンボーディングウィザード (新規、約150行)
5. web/dashboard/auth.js -- セッション検証 + 401リダイレクト (+60行)
6. web/dashboard/index.html -- オンボーディング統合 + ショートカット (+50行)

9. 次のサイクルで何をするか

Cycle 7 ではいよいよクローズドベータテストを開始する。実際の店舗にカメラを接続し、本物の来客データでAI推論の精度を検証する。テスト環境と本番環境のギャップ、カメラ設置角度による精度変動、LINE通知の配信遅延。実データでしか見えない課題を洗い出すフェーズだ。

法務ページとオンボーディング。華やかさはないが、ユーザーの「信頼」と「体験」を支える基盤だ。この地味な仕事を飛ばしたプロダクトは、市場で必ずつまずく。