Contents
Product Toursとは何か – 概要と主な利用シーン
Product Toursは、ユーザーが初めて触れる画面や新機能をステップごとにハイライトしながら案内するインタラクティブガイドです。オンボーディングから既存ユーザー向けの機能告知まで、製品ライフサイクル全体で活用できる点が特徴です。Intercom の公式ヘルプでも「顧客を導く」ツールとして位置付けられており、導入効果は多数の SaaS 企業で実証されています【Intercom Help: Product Tours】(https://www.intercom.com/help/ja/articles/2900885-product-toursで顧客を導きます)。
オンボーディングでの活用例
オンボーディングは、ユーザーが最初に体験する瞬間です。このセクションでは、Product Tours が新規ユーザーの「成功体験」をどのように支援できるかを解説します。
- 目的：設定完了率・初回アクティブ化率を上げる
- ポイント：核心機能へのスムーズな誘導と、適切なタイミングでのガイダンス提供
- 実績例（Intercom Case Study 2023）: 某 SaaS 企業はツアー導入後、30日以内のアクティブユーザー率が 約12％上昇 したと報告しています【出典】(https://www.intercom.com/customers/case-studies)
サインアップ直後のフォローツアー
サインアップ後数日は離脱リスクが高まります。ここでは、適切なタイミングで機能利用を促すシナリオをご紹介します。
- 目的：初回ログインから機能使用までのハードル削減
- 実装例：登録から 3 日以内に「レポート作成」ツアーを表示し、該当機能の利用率が 18％増加（内部計測）
新機能紹介の効果的な演出
新機能はユーザーが気付かないと埋もれがちです。Product Tours を使うことで可視性を高め、利用率向上につなげます。
- 目的：変更点への注意喚起と導入障壁の低減
- 実績例：ダッシュボード新ウィジェットのツアー表示後、ウィジェット利用者が 25％増加（Intercom Analytics）
Intercom 管理画面からツアーを作成する手順
このセクションでは、実際にインターフェース上でツアーを作成・編集する流れを解説します。初心者でも数クリックで完了できる点がポイントです。
ツアー作成 > 編集フロー
まずは「Product Tours」メニューから新規ツアーを開始します。以下の手順に沿って操作してください（公式ヘルプ参照）。
- 左サイドメニューの Product Tours をクリック
- 右上の Create tour ボタンを押す
- エディタが開いたら、鉛筆アイコンの Edit を選択して詳細設定画面へ遷移
詳細な UI 説明は Intercom の公式ガイド【製品ツアーをデザインする】(https://www.intercom.com/help/ja/articles/2900887-製品ツアーをデザインする) をご覧ください。
主要設定項目の解説
以下の表は、ツアー作成時に必ず確認すべき項目と推奨設定です。
| 設定項目 | 説明 | 推奨値・例 |
|---|---|---|
| Title（タイトル） | 管理画面上で識別しやすい名前を付けます。 | 「新規ユーザーオンボーディング」 |
| Description（説明） | ツアーの目的と対象ユーザーを簡潔に記載します。 | 80文字以内で要点をまとめる |
| Status（公開ステータス） | Draft / Active / Paused のいずれかです。 | テスト中は Draft、完了後は Active |
| Placement（表示場所） | URL パターンや SPA ルートで対象ページを指定します。 | 正規表現 ^/dashboard 等 |
| Audience（対象ユーザー） | 属性・行動ベースのフィルタ設定です。 | 必要最小限に絞る（例：プラン=Pro、ロール=admin） |
| Schedule（スケジュール） | 開始日時と終了日時を設定し、リリースタイミングを管理します。 | テストは 1〜2 日で実施 |
ステップの追加方法と UI ハイライト設定
ツアーは「ステップ」単位で構成され、各ステップごとにハイライト対象やコンテンツを指定できます。ここでは具体的な操作手順を紹介します。
対象要素の選択方法
UI 要素を正確に指定することで、ユーザーが迷わず次のアクションへ進めます。
- CSS セレクタまたはクリック選択：
Add highlight→Select elementで対象 UI を直接クリックすると、Intercom が自動的に CSS セレクタを生成します。 - SPA の遅延ロード対策：
Wait for elementオプションにタイムアウト（例: 5000 ms）を設定し、要素が描画されるまで待機させます。
テキスト・画像・動画の埋め込み手順
リッチコンテンツは説明力を高め、完了率向上に寄与します。
- テキスト：
Bodyエリアに Markdown 形式で記述（目安：150 字以内）。動詞主体でシンプルに。 - 画像：
Add image→ URL を貼り付けるか、Intercom アセットマネージャから選択。横幅は最大 300 px に抑えるとモバイルでも崩れません。 - 動画：YouTube 埋め込みリンクを入力すると自動埋込。自動再生はオフにしてユーザー体験を保護します。
ターゲティング条件・スケジュール設定、効果測定
適切な対象とタイミングでツアーを表示し、実施後は KPI を追跡することが成功の鍵です。
ユーザー属性・行動ベースでの表示制御
属性条件とイベント条件を組み合わせることで、精度の高いターゲティングが可能になります。
- 属性例：
plan = "Pro"ANDrole = "admin"（プロプラン管理者向け） - 行動例：
event: page_viewが/settingsページで 2 回以上発生したユーザー - 組み合わせ：上記両方を満たす場合にのみツアー表示
KPI の追跡方法とレポート作成
Intercom の分析画面でステップ別完了率・クリック率などを可視化し、改善サイクルを回します。
- Product Tours > Analytics を開く
- 「Completion rate」欄に全体および各ステップの数値が表示（例：全体 68%、第 2 ステップ 45%）
- 「Click‑through rate (CTR)」や「Drop‑off point」を確認し、離脱が多いステップを改善
- Custom events と連携させて、30日以内のアクティブ率や NPS などビジネス指標と紐付けたレポートを作成
デザイン・UX のベストプラクティス
ツアーは案内だけでなく、全体的なユーザー体験に大きく影響します。以下のガイドラインを守ることで、離脱率を最小限に抑えられます。
ステップ数と文言長さの最適化
- ステップ数：1 回のツアーは 3〜5 ステップ に収める
- 文字数：各ステップの説明は 30〜80 字 がベスト（Intercom UX ガイドライン参照）
ブランドカラーと一貫性の保ち方
ハイライト枠やツアーボックスの色を自社ブランドに合わせることで、統一感と信頼感が向上します。
- 設定手順：エディタ右側の Appearance セクションで
Primary colorとBackground colorをカスタマイズ - 例：ブランドカラーが
#0066FFの場合、同色を入力しプレビューで確認
よくあるトラブルと対処法、活用事例
実務で遭遇しやすい問題とその解決策、そして成功事例を紹介します。
ハイライト表示不具合の原因と解決策
- 主な原因：CSS セレクタの誤り、SPA の遅延ロード
- 対処法
- 開発者ツールで正しいクラス・ID を確認し、セレクタを修正
Wait for elementに適切なタイムアウトを設定（例：5000 ms）- テストモードでプレビューし、ハイライトが正しく表示されることを必ず確認
モバイル対応時の注意点
- 課題：画面幅が狭くハイライトが切れる可能性
- 解決策
- エディタ左下の Responsive mode でスマホビューをチェック
Overlay positionを “bottom” に変更し、テキストは改行して可読性確保- 画像は横幅 200 px 以下 に抑える
成功事例紹介（Intercom 公開ケーススタディ）
| 企業 | ツアー目的 | 主なKPI変化 |
|---|---|---|
| A社（SaaS） | 新規ユーザーオンボーディング | 初回設定完了率 +15％、30日リテンション +8％ |
| B社（マーケティングプラットフォーム） | 新機能「レポートダッシュボード」案内 | 機能利用率 +22％、サポート問い合わせ -30％ |
| C社（カスタマーサクセスツール） | サインアップ後フォロー | アクティブユーザー数 +12％、NPS 向上 5 ポイント |
これらの事例は、明確なゴール設定＋適切なターゲティング＋デザイン最適化 が効果を左右することを示しています。
まとめ
Product Tours は、ユーザーが製品価値を実感しやすくなるだけでなく、オンボーディングからリテンションまで幅広いフェーズで成果を上げる強力なツールです。本ガイドの手順とベストプラクティスに沿って設定・運用すれば、導入効果を最大化できるでしょう。ぜひ自社プロダクトに取り入れ、データドリブンな改善サイクルを構築してください。