AIを使ってWebアプリのデモを自動録画する

表示したい内容を書き出し、クラウドブラウザ上で製品を操作しながら録画するAIエージェントに渡すことで、Webアプリのデモを自動録画できるようになりました。録画が使えるものになるかどうかは、開始前の準備（ログインするアカウント、画面上のデータ、記述する指示）にかかっています。本ガイドでは、それぞれの準備方法、エージェントが詰まった時の対処法、そしてPlaywrightやPuppeteerスクリプトの方が適しているツールである場合について解説します。

これは、自分で画面録画をすることなく製品デモを作成する最も直接的な方法でもあります。製品が公開Webアプリではない場合や、スライドやURLしかない場合は、末尾付近にあるその他の録画不要な方法をご覧ください。

Webサイト自動録画の仕組み#

Cleveraでは、AIレコーダーに「開始ページ」と「表示内容を記述した指示」の2つを入力します。AIエージェントがクラウドブラウザで開始ページを開き、手順を実行してセッションを録画します。実行中の様子を監視し、いつでもブラウザの操作を代行し、完了後に制御を戻すことができます。

デフォルトでは、エージェントは読み取り専用です。ナビゲーション、メニューの展開、画面の読み取りは可能ですが、許可しない限り作成や編集は行いません。完成した録画は他の録画と同様にライブラリに保存され、ナレーション付きのハウツー動画、製品デモ、または記事に変換できます。

ステップ1：デモ用アカウントとデモ用データを準備する#

エージェントが見たものすべてが動画に含まれます。指示を1つ書く前に、まずアカウントをセットアップしてください。

• 専用のデモ用アカウントを使用する。 本番環境の管理者アカウントをエージェントに操作させないでください。独自のログイン情報を持つデモ用ワークスペースなら、実際の顧客データを画面に映さず、ミスによる影響も最小限に抑えられます。
• リアルなデータをシードする。 空のダッシュボードではデモになりません。チームが実際に製品を使っているように見えるよう、実在感のある名前、金額、日付を含む10〜20件のレコードを追加してください。「Test 1」、「asdf」、実際の顧客名は避けてください。
• フロー開始時の状態を設定する。 「最初のプロジェクトを作成する」というデモなら、まだプロジェクトが存在しない状態にしてください。請求書の編集を見せるなら、請求書が存在し、指示で指定できる明確な名前が付いていることを確認してください。
• 一度限りの割り込みをクリアする。 オンボーディングツアー、「新機能」モーダル、トライアルバナーなどは、あらかじめそのアカウントで閉じておいてください。ユーザーごとに一度だけ表示されるものは、録画にも表示されてしまいます。
• アプリがインターネットからアクセス可能か確認する。 エージェントはクラウドブラウザで実行されるため、localhost、VPN内のステージングサーバー、またはオフィスからのIP制限がある環境にはアクセスできません。公開されているデモ環境やサンドボックス環境を使用してください。

ステップ2：エージェントが従える指示を書く#

AIによる録画がうまくいかない原因のほとんどは、指示が曖昧なことです。エージェントは書かれた通りに、書かれた順序で実行し、不足部分は推測で補います。優れた指示とは、製品を初めて見る人向けに書かれた短いテストスクリプトのようなものです。

4つのルールに従ってください：

1. 画面名を指定する。 UIに表示されるラベルを使用してください。「お金のセクションへ」ではなく「左サイドバーから請求書を開く」と書きます。
2. 順序を指定する。 手順に番号を振ってください。ストーリーにおいて順序が重要（セットアップ、使用、結果の確認）な場合は、その旨を伝えてください。
3. 正確な要素を指し示す。 ボタン、タブ、フィールド、レコード名を指定してください。「請求書INV-1042をクリック」、「フィルタードロップダウンを開いて『期限切れ』を選択」のように書きます。
4. 停止場所を指定する。 視聴者に覚えてほしい結果画面で終了し、そこで少し待機するようエージェントに伝えてください。

実践における違いは以下の通りです。

悪い指示：

請求書機能の使い方を見せて。

エージェントは、どの画面が重要か、どのレコードを開くか、いつ終了するかを自分で判断しなければなりません。最初に見つけたもののツアーが録画されてしまいます。

改善案（ただし、まだ曖昧）：

請求書を作成して顧客に送る方法を見せて。

目標は明確ですが、開始点、顧客、明細項目がありません。読み取り専用エージェントの場合、請求書作成は書き込みアクションであるため、この指示では成功しません。

良い指示：

ダッシュボードから開始してください。1) 左サイドバーの「請求書」をクリック。2) 右上の「新規請求書」ボタンをクリック。3) 顧客で「Northwind Studio」を選択。4) 明細項目を1つ追加：「デザインリテイナー」、数量1、価格2,400。5) 「下書き保存」をクリック。6) 下書きを開いて「プレビュー」をクリックし、プレビュー画面で3秒間停止してください。「送信」はクリックしないでください。

これはすべての画面と要素を明示し、シードデータから正確な顧客を使用し、実行してほしくないアクションに対して明確な境界線を引いています。また、開始前にこの実行には作成権限が必要であることも分かります（ステップ4を参照）。

以下の習慣も役立ちます：

• 1録画につき1フロー。 「請求書を作成し、定期スケジュールを設定し、レポートをエクスポートする」は3つの動画に分けるべきです。短い実行の方が修正しやすく、再利用も容易です。
• 入力値を明記する。 エージェントにテキストを考えさせると、カメラの前で奇妙な内容を入力する可能性があります。
• 既知の癖を伝える。 「価格フィールドからフォーカスが外れるまで保存ボタンは無効」と伝えておけば、エージェントの無駄なクリックを防げます。

ステップ3：サインインオプションを選択する#

ほとんどのWebアプリデモはログインの背後にあります。3つの選択肢があります：

ステップ1のデモ用アカウントがここで活きます。ログイン情報を提供する際は、デモ用データにのみアクセスできるデモ専用パスワードが低リスクな選択肢です。会社が2FA付きのSSOでサインインしている場合は、エージェントに操作させるよりも自分で入力する方が通常は早いです。

ステップ4：読み取り専用か、作成/編集かを決める#

デフォルトは読み取り専用であり、予想以上に多くのデモをカバーできます（エージェントに書き込みを許可するリスクについてはAI画面録画エージェントのセキュリティを参照）。ナビゲーション、フィルタリング、検索、レコードの開封、タブの切り替え、レポートの表示などが可能です。

作成や編集の許可は、フローでどうしても必要な場合（レコードの作成、設定の変更、フォームの送信）のみ、かつデモ用アカウントに対してのみ行ってください。その上で、以下の2点を行ってください：

• 上記の「送信はクリックしないでください」のように、指示の中に停止ポイントを書き込む。メール送信、カード決済、外部連携への投稿を行うアクションは、実行から除外するか、デモ用ワークスペースで無効化してください。
• 実行後にデモ用データをリセットし、次回の実行が同じ状態から開始できるようにする。

ステップ5：エージェントが詰まったら操作を代行する#

一部の画面は、どのような自動ブラウザでもつまずく可能性があります。フロー全体をやり直すのではなく、あらかじめ対策を立てておきましょう：

• クッキーバナーと同意ポップアップ。 操作を代行し、同意または閉じてから制御を戻してください。
• カスタム日付ピッカーとドラッグ＆ドロップ。 特殊なウィジェットはエージェントが最も時間を浪費する場所です。自分で日付を選択して制御を戻してください。
• キャプチャ。 これらは自動化を阻止するためのものです。自分で解決してください。
• 2FAコード。 スマホのコードを自分で入力し、制御を戻してください。

制御を戻すと、エージェントはあなたが離れた画面から再開します。代行の様子が録画に含まれてしまった場合は、エディタでトリミングしてください。

ステップ6：実行時間を短くしてクレジットを節約する#

AIレコーダーは、どのプランでもAIの稼働時間に基づいてクレジットを消費します。つまり、指示の内容がコストを左右します。準備されたアカウントに対して正確な指示を出せば、短時間で完了します。ポップアップだらけのアカウントに対して曖昧な指示を出すと、探索や再試行、待機で時間を浪費します。プランごとのクレジット量は料金ページで確認できます。

録画の活用方法#

生の録画データは入力であり、成果物ではありません。同じAI録画から、以下を生成できます：

• ハウツー動画。 Cleveraが必要なアクションを順番に網羅し、スクリプトを作成してAIナレーションを追加するため、ライブで解説する必要はありません。ヘルプセンターやオンボーディングに最適な形式です。AIチュートリアルメーカーで仕組みをご覧ください。
• 製品デモ。 ここではAIが取捨選択を行います。価値の低い映像をスキップし、クリップを並べ替え、クリック操作のすべてではなく結果をナレーションします。営業やローンチページに最適な形式です。当社の製品デモジェネレーターでデモの形式をご確認ください。
• 記事。 自動選択されたキャプション付きスクリーンショットを含む、ドキュメントやSEO向けのハウツー記事です。

それぞれが独立したコンテンツアイテムであり、動画や記事は74言語に翻訳可能です。UIが変更された場合、ナレーションやテキストの編集はホストされたリンクや埋め込みに反映されますが、映像自体は変わりません。同じ指示を再実行して新しい映像を取得してください。UI変更後にチュートリアル動画を更新する方法では、再録画が必要な場合と編集だけで十分な場合について解説しています。

視聴者にどの形式が必要か迷った場合は、インタラクティブデモと製品動画の比較やチュートリアル動画の作成方法のガイドで、それぞれのトレードオフをご確認ください。

初回の実行：指示1件、78秒、9クレジット#

2026年10月、公開デモアプリであるTodoMVCに対して、以下の指示でAIレコーダーを実行しました：

3つのToDoを追加：'Write launch post'、'Record demo'、'Send newsletter'。'Record demo'を完了にする。次にActiveフィルターをクリックして、未完了のToDoのみを表示する。

サインインは「なし」に設定しました。ToDoの追加と完了は書き込み操作であるため「変更を許可」をオンにしましたが、これは実際のデータがない公開デモアプリだからこそ行ったことです。ご自身の製品では、代わりにステップ4に従ってください。

エージェントは指示通りに正確に実行し、再試行や誤クリックは見られず、こちらが介入する必要もありませんでした。実行時間は実時間で約78秒かかり、エージェントがステップ間で一時停止するため、人間なら約20秒で終わるタスクに対して58秒の映像が残りました。Cleveraは約50秒で、2つのチャプター、6つのステップ、1.5倍および1.8倍の自動ズームを含む0:40のハウツー動画にカットしました。クレジット：録画分析に5、ハウツー作成に4、合計9クレジットです。

CleveraがそのAI録画から作成した、未編集の0:40のハウツー動画。

注意点：映像が色あせてコントラストが低くなる場合があるため、公開前に確認してください。また、指示には番号を振っていませんでした。3ステップの流れで機能したのは、入力する値とクリックするフィルターを正確に指定したためです。より長いフローの場合は、ステップに番号を振ってください。

スクリプトによる代替手段：PlaywrightとPuppeteer#

エンジニアリングチームは長年、自動化スクリプトでブラウザを記録してきましたが、一部の作業ではスクリプトの方が適したツールとなります。

Playwrightはネイティブで動画を記録します。Playwright Testではvideoオプションを'on'、'retain-on-failure'、または'on-first-retry'に設定します。ライブラリを使用する場合は、dirとオプションのsizeを指定してbrowser.newContext()にrecordVideoを渡します。注意すべき点が2つあります。動画はブラウザコンテキストが閉じるときにのみ保存されるため、必ずawait context.close()する必要があります。また、動画はデフォルトで800x800に収まるようにビューポートが縮小されるため、鮮明な1080pの映像が必要な場合は、ビューポートとsizeを自分で設定してください。セレクターを手動で書く必要もありません。npx playwright codegenを使えば、アプリをクリックするだけでスクリプトが生成されます。

Puppeteerにはpage.screencast()があり、デフォルトで30 FPSのWebMを記録し、マシン上にffmpegが必要です。Puppeteer 25.13の時点で、ドキュメントではMP4を出力するpage.record()を推奨しており、こちらは廃止予定となっています。

スクリプトが適しているのは次のような場合です：

• 監視なしでCIからトリガーし、リリースごとに同じフローを記録したい場合。
• 録画がテストを兼ねており、映像と同じくらい失敗を重視する場合。
• アプリがCIランナーから見えるプライベートなステージングネットワークなど、クラウドブラウザが到達できない場所にある場合。
• エンドツーエンドテストを既に保守しており、セレクターが安定しているエンジニアがいる場合。

エージェントが適しているのは次のような場合です：

• 動画が必要な担当者がプロダクトマーケティング、営業、サポートに所属しており、コードを書かない場合。
• フローが単発であるか、頻繁に変更される場合（見込み客向けのデモ、新機能、ヘルプ記事など）。
• 生の映像ではなく、ナレーション付きの完成された動画が必要な場合。スクリプトでは無音の画面キャプチャしか得られず、ナレーション、ズーム、編集は自分で行う必要があります。

この2つのアプローチはうまく組み合わせることができます。Cleveraは無音の録画を含むアップロードされた動画を受け入れるため、チームはPlaywrightでフローをCIで記録し、そのファイルをアップロードしてナレーション付きのハウツーやデモを生成できます。

画面録画以外で製品デモを作成するその他の方法#

クリーンな映像を得るには通常、整理されたアカウント、クリックしながら従うスクリプト、誤操作のない手順が必要であり、UIが変更されるたびに誰かがやり直さなければなりません。AIレコーダーはWebアプリにおいてその手間を省きます。それが適さない場合でも、録画不要の選択肢があります：

デッキ、PDF、またはスクリーンショットから#

機能が未リリース、アプリが非公開、あるいはWebアプリではない場合に使用します。PDFデッキやスクリーンショットをアップロードし、「新機能」などのデモタイプを選択して、指示（「対象は既存の管理者、90秒以内」など）を1行追加します。スライドのテキストがCleveraのナレーションをガイドし、スライドに音声を吹き込むため、具体的なコピー（「レポートを1クリックでCSVにエクスポート」など）がスローガンよりも効果的です。デスクトップアプリの場合、厳選された8〜10枚のスクリーンショットで、明確なナレーション付きウォークスルーを作成できます。制限：ライブクリックやカーソルがないため、「ここをクリック」といったトレーニング動画よりもローンチプレビューに適しています。

URLや数行の文章から#

SNS、広告、ランディングページのトップ用の短いクリップには、Cleveraのソーシャル＆プロモーションタイプ（Starter以上、ベータ版）が録画不要で便利です。リンクを貼り付けると、Cleveraがページから製品の事実、スクリーンショット、ロゴを取得します。あるいは製品を数行で説明すれば、AIが音楽付きのモーショングラフィックスとしてクリップを作成し、タイプによってはナレーションも追加します。製品ツアー、機能スポットライト、機能発表はデモに最も近いタイプであり、AIアバタータイプ（同じくStarter以上、ベータ版）はプレゼンターを追加します。これらはトレーニングではなくプロモーションであり、実際のワークフローではなく製品が何であるかを示すものです。

アバターおよびインタラクティブデモツール#

HeyGenのようなアバターツールは、スクリプトや製品リンクをプレゼンター主導の動画に変えますが、ソフトウェアの場合、画面映像はどこかから用意する必要があります。ArcadeやSupademoのようなインタラクティブツールは動画ではなくクリック操作型のデモを作成しますが、それらをキャプチャするには誰かが製品をクリックして操作する必要があります。インタラクティブデモと製品動画の比較で、どちらがよりコンバージョンにつながるかをご確認ください。

各手法の適性#

2026年10月のテストでは、その差は明らかでした。上記のAIレコーダーの実行と0:55の製品概要は11クレジットで、実際のクリック操作を示せました。clevera.aiから「Webサイトをリサーチ」で生成した35秒の機能スポットライトは96クレジットかかり、約7分を要し、投稿前に修正が必要な無関係なシーンで始まりました。実際の映像の方が安価でデモに近く、プロモーションクリップはウォークスルーではなくリーチを目的としています。

始める前に知っておくべき制限#

• Web専用。 AIレコーダーは、クラウドブラウザ上でウェブサイトやウェブアプリを記録します。デスクトップソフトウェアやネイティブモバイルアプリの記録には対応していません。デスクトップでの操作や、手動でクリックしたいウェブフローには、Cleveraデスクトップアプリ（macOSまたはWindows）をご利用ください。
• アクセス可能なアプリのみ。 localhost、VPN限定のステージング環境、IP制限のかかったツールには対応していません。

まずは、サポートチームが毎週説明しているフローを1つ選び、デモ用アカウントで、すべてのボタン名を明記した番号付きの手順書を用意しましょう。最初の実行を確認し、手動で操作が必要だった箇所をメモして、次の手順書に反映させてください。

よくある質問#

画面を録画せずにプロダクトデモを作成できますか？ はい。AIレコーダーがクラウドブラウザ上で公開中のウェブアプリを記録します。PDF資料やスクリーンショットなら録画は不要ですし、URLやプロンプトからプロモーション風のクリップを作成することも可能です。

本物の顧客データをデモに含めないようにするには？ 本番環境の管理者アカウントではなく、リアルなダミーデータを入力した専用のデモ用アカウント（ステップ1）をエージェントに指定してください。

AIレコーダーはデスクトップソフトウェアに対応していますか？ いいえ。ウェブサイトとウェブアプリのみ記録可能です。デスクトップソフトウェアの場合は、Cleveraデスクトップアプリで録画するか、スクリーンショットからデモを作成してください。

無料でデモを作成できますか？ 無料プランでは、最大3分までのハウツー動画、プロダクトデモ、記事を作成でき、リンクや埋め込みで共有可能です（MP4ダウンロードはStarterプランから）。AI録画には全プランでクレジットを消費します。ソーシャル用やプロモーション用クリップ、AIアバターの利用にはStarterプラン以上が必要です。