SaaSサイトにインタラクティブデモを埋め込む方法｜設置場所・形式・導線の決め方

デモを目立つ場所へ置くこと自体を目的にすると、ページの説明と製品体験の間に矛盾が生じます。制作前に必ず決めておくべきなのは、このページで何を検証してもらうか、どの操作を見せるか、体験後にどこへ導くかの3点です。

訪問者がそのページで解決したい「疑問」を1つに絞る

訪問者の関心はページごとに異なります。トップページなら「製品のコアな価値」、機能ページなら「特定機能の操作性」、ユースケースページなら「業務課題の解決プロセス」、料金ページなら「プランごとの機能差や運用イメージ」です。製品全体を説明できるデモを1つ作って、すべてのページへ同じ形で置く必要はありません。ページの見出しを読んだ人が次に持つ疑問と、デモの開始画面をそろえます。

説明ではなく、価値が分かる1つの業務フローを見せる

「ログインする → メニューを開く → 設定画面へ移動する」と製品内の移動を順番に見せるより、見込み顧客が結果を理解できるフローを短く切り出します。たとえば経費精算なら、「申請を確認する → 承認ボタンを押す → 処理結果が反映される」といった流れです。

デモ内の主CTAは、ページの目的と一致させる

デモ内では無料トライアルを案内しているのに、ページ本体では「商談予約」を最優先で求めているような導線の矛盾は避けましょう。トライアル、商談、資料、関連機能の確認などから、そのページの検討段階に合う主な行動を決めます。補助導線を置くことはできますが、デモとページで次の行動が矛盾しない状態にします。

デモ内にフォームを設置する場合は、顧客が「操作を通じて製品の価値を実感した後」に配置する方が入力のハードルが下がります。何を見た後であれば入力してくれるか、文脈を意識した配置にしましょう。

ページの役割が違えば、見せるべきコンテンツと適切な配置場所も変わるため、ページの検索意図や主CTAを優先して判断するのが基本です。

ホームページ・LP：代表的な価値をCTAの近くで体験できるようにする

製品の操作感そのものが差別化になるなら、ヒーローセクション直下などにインラインで埋め込む手法が有効です。一方、主メッセージ、料金訴求、フォームなど別の要素を優先したいページでは、「製品を操作してみる」といったボタンからポップアップで全画面表示させる方が全体のレイアウトを崩さずに済みます。いずれの場合も、長い総合ツアーではなく、そのページで約束している価値を短く見せます。

機能ページ・ユースケースページ：解説テキストの「直下」に配置する

「自動レポート作成」を説明した直後に、関係のない管理画面デモを置いても効果はありません。見出しや本文で説明した内容と同じ業務フローを、その場で確かめられる形にします。管理者向け・現場向け、あるいは業界別にターゲットが分かれる場合は、1つの長尺デモにまとめず入口を複数に分けましょう。

料金ページ：判断を補うデモを必要な人だけ開けるようにする

料金ページの主役は、プランごとの違いと問い合わせ・契約への導線です。大きなインラインデモで料金比較を押し下げるより、プラン比較に関わる重要機能や「実際の画面を見たい」ユーザー向けに、ポップアップやモーダル形式で開けるようにします。デモのCTAも、無料トライアルや相談など料金ページの主目的に合わせます。

埋め込み形式は、画面サイズだけではなく、「そのデモがページコンテンツのメインなのか、補助的な深掘り要素なのか」で選択します。ログイン後のユーザーへ表示する製品内ツアーは別用途なので、本記事では公開Webサイト上の埋め込みに絞ります。

SupademoのPopup Embedは、ページにSDKスクリプトを読み込み、ボタンやリンクのクリック時にデモを全画面のオーバーレイとして開く方式です。デモ本体は初期表示に含まれず、訪問者が開いたときに表示されるため、ヒーローや料金ページなど、ページ本体を優先したい場面で使いやすくなります。インラインは、クリック前から製品体験を見せたいページに向いています。

埋め込みの実装は「コードを取得する → CMSへ貼る → 公開URLで動作確認」の3段階です。iframeのURLや画面比率、Popup用のデモIDを手入力するより、Share画面から出力されるコードをそのまま利用する方が入力ミスを避けやすく、仕様変更にも追従しやすくなります。

1．「Share」から埋め込みコードをコピーする

対象のSupademoを開き、ShareからEmbedへ進みます。ページ内へ直接表示する場合はInline Embedのコードを使います。ポップアップならPopup Embedを選びます。Popup Embedでは、HTML、React、Angular、Vue.js、Svelte向けのスニペットがShare画面に用意されています。

2．CMSのHTML・埋め込み領域へコードを貼り付ける

貼り付け場所はCMSごとに違います。Supademoの現行ドキュメントでは、WordPressはCustom HTMLブロック、WebflowはEmbed要素、FramerはEmbedコンポーネントからHTMLを貼り付ける手順が案内されています。HubSpot CMSはテーマやページ構成によって実装が異なるため、HTMLを出力できる既存モジュールまたはカスタムモジュールで実装し、開発担当と公開環境で確認しましょう。

3．公開ページで最初から最後まで操作する

CMSの編集画面で表示されていても、公開ページで同じように動くとは限りません。PCとスマートフォンで実際のURLを開き、「ページの読み込み速度 ➔ ホットスポットのタップ反応 ➔ 条件分岐 ➔ デモ内CTA ➔ 外部遷移」の一連の流れを必ずテストしてください。広告やメールから流入させるページなら、UTM付きURLでも同じ状態になるか確認しておきます。

Webサイトの訪問者は、必ずしも「製品全体を勉強する」ためにページを見ているわけではありません。ページ上の疑問を解消する最短ルートでシナリオを構築し、別機能の紹介は別デモへ切り分けましょう。

👉 合わせて読みたい：インタラクティブデモの作り方｜企画・シナリオ設計から公開・改善まで

Web担当だけでなく、必要に応じて開発担当へそのまま渡せるチェック項目にしておくと、公開後に「デモ側の問題か、サイト側の問題か」を切り分けやすくなります。

表示されない場合：公開設定・iframe・SDK・CSPを確認する

まず、Supademo側の閲覧権限が「Public（公開）」になっているか確認します。次に、CMSがiframeやscriptを削除していないか、Content-Security-PolicyによってSupademoのコンテンツやPopup用SDKがブロックされていないかを確認します。

Popup Embedでボタンを押しても反応しない場合、Supademoの現行ドキュメントでは、SDKスクリプトの未読み込み、誤ったデモID、ブラウザ拡張機能やCSPによるブロックが代表的な原因として挙げられています。ブラウザコンソールのエラーと公開ページのソースも確認します。

スマホ表示：文字の大きさと操作しやすさまで確かめる

レスポンシブなiframeでも、デスクトップで収録した細かいUIテキストがスマホの小さな画面で読めないケースがあります。主要なモバイル幅でホットスポットを実際にタップし、説明文が画面外へ出ないか、ボタンが小さすぎないかを確認します。インラインでは窮屈になる場合、ポップアップや直接リンクで広い表示へ切り替える方が有効です。

読み込み、UTM、Embed Events APIの計測を確認する

ファーストビューへインラインで置く場合は、埋め込み前後でページの読み込みを実測します。Popup EmbedはSDKを読み込みますが、デモ本体はクリックされるまで表示されません。どちらの方式でも、自社サイトのCore Web Vitalsや実際のモバイル回線で確認するのが確実です。

SupademoのEmbed Events APIでは、埋め込んだデモからload、started、slideChange、progress、completed、closeのpostMessageイベントをホストページへ送れます。サイト側でこれらを受け取り、Google Analyticsなどの計測へ渡すことができます。一方、デモ内CTAのクリックはこの6イベントに含まれないため、CTAの遷移先やフォーム、CRM側の計測と組み合わせて設計します。

表示回数だけでは、配置が悪いのか、内容が長いのか、CTAが合っていないのかを判断できません。「ページ到達 ➔ デモ開始 ➔ 途中離脱 ➔ デモ完了 ➔ 主CTAクリック（商談・登録）」の各フェーズを順番に評価します。

Supademoでは、個別の閲覧、エンゲージメント、離脱、完了率、セッション長、端末情報などを確認できます。ただし、1つの指標だけで購入意向を判断しません。MQLの定義、フォーム、CRM連携、スコアリングまで広げる場合は専用記事へ分け、本記事ではWeb上の配置と公開後の改善に留めます。

👉 合わせて読みたい：

• BtoBマーケティングでインタラクティブデモを活用する方法
• インタラクティブデモでMQLを増やす方法

私たちのお客様であるbeehiiv社は、メインのデモページなどでインタラクティブデモを使い、アカウント作成前に製品の操作感やメリットを疑似体験できる導線を作りました。すべての訪問者をすぐサインアップへ送るのではなく、先に製品体験を挟んだ例です。

その結果、デモを体験したユーザーの20%以上が基準を満たす有望顧客（qualified signup）として登録に進み、その後の有料プランへの転換率（CVR）はサイト全体の平均と比較して50%以上高い数値を記録しました。参考にすべきは、「登録前のタイミングで主要な体験を提供し、その後の転換率まで追跡した」という一貫した導線設計です。

👉 より詳しく学ぶ：beehiiv社の導入事例

Webサイト全体のデモを一気に作り替える必要はありません。まずは「一定のアクセス数があるものの、製品理解が追いつかずコンバージョン率が停滞している機能ページやLP」を1つ選定してください。

最初のページで運用すると、実装上の制約、モバイルでの見え方、読み込み、離脱箇所まで具体的に分かります。そこで得た改善点を次のページへ展開する方が、最初からサイト全体へ埋め込むより管理しやすくなります。