デモ動画とは？使う場面と構成の型、操作画面のキャプチャから作る手順【作例つき】

デモ動画を使う場面と、場面ごとの長さ

デモ動画を見せる相手は、製品を知ったばかりの人から、使い始めた人までいます。 場面によって、見る人が知りたいことと、動画を見る環境が違うので、見せる範囲と長さを変えます。

長さは、秒数から決めるより、見せる操作の数から決めます。 1本で見せる操作を3つまでにしておくと、見る人が最後まで追いやすく、何が便利なのかもぼやけません。 見せたい機能が多い製品は、全体を見せる短い1本と、機能ごとの短い動画に分けます。 SaaSのマーケティングの段階と動画の使い方は、SaaSマーケティングとはで詳しく説明しています。

場面が違えば、別の動画として作ります。 たとえば展示会のブースでは、音を出せないことが多く、通りがかりの人が数秒しか見ないので、字幕だけで伝わる短い版が向きます。 同じ製品でも、商談の相手にはナレーションで補いながら、相手の業務に合う操作を順に見せます。 後で説明するキャプチャから作る方法なら、同じキャプチャから両方を作り分けられます。 ブースでの流し方は展示会動画の作り方、購買の段階ごとの動画の使い分けはBtoB動画で扱っています。

デモ動画の4つの見せ方：画面を録画する、キャプチャを並べる、実機を撮る、図で描き直す

デモ動画の見せ方は、大きく4つあります。 SaaSやアプリなら、画面を録画するか、操作画面のキャプチャを並べるかのどちらかが基本です。

キャプチャを並べる見せ方は、入力して、選んで、結果が出る、という画面の切り替わりで進む操作に向きます。 業務向けSaaSの多くの操作がこれに当たります。 録画と違って、読み込みを待つ時間や操作に迷った跡が映らず、1枚ごとに字幕やナレーションを合わせやすくなります。 製品の画面が変わったときも、変わった画面のキャプチャだけを撮り直せば済みます。

一方で、カーソルの動きや、ドラッグして並べ替える様子のように、動きそのものを見せたい操作は、静止画では伝わりません。 その操作だけを録画して、キャプチャの間に挟みます。

機械や道具など、形のある製品の実機を撮る見せ方は、商品紹介動画の作り方で扱っています。 撮影や図の制作を制作会社に頼むときの費用は、動画制作の費用を参考にしてください。

デモ動画の構成の型：課題、できること、操作、結果、次の行動

デモ動画は、次の5つの順で組むと、見る人が「何のための操作か」を見失いません。

後の節で掲載する作例の63秒も、この型に沿って組んでいます。

いちばん長いのは操作の部分で、約28秒です。 課題とできることは合わせて約11秒にとどめ、結果では、入力欄に何が入ったかを約15秒かけて説明しています。

組むときは、次の3つを守ります。

• できることを先に言う：操作を見せる前に、この製品で何ができるかを一言で伝えます。結論が最後まで分からないと、見る人は途中で再生を止めてしまいます。
• 1つの画面では1つのことだけ伝える：画面に映っている文字を読み上げるのではなく、その操作で何が変わるのかを説明します。
• 次の行動は1つにする：無料で試す、資料を請求する、商談を予約する、のどれか1つに絞ります。

デモ動画の作り方（6つの手順）

ここからは、SaaSやアプリの操作画面からデモ動画を作る手順を、順に説明します。

1. 見る人と置き場所を1つに決める

最初に、誰に、どこで見せるかを1つに決めます。 導入を考え始めた人にサイトで見せるのか、商談の相手に送るのかで、見せる操作も長さも変わるためです。 置き場所が決まれば、前の節の表から、見せる範囲と長さの目安が決まります。

2. 見せる操作を3つまでに絞り、最後の画面を決める

見る人がいちばん知りたい操作を、3つまで選びます。 選ぶときは、機能の多さではなく、見る人の困りごとが解決する操作を優先します。

あわせて、動画の最後に見せる画面を決めます。 集計表ができあがった画面、申請が届いた画面のように、操作の結果が一目で分かる画面です。 最後の画面が決まると、そこへ向かう操作の順番も決まります。

3. デモ用のアカウントとデータを用意する

撮る前に、デモのためのアカウントとデータを用意します。 本物の顧客の名前や、社員の個人情報は映しません。

ただし、「テスト1」「サンプル」のようなデータでは、見る人が自分の仕事に重ねにくくなります。 架空でも、見る人の業務にありそうな名前、金額、日付を入れておきます。 あわせて、ほかのアプリの通知を切り、関係のないタブを閉じ、公開前の機能や社外秘の情報が映らないことを確かめます。

4. 操作画面を撮る

キャプチャで作る場合は、操作の順に、1つの操作につき1枚ずつ撮ります。 ブラウザの画面の大きさと拡大率は、すべてのキャプチャでそろえます。 メニューやダイアログを開いた状態、入力を終えた状態のように、操作した結果が見える瞬間を撮り、ファイル名には順番の番号を付けておきます。

録画で作る場合は、普段よりゆっくり操作し、クリックした後は一呼吸置いてから次に進みます。 1つの操作ごとに分けて録っておくと、失敗したときにその部分だけを録り直せます。

5. 台本と字幕をつける

1つの画面ごとに、その操作で何ができるのかを1〜2文で書きます。 画面に書いてあるボタンの名前を読み上げるだけでは、見る人には何が便利になるのかが伝わりません。 押す場所は、枠で囲むか拡大して示します。

字幕は、音を消して見る人のために、ナレーションの要点だけを短く出します。 台本の書き方は動画の台本の書き方、字幕の見やすい入れ方はテロップの入れ方で扱っています。

6. 音を消して、スマホの幅で見て確かめる

できあがったら、公開する前に、置き場所と同じ条件で見ます。

• 音を消しても、何の操作をしているかが分かるか
• スマホの小さい画面でも、字幕と画面の文字が読めるか
• 顧客の名前や社外秘の情報が映っていないか
• 最後に、見た後にしてほしいことが1つだけ示されているか

作例：操作画面のキャプチャ5枚から作った製品デモ動画

作例として、NoLangの「台本から作成」で動画を作り始めるまでの操作を、5枚のキャプチャにして、デモ動画にしました。 キャプチャは、NoLangの画面で架空の社内のお知らせの台本を入れ、テンプレートを選び、送る直前までを撮ったものです。

操作画面のキャプチャで見せる製品デモ動画

この5枚の操作画面のキャプチャで、台本から動画を作る流れを順に見せる製品デモ動画にして。

このテンプレートで動画を作る

5枚のキャプチャは、撮った順に、操作と結果のシーンになっています。 2枚目の台本の画面は、冒頭の課題の場面にも使っています。 動画にするときに足したのは、次のものです。

• ナレーションと字幕：画面ごとに、その操作で何をしているかを話し、同じ文を字幕に出しています。
• 拡大と枠：画面全体を映した後、押す場所や入力した台本を拡大し、オレンジの枠で囲んでいます。
• ステップのラベルとカーソル：画面の左上に「STEP 1 台本を入力」のようなラベルを出し、押す場所へカーソルを動かしています。
• 手順の図：「手順は3つ」の場面と最後のまとめは、キャプチャを使わず、3つの手順を並べた図にしています。

録画を使っていないので、読み込みを待つ時間や、操作に迷った跡は映っていません。

NoLangで、操作画面のキャプチャからデモ動画を作る

NoLangでは、撮った操作画面のキャプチャを、1枚1シーンで順番に並べた動画を作れます。 実際の画面で、手順を説明します。

1. 左のメニューの「生成する」を押し、「どうやって作りますか？」で「画像から」を選びます。
2. 「1. 素材を追加」に、撮ったキャプチャを操作の順に追加し、「2. 使い方を設定」で「画像をそのまま使用」を選びます。画像は、1シーンに1枚ずつ、並べた順に入ります。

3. 「この方法で作る」を押すと、ホームの入力欄に画像と指示文が入ります。指示文の後に、誰に何を伝えるデモ動画にしたいかを書き足し、入力欄の下で縦横比を選んで、矢印のボタンで送ります。

上の画面では「台本から動画を作る手順を紹介する、1分ほどの製品デモ動画にして。」と書き足しています。 見る人と、どの画像で何を説明するかまで書く場合は、たとえば次のようにします。

商談の相手に送る、1分ほどの製品デモ動画にして。
1枚目で困りごと、2〜4枚目で操作、5枚目で結果を説明して。

できあがった動画は、エディターで直せます。 台本を書き換えると字幕も一緒に変わり、素材を右クリックして「差し替え」を選べば、画面が変わったシーンのキャプチャだけを入れ替えられます。 押す場所を目立たせたいときは、素材の開始アニメーションに「ズーム」などを選びます。

作例と同じ形で作る場合は、作例の「このテンプレートで動画を作る」を押します。 開いた画面で作例をお手本にし、入力欄の「＋」から自社の製品の操作画面のキャプチャを添付して、見せたい操作を書いて送ります。

画面を録画した動画があるときは、「どうやって作りますか？」で「動画から」を選び、録画を追加して使い方を「動画素材」にし、作り方で「ナレーションをつける」を選びます。 録画の映像に、AIのナレーションを重ねた動画になります。

会社でデモ動画を作り続けるには

製品の画面は、更新のたびに変わります。 デモ動画を一度作って終わりにせず、画面が変わったらキャプチャを差し替えて社内で作り直せるようにしておくと、営業やサポートの担当者がいつも新しい画面で説明できます。 NoLangを会社で使うときの機能や進め方は、資料にまとめています。

導入についての相談は、お問い合わせから受け付けています。