🐕

動画から多言語対応の手順書を自動生成するアプリ：VidManual

に公開
2026/02/17
Cloud Run
Google Cloud
Gemini API
gch4
idea

はじめに

「動画で説明したほうが早い」と感じる場面は多い一方で、業務では検索可能で、部分参照しやすいテキスト＋画像のマニュアルが求められます。しかし、動画から手順書を起こすには膨大な時間がかかり、多言語対応となるとさらに負荷が増します。

VidManualは、Google Gemini のマルチモーダル AI を活用し、操作動画をアップロードするだけで、音声解説と画面操作の両方を解析してステップごとの手順書（Word形式）を自動生成する Web アプリケーションです。本記事では、ハッカソンでこのソリューションを開発した背景、課題の新規性、実装の詳細、そして今後の拡張可能性を紹介します。

プロジェクト概要

🎯 対象ユーザー

  • 社内教育・業務支援部門: 新入社員向けオンボーディング、業務手順書の整備担当
  • カスタマーサポート・ヘルプデスク: FAQ・トラブルシューティングガイドの作成・更新担当
  • 開発者・プロダクトマネージャー: ソフトウェアの使い方ドキュメント、リリースノートの準備
  • 製造・現場管理部門: 機械の操作手順、設備のメンテナンス作業、安全確認フローの標準化担当
  • 飲食・小売・サービス業: 調理手順、接客フロー、レジ操作など現場スタッフ向けマニュアルの整備担当
  • グローバル展開企業: 同じ手順を多言語で配布する必要があるチーム

📌 解決する課題

業務の現場では次のような状況が頻発しています。

  • オンボーディング資料: 新入社員向けに画面操作を録画した動画はあるが、検索できず、必要な手順だけを素早く参照できない
  • 社内システムの操作マニュアル: 担当者が異動・退職すると引継ぎ動画だけが残り、後任が「この操作は何分のどこ？」と探すのに苦労する
  • 製造・現場作業の標準化: ベテラン作業員の「手順動画」は撮れても、新人が参照しやすいテキスト手順書への変換が追いついていない
  • 店舗・施設の業務引継ぎ: 飲食・小売などの現場では、口頭や動画で引継ぎしても、アルバイトが手順書を見返せる形で整備されていないことが多い
  • カスタマーサポート: FAQ に動画を貼っても、ユーザーは「3分の動画を見るより、1枚の画像と2行の説明で解決したい」と感じる
  • 多言語展開: グローバル企業では同じ手順を英語・中国語・韓国語などで用意する必要があり、翻訳と画像の差し替えに莫大な工数がかかる

✨ ソリューションの特徴

VidManualは、Google Gemini のマルチモーダル AI を活用した、次の特徴を持つソリューションです：

  1. マルチモーダルAIによる動画解析

    • 音声解説と画面操作の両方を同時に理解
    • 最適なスクリーンショットタイミングをAIが自動選定

  2. 直感的な編集UI

    • タイトル・説明文のインライン編集
    • 動画プレビューからドラッグ＆ドロップで画像差し替え

  3. 多言語翻訳とWord出力

    • 10言語対応でワンクリック翻訳
    • 全言語を一括でWord形式（.docx）ダウンロード

  4. 既存動画資産の活用

    • すでに録画済みの動画から自動生成可能
    • Cloud Run でサーバーレス実行

💡 解決策の有効性

従来の手作業マニュアル作成と比較

作業内容 従来の方法 VidManual
動画の文字起こし 30分の動画 → 手動で2〜3時間 自動で数分
スクリーンショット選定 動画を見返して手動でキャプチャ（1手順3〜5分） AI が最適タイミングを自動選定
多言語対応 言語ごとに翻訳と画像差し替え（言語あたり数時間） ワンクリックで10言語一括生成

具体的なユースケース

  • 新入社員向けオンボーディング: 10本の業務動画（各5〜10分）から手順書を自動生成し、初日にすぐ配布。検索可能な形で整備され、「あの操作は何ページ？」と探しやすい
  • 製造現場の作業標準化: ベテラン作業員が実演した機械操作・組立手順の動画から、新人向けの作業指示書を自動生成。口頭伝承に頼らないナレッジ継承が可能に
  • 飲食・小売の現場教育: 調理手順やレジ操作の動画から、アルバイトがすぐ使えるマニュアルを自動作成。多店舗展開でも同じ品質の手順書を一括配布できる
  • カスタマーサポート: 「パスワードリセット」の操作動画（3分）から、英語・日本語・中国語のFAQ記事を即座に用意できる
  • SaaS製品のヘルプ: 新機能リリース時、デモ動画からユーザー向けガイドを自動生成し、ドキュメント公開までのリードタイムを大幅に短縮

課題の新規性

🔍 既存ソリューションの限界

ツール例 限界
画面録画ツール（Loom、ClickUp等） 動画は作れるが、テキストマニュアル化は手作業。動画の音声を文字起こししても、「どの画面のどの操作か」を紐づけるのは人手がかかる
スクリーンショット＋文章作成 最初から手動で画像を撮り、説明文を書く必要があり、1つの手順書に数時間〜数日かかる
AI文字起こし（Whisper等） 音声のテキスト化はできるが、視覚情報（画面操作）との統合ができない。「次にボタンをクリック」と言っていても、どのボタンか分からない
既存のマニュアル自動生成ツール（Scribe等） ブラウザ拡張でリアルタイムキャプチャする方式が多く、すでに録画済みの動画からは生成できない。既存資産を活かせない

✨ VidManual の新規性：マルチモーダルAIで「動画→構造化マニュアル」を実現

Google Gemini のマルチモーダル能力を活用することで、次の3点を同時に実現しました。

  1. 音声＋映像の統合理解: 「次に設定アイコンをクリックします」という音声と、画面上のアイコンの位置を同時に解析し、文脈に沿った説明文とスクリーンショット候補を提示
  2. 既存動画からの自動生成: すでに社内に蓄積されている録画済み動画を活用でき、過去の資産を無駄にしない
  3. 多言語ワンクリック翻訳: 生成した手順書を、構造を保ったまま10言語対応で即座に翻訳・複製し、Word形式で一括出力

システムアーキテクチャ

全体構成

技術的な実装の特徴

1. AI がスクリーンショットのタイミングを指定する

Gemini は解析結果として各手順ごとに screenshot_timestamp_seconds を返します。動画のどの瞬間をキャプチャすべきか、文脈を踏まえて AI が選ぶため、「この操作を説明するのに一番分かりやすいフレーム」を人手で探す必要がありません。

2. Canvas API でクライアント完結のスクショ抽出

スクリーンショットはブラウザの Canvas API で取得します。動画は Gemini に送信されますが、画像の抽出はクライアント側で完結するため、動画そのものがサーバーに保存されることはありません。機密性の高い社内操作動画でも、解析後の結果以外が外部に残りにくい設計になっています。

3. フレームのドラッグで画像を差し替え

AI の提案が「もう少し後のフレームのほうが良い」場合、動画プレビュー上のドラッグ可能なハンドルで任意のフレームを選び、その場で画像を差し替えられます。動画を止めてスクショを撮り直す必要がなく、編集フローがシームレスです。

デモ動画（約3分）

https://youtu.be/7z5fxNERMrQ

デモ内容

  1. VidManualの紹介(導入)
  2. Gemini による自動解析（リアルタイム処理）
  3. 編集機能のデモ（フレームのドラッグ＆ドロップで画像差し替え）
  4. 多言語翻訳（日本語→英語・中国語）
  5. Word ファイル出力と確認

技術スタック

分類 技術
Google Cloud Cloud Run（アプリ実行）、Cloud Build（CI/CD）、Artifact Registry
Google AI Gemini API（gemini-3-flash-preview）、File API（動画アップロード）
フロント React 19、TypeScript、Tailwind CSS、Vite
バックエンド Node.js、Express（/api-proxy）
ドキュメント docx（Word 生成）、jszip（多言語 ZIP 出力）

おわりに

VidManual の強みは、他ツールにない2点に集約されます。

  1. 既存動画をそのまま入力にできる — Scribe 等は新しい操作をその場で録画する必要がありますが、社内に溜まった録画資産をそのまま使える
  2. 音声と映像を同時に理解する — 「次に設定アイコンをクリック」と言っている瞬間と、画面上のそのアイコンを結びつけて説明文を出す。Whisper など音声だけのツールでは、どの画面のどの操作か分からない

加えて、スクリーンショットの抽出をブラウザの Canvas API で完結させることで、動画そのものがサーバーに残らない設計にしており、社内の機密操作動画にも使いやすい点を意識しました。

Discussion