デモ作成のベストプラクティス・Tips集
概要
- 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などのイメージを視覚的に伝えることが可能です。
.png)
ガイドに外部リンクを追加
冗長になりがちな説明は、ヘルプページや外部サイトへのリンクで簡潔に。
（例: 具体的な入力内容はこちら ※こちらの箇所がヘルプページ等のリンク）
gifファイルの利用
ドラッグ操作など動きを伝える場面では、gif形式が効果的です。
- Mac：PicGIF
- Windows：ScreenToGif
「次へ進む」代わりにボタンをクリック
ガイド内で「要素をクリックして進む」を設定可能。
ユーザーの迷いを防ぐために、ハイライトや文中の明示が有効です。
ガイドの付与位置と調整
- 広すぎる要素にガイドを付けると見切れの恐れがあります
- 「高度な編集」メニューでガイドやハイライト位置を微調整可能です
色やデザインの調整
環境ごとに、ボタンやガイドの色を設定可能です。
編集できない箇所の調整
ポップアップ裏に隠れたテキストなども、以下ドキュメントを参考に編集可能です。
DevToolsで該当HTML要素を削除することで、編集可能になります。