HPに1行のscriptタグを追加するだけで設置できる動画 チャットボット を、5日間で開発しローンチした。CRIENの光速開発メソッドの実践例として、Day 1のコンセプト設計からDay 5のリリースまで全工程を記録する。プロダクト名はvideo-flow.ai。
「チャットボット開発に3ヶ月かかる」という常識を覆す記録だ。使用技術はNext.js + Vercel + OpenAI API。開発コストは人件費を除けばインフラ費のみ月額約5,000円。
動画チャットボットとは video-flow.aiの概要
動画チャットボットとは、Webサイトに埋め込んだ動画コンテンツとAIチャットを組み合わせ、ユーザーの質問に動画とテキストで応答するサービスである。video-flow.aiはCRIENが開発したこの分野のプロダクトだ。
- 特徴1: HPに1行のscriptタグを追加するだけで設置完了
- 特徴2: 動画コンテンツをAIが解析し、ユーザーの質問に該当する動画シーンを自動再生
- 特徴3: テキストチャットと動画の組み合わせで理解度を向上
- 用途: 製品説明、カスタマーサポート、オンボーディング、教育コンテンツ
「動画とチャットの融合」というコンセプトは、テキストだけのチャットボットとの差別化ポイントだ。動画で説明した方が伝わりやすい内容は多い。
5日間の開発タイムライン【日単位の全記録】
開発タイムラインとは、プロダクトの着想からローンチまでの全工程を日単位で記録した開発ドキュメントである。
- Day 1（8時間）: コンセプト設計＋技術選定。Next.js 14 + Vercel + OpenAI API + Cloudflare R2に決定。UIモックアップをFigmaで30分で作成
- Day 2（10時間）: バックエンド実装。動画アップロード→文字起こし→ベクトル化のパイプライン完成。Cursorで80%のコードをAI生成
- Day 3（10時間）: フロントエンド実装。チャットウィジェット＋動画プレイヤーのUI開発。埋め込み用scriptタグの設計
- Day 4（8時間）: 統合テスト＋バグ修正。実際のWebサイト3つに仮設置。レスポンシブ対応とパフォーマンス最適化
- Day 5（6時間）: ローンチ準備。LP作成＋ドキュメント整備＋SNS告知。video-flow.ai ドメイン設定＋デプロイ
合計42時間の開発工数。通常のチャットボット開発（3ヶ月=約500時間）と比較して、約92%の工数削減を達成した。
技術スタックとアーキテクチャ設計
技術スタックとは、プロダクトの構築に使用した技術要素の全体像であり、アーキテクチャ設計とはそれらの組み合わせ方の設計図である。
- フロントエンド: Next.js 14 App Router、TypeScript、Tailwind CSS
- バックエンド: Next.js API Routes（Serverless Functions on Vercel）
- AI: OpenAI API（GPT-4 Turbo + Whisper API for 文字起こし）
- ストレージ: Cloudflare R2（動画保存）、Vercel KV（セッション管理）
- ベクトルDB: Pinecone（動画の文字起こしデータのベクトル検索）
- デプロイ: Vercel（サーバーレス、グローバルCDN）
技術選定の判断基準は「私が使い慣れている」こと。光速開発では新しい技術を試している暇はない。確実に動くスタックで勝負する。
HPに1行追加で設置できる仕組み
1行設置の仕組みとは、JavaScriptのscriptタグ1行をHTMLに追加するだけでチャットウィジェットが表示される技術的な設計のことである。
- 実装: <script src='https://video-flow.ai/widget.js' data-id='xxx'></script> の1行
- 仕組み: scriptタグがiframeを動的生成し、チャットウィジェットをページ右下に表示
- 利点: 既存サイトのCSSやJSと干渉しない。WordPress/Wix/Shopify等あらゆるCMSに対応
- パフォーマンス: 遅延読み込みにより、ページ表示速度への影響を0.1秒以内に抑制
「導入障壁を限りなくゼロにする」という設計思想が重要だ。どんなに優れた機能も、設置が面倒なら使ってもらえない。
開発中に直面した課題と解決策
開発中の課題とは、5日間の開発プロセスで実際に発生した技術的問題とその解決策の記録である。
- 課題1 動画文字起こしの精度: Whisper APIの日本語精度が90%前後で不十分。解決策: 専門用語辞書を後処理で適用し95%に向上
- 課題2 レスポンス速度: GPT-4の応答に3-5秒かかりUXが悪い。解決策: Streaming ResponseでタイピングアニメーションをUXに変換
- 課題3 動画再生の同期: チャットの回答と動画の該当シーンの同期タイミング。解決策: タイムスタンプベースのセグメント管理
最大の課題はDay 3のレスポンス速度だった。ユーザーが3秒待つとは離脱率が50%上がるというデータがある。Streamingレスポンスで体感速度を大幅に改善できた。
この開発から学んだ3つの教訓
3つの教訓とは、5日間の光速開発を通じて得た、今後のプロダクト開発にも適用可能な実践的な学びである。
- 教訓1: 完璧を目指さない。80%の完成度でリリースし、ユーザーフィードバックで残り20%の方向を決める。Day 5時点ではバグが5件残っていたが、リリースを優先した
- 教訓2: 技術選定に時間をかけない。使い慣れた技術で確実に動くものを作る。新しいフレームワークを試すのはプロトタイプではなく次のプロジェクトで
- 教訓3: 導入障壁をゼロにする。機能の豊富さよりも「1行で設置できる」手軽さがユーザー獲得の決め手になった
この3つの教訓は、光速開発メソッドの核心だ。技術者は完璧なコードを書きたがるが、ユーザーが求めているのは「今すぐ使えるもの」だ。
出典: CRIENプロジェクト工数管理データ
出典: Vercel公式デプロイドキュメント
よくある質問
Q. 動画チャットボットはどんな用途に使える？
製品デモ、カスタマーサポート、社内研修、オンボーディングに最適。動画で説明した方が伝わりやすいコンテンツとAIチャットを組み合わせることで、ユーザーの理解度が向上する。
Q. 5日でチャットボットを開発するには何が必要？
必要な3要素は、使い慣れた技術スタック、AI APIの利用経験、そして「80%の完成度でリリースする」という判断力だ。技術力だけでは足りない。
Q. 動画チャットボットの開発費用は？
CRIENの光速開発メソッドなら、人件費を除くインフラ費用は月額約5,000円（Vercel + OpenAI API + Cloudflare R2）。外部委託する場合の開発費用はお問い合わせいただきたい。
Q. video-flow.aiは無料で試せる？
フリープラン（月100回の応答まで）を提供している。HPに1行追加するだけで導入可能。詳細はvideo-flow.aiを参照。
まとめ
爆速開発は、適切な技術選定と AI ツールの活用、そして経験に裏打ちされた設計判断の組み合わせで実現する。本記事の手法は、CRIENの実プロジェクトで検証済みのものだ。
5日間開発でスコープ管理に使ったタイムボクシング手法
5日間という制約で動画チャットボットを開発するにあたり、採用したスコープ管理手法は「逆算式タイムボクシング」だ。最終日（Day 5）をデプロイ+テスト専用日と定め、実質的な開発は4日間に制限した。Day 1をUI設計とコンポーネント実装、Day 2をAPI実装と動画処理パイプライン、Day 3をチャットボットのAIロジック実装、Day 4を結合テストとバグ修正に割り当てた。各日の終了時に「翌日の作業に影響するブロッカーがあるか」を判定し、ブロッカーがあれば当日中に解消するか、スコープから該当機能を削除する判断を即座に下した。この「毎日のスコープ再評価」により、当初計画の12機能から最終的に8機能に絞り込んだが、コアバリューは維持できた。
5日間開発を再現するための最も重要なルールは「Day 3の夕方が機能追加の最終デッドライン」と決めることだ。Day 4以降に新機能を追加すると、テスト時間が不足し品質が担保できない。Day 3の時点で「あったら嬉しい機能」をすべて切り捨て、「なければ使えない機能」だけに集中する割り切りが、5日間でリリース可能な品質を実現する唯一の方法だ。
あわせて読みたい関連記事
爆速開発の記事
→ 3時間でMVP構築した光速開発の全プロセスとAIツールスタック
