完成動画

請求書SaaSのローンチを描くモーショングラフィックス動画

架空の請求管理ソフトを例に、機能の告知を「経理担当が定時に帰れる」物語に変えるまでを文字と画面の動きで見せる78秒

  • サービス紹介
  • 78秒
  • 横型
  • 自社制作サンプル|架空の請求管理ソフト「スミ」と創業者の発言
  • 公開

制作手法:画面と文字の動きはHTMLで組み、1コマずつ書き出したモーショングラフィックスで、製品の操作は自作した画面の録画を使った。スマホの投稿の映像は過去に画像生成AIと動画生成AI(Kling v3)で作った自社制作サンプルから、動画の壁は過去の自社制作の動画から使った。音楽と効果音は生成AI(ElevenLabs)で作り、編集で仕上げた(撮影・ナレーションなし)

この内容なら12万円(税別)・最短5営業日78秒・横型・縦型・フィード用(4:5)の3つ|料金表

動画の概要と制作条件

  • 機能を並べた告知では、請求書SaaSの価値が伝わらない。
  • 「自動照合」を「経理担当が定時に帰れる」という物語へ。
  • 製品を触り、創業者に聞き、紹介動画を作る過程を描く。
使う場所
FablessBridgeのLPに載せる横16:9の78秒。5版目からMeta広告用のフィード4:5とリール9:16(78秒と33秒)も作った
構成
機能を並べた告知が流れて消える不満から始め、登場・実演・見せ場・実績・作れるもの・締めの順に進む
表現
ナレーションなしで音楽と効果音だけ。画面の文字はカーソル付きで1文字ずつ打ち込み、不満は暗い画面、実演は白い画面で見せる
制作時間
最初の依頼から5版目まで記録上約2時間15分(2026年10月6日23時前〜7日1時過ぎ)

78秒の流れ

0〜5秒 暗い画面の投稿欄に「新機能をリリースしました」と機能の箇条書きが打ち込まれて投稿される。似た告知が3枚並び、機能の行に取り消し線が引かれてゴミ箱へ落ちる。

5〜8秒 「機能を並べる告知は もう終わり」と打ち込む。

8〜13秒 「機能を説明すると 長く難しくなる」の下で告知文が伸び続ける。「◯◯機能の処理速度が 最大3倍!」が飛び出し、「使う理由には ならない」と続く。

13〜21秒 似た告知が画面のあちこちに湧いて重なり、押し流される。「ただのお知らせとして 流れていく」。

21〜27秒 青い再生マークの横に「そこで」。青い画面にFablessBridgeのロゴと「バイラルローンチ動画」が出る。

27〜30秒 白い画面に変わり、創業者の「PR動画で相談させてください」「来月請求管理ソフトを公開します」に「まず製品を触って利用場面を確かめます」と返す。

30〜34秒 「製品を触っています」。請求管理ソフト「スミ」で触った画面が操作回数と一緒に並び、入金照合の操作録画が開く。

34〜38秒 「照合を手で行うと月末に残業が出ると分かりました」。ビデオ通話で創業者が「経理の人が月末に帰れないんです」と話し、狙い「月末の残業をなくす」と想定顧客「中小企業の経理担当」が記録される。

38〜44秒 経理担当・営業・社長の3人の利用者で並行して考え、経理担当が選ばれる。「入金を自動で照合」が「経理担当が定時に帰れる」に打ち変わる。

44〜49秒 「物語を組み立てています」。絵コンテ20コマが並び、「月末の『お先に失礼します』が逆になる物語」の1コマが選ばれる。

49〜55秒 選ばれたコマがオフィスから帰る女性の映像になり、スマホのタイムラインの投稿として流れる。「タイムラインで 手が止まる 誰かに話したくなる」と出て、SaaS創業者の一言「うちの製品ってこういうことか」が入る。

55〜63秒 「企画から制作まで 事業と技術を理解する エンジニアが担当」と打ち、SaaS運営8年・累計GMV 410億円・光通信営業出身のエンジニアのカードが並ぶ。

63〜70秒 中央の4本から16本、64本へと引いていく動画の壁の上で、「新機能を」「大型アップデートを」「開発前の構想を」と打ち変えて「物語にする」と続ける。

70〜78秒 「伝わる動画は ストーリー」。FablessBridgeのロゴと「スタートアップのバイラルローンチ動画」を出し、「pr.fabless-bridge.ai」を打ってから暗転する。

初版と最終版の比較

最初に書き出した1版目から公開中の5版目まで直しました。実演を自分で進む作業記録に変え、止まって見える区間に動きを足し、画面の文字をすべて打ち込みにそろえています。

全編

初版
最初に書き出した1版目|78秒
最終版
公開中の5版目|78秒
修正 01

作例の帯を広がっていく動画の壁に変える

修正前
動く絵コンテの1版目。作例3本の帯が横に流れる|1:03〜1:10
最終版
中央の4本から64本の動画の壁へ引いていく|1:03〜1:10
狙い
物語にできる題材の幅をひと目で見せる
制作中の指示
「真ん中に4動画最初あって、画角が広域になり16個、64個みたいにいろいろな動画が広がって見える表現」
調整
過去の自社制作の動画37本から64枚を選び、言葉が切り替わる瞬間に4本から16本、64本へと画面が引くように合わせる
修正 02

実演を自分で探して進む作業記録にする

修正前
2版目。横に並んだ作業台の上をカメラが移動する|0:27〜0:49
最終版
縦に伸びる作業記録に結果が流れ込む|0:27〜0:49
狙い
製品を触り創業者に聞いて変化を決めるまでが自分で進んでいくように見せる
制作中の指示
「機能の動き(agentが勝手に情報探してくる等の動き)にはまだかな」
調整
大きな見出しが小さくなって記録に収まり、触った画面・創業者の発言・3人の利用者で並行して考えた結果が順に流れ込む形にする。スミの操作録画は記録の中でその場で開く
修正 03

告知が流れていく14〜18秒に動きを足す

修正前
2版目。ぼかした告知が暗く流れる|0:13〜0:21
最終版
告知が湧いて重なり押し流される|0:13〜0:21
狙い
告知があふれて流れていく様子を止まらずに見せる
制作中の指示
「14〜18秒のところの動きがないから改善点としてある」
調整
3版目で拍ごとに指で弾く動きを試したうえで、5版目では拍ごとに似た告知を2枚から6枚へ増やしながら湧かせ、最後に40枚を重ねて残像を引いて押し流す
修正 04

画面の文字をすべてキーボード入力にそろえる

修正前
4版目。言葉ごとに浮き上がって出る|0:05〜0:13
最終版
カーソル付きで1文字ずつ打ち込む|0:05〜0:13
狙い
見出しや台詞の出し方を作業記録やチャットと同じ打ち込みにそろえる
制作中の指示
「文字を全部キーボード入力にしてみて」
調整
見出しと台詞をカーソル付きで1文字ずつ打ち、打った直後の2〜3文字を青くしてから元の色に戻す。打ち込みに合わせて打鍵音を足す

スタイルフレームと制作工程

音楽
生成AIで3案(静かな電子音・ピアノと電子音・歯切れのよいビート)を作り、歯切れのよいビートを選んだ。ロゴが出る24秒に盛り上がりを合わせる
効果音
打鍵・クリック・取り消し線・ゴミ箱など18種類を生成し、5版目では画面の出来事に合わせて130か所に置いた
  1. 01
    秒数つきの文字台本で画面の文字を決める
  2. 02
    本番と同じHTMLで主な6場面を静止画にする
  3. 03
    音楽を3案作り拍の位置に場面を合わせる
  4. 04
    動く絵コンテでテンポと順番を確かめる
  5. 05
    HTMLで動きを組み1コマずつ書き出す
  6. 06
    効果音を置き5版目まで直す

制作のご相談

企画が固まっていない段階からご相談いただけます。

このような動画を相談する料金と制作の流れを見る