さわれるデモを、公開するまで
拡張機能で画面をキャプチャすると、AIがステップと日本語ガイドを自動で作ります。最短5分で、営業メールやLPに貼れるさわれるデモを公開できます。
7つのステップ
- 拡張機能『Sawatte Capture』をChromeに追加する
- 拡張からSawatteにログインする
- 見せたい画面を録画(キャプチャ)する
- AIがステップと日本語ガイドを自動生成する
- ダッシュボードで内容を編集・仕上げする
- 共有リンクを作って公開する
- メールやLPにリンクを貼って届ける
拡張機能を入れる
デモの作成にはChromeの拡張機能『Sawatte Capture』を使います。対応ブラウザはGoogle Chrome(推奨)と、Microsoft EdgeなどのChromium系ブラウザです。
- ChromeウェブストアのSawatteのページを開きます。
- 「Chromeに追加」を押してインストールします。
- インストール後、ツールバーにSawatteのアイコンが表示されます。
拡張機能は録画のために画面・タブへのアクセスを許可します。入力欄・パスワード欄に入力した文字は、操作の記録データとしては取得しません(画面の画像には写ります)。記録した画像などのデータは、外部から見えない非公開の場所に保存されます。
ログインする
ツールバーのSawatteアイコンを押し、Sawatteのアカウントでログインします。アカウントをお持ちでない場合は、先に無料登録してください。
画面をキャプチャする
見せたい画面を開き、拡張の録画を開始して、普段どおり操作します。操作の流れがそのままデモのステップになります。
- クラウドサービスの管理画面や、操作で画面が切り替わるWebサービスに対応します。
- うまく収録できない画面は、自動で画像に切り替えて崩れずに見せます。
- 画面に個人情報が写り込んでも、あとで編集画面で黒塗りにできます。
AIが自動で作る
録画を止めると、AIが操作をステップに分割し、日本語の説明文を自動で作ります。数十秒ほどで、ダッシュボードのデモ一覧に表示されます。
生成された説明文やステップは、あとから自由に書き換えられます。
編集して仕上げる
デモ一覧から対象を開くと、編集画面が開きます。各ステップで次の仕上げができます。
- 🖼 画像をアップロード/差し替え: ステップの画像を入れ替えます。
- 🖍 個人情報を隠す: 写り込んだ部分を黒塗りにします(元画像に焼き込むため、写った情報自体が消えます)。
- ✂ 余白を切る: 画面の上下左右の不要な余白を切り落とします。
- 案内文・ハイライト枠: プレビュー上で枠をドラッグして移動、右下の角でサイズ変更します。
- ステップの並べ替え: 編集パネルの「↑上へ/↓下へ」で行います。
- プレビュー: 右上の「プレビュー」で、閲覧者と同じ見え方(PC・スマホ幅)をその場で確認できます。
変更は自動保存されません。編集後は「保存」(⌘/Ctrl+S)で確定してください。
共有・公開する
編集画面の右上「共有リンクを作る」を押すと、公開URLが発行されます。以後は「共有リンクをコピー」からリンクをコピーできます。
- 公開後にデモを直したときは、「保存」で下書きに残ります。右上の「変更を公開」を押すと、共有リンクに反映されます(押すまで閲覧者には従来の内容が表示されます)。
- 公開をやめたいときは、設定パネルの「公開をやめる(リンクを無効化)」を押します。
- 共有リンクは通常のWebページなので、閲覧側はブラウザやスマホを問わず開けます。
届ける
作った共有リンクを、営業メールやLP、資料に貼って届けます。閲覧者はその場で自分のペースでデモをさわれます。
うまくいかないとき
拡張のアイコンが見当たらない
ツールバーのパズルピース型アイコンを押し、Sawatteをピン留めすると常に表示されます。
録画してもデモが一覧に出ない
生成には数十秒かかります。ページを再読み込みしても表示されない場合は、拡張からログインしているアカウントと、ダッシュボードのアカウントが同じかご確認ください。
デモの画面が黒い・崩れる・一部が表示されない
そのステップの表示方法を「スクショ」に切り替えてください。編集画面で対象のステップを選び、右の編集エリアにある「この画面の表示方法」で「スクショ」を選ぶだけです。録り直しは不要で、その場で直ります。 Sawatteは通常、画面をHTMLとしてそのまま再現します(文字が鮮明で軽い)。ただし、記録した画面の中に別サイトの埋め込み(地図・動画・決済フォームなど)や入れ子の画面がある場合、その部分は安全のため再現されず空白になります。スクショは撮影した画像そのものなので、こうした画面もそのまま写ります。 収録が特に難しい画面は自動でスクショに切り替わりますが、上記のように自動判定で拾いきれない場合は手動で切り替えてください。
画面がうまく収録できない
収録が難しい画面は自動で画像に切り替わります。それでも崩れる場合は、そのステップの表示方法を「スクショ」に切り替えてください。編集画面で「🖼 画像をアップロード/差し替え」から手動で画像を差し替えることもできます。
拡張を使わずに作りたい
ダッシュボードの「または、空のデモを手動で作る」から、空のデモを作成し、各ステップに画像をアップロードして作れます。