製品デモは、作るところまでは誰でも到達できます。問題が起きるのは3か月後です。UIが少し変わり、説明文と画面が食い違い、直す担当が決まらないまま放置される。気づけば「見せると恥ずかしいデモ」がリンクだけ生き残っている——多くの現場で起きていることです。
この記事は「作るコスト」ではなく「維持コスト」の話です。どうすればデモが古びずに済むのか、そして撮り直しが必要になったときに何が引き継がれ、何が作り直しになるのかを正確に整理します。
デモは作るコストではなく、維持コストで死ぬ
初回の制作は、たいてい勢いで終わります。展示会前、リリース前といった締め切りがあるからです。ところが維持には締め切りがありません。誰も困っていないように見えるので、後回しになり続けます。
しかも劣化は一気には来ません。ボタンの位置がずれて注目枠が的外れになる、メニュー名が変わって説明文と食い違う。一つひとつは「ちょっと違うだけ」ですが、積み重なると閲覧者は製品そのものへの信頼を下げます。実際の画面を見せている以上、違っていることは相手にもはっきり分かるからです。
結果として、古いデモを配り続けるか、リンクを外して何も見せなくなるかの二択に追い込まれます。どちらも本来の目的からは遠い状態です。
なぜ画面が変わると「全部やり直し」になるのか
多くのデモ制作では、画面と説明が一体で保存されています。そのため画面を撮り直すことは、実質的に新規作成と同じ意味になります。10ステップのデモなら、10本の説明文をもう一度書くところからやり直しです。
厄介なのは、時間をかけた部分ほど失われることです。ガイド文の推敲、拡大して見せたい箇所の指定、選択肢による分岐の設計。どれも最も頭を使った部分ですが、画面が変わっただけでまとめて消えます。
したがって運用の要点は、「作り直しの範囲を、本当に変わった部分だけに閉じ込める」ことに尽きます。画面が変わったなら画面だけを差し替え、考えて書いたものは残す、という分け方です。
撮り直しで何が引き継がれ、何が作り直されるか
Sawatteのプロプランには、撮り直しても編集内容を維持する仕組みがあります。ここは曖昧に書くと運用で事故るので、引き継ぎの範囲を正確に示します。
注目枠の位置が引き継がれないのは仕様です。ボタンが移動している以上、古い座標をそのまま当てるほうがむしろ危険で、新しい画面のレイアウトに合わせて置き直されます。撮り直し後は、枠が意図した要素を指しているかだけ通しで確認してください。
黒塗り（個人情報のマスク）はスクリーンショットに焼き込む方式のため、新しい画像にはかかっていません。氏名やメールアドレスが映るステップがあるデモは、撮り直しのたびに必ず付け直します。更新手順のチェックリストに入れておくと安全です。
なお、この仕組みはプロプラン限定です。フリー・スターターでは撮り直し時に編集内容は引き継がれないため、それらのプランで運用する場合は、次の「直す量そのものを減らす作り方」がより重要になります。
- 引き継がれる：ガイド文（手直しした説明文）
- 引き継がれる：注目枠の色
- 引き継がれる：ズーム（拡大して見せる設定）
- 引き継がれる：分岐（選択肢による進み方）
- 新しい画面に合わせて作り直される：注目枠の位置
- 再設定が必要：黒塗り（画像ごとの加工のため引き継がれない）
撮り直しを前提にしたデモの作り方
引き継ぎの仕組みがあっても、そもそも直す量が少ないほうが速いのは変わりません。初回制作の時点で次の点を意識しておくと、維持が軽くなります。
特に効くのが「位置で説明しない」ことです。「画面右上の設定ボタンを押します」と書いたデモは、ボタンが左に移った瞬間に嘘になります。「設定を開きます」とだけ書いておけば、注目枠を置き直すだけで済みます。同じ理由で、画面に映っている件数や日付を本文に書くのも避けたいところです。
本数を増やしすぎないことも地味に効きます。維持コストは本数にほぼ比例するので、まず中核フローを1本作り、それをLPへの埋め込み・営業メール・オンボーディング案内に作り回すほうが健全です。作成手順そのものはインタラクティブデモの作り方の記事で画面単位に分解しています。
- ステップ数を絞る（10前後。多いほど撮り直しの負担が増える）
- 画面に映っている数値・件数・日付を説明文に書かない
- 「右上の」のように位置で説明しない（場所は注目枠で示す）
- 改修が頻繁な画面を主役にしない。中核フローの安定した部分を選ぶ
- 1本を作り回す。デモの本数と維持コストはほぼ比例する
更新のきっかけを、運用に組み込む
デモが維持されないのは担当者の意識が低いからではなく、「いつ直すか」が決まっていないからです。トリガーを既存の業務に紐づけるのが、いちばん現実的な解決策になります。
離脱ポイント分析（プロプランで利用可）は、本来は「どこで伝わらなくなっているか」を見る機能ですが、更新漏れの検知にも使えます。ある時期を境に同じステップで止まる人が増えたなら、その画面が実物と食い違っている可能性があります。理由までは分かりませんが、見に行くきっかけにはなります。
更新作業そのものは、同じ共有リンクのまま中身を新しくできます。編集しただけでは公開中のデモは変わらず、「変更を公開」を押した時点で共有リンクの中身が入れ替わる仕組みです。リンクを配り直したり、埋め込み先のHTMLを貼り替えたりする必要はありません。
- リリースノートの確認項目に「デモに映る画面が変わったか」を1行足す
- 四半期に一度、公開中のデモを通しで見る棚卸しの時間を取る
- 離脱ポイント分析で、特定のステップで急に止まるようになっていないか見る
古いデモを放置したときに起きること
実物と違うデモは、無いより悪い場合があります。商談中に「今はこの画面ではないんですよ」と補足することになれば、その時間はマイナスからの説明になります。相手が社内で共有したあとに気づかれると、訂正の機会すらありません。
影響が大きいのは、導入直後の案内に使っている場合です。最初に見る手順が古いと、つまずきをむしろ増やします。オンボーディングでの使いどころはSaaSオンボーディング改善の記事へ。逆に、鮮度が保たれているデモは営業まわりの資料の中でいちばん信頼されるものになります。
まとめ
デモの寿命を決めるのは、作るときの完成度ではなく、更新のたびに何を失うかです。ガイド文・注目枠の色・ズーム・分岐が引き継がれ、注目枠の位置は新しい画面に合わせて置き直され、黒塗りは付け直す。この範囲を理解していれば、撮り直しは「作り直し」ではなく「差し替え」で済みます。
そのうえで、位置や数値を本文に書かない、ステップを絞る、本数を増やしすぎない、更新のトリガーを既存業務に紐づける。この4つを最初に決めておくと、半年後にも配れるデモになります。