CaseStudyReel - 導入事例・顧客成功事例ムービーメーカー

【目的・ターゲット】BtoB企業の営業・マーケティング担当者が、顧客の導入事例(サクセスストーリー)を「読む資料」ではなく「魅せるムービー/公開ページ」として数分で作れる支援ツール。商談資料や採用サイト・IRページと並ぶ『成果を語るコンテンツ』の新ジャンルとして、営業提案の説得力と自社サイトの訴求力を高める。

【主要機能】
1. 事例情報入力フォーム(顧客名・業種・課題・導入サービス・Before/After数値・お客様の声・担当者名)
2. 業種別テーマ(IT/製造/小売/医療/教育/建設)ごとにジェネレーティブ背景とカラーが自動適用
3. Before/After数値を棒グラフ・数字カウントアップでアニメーション可視化(複数指標対応)
4. Web Audio APIでテーマに応じた自動作曲BGMと場面転換SEを生成、公開ページで自動再生
5. スライド/ムービー形式のリアルタイムプレビュー、公開URL発行、PNG/PDF出力、iframe埋め込みコード生成
6. 複数事例をまとめる「事例集ギャラリーページ」で自社実績を一覧公開

【画面構成】
- ダッシュボード: 作成した事例カード一覧、新規作成ボタン
- エディタ画面: 左に入力フォーム(ステップ式)、右にリアルタイムプレビューを表示する2カラムUI
- 公開ページ: 顧客・訪問者向け閲覧画面。背景アニメーション、グラフ演出、BGM、テロップ風の顧客の声を順に表示
- ギャラリーページ: 複数事例をカードで一覧表示し、業種フィルターで絞り込み可能

【データ構造(MySQL)】
- case_studies(id, user_token, title, client_name, industry, theme, challenge, solution, testimonial, testimonial_author, public_slug, is_published, created_at)
- case_metrics(id, case_id, metric_name, before_value, after_value, unit, sort_order)
- galleries(id, user_token, title, slug, created_at)
- gallery_items(id, gallery_id, case_id, sort_order)

【デザイン方向性】
コーポレートかつリッチな印象を重視し、業種別に配色を変える(IT=ネオンブルー、製造=オレンジ、医療=グリーン、教育=イエロー等)。背景はCanvas/SVGによる緩やかに動く抽象グラデーションと幾何学パターン、グラフはアニメーション付きSVG。BGMはWeb Audio APIによる落ち着いたコーポレート調の自動生成音楽とし、派手すぎず信頼感を演出。フォントはゴシック体で数字を大きく見せ、成果を一目で伝えるレイアウトとする。