さわれるデモを、公開するまで

拡張機能で画面をキャプチャすると、AIがステップと日本語ガイドを自動で作ります。最短5分で、営業メールやLPに貼れるさわれるデモを公開できます。

7つのステップ

デモの作成にはChromeの拡張機能『Sawatte』を使います。対応ブラウザはGoogle Chrome（推奨）と、Microsoft EdgeなどのChromium系ブラウザです。

1. ChromeウェブストアのSawatteのページを開きます。
2. 「Chromeに追加」を押してインストールします。
3. インストール後、ツールバーにSawatteのアイコンが表示されます。

拡張機能は録画のために画面・タブへのアクセスを許可します。入力欄・パスワード欄の値は取得せず、キャプチャしたアセットは非公開ストレージに保存されます。

ツールバーのSawatteアイコンを押し、Sawatteのアカウントでログインします。アカウントをお持ちでない場合は、先に無料登録してください。

見せたい画面を開き、拡張の録画を開始して、普段どおり操作します。操作の流れがそのままデモのステップになります。

• SaaSの管理画面や動的サイト（SPA）に対応します。
• うまく収録できない画面は、自動で画像に切り替えて崩れずに見せます。
• 画面に個人情報が写り込んでも、あとで編集画面で黒塗りにできます。

録画を止めると、AIが操作をステップに分割し、日本語の説明文を自動で作ります。数十秒ほどで、ダッシュボードのデモ一覧に表示されます。

生成された説明文やステップは、あとから自由に書き換えられます。

デモ一覧から対象を開くと、編集画面が開きます。各ステップで次の仕上げができます。

• 🖼 画像をアップロード／差し替え: ステップの画像を入れ替えます。
• 🖍 個人情報を隠す: 写り込んだ部分を黒塗りにします（元画像に焼き込むため、写った情報自体が消えます）。
• ✂ 余白を切る: 画面の上下左右の不要な余白を切り落とします。
• 案内文・ハイライト枠: プレビュー上で枠をドラッグして移動、右下の角でサイズ変更します。
• ステップの並べ替え: 編集パネルの「↑上へ／↓下へ」で行います。
• プレビュー: 右上の「プレビュー」で、閲覧者と同じ見え方（PC・スマホ幅）をその場で確認できます。

変更は自動保存されません。編集後は「保存」（⌘／Ctrl＋S）で確定してください。

編集画面の右上「共有リンクを作る」を押すと、公開URLが発行されます。以後は「共有リンクをコピー」からリンクをコピーできます。

• 公開後にデモを直したときは、「保存」で下書きに残ります。右上の「変更を公開」を押すと、共有リンクに反映されます（押すまで閲覧者には従来の内容が表示されます）。
• 公開をやめたいときは、設定パネルの「公開をやめる（リンクを無効化）」を押します。
• 共有リンクは通常のWebページなので、閲覧側はブラウザやスマホを問わず開けます。

作った共有リンクを、営業メールやLP、資料に貼って届けます。閲覧者はその場で自分のペースでデモをさわれます。

うまくいかないとき