自社サービス（SaaS）の機能紹介動画の作り方｜実際の画面をデモデータで撮る。本番につながない起動、状態ごとのスクリーンショット、他社ロゴや口コミの星で越えてはいけない線

自社で作った予約ツールや顧客管理の仕組み、口コミ管理の仕組みなど、ネット上で使うサービス（SaaS）を外に紹介するとき、「機能紹介動画」を作りたくなる場面があります。営業先に送る、ホームページのトップに置く、SNSに流すなど、使い道は多くあります。

このとき迷うのが「画面をどう見せるか」です。イラストで描いた画面は実物と違って見え、かといって本番の管理画面をそのまま録画すると、お客様の名前や実際の口コミが映ってしまいます。

先に結論を書きます。

• 画面は実物を使い、中身はデモデータに入れ替える。 架空のブランドと架空のお客様を作り、実在の店名や本物の口コミは使わない
• アプリはコピーを作り、外部につながない状態で起動する。 本番のデータベースや、LINE・Googleなどの外部サービスに一切触れない形で撮る
• 画面録画ではなく、状態ごとの高解像度スクリーンショットで撮る。 ズームやカーソルの動きは後から付ける
• 画面の隅に「※画面はデモデータです」を常に表示する。 通知画面など独自に描いた部分には「イメージ」と書く
• 他社のロゴや画面は模倣しない。口コミの星5つのイラストも映さない。 最後に出す実績の数字だけは実測値にする

以下では、当社が2026年9月に自社の口コミ運用ツールの機能紹介動画（約70秒・横16:9と縦9:16の2本）を作った実例をもとに、手順と判断をまとめます。

画面の見せ方は3通りある

機能紹介動画の画面の見せ方には、大きく3つの選択肢があります。

見せ方	伝わりやすさ	主なリスク
イラストや作り込んだ画面モック	低め（実物と違って見える）	実際の画面と違うと、導入後に「思っていたのと違う」と言われやすい
本番の画面をそのまま録画	高い	お客様の名前・実際の口コミ・店舗名が映る。誤操作で本番データを変えるおそれ
実物の画面＋デモデータ	高い	準備に手間がかかる（この記事の手順で減らせる）

PR目的の動画では、見た人が「この画面を自分の店で使う」と想像できることが大事です。そのためには実物の画面が一番です。ただし、本番環境をそのまま映すのは避けるべきです。映り込みの心配に加えて、撮影のためにボタンを押した操作が、本当にお客様へ送信されてしまうおそれがあるからです。

そこで、3つ目の「実物の画面に、作ったデータを入れて撮る」方法を選びます。

実例：70秒の機能紹介動画を作ったときの構成

当社が作った動画の構成は次のとおりです。

• 紹介した機能は5つ。 ①お客様がアンケートに答えると口コミの下書きができ、本人が投稿する流れ ②気になる言葉を含む回答が届いたときの即時通知 ③店舗ごとの口調に合わせた返信文の下書き ④複数店舗をまとめて見る画面 ⑤アンケートの分析画面
• 締めに運用実績の数字を出す。 画面内のデモデータの件数とは混ぜず、別の扱いにした
• 画面に出る店は、架空のサロンブランド6店舗。 地名は実在する街の名前を使い、ブランド名だけを架空にした
• デモデータは口コミ69件・アンケート回答174件。 プログラムで生成し、何度作り直しても同じ内容になるようにした
• 撮影はスマホ画面と管理画面の2種類。 スマホは390×844ピクセルの画面を3倍の解像度で、管理画面は1600×900ピクセルを2.4倍の解像度で撮影した
• ナレーションはAIの音声合成で付け、仕上がりを書き起こして台本15行と一致するか確かめた

ここから、同じ作り方をするための手順を順に説明します。

手順1：架空のブランド名を決め、実在しないことを確かめる

最初に決めるのは、画面に出す店の名前です。ここで実在する店名を使ってはいけません。 実在の店名の横に作った口コミが並んでいると、見た人は「この店に本当にこういう口コミが付いている」と受け取ります。お客様の店であっても、許可の有無とは別に「本物の口コミ」と誤解される問題が残ります。

架空の名前を決めたら、実在しないかを調べます。

• 予約サイト（美容室ならホットペッパービューティーなど）で同じ名前の店がないか検索する
• 一般の検索エンジンでも、店名・会社名・商品名として使われていないか調べる

思いついた名前が実在することは珍しくありません。当社の場合も、最初の候補の1つは地方に同じ名前の店があったため、別の名前に変えました。造語でも油断せず、必ず検索してから決めます。

手順2：デモデータを作る

次に、画面に表示するデータを作ります。

• 口コミやアンケートの文章は、本物を引用せずに書き起こす。 実際のお客様の文面を少し変えて使うのも避ける
• 件数は「画面がにぎやかに見える量」にする。 当社は口コミ69件・アンケート174件にした。少なすぎるとグラフや一覧がスカスカに見え、多すぎると作るのも確かめるのも大変になる
• プログラムで作るなら乱数を固定する。 撮り直しのたびに数字が変わると、前に撮った画面とつながらなくなる
• デモデータの数字と、締めに出す実績の数字を混ぜない。 画面内の件数はあくまで架空、締めの実績は実測値、と分けておく

設問や文面にお客様固有の言葉が残っていないかも確認します。当社は本番の設問をそのまま使わず、一般の美容室向けの言い回しに差し替えました。特定のお客様の業態や表現が画面に残ると、架空のブランドにしても「あの店のツールだ」と分かってしまうからです。

手順3：アプリのコピーを、外部につながない状態で起動する

撮影用の環境は、本番とは別に作ります。

1. アプリのフォルダを丸ごと別の場所にコピーする。 元のフォルダは触らない
2. APIキーやパスワードなどの認証情報を一切渡さずに起動する。 当社は env -i（Mac・Linuxで環境変数を空にして起動するコマンド）で立ち上げた。あわせて、コピー先に .env などのキーを書いた設定ファイルや、アプリが保存した接続用のファイルが残っていないかも見ておく
3. データの読み込み先を、手順2で作ったデモデータのファイルに切り替える
4. アプリの状態確認画面で、外部サービスへの接続がすべて「なし」になっていることを確かめる。 最終的な安全確認はここで行う。当社のツールでは、AI・Google・LINEの3つの接続がすべてオフであることを確認してから撮影を始めた
5. 撮影が終わったら、元のアプリのフォルダが1ファイルも変わっていないことを確かめる

本番接続用の起動方法（外部サービスにつながる設定で立ち上げる方法）は、撮影環境では使いません。これは、撮影中に「返信する」「通知を送る」などのボタンを押す場面があるためです。手順4で外部接続がすべてオフになっていることを確かめておけば、誤って押しても外には何も送られません。動画の中で返信を送る場面を見せる場合も、実際の送信は起きていない、という状態を作っておくのが安全です。

手順4：画面録画ではなく、状態ごとにスクリーンショットを撮る

撮影は画面録画ではなく、「入力前」「入力後」「通知が届いた状態」のように、画面の状態ごとに高解像度のスクリーンショットを撮る方法をおすすめします。

理由は3つあります。

• 拡大しても文字がぼやけない。 3倍の解像度で撮っておけば、動画の中で画面の一部をズームしても文字がくっきり読める
• 撮り直しが部分的にできる。 録画は1か所を直すにも撮り直しや編集の手間が大きいが、スクリーンショットなら1枚だけ差し替えればよい
• 動きを後から設計できる。 カーソルの移動、ボタンを押す動き、注目させたい場所の強調枠は、スクリーンショットの上に後から重ねて付ける

撮影はブラウザを自動で操作するツールで行うと、毎回同じ大きさ・同じ状態で撮れます。撮った画像を動画にする工程（HTMLで動きを付けて1コマずつ書き出し、MP4にまとめる方法）は、HTMLで作ったアニメーションをMP4動画にする方法で詳しく説明しています。

手順5：表記と「越えてはいけない線」

実物の画面を使う動画では、見た人に誤解を与えないための表記と、映してはいけないものの線引きが重要です。

常に表示しておく表記

• 画面の隅に「※画面はデモデータです」を、動画の最初から最後まで表示する
• スマホに届く通知の画面など、実物ではなく独自に描いた部分には「通知画面はイメージです」と書く

映さない・模倣しないもの

• LINEやGoogleのロゴ、それらのアプリの画面をそっくりに描かない。 通知画面は独自のデザインにし、機能の説明として「LINEに通知」と文字で書くにとどめる。ロゴやアイコンの扱いは他社サービスのロゴやアイコンを自社のサイト・ツールに使ってよいかで整理している
• 口コミの「星5つ」のイラストを映さない。 口コミ投稿の手順を説明する画面に星5つの絵があると、星5を付けるよう促しているように見える。口コミを扱うツールでは特に注意が必要
• 実在の店名と作った口コミを組み合わせない（手順1のとおり）

実績の数字の扱い

• 締めに出す店舗数や件数は、実測値だけを使い、「2026年9月時点」のように時点を添える
• ホームページや資料に載っている数字と、動画の数字をそろえる。 古い資料に別の数字が残っていると、どちらが正しいのか問い合わせのもとになる。食い違いを見つけたら、動画を出す前にどちらかに統一する

手順6：仕上げ（ナレーション・つなぎ・書き出し）

最後の仕上げは、次のやり方を標準にしておくと手戻りが減ります。

• ナレーションは台本の全文を1回で読ませ、完成した音声を書き起こして台本と1行ずつ照らし合わせる。 音声合成は漢字の読みを取り違えることがあるため、読みが違う行だけ、その言葉をひらがなで指定して作り直す。全文を1回で読ませると、行ごとの声の調子もそろう。配置の手順はAIナレーションを動画のカットに合わせる手順で説明している
• 機能と機能の切り替えは、ズームなどの動きを付けずにパッと切り替える。 動きをまたがせると前の画面が残って見えやすく、どこから次の機能なのかも分かりにくくなる
• 書き出しの色の設定は、一般的な動画向け（BT.709の通常の明るさの範囲）にする。 画像向けの設定のまま書き出すと、再生するアプリによって黒の見え方が変わることがある
• 縦長版は、要所をズームして見せる場面を増やす。 横長の管理画面を縦長の動画に全体表示で収めると、文字が小さくなりやすい

公開前のチェックリスト

• 画面に出る店名・ブランド名は架空で、予約サイトと検索エンジンで実在しないことを確かめた
• 口コミ・アンケートの文章は書き起こしたもので、本物を引用していない
• 撮影したアプリはコピーで、認証情報なしで起動し、外部接続がすべてオフだった
• 元のアプリのフォルダは変わっていない
• 「※画面はデモデータです」が全編に出ている。独自に描いた画面には「イメージ」とある
• 他社のロゴ・アプリ画面を模倣していない。星5つのイラストが映っていない
• 締めの実績の数字は実測値で、時点が書いてある。ホームページの数字と一致している
• ナレーションを書き起こし、台本と一致することを確かめた

まとめ

自社サービスの機能紹介動画は、実物の画面を見せるほど伝わります。そのうえで、中身をデモデータに入れ替え、撮影用のアプリを外部につながない状態で起動し、接続がすべてオフであることを確かめてから撮れば、お客様の情報が映ることも、撮影中に誤って送信してしまうことも防げます。

撮影は画面録画ではなく状態ごとの高解像度スクリーンショットにすると、ズームしても文字が読め、撮り直しも1枚単位で済みます。最後に「デモデータです」の表記、他社ロゴを模倣しないこと、星5つのイラストを映さないこと、実績の数字は実測値だけにすることを確認すれば、安心して外に出せる動画になります。

自社ツールの紹介動画や、店舗のPR動画の作り方で迷っている方は、お気軽にご相談ください。