AI疲れさせない動画生成ツール『オヒロメ』をRemotionで作った話

はじめに：AI格差を小さくする

AGIラボ運営メンバーのRyo Satoです。

今回、オヒロメ というWebサービスを作りました。WebサイトのURLを入力するだけで、30秒のプロモーション動画を自動生成するSaaSです。

オヒロメはこのような動画をURLだけで生成するサービスです：

https://www.youtube.com/watch?v=HbMJmJxngrE

このサービスを作った背景には、コミュニティ運営や開発の現場で最近よく目にする光景があります。

AIを使いこなす人は「このツールとこのツール組み合わせればこんなの余裕だよ」と得意げに語ります。一方、知らない人は「どうせ難しいんでしょ」と最初から諦めています。現場では結局、使いたくない側にも合わせないといけません。

こうしたAI格差とでも呼ぶべきジレンマを、今まで多く見てきました。
正直、開発がちょっと強くてプロンプトを書ける人なら、プロモーション動画を自分で作ることはできます。LLM + Remotion + 最低限のコマンドライン操作で。

しかし、エンジニアでもなんでもない人がいつもの仕事の延長で、楽にAIの凄さを体感してもらえるようなサービスを作れないかなーと日々感じていました。技術の話なんか一切せずに「URL入れてみて」だけで「おお、すごい！」と言ってもらえるもの。そんな思いで開発しました。

だから「AIを使ってるけど、AIを意識させない」プロダクトを目指しました。裏ではFirecrawl、Gemini Flash 3、Remotion とRemotion Lambdaが動いています。でもユーザーはそんなこと知らなくていいんです。

URL入力だけ。これは機能の制限ではありません。「あなたは何も学ばなくていい」という設計思想です。

オヒロメの機能

以下の図は、URLから動画が生成されるまでの処理フローです。

3つの特徴

オヒロメには3つの特徴があります。

1. 素材準備ゼロ - Webサイトから画像・テキスト・カラーを自動抽出

2. 完全オリジナル - AIがゼロから生成、テンプレート不使用

3. 即座にURL共有 - 生成と同時にURLが発行され、すぐシェア可能

ターゲットユーザー

とにかく極限まで楽してプロモーション動画を作りたい方がターゲットです。業種は問いません。

• 新機能リリースの告知動画

• イベントの告知動画

• お店の紹介動画

• サービスのLP掲載用動画

• SNS広告用の動画

何でもいいんです。URLを入れるだけで、サクッと動画を作りたい。 そういう方に向けて作りました。

技術選定の意思決定

オヒロメを構築するにあたり、いくつかの重要な技術選定を行いました。失敗談や試行錯誤なども包み隠さず解説していきたいと思います。

全体アーキテクチャ

1. Webスクレイピング → Firecrawl

要件: URLからサービス情報、スクリーンショット、ブランドカラーを抽出したい

オヒロメの売りは、すでに存在するWebサイトの世界観や素材をそのまま動画メッセージとして伝えられることです。受け手に一貫したブランドイメージを届けるためには、Webサイトから正確にブランド情報を抽出する必要があります。

重要なのは、実際にページで使われているロゴや写真をそのまま動画内で使いたいということです。ブランドカラーだけでなく、ロゴ画像やページ内の画像URLをすべて取得し、動画の素材として活用することで、Webサイトと動画のビジュアルが完全に一致した「ブランド一貫性のある動画」を生成できます。

検討した代替案

• Exa: 検索機能は強力だが、スクリーンショットやbranding抽出が弱い

• Playwright / Puppeteer: セルフホスト必要、brandingやファイルパス抽出は自前実装が必要

採用理由（Firecrawl）: スクリーンショット、コンテンツ、画像リンク、ブランドカラーを1回のAPI呼び出しで全部スクレイプできる。これが決め手でした。

• markdown + screenshot + branding + images を一括取得

• ネイティブのbranding抽出機能でカラー・フォント・ロゴを自動検出

• ページ内の全画像URLを取得（ロゴ、OG画像、コンテンツ画像）

• LLM-ready形式でのmarkdown出力

// Firecrawlで取得できるデータ
const result = await firecrawl.scrape(url, {
  formats: [
    "markdown",
    {
      type: "screenshot",
      fullPage: true,
      quality: 10, // 最低品質（意図的）
    },
    "branding",
    "images", // ページ内の画像URLリストも取得
  ],
  maxAge: 0, // キャッシュ無効（常に最新を取得）
});

// result.branding には以下が含まれる（フォールバック処理も実装）
// - colorScheme: "light" | "dark"
// - colors: { primary, secondary, accent, background, text }
// - fonts: ["Inter", "Noto Sans JP", ...]
// - logo: "https://..."

スクショのクオリティを最低（10）にした理由
詳細なコンテキストはmarkdownで取得しているので、スクリーンショットは全体のニュアンス（レイアウト・色味）が分かれば十分です。この割り切りで、Firecrawlのスクレイピング速度とデータ転送量を削減できます。

2. コード生成 → Gemini 3 Flash

要件: スクレイピングデータを元に、Reactコード（アニメーション付き動画）を生成したい

デザインのクオリティを重視すると、最初からGemini 3が本命でした。Googleが誇る最新のマルチモーダルモデルで、コード生成の品質が高い。その中でも最も重要な選定基準は「生成速度」でした。 1分以上待たされると、ユーザーのストレスが現実的ではありません。動画生成サービスとして、「URLを入れて、ちょっと待つと完成」という体験を提供するには、1分以内で動画が再生される必要があると感じました。

検討した代替案

採用理由（Gemini 3 Flash）

• 生成速度が圧倒的に速い: 体感でストレスを感じない25〜30秒

• 品質も十分: Gemini 3 Proと比較しても、生成されたデザインの品質にそこまで遜色ないと感じました。問題が出てもProに切り替え可能という安心感もあります

Gemini 3 Flash（gemini-3-flash-preview）は2025年12月にリリースされた最新モデルで、特にコード生成タスクで優れたパフォーマンスを発揮しています。「速くて、安くて、そこそこ賢い」という、今のところまさにオヒロメのユースケースにぴったりです。

ただし、ここはユーザーの反響を見ながら調整していく予定です。
例えば「1分以上待ってもより高品質な動画の方がいい」というユーザーが多い可能性も十分考えられます。また、モデルそのものの違いもそうですが、インプットトークン（特にシステムプロンプト）やtemperatureなどのパラメータによってもOutputは大きく変わります。細かな調整を加えながら、プロ品質の動画が一発で生成されるよう、現在も検証を続けています。

3. プレビュー表示 → VideoRenderer（ブラウザ内実行）

ここが最も苦労した部分です。オヒロメでは、Geminiが生成したReactコードをブラウザ上でリアルタイムプレビューする機能があります。何も意識せずに共有するために、URLを共有する機能が必須でした。