# AtriumKitを2分でご紹介 AtriumKitで作ったAtriumKitのツアー。Chromeで録画し、AIで編集して共有。誰が見たかも確認できます。 #### こんにちはさん、AtriumKitをご紹介します これはAtriumKitで作ったAtriumKitのデモです。アプリの実際の画面をChromeで録画しています。ツアーを最初から見ることも、好きなところから始めることもできます。 - **ツアーを最初から見る** → ステップ 1 へ進む - **編集とAI** → ステップ 4 へ進む - **共有とリード獲得** → ステップ 11 へ進む - **分析など** → ステップ 15 へ進む > **「ツアーを最初から見る」を選んだ場合** ### ステップ 1: Chromeで録画を開始 ガイド付きツアーかクリックできるサンドボックスを選び、いつもどおり製品を操作します。クリックするたびにステップが作成されます。 ![ステップ 1: Chromeで録画を開始](https://media.atriumkit.com/media/demos/d_lXk5OpsKxoUw0fHs/frames/cap_Jq0ywRuAuIRUcemj/f_sxj4796k8f1s.webp?v=1) ### ステップ 2: 個人情報はブラウザの外に出ません 画面がブラウザの外に出る前に、録画ツールがメールアドレスなどの個人情報をぼかします。ほら、見えますか？ ![ステップ 2: 個人情報はブラウザの外に出ません](https://media.atriumkit.com/media/demos/d_lXk5OpsKxoUw0fHs/frames/cap_Jq0ywRuAuIRUcemj/f_sxj4796k8f1s.webp?v=1) ### ステップ 3: デモを開く Anaが請求書アプリLedgerlyのツアーを録画しました。クリックしてエディターを開きます。 ![ステップ 3: デモを開く](https://media.atriumkit.com/media/demos/d_lXk5OpsKxoUw0fHs/frames/cap_Jq0ywRuAuIRUcemj/f_sxj4796k8f1s.webp?v=1) ## ドキュメントのように編集 書き換え、並べ替え、パーソナライズ、音声の追加、翻訳ができます。録画し直す必要はありません。 ### ステップ 4: ステップは自動で文章化 クリック内容をもとにツールチップが自動で作成されます。順番を変えたり、チャプター、選択肢、リードフォーム、CTAを追加したりできます。 ![ステップ 4: ステップは自動で文章化](https://media.atriumkit.com/media/demos/d_lXk5OpsKxoUw0fHs/frames/cap_Jq0ywRuAuIRUcemj/f_q9h6ago0jijb.webp?v=1) ### ステップ 5: 相手に合わせてパーソナライズ パーソナライズリンク、サイト、フォームから取得した情報で、閲覧者の名前や会社名を変数に自動入力できます。このツアーがあなたに挨拶できたのもそのおかげです。 ![ステップ 5: 相手に合わせてパーソナライズ](https://media.atriumkit.com/media/demos/d_lXk5OpsKxoUw0fHs/frames/cap_Jq0ywRuAuIRUcemj/f_q9h6ago0jijb.webp?v=1) ### ステップ 6: 音声を追加 各ステップに文章を入力すると、AI音声が字幕付きで読み上げます。製品名の発音も、あなたの読み方に合わせられます。 ![ステップ 6: 音声を追加](https://media.atriumkit.com/media/demos/d_lXk5OpsKxoUw0fHs/frames/cap_Jq0ywRuAuIRUcemj/f_q9h6ago0jijb.webp?v=1) ### ステップ 7: ツールチップではなくページを修正 画面はすべて実際のウェブページです。ページ上でテキストを変更したり、ぼかし、非表示、画像の差し替えをしたりできます。録画し直す必要はありません。 ![ステップ 7: ツールチップではなくページを修正](https://media.atriumkit.com/media/demos/d_lXk5OpsKxoUw0fHs/frames/cap_Jq0ywRuAuIRUcemj/f_i05y1z35bd75.webp?v=1) ### ステップ 8: 注目してほしい場所を示す 各ステップで対象箇所にズームし、カーソルを動かしながら、ページの他の部分を暗くできます。このツアーのように。 ![ステップ 8: 注目してほしい場所を示す](https://media.atriumkit.com/media/demos/d_lXk5OpsKxoUw0fHs/frames/cap_Jq0ywRuAuIRUcemj/f_i05y1z35bd75.webp?v=1) ### ステップ 9: 閲覧者に選んでもらう ステップにいくつか選択肢を用意すると、それぞれのルートを個別に再生できます。このツアーの冒頭にあるメニューのように。 ![ステップ 9: 閲覧者に選んでもらう](https://media.atriumkit.com/media/demos/d_lXk5OpsKxoUw0fHs/frames/cap_Jq0ywRuAuIRUcemj/f_191zv5fy75y2.webp?v=1) ### ステップ 10: 相手の言語で伝える AIを使って、ツールチップとナレーションを14言語に翻訳できます。閲覧者はプレーヤーで言語を選べます。 ![ステップ 10: 相手の言語で伝える](https://media.atriumkit.com/media/demos/d_lXk5OpsKxoUw0fHs/frames/cap_Jq0ywRuAuIRUcemj/f_hitvjzpry87y.webp?v=1) ## どこでも共有 リンク、埋め込み、文章のガイドを用意。編集内容はすべて、あらゆる場所に一斉に反映されます。 ### ステップ 11: 一度公開して、どこでも共有 ホストページのリンクを送るか、サイト、ドキュメント、ヘルプセンターに埋め込みを貼り付けます。今ご覧のページもその一つです。 ![ステップ 11: 一度公開して、どこでも共有](https://media.atriumkit.com/media/demos/d_lXk5OpsKxoUw0fHs/screens/s_C2Gm3TzqkonPyTGz/2.webp?v=2) ### ステップ 12: 閲覧者をリードに変える デモの開始前や最後のステップの直前にメールアドレスを尋ねたり、好きな場所にリードフォームを追加したりできます。 ![ステップ 12: 閲覧者をリードに変える](https://media.atriumkit.com/media/demos/d_lXk5OpsKxoUw0fHs/screens/s_C2Gm3TzqkonPyTGz/2.webp?v=2) ### ステップ 13: 見込み客ごとのリンクを作成 パーソナライズリンクで見込み客一人ひとりに名前で挨拶できます。誰がリンクを開き、どこまで見たかも確認できます。 ![ステップ 13: 見込み客ごとのリンクを作成](https://media.atriumkit.com/media/demos/d_lXk5OpsKxoUw0fHs/screens/s_YNlnNXOY6uxslmOX/3.webp?v=3) ### ステップ 14: 文章のガイドとしても使える すべてのデモはスクリーンショット付きのステップごとの記事にもなります。NotionやDocsに貼り付けるか、MarkdownやPDFでエクスポートできます。 ![ステップ 14: 文章のガイドとしても使える](https://media.atriumkit.com/media/demos/d_lXk5OpsKxoUw0fHs/screens/s_R0PVmCfUgnjYfqDd/2.webp?v=2) ## その後の動きを把握 ステップ別・閲覧者別に、閲覧数、離脱、選択、リードを確認できます。 ### ステップ 15: 離脱ポイントを特定 閲覧数、完了率、視聴時間に加え、どのステップで離脱したかが一目でわかるファネルを確認できます。 ![ステップ 15: 離脱ポイントを特定](https://media.atriumkit.com/media/demos/d_lXk5OpsKxoUw0fHs/frames/cap_Jq0ywRuAuIRUcemj/f_9sja2oyf1s58.webp?v=1) ### ステップ 16: 背景情報とともにリードを確認 リードの情報、視聴したデモ、どこまで進んだかを確認できます。ここでも個人情報はぼかされています。 ![ステップ 16: 背景情報とともにリードを確認](https://media.atriumkit.com/media/demos/d_lXk5OpsKxoUw0fHs/frames/cap_Jq0ywRuAuIRUcemj/f_bxmh8lov1bpa.webp?v=1) ### ステップ 17: リード情報を使い慣れたツールへ 新しいリードとその後のアクションを、Slack、Teams、HubSpot、Salesforce、Zapier、または任意のWebhookに送信できます。 ![ステップ 17: リード情報を使い慣れたツールへ](https://media.atriumkit.com/media/demos/d_lXk5OpsKxoUw0fHs/frames/cap_Jq0ywRuAuIRUcemj/f_wwcvt544wbey.webp?v=1) ### ステップ 18: デモセンターを作成 セクション、リンク、リード獲得機能を備えた1つのページにデモをまとめられます。リンクを送信するか、埋め込んで共有できます。 ![ステップ 18: デモセンターを作成](https://media.atriumkit.com/media/demos/d_lXk5OpsKxoUw0fHs/frames/cap_Jq0ywRuAuIRUcemj/f_kzv3w91wig09.webp?v=1) ### ステップ 19: 自動でブランドに統一 すべてのツールチップとページにロゴ、色、フォント、ボタンを適用できます。ウェブサイトから直接インポートできます。 ![ステップ 19: 自動でブランドに統一](https://media.atriumkit.com/media/demos/d_lXk5OpsKxoUw0fHs/frames/cap_Jq0ywRuAuIRUcemj/f_ifx2sqi6daaa.webp?v=1) ### ステップ 20: 自動で作成されるナレッジベース 公開したデモは検索可能なチーム向けガイドになり、製品メモやファイルと並べて確認できます。 ![ステップ 20: 自動で作成されるナレッジベース](https://media.atriumkit.com/media/demos/d_lXk5OpsKxoUw0fHs/frames/cap_Jq0ywRuAuIRUcemj/f_dbcf3u9ug6vb.webp?v=1) ### ステップ 21: AIアシスタントを連携 Claude、ChatGPT、またはCursorを接続して、デモの書き換え、翻訳、公開や、今週の数値の取得を依頼できます。 ![ステップ 21: AIアシスタントを連携](https://media.atriumkit.com/media/demos/d_lXk5OpsKxoUw0fHs/frames/cap_Jq0ywRuAuIRUcemj/f_4ucj7dafus0l.webp?v=1) #### 次はあなたの番 Chrome拡張機能をインストールして、数分で最初のデモを録画しましょう。公開デモ3件までは無料です。 - **無料で始める** → - **お問い合わせ** → このパスはここで終わりです。 [インタラクティブデモで試す](https://www.atriumkit.com/d/xsdf6e/atriumkit-in-two-minutes)