■概要 PLAINERのガイドには、「次へ進む」というボタンが表示されます。 このボタンが表示されない場合は、以下の設定をご確認ください。 ■確認点 1.当該ガイドの次に、別のガイドかページが存在するか確認する ガイドを設定した際に、ガイドが設定されているページが１番最後のページあり、かつ次のガイドが存在しない場合には、「次へ進む」ボタンが表示されません。 2.ボタンタイプが「要素をクリックして進む」になっている このボタンタイプだと、「次へ進む」ボタンではなく、ガイドが付いている要素（＝実画面上のボタンやメニューなど）をクリックすることで、次へ進む挙動となります。 そのため「次へ進む」ボタンが非表示になります。
概要 PLAINERにおける「シナリオ」「ガイド」「コンテンツ」の各用語は、以下のように説明されています。 各用語について シナリオ 「シナリオ」は、PLAINERの機能の一つで、関連するデモコンテンツ、PDF資料、動画、Webページといった様々な形式のコンテンツをまとめて閲覧できるページをノーコードで生成するための機能です。これにより、顧客に対してより一貫したコンテンツ体験を提供することが可能になります。 主な特徴と機能: * 統合された閲覧ページ: 左側にコンテンツ一覧が表示され、ユーザーは興味のあるコンテンツを切り替えながら閲覧できます。 * 表示可能なコンテンツの種類: * PLAINERで作成されたデモコンテンツ。 * PLAINERに追加されたメディア（YouTube, Vimeoなどの外部動画、PDFファイル（15MB以内）、Webページ（外部サイトへの埋め込みが禁止されていないもの））。メディアをシナリオに追加するには、メディア一覧ページで「コンテンツ生成」をクリックし、公開状態にする必要があります。 * 主な活用シーン: * デモコンテンツと製品資料を組み合わせた資料請求などのマーケティングコンテンツ作成。 * 製品資料、デモコンテンツ、成果事例資料、紹介動画などをまとめた社内営業担当やアライアンス先向けのプレゼン・送付資料作成。 * 既存顧客向けのオンボーディングコンテンツ作成。 ガイド 「ガイド」は、PLAINERで作成するデモコンテンツ内で、特定の要素を説明したり、ユーザーに操作を促したりするために用いられる吹き出し形式の説明文や指示のことです。閲覧者の理解促進に役立ちます。 主な特徴と機能: * 説明の補助: ガイドには画像を挿入することが可能で、静止画だけでなくGIF画像も挿入できるため、ドラッグ操作など動きを伝える場面で効果的に活用できます。 * ハイライト機能: ガイドを作成する際に、ガイドを付与した要素にハイライト（四角枠の点滅や影）を入れることができます。これにより、選択されている箇所が分かりやすくなります。ハイライトのサイズや位置は調整可能です。 * 位置調整: ガイド（吹き出し）の表示箇所は、細かく調整することができます。画面上でクリックできない箇所にガイドを付けたい場合でも、「選択中の要素を変更」機能で広範囲な要素を選択したり、「ガイド位置調整」機能で位置を微調整したりすることが可能です。 コンテンツ 「コンテンツ」は、PLAINER上で作成・管理されるデモや、PLAINERの機能を通じてユーザーに提供されるコンテンツ全般（※PDFや動画など）を指す広範な用語です。この中の「デモコンテンツ」が、PLAINERが独自で作成することができるコンテンツです。 主な特徴と管理: * 作成と編集: * PLAINERはGoogle Chromeの拡張機能を使用してWebアプリケーションの画面をスクリーンショットで撮影し、ガイド化するツールです。 * 撮影した画面のテキストを編集する機能があります。一部編集できないテキストについては、HTML編集機能を使用したり、サポートに問い合わせることも可能です. * デモコンテンツ内の画像を差し替えたり削除したりできます. * 画面の要素を複製したり削除したりすることも可能です. * キャプチャしたページの順番を入れ替えることもできます. * 複数のプロダクトデモを統合したり、プロダクトの一部変更があった場合に特定のページだけ差し替えたり、不足部分を追加したりすることが可能です.
PLAINERには、編集内容を保存するためのボタンが2種類あります。 【下書き保存】と【保存して公開】の2つで、それぞれ反映される範囲が異なります。 目的に応じて使い分けましょう。 -------------------------------------------------------------------------------- 下書き保存 「下書き保存」をクリックすると、現在の編集内容がプレビュー画面に反映されます。 ※画像内赤枠部分 こちらはPLAINERのアカウントをお持ちの方のみご覧いただける環境です。 公開前に、デモページや画面の見た目を確認したいときに便利です。 ※この時点では、本番サイトには変更は反映されず画像内青枠部分【プレビュー】より閲覧、PLAINERアカウントをお持ちの社内のメンバーに共有が可能です （また弊社に修正やバグ依頼をいただく際もこちらのURLを添付していただけますと幸いです） -------------------------------------------------------------------------------- 保存して公開 「保存して公開」をクリックすると、これまでに編集・作成した内容が本番用のURLに反映されます。 ※画像内赤枠部分 こちらはPLAINERのコンテンツURLをご存知のすべての方がご覧いただける環境です。 すでにウェブサイト等に公開中の場合は、ウェブサイト上でのプレビューも即座に更新されますのでご注意ください。 公開中用URLは、コンテンツ一覧の対象コンテンツ右下の3点リーダー（※画像内赤枠部分 ）より、公開中URLコピー（※画像内青枠部分 ）を選択いただくことで取得が可能です！ --------------------------------------------------------------------------------
PLAINERのポップアップガイドでは、複数のボタンを設置できます。 通常、すべてのボタンは同じ色で表示されますが、ボタンごとに異なる色を設定したいというケースもあるかと思います。 例：特定のボタンだけ色を変える たとえば、以下のように色分けしたい場合： 「デモツアーを開始する」：ブルー（デフォルトカラー）のまま 「詳細機能を見る」：オレンジに変更 この場合、以下のCSSをポップアップガイドの本文に入力することで対応可能です。 <style>.plainer-popup-link:nth-of-type(2){background-color: #f18800!important; font-size: 16px; color: #FFFFFF!important;}.plainer-popup-link:hover{background-color:#f18800!important;}</style> この設定を追加することで、2番目のボタンのみ色が変更されます。 各項目の補足 ▪️ボタンの位置を変更したい場合 以下の部分の数字を変更してください。 .plainer-popup-link:nth-of-type**(2)** 「(2)」を「(1)」「(3)」などに変更することで、変更対象のボタンの位置を調整できます。 ▪️ボタンの色を変更したい場合 以下のコード内の色コード（#f18800）を変更することで、自由に色を設定できます。 background-color:** #f18800** ※カラーコードは、Webカラーコード（例：#FF0000 は赤）をご利用ください。 ▪️注意点 この方法は「ボタンの表示順」に基づいて色を設定しています。 そのため、ボタンの順番や数が変わると、適用される色も変わってしまう点にご注意ください。 ボタンごとに色を分けることで、ユーザーの視認性を高めたり、操作をわかりやすくしたりすることができます。 設定方法に不明点がある場合は、担当カスタマーサクセスまでお気軽にご相談ください。
桜の季節も終わり、新緑が心地よい季節となりました🌿 2025年5月の主なPLAINERプロダクトアップデートをお知らせします。 フィードバックいただいた皆さま、ありがとうございました！ 2025年5月の主なアップデート一覧 * テキスト検索機能 * 一括アーカイブ機能 * 閲覧期限機能 🔍️ テキスト検索機能 🔍️ -------------------------------------------------------------------------------- * コンテンツ一覧からテキスト検索できるようになりました * 大量のコンテンツから特定のコンテンツを素早く絞り込みたい場合などにご活用ください 🗑️ 一括アーカイブ機能 🗑️ -------------------------------------------------------------------------------- * コンテンツ一覧から不要なコンテンツを一括でアーカイブできるようになりました * 古いコンテンツを整理して、作業環境をすっきり保ちたい場合などにご活用ください ⏳ 閲覧期限機能 ⏳ -------------------------------------------------------------------------------- * コンテンツに閲覧期限を設定できるようになりました * 見積もりを含む場合など、配布したコンテンツに期限を設けたい場合などにご活用ください ✨これまで上手くキャプチャできなかった箇所の軽微な改善✨ -------------------------------------------------------------------------------- * これまでキャプチャ結果が崩れていたり失敗していたりした要素について継続的に改善を行っております 今後も機能を拡充し、より良いサービスにして参ります。 引き続き、PLAINERのご活用をよろしくお願いいたします。
デモツアーを開始する→ [https://product.plainer.co.jp/c/plainer-demo/13ab5e00-d50c-4ed4-a753-9afb1cd0d602]
概要 PLAINERで作成したバルーンガイドの余白の幅を変更することが可能です 設定方法 1. ガイドテキスト欄に<p style="padding:0px">テキスト</p>の形式でCSSを充てていただく 2. 0pxの箇所を希望の余白の幅に応じて調整していただく 補足 paddingでは以下のように上下左右それぞれ別々に余白を指定可能です。 * padding: 2px; … ［上下左右］ を指定 * padding: 2px 4px; … ［上下］ と ［左右］ を指定 * padding: 2px 4px 6px; … ［上］ と ［左右］ と ［下］ を指定 * padding: 2px 4px 6px 8px; … ［上］ と ［右］ と ［下］ と ［左］ を指定 動画
概要 Google Analytics 4 へ連携したPLAINERのデモの閲覧データ [https://knowledge.plainer.co.jp/article/google-analytics-4-data-integration]を用いて、PLAINERデモの成果寄与度を分析することが可能です （※もしくは、PLAINERのデモへの外部リンクのクリック有無でセグメントを分けることでも、実現可能です。） 分析イメージ デモ
概要 PLAINERで作成したデモコンテンツの閲覧期限を、1分単位で設定することが可能です。 手順 * コンテンツ一覧画面で、閲覧期限を設定したいコンテンツより「︙」>「閲覧期限設定」をクリック * 閲覧期限としたい日時を選択or入力する * 保存をクリック ユースケース * 無料トライアルのように期間限定でデモコンテンツを提供したい * 競業企業へのデモコンテンツの流出リスクを軽減させたい デモ 補足 * 閲覧期限が切れたコンテンツへアクセスすると、閲覧期限が切れていることが明示されているエラー画面となります * アクセスコード [https://knowledge.plainer.co.jp/article/feature-accesscode]が設定されているコンテンツが閲覧期限切れになった場合、アクセスコードの入力は求められずに、そのままエラー画面へ遷移します
概要 PLAINERで撮影したページ（画面）を入れ替えることが可能です。 手順 * 入れ替えたいページの画面左側のページの6点リーダーをクリックしながらドラック&ドロップする * 入れ替えたい場所でページを離す
概要 PLAINERでガイドを作成した際に、ガイドを付与した要素へハイライトを入れることができます。 これによって、選択されている箇所がわかりやすくなり、閲覧者様の理解促進にも役立ちます。 各設定のイメージは以下にてご確認ください。 設定のイメージ
全画面にgifを設定し、デモを作成する手順は以下となります！ 1. どの画面でも良いので、PLAINERで画面をキャプチャ 2. 保存後に、画面のいずれかをクリック 3. 画面右側のメニューの「高度な編集」>「選択中の要素を変更」を何度かクリックする （※ホバー時に「これより上位の要素がありません」と表示されたらOK） 4. 画面右側のメニューの「高度な編集」>「画像で置き換え(β)」をクリックし、任意のgif画像を設置 5. （より綺麗に画面を作成するために、）画面右上の「︙」>「コンテンツ設定」から任意の値に画面の横幅を固定して、「HTML編集(β)」で画像のwidthを固定した幅を同一の値に変更 6. ガイドを付与 7. 「高度な編集」>「ガイド位置調整」・「ハイライトサイズ・位置調整(β)」でハイライトやガイドの位置を微調整
概要 PLAINERで作成したガイドには、画像を挿入することが可能です。 静止画のみならずgifも挿入可能ですので、ドラッグ操作など動きを伝える場面でご活用ください 実装イメージ 参考 - GIF作成ツール * Mac：PicGIF [https://tcd-theme.com/2020/10/picgif.html] * Windows：ScreenToGif [https://forest.watch.impress.co.jp/library/software/screentogif/]
ガイド内に挿入いただいた画像や動画を少し大きくしたい場合以下２通りの方法がおすすめです！ ◾️挿入先をガイドではなく、ポップアップガイドにする →ポップアップガイドに挿入いただくことで表示が大きくなりますため見やすさが上がります！ また、ポップアップガイド自体のサイズ変更をしていただくことができるため任意のサイズでの表示が可能です ◾️ホバーアクションにて拡大表示させる →テキストガイド内に以下のCSSを書いていただくことで実装可能です <style>.plainer-tippy-guide img {transition: transform 0.3s ease;}.plainer-tippy-guide img:hover { transform:scale(1.5);}</style> ポイント： デモを閲覧される方からはホバーすると拡大できることがわかりにくいため ※画像にカーソルを合わせると拡大されます※ 上記のような注意書きを入れることをおすすめいたします！ また、※scale(1.2)の数値を変更することで、拡大率を調整できますので必要に応じて変更をしてみてください！
概要 * PLAINERでデモコンテンツを作成する際に、PLAINER社が推奨する効率的な手順や注意点をご案内します。 * 作成者様のサービス理解度などにより、最適な手順は異なる場合がありますので、適宜ご調整いただけますと幸いです。 事前準備 ① plainerのキャプチャ機能（Chrome拡張機能）をインストール * plainerは、Google Chrome上の管理画面をスクリーンショットで撮影し、ガイド化するツールです。 * スクリーンショットは専用機能で行うため、こちら [https://chrome.google.com/webstore/detail/plainer-product-capture-t/jkjeollijobknefeljjlminekfackjfg]のChrome拡張機能をインストールしてください。 ② 幅固定を設定 * 撮影対象画面とデモのプレビュー画面で画面のデザインがズレるのを防ぐため、撮影時の画面のサイズに合わせて幅固定の設定 [https://knowledge.plainer.co.jp/article/fixed-screen-width]を行ってください。 -------------------------------------------------------------------------------- ベストプラクティス 作成手順 以下の手順で作成いただくと、手戻りが少なく、効率的です。 社内でレビューが必要な場合は、各ステップごとに確認を挟むのがおすすめです。 1. デモコンテンツのストーリーを構想する * 頭の中でイメージするだけでなく、ラフなスケッチなどの形にしておくと後工程がスムーズです。 2. 実際の画面を撮影する 3. 単語や箇条書きでラフなガイドを作成する 4. ラフガイドを清書する 5. 不要な画面を削除する 6. テキスト・画像・要素の編集／削除を行う 7. 全体をプレビューし、違和感のある箇所を微調整する 全体の方針 * デモの長さ（目安） * 【マーケティング用途】 15ガイド以内 * 【セールス用途】 20ガイド以内 * 【カスタマーサポート用途】 長くても構いませんが、入力項目の詳細などはヘルプページへのリンクで補完するのがおすすめです。 * ガイド設定の例 用途 ボタンタイプ ハイライト ハイライトの影 備考 特定箇所の説明 標準 ON OFF 長文の場合は太字や色で強調すると効果的 ボタンをクリック 要素クリック ON ON 「〇〇をクリック」を太字＋色で明示すると迷いづらくなります 画面全体の説明 標準 OFF OFF 広い要素はスクロールに影響が出るため、位置調整を行ってください -------------------------------------------------------------------------------- CTAの設置 デモの閲覧中または完了後に、ユーザーを次のアクションに導くCTAを設置可能です。 用途に応じて遷移先を設定してください（マーケティング／セールス／カスタマーサクセスなど）。 方法1：ポップアップガイドに埋め込む 1. 左メニュー「メディア」からURLを登録 2. ポップアップガイドを作成 3. 右メニュー「外部サイト埋め込み」から登録済みメディアを選択 方法2：画面全体に埋め込む 1. 「メディア」からURL登録 2. 編集画面で左側の「＋」ボタンから「メディアのページを追加」を選択 方法3：左下に常時表示 1. 編集画面右上の「︙」をクリック 2. 「CTA設定」から各項目を設定 * 詳細はこちら [https://knowledge.plainer.co.jp/article/content-cta-button] 方法4：別タブで開くボタンを設定 * ポップアップガイドにハイパーリンクを設定 * こちらのドキュメント [https://knowledge.plainer.co.jp/article/faq-external-link-button]に従ってHTML/CSSでボタン化 -------------------------------------------------------------------------------- その他TIPS集 ポップアップガイドに画像を挿入 画像により、GmailやSlackなどのイメージを視覚的に伝えることが可能です。 ガイドに外部リンクを追加 冗長になりがちな説明は、ヘルプページや外部サイトへのリンクで簡潔に。 （例: 具体的な入力内容はこちら ※こちらの箇所がヘルプページ等のリンク） GIFファイルの利用 ドラッグ操作など動きを伝える場面では、gif形式が効果的です。 * Mac：PicGIF [https://tcd-theme.com/2020/10/picgif.html] * Windows：ScreenToGif [https://forest.watch.impress.co.jp/library/software/screentogif/] 「次へ進む」代わりにボタンをクリック ガイド内で「要素をクリックして進む」を設定可能。 ユーザーの迷いを防ぐために、ハイライトや文中の明示が有効です。 ガイドの付与位置と調整 * 広すぎる要素にガイドを付けると見切れの恐れがあります * 「高度な編集」メニューでガイドやハイライト位置を微調整可能です 色やデザインの調整 環境ごとに、ボタンやガイドの色を設定可能です。 * 色設定の詳細はこちら [https://knowledge.plainer.co.jp/article/button-guide-color-change] 編集できない箇所の調整 ポップアップ裏に隠れたテキストなども、以下ドキュメントを参考に編集可能です。 * 詳細はこちら [https://knowledge.plainer.co.jp/article/text-editing-applied] DevToolsで該当HTML要素を削除することで、編集可能になります。
◾️GOOGLEスライドのコンテンツ化 GoogleスライドをHTMLビューで表示していただき、PLAINERの拡張機能を起動することで、崩れずに撮影することが可能です。 GOOGLEスライドのHTMLビューでの表示の仕方 Ctrl+Alt+Shift+P キー（Windows、ChromeOS）または ⌘+option+shift+P キー（Mac）を押すことで、HTMLビューモードになります。 撮影時の注意点 1. Googleスライドのサイズがデフォルトだと小さいので、画面上部のメニューの「ファイル」→「ページ設定」→「カスタム」でサイズ調製可能です * ※推奨値：デフォルト×1.5～2.0倍 2. HTMLビューだと、全てのスライドが1ページにまとまってしまうので、Googleスライド上で1スライドずつファイルを分けていただくことで1ページごとの撮影が可能です
◾️縦横比率で縦が長い状態で撮影 前提として、PLAINERで撮影をしていただく際に、 画面サイズを横1440px×縦900pxなどで撮影していただくことがオススメです。 ※詳しくはこちら [https://knowledge.plainer.co.jp/article/faq-responsive]を参照 Slackのキャプチャを撮影いただく際のポイントとして メッセージ欄のみレスポンシブ設定が反映されずらくなっておりますので、 これに起因する画面の崩れをできるだけ防止するため 横1440px×縦900pxよりも縦幅を長くし、 横1440px×縦1200pxなどで撮影するのがオススメです。 キャプチャを撮影される環境として 4Kモニターなどで撮影をいただけるようでしたら、縦幅をもう少し長くしていただけると画面崩れが起こりずらくなります。 ◾️画面幅の固定機能で横幅を固定 画面の横幅を1440pxに固定していただくと、綺麗なデモコンテンツを作成いただけます。 ※詳しくはこちら [https://knowledge.plainer.co.jp/article/fixed-screen-width]を参照
概要 HTML編集(β)機能を使わずに、UI上から任意の要素を複製できるようになりました 活用シーン * テーブルのデータ件数が少ない場合などに、画面上のみでデータを追加したい * 画面のメニューに新機能が加わったので、再撮影せずに追加したい 手順 * コンテンツ編集画面にて、複製したい要素をクリック * 画面右側をメニューより「要素を複製」をクリック * ※作成しすぎてしまった要素は「要素の削除」機能 [https://knowledge.plainer.co.jp/article/delete-elements]で削除が可能です。
概要 ご利用することがなくなったPLAINERアカウントはお手元で削除が可能です ※権限が「管理者」のユーザーのみ可能です 手順 以下の流れで削除可能です。 * 管理画面へログイン * 企業設定→アカウント管理へアクセス * 削除したいアカウントのメールアドレスをクリック * 「削除する」の赤いボタンをクリック
概要 PLAINERでガイドを作成するときに、画面上でクリックできない箇所にガイドを付けたい場合があるかと思います 以下の機能を用いることで、ガイドの付与箇所を調整可能ですので、お試しください 機能 選択中の要素を変更 この機能を用いることで、選択されている箇所のより広範囲な箇所を選択することが可能です。 ※画面上のソースコードに存在しない範囲は選択できません 例 表形式の画面の場合、セル→行→表→表を含むメニュー→…などのように、広範囲の箇所へ登っていくような挙動となります ※一方でソースコードに存在しない ”列を指定する” ような挙動はできませんので、以下のハイライト位置・サイズ調整をご利用ください ハイライトサイズ・位置調整 ガイドの「要素のハイライト」をONにしている場合、四角枠の点滅や影のサイズを変更することが可能です。 これにより、「選択中の要素を変更」では指定できなかった範囲を指定可能です ガイド位置調整 ガイド（≒吹き出し）の箇所を調整可能です これにより、ガイドの位置を微調整したり、ハイライトサイズ・位置調整に合わせてガイドを動かすことが可能です
