概要
PLAINERでデモコンテンツを作成する際に、PLAINER社が推奨する効率的な手順や注意点をご案内します。
作成者様のサービス理解度などにより、最適な手順は異なる場合がありますので、適宜ご調整いただけますと幸いです。
事前準備
① plainerのキャプチャ機能（Chrome拡張機能）をインストール
plainerは、Google Chrome上の管理画面をスクリーンショットで撮影し、ガイド化するツールです。
スクリーンショットは専用機能で行うため、こちらのChrome拡張機能をインストールしてください。
② 幅固定を設定
撮影対象画面とデモのプレビュー画面で画面のデザインがズレるのを防ぐため、撮影時の画面のサイズに合わせて幅固定の設定を行ってください。
ベストプラクティス
作成手順
以下の手順で作成いただくと、手戻りが少なく、効率的です。
社内でレビューが必要な場合は、各ステップごとに確認を挟むのがおすすめです。
デモコンテンツのストーリーを構想する
頭の中でイメージするだけでなく、ラフなスケッチなどの形にしておくと後工程がスムーズです。
実際の画面を撮影する
単語や箇条書きでラフなガイドを作成する
ラフガイドを清書する
不要な画面を削除する
テキスト・画像・要素の編集／削除を行う
全体をプレビューし、違和感のある箇所を微調整する
全体の方針
デモの長さ（目安）
【マーケティング用途】 15ガイド以内
【セールス用途】 20ガイド以内
【カスタマーサポート用途】 長くても構いませんが、入力項目の詳細などはヘルプページへのリンクで補完するのがおすすめです。
ガイド設定の例
用途 | ボタンタイプ | ハイライト | ハイライトの影 | 備考 |
特定箇所の説明 | 標準 | ON | OFF | 長文の場合は太字や色で強調すると効果的 |
ボタンをクリック | 要素クリック | ON | ON | 「〇〇をクリック」を太字＋色で明示すると迷いづらくなります |
画面全体の説明 | 標準 | OFF | OFF | 広い要素はスクロールに影響が出るため、位置調整を行ってください |
CTAの設置
デモの閲覧中または完了後に、ユーザーを次のアクションに導くCTAを設置可能です。
用途に応じて遷移先を設定してください（マーケティング／セールス／カスタマーサクセスなど）。
方法1：ポップアップガイドに埋め込む
左メニュー「メディア」からURLを登録
ポップアップガイドを作成
右メニュー「外部サイト埋め込み」から登録済みメディアを選択
方法2：画面全体に埋め込む
「メディア」からURL登録
編集画面で左側の「＋」ボタンから「メディアのページを追加」を選択
方法3：左下に常時表示
編集画面右上の「︙」をクリック
「CTA設定」から各項目を設定
方法4：別タブで開くボタンを設定
ポップアップガイドにハイパーリンクを設定
こちらのドキュメントに従ってHTML/CSSでボタン化
その他Tips集
ポップアップガイドに画像を挿入
画像により、GmailやSlackなどのイメージを視覚的に伝えることが可能です。
ガイドに外部リンクを追加
冗長になりがちな説明は、ヘルプページや外部サイトへのリンクで簡潔に。
（例: 具体的な入力内容はこちら ※こちらの箇所がヘルプページ等のリンク）
gifファイルの利用
ドラッグ操作など動きを伝える場面では、gif形式が効果的です。
Mac：PicGIF
Windows：ScreenToGif
「次へ進む」代わりにボタンをクリック
ガイド内で「要素をクリックして進む」を設定可能。
ユーザーの迷いを防ぐために、ハイライトや文中の明示が有効です。
ガイドの付与位置と調整
広すぎる要素にガイドを付けると見切れの恐れがあります
「高度な編集」メニューでガイドやハイライト位置を微調整可能です
色やデザインの調整
環境ごとに、ボタンやガイドの色を設定可能です。
編集できない箇所の調整
ポップアップ裏に隠れたテキストなども、以下ドキュメントを参考に編集可能です。
DevToolsで該当HTML要素を削除することで、編集可能になります。