スタートアップガイド
■事前準備 ログイン・拡張機能の準備 * 管理画面へのログイン：https://product.plainer.co.jp/login [https://product.plainer.co.jp/login] * 拡張機能のインストール：https://chromewebstore.google.com/detail/plainer-product-capture-t/jkjeollijobknefeljjlminekfackjfg [https://chromewebstore.google.com/detail/plainer-product-capture-t/jkjeollijobknefeljjlminekfackjfg] アカウント追加方法 ログイン後、画面左メニューの「企業設定」→「アカウント管理」から、追加することができます 追加したタイミングで、該当のメールアドレスに初期登録の案内メールが送信されます ■基本機能 デモコンテンツの作成・配布 1. キャプチャ撮影 HTMLキャプチャ * GoogleChromeの拡張機能からブラウザ画面を撮影することができます * これにより、撮影対象の画面を再現することができ、操作感やクリック感をコンテンツへ反映することができます * <デモ> * キャプチャ撮影：https://product.plainer.co.jp/c/plainer-demo/fa60456e-47c6-4b22-9a1f-20721454f798/e8a919e7-43c6-420f-b722-48a8efe20821 [https://product.plainer.co.jp/c/plainer-demo/fa60456e-47c6-4b22-9a1f-20721454f798/e8a919e7-43c6-420f-b722-48a8efe20821] * <注意点> * ※4Kモニターなど大きめの画面ではなく、閲覧者様がご覧になる一般的な解像度(横1440×縦900等)での撮影がオススメです。 * 撮影対象の画面の仕様によって、大きすぎる画面で撮影したコンテンツを、小さい画面で閲覧する場合に、一部デザインが崩れる場合がございます * Window Resizer [https://chromewebstore.google.com/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh]などをご利用いただくと便利です * ※一度の撮影上限が20ページのため、長いデモを撮影する際は一度保存ください。後で統合が可能です。 スクリーンショットアップロード * お手元の画像ファイルをベースに、デモを作成することができます。 * これにより、スマホアプリやデスクトップアプリなどのデモコンテンツ作成が可能です * <デモ> * スクリーンショットデモ：https://product.plainer.co.jp/c/plainer-demo/bc608e58-0518-4f80-8b34-91a6d05dade9 [https://product.plainer.co.jp/c/plainer-demo/bc608e58-0518-4f80-8b34-91a6d05dade9] * <注意点> * 後述の2のテキストや画像の編集、要素の削除/複製はできかねてしまいます * アップロードする画像ファイルが複数枚の場合、それぞれの大きさがバラバラだとキレイに作成することができません 2. デモコンテンツ編集 * 撮影したキャプチャを編集し、デモコンテンツにすることができます * <デモ> * ガイドの作成：https://product.plainer.co.jp/c/plainer-demo/2efd4bbf-2ed0-4ba8-a1f6-15a34f585a62/635f9471-6144-4043-b045-44ee04847455 [https://product.plainer.co.jp/c/plainer-demo/2efd4bbf-2ed0-4ba8-a1f6-15a34f585a62/635f9471-6144-4043-b045-44ee04847455] * テキストや画像の編集：https://product.plainer.co.jp/c/plainer-demo/0aff9c8f-b06f-47e4-9e85-9926408e496a/dcb0c5d8-2cda-43bf-aa5d-8127ea631a9d [https://product.plainer.co.jp/c/plainer-demo/0aff9c8f-b06f-47e4-9e85-9926408e496a/dcb0c5d8-2cda-43bf-aa5d-8127ea631a9d] * 要素の削除：https://knowledge.plainer.co.jp/article/delete-elements [https://knowledge.plainer.co.jp/article/delete-elements] * 要素の複製：https://knowledge.plainer.co.jp/article/copy-elements [https://knowledge.plainer.co.jp/article/copy-elements] 3. 配布方法 * お客様へURLを直接お送りすることで、デモのご案内が可能です * 例：商談後のお客様へ送付する、問い合わせ時のサポートコンテンツとして送付する * Webサイトへの設置（方法は以下2種） * ①CTA等にデモを埋め込み、別ウィンドウで表示させる * →デモのURLを設定するのみで可能です * ②Webサイトへiframeでデモを埋め込む * →コンテンツ一覧で生成した埋め込みコードをWebサイトへ追加することで可能です * 埋め込みコードは「︙」メニューから作成可能です * ※その他（応用編） * CTA等にデモを埋め込み、ポップアップで表示させる * →外部サービスを合わせて、HTML/CSSを用い、埋め込みコードをCTAへ設定することで可能です * 参考リンク：https://knowledge.plainer.co.jp/article/faq-lightbox-iframe [https://knowledge.plainer.co.jp/article/faq-lightbox-iframe] ※HTML/CSS/JavaScriptの知識が必要です。個別のサポートは致しかねます 4. デモコンテンツの再編集 追加での修正や細かい設定には以下の機能をご利用ください * ページの追加：https://knowledge.plainer.co.jp/article/feature-add-demo-page [https://knowledge.plainer.co.jp/article/feature-add-demo-page] * ※ページの複製、入れ替えにもご利用いただけます * CTAの設定：https://knowledge.plainer.co.jp/article/content-cta-button [https://knowledge.plainer.co.jp/article/content-cta-button] * 画面幅の固定：https://knowledge.plainer.co.jp/article/fixed-screen-width [https://knowledge.plainer.co.jp/article/fixed-screen-width] * ※画面のレイアウト崩れや調整等にも有効です メディア・シナリオ・アクセスデータのご活用 5. メディアのご活用 * デモコンテンツの中やシナリオ機能にて、動画・PDF・MAフォーム・カレンダー調整リンクを表示させることが可能です * <デモ> * 登録・活用：https://product.plainer.co.jp/c/plainer-demo/815af600-fd81-4751-9991-65e8bd585cef/b773f082-ef43-4bee-8d6f-a42f0813dc8b [https://product.plainer.co.jp/c/plainer-demo/815af600-fd81-4751-9991-65e8bd585cef/b773f082-ef43-4bee-8d6f-a42f0813dc8b] * <ご活用例> * デモの途中で、動きのある部分を動画で見せたい * デモの途中・終了時に、資料請求や商談のCTAを表示させたい * デモの流れで作成できるレポート等をPDFで見せたい * <注意点> * ※動画はYouTubeやVimeo等の外部プラットフォームにアップされているもののURLを追加頂く形式となります。 * ※Google Drive上の動画を直接埋め込むことはできかねます * ※以下6のシナリオにメディアを追加する場合、「コンテンツ生成」をクリックしていただく必要がございます * <その他> * 読了率に応じてポップアップガイドを出すトリガーガイドの機能もございます * https://knowledge.plainer.co.jp/article/trigger-guide [https://knowledge.plainer.co.jp/article/trigger-guide] 6. シナリオ作成 * 上記で作成/登録した、デモ・動画・PDF・MAフォーム等を1ページにまとめることが可能です * <デモ> * 作成：https://product.plainer.co.jp/c/plainer-demo/008716e1-fa06-4396-98c3-fb3de20880c6/ee93a06e-0671-44d0-a873-a60823c26040 [https://product.plainer.co.jp/c/plainer-demo/008716e1-fa06-4396-98c3-fb3de20880c6/ee93a06e-0671-44d0-a873-a60823c26040] * <ご活用例> * 複数のデモをタブ分けして表示させたい * 例）オンボーディング用に複数STEPに分けたデモをご案内したい * 例）複数機能のデモを並列でご案内したい * PDFの資料とデモを組み合わせた訴求を行いたい * 例）プロダクトの活用目的別に、提案資料・デモ・成果事例をパッケージ化し、訴求力の向上させたい 7. アクセスデータの活用 * 「誰が」「どのシナリオ/デモを」「いつ」「何秒」「何ページまで」、見たのかを確認可能です * <デモ> * 分析：https://product.plainer.co.jp/c/plainer-demo/a706a9ea-44c6-49b2-9b16-010393c807e6/5ea246db-19fa-4615-a6a0-9ce564d7bd68 [https://product.plainer.co.jp/c/plainer-demo/a706a9ea-44c6-49b2-9b16-010393c807e6/5ea246db-19fa-4615-a6a0-9ce564d7bd68] * <ご活用例> * デモコンテンツのどのステップでの離脱が多いのかの分析をしたい * デモをよく見ている方に対して、メール送付やCallを行いたい * 顧客の稟申時等に、資料が展開されているのかウォッチしたい * <注意点> * 実名でのアクセスデータを記録するためには、デモ/シナリオのURLの末尾に?pl_uid=email@plainer.co.jpのような形のパラメータの追加が必要です。 * email@plainer.co.jpは閲覧いただく方のメールアドレスを入力してください * 設定方法の詳細は以下をご確認ください - https://knowledge.plainer.co.jp/article/mail-tracking [https://knowledge.plainer.co.jp/article/mail-tracking] 応用編・TIPSなど デモ作成のコツ 訴求方法 * デモでは、文字や口頭に加え、画面のUIや遷移を合わせて価値を訴求することができます。 * そのため、操作のみではなく、価値を説明するような作りが重要です。 * ガイド例）操作の内容「●●を送信します」 → 操作結果+価値「●●が送信されました。これによって、▲▲の効率化が可能です」 * 撮影例）初期設定等を省き、最終的なアウトプット部分にフォーカスして撮影 デモの長さ * マーケティング・セールス等で検討度が低～中程度のお客様向けには、10～15ガイド、長くとも20ガイド以内で作成することをおすすめしております * オンボーディング等でご利用意欲が高いお客様向けには、細かく区切ったデモの方が好ましいと考えております * その際には、分岐機能やシナリオ機能でステップを区切ることもおすすめです PLAINERと他ツールのデータ連携 (Β) iframeで埋め込んだデモの、閲覧開始/終了のデータをGoogleAnalytics4やMAツールに連携することが可能です。 * Google Analytics4：https://knowledge.plainer.co.jp/article/google-analytics-4-data-integration [https://knowledge.plainer.co.jp/article/google-analytics-4-data-integration] * Marketo：https://knowledge.plainer.co.jp/article/marketo-data-integration [https://knowledge.plainer.co.jp/article/marketo-data-integration] * Account Engagement（旧Pardot）：https://knowledge.plainer.co.jp/article/account-engagement-data-integration [https://knowledge.plainer.co.jp/article/account-engagement-data-integration] * Hubspot：https://knowledge.plainer.co.jp/article/hubspot-data-integration [https://knowledge.plainer.co.jp/article/hubspot-data-integration] デザイン変更 (ガイド・文字色やフォント・ボタン色の変更) サポート宛に以下のフォーマットでご連絡をいただければ、お客様のコーポレートカラーやデザインルールに沿った、色コードやフォントを指定し、変更が可能です。 詳しくは以下をご覧ください https://knowledge.plainer.co.jp/article/button-guide-color-change [https://knowledge.plainer.co.jp/article/button-guide-color-change] その他TIPS * ページの追加：https://knowledge.plainer.co.jp/article/feature-add-demo-page [https://knowledge.plainer.co.jp/article/feature-add-demo-page] * ※ページの複製、入れ替えにもご利用いただけます * 分岐ボタンの作成：https://knowledge.plainer.co.jp/article/feature-user-input [https://knowledge.plainer.co.jp/article/feature-user-input] * 閲覧のメール通知：https://knowledge.plainer.co.jp/article/feature-mail-notification [https://knowledge.plainer.co.jp/article/feature-mail-notification] * ※Slack、Chatwork、Teams等への通知にもご活用いただけます * アクセスデータによる閲覧制限：https://knowledge.plainer.co.jp/article/feature-accesscode [https://knowledge.plainer.co.jp/article/feature-accesscode] * CTAの設定：https://knowledge.plainer.co.jp/article/content-cta-button [https://knowledge.plainer.co.jp/article/content-cta-button] * 画面幅の固定：https://knowledge.plainer.co.jp/article/fixed-screen-width [https://knowledge.plainer.co.jp/article/fixed-screen-width] * ※画面のレイアウト崩れや調整等にも有効です