🔰

施策のサンプルを作成してみましょう

💡
このページの流れに沿って例題通りにツアーが作成できれば 基本的なOnboardingの設定を習得できます！ まずは例題を元にツアーを作成してみましょう！

目次

  1. ツアーとは
  2. 作成いただくツアーのお題説明
  3. 流れに沿ってツアーを作成してみましょう
  4. お題通りにツアーが作成されているかチェックしましょう
  5. よくある質問を見る場合はこちら

１. ツアーとは

💡
ツアーとはエンドユーザーに一連の操作をご案内できる機能です。 画面の説明や、機能の操作説明をエンドユーザーに自走してほしい場合に使用します。

２. 作成いただくツアーのお題説明

💡
Onboardingを活用いただく上で、肝になる設定をこちらのツアーを作っていただく上で習得できます！

３. 流れに沿ったツアーを作成してみましょう

３-１. 新規ツアーを作成する

  1. 管理画面右上の「＋作成」をクリック
  2. 「ツアー」を選択
    3. image
  3. ツアーの「タイトル」を記入

    4. ※ 今回は「ツアーサンプル」と記入してください。

  4. 「プレビューを開始するプロダクトURL」を記入

    5. ※ 今回は「https://manage.onboarding-app.io/」を記入してください。

  5. 「作成」をクリック

下記と同じ画面が表示されていたらOKです！

image

３-２. イントロを編集する

💡
イントロとは、ツアー全体を表示させるメニューのようなものです。
  1. 「ようこそ🎉」をクリックし、「Welcome! 😄」と編集
  2. 「Welcome! 😄」の下に出てくる「＋」をクリック
    3. image
  3. 「テキスト」をクリックし、 「こんにちは！ 　今からツアーを作成してみましょう！」 　と入力

下記と同じ画面が表示されていたらOKです！

image

３-３. カテゴリを作成する

☝
カテゴリとは、複数のゴールが一連の動作である際に、１つの塊で表示させたいときに使う項目のことです。
  1. 「ゴールタイトル」にマウスを被せる
  2. 一番下に表示された「＋」をクリック
    3. image
  3. 「カテゴリ」をクリック
  4. 作成された「名称未設定カテゴリ」をクリック
  5. 枠外をクリックして完了（自動保存されます。）
  6. 1-5を元に次はカテゴリ名を下記内容で２つ新たに作成してみましょう！
‣
3-3-6.設定内容

下記と同じ画面が表示されていたらOKです！

image

３-４. ゴールを作成する

☝
ゴールとは、エンドユーザーに行ってほしいタスク項目のことです。 例）初期設定画面を入力する、個人情報を登録する
  1. 「ゴールタイトル」をクリック
  2. 右に出てくるサイドバー内の「ゴール名」を「公開中の施策を確認する」と編集
  3. 枠外をクリックして完了（自動保存されます。）
  4. ここまで行ったことを活かして下記内容を作成してみましょう！
    5. ‣
    3-4-4.設定内容
  5. 作成した３つのゴールを各下記カテゴリの下に配置されるようにドラッグして移動しましょう！「公開中の施策を確認する」にマウスを被せる、表示された「＋」をクリック
    6. ‣
    3-4-5.設定内容

下記と同じ画面が表示されていたらOKです！

image

３-５. ステップを作成する

  1. 左バーの「イントロ」をクリックし、「公開中の施策を確認する」をクリック
    2. image
  2. 「ツアーを作成しましょう😃」をクリック
    3. image
  3. 「今から公開中の施策の 　確認方法をご案内します。」 　と編集
  4. 「ユーザーに行って欲しい手順や〜〜〜」をクリック
  5. 左のゴミ箱のマークをクリック
  6. 「ステップ１」にマウスを被せ、表示された＋ボタンをクリック
    7. image
  7. 画面中央に表示されたステップにマウスを被せ、表示された＋ボタンをクリック
  8. 「こちらをクリック」と編集
  9. 「ステップ２」にマウスを被せ、表示された＋ボタンをクリック
  10. 画面中央に表示されたステップにマウスを被せ、表示された＋ボタンをクリック
  11. 「公開中の施策がある場合 　以下に表示されます。」 　と編集

下記と同じ画面が表示されていたらOKです！

image

３-６. 要素へのフォーカスを設定する

☝
要素へのフォーカスとは、 ステップを特定の要素にフォーカスした表示に設定することです。
  • 要素へのフォーカス「なし」の場合
    • image
  • 要素へのフォーカス「あり」の場合　（例：「ガイド」にフォーカス）
    • image
  1. Chromeウェブストアで拡張機能をインストール
  2. 先ほどまで作成していたツアーの編集画面に戻る
  3. プレビューボタン(画面右上👁のボタン)をクリック、プレビュー画面が開きます。
  4. ツールバーの拡張機能ボタンからインストールした拡張機能を選択
  5. 画面内施策一覧の下の「アクティブ」を右クリック
  6. 「クリップボードにコピーする」をクリック
    7. image
  7. 3−5で作成した「公開中の施策を確認する」内の「ステップ２」をクリック
  8. ステップにマウスを被せ、右下の「⚙」をクリック
  9. 要素へのフォーカスを「あり」にクリック
  10. 5でコピーしたセレクタを貼り付け 下記で貼り付けされていればOKです！
    11. span:contains(‘アクティブ’)
  11. オプション内のステップの横幅の「デフォルト」をクリックし、「カスタム」をクリック
  12. 500pxを「300px」に編集
  13. https://manage.onboarding-app.io/を開く
  14. 「アクティブ」をクリック
  15. 2-11を繰り返し、次は「施策一覧」全体にフォーカス

下記画像のプレビュー(👁のマーク)をクリックし、サンプルと同じ動作がされればOKです！

image

３-７. ３-５,３-６を元に、他のステップも設定してみましょう

‣
3-7.設定内容(答えになりますので急ぎの場合はこちらを見ながら設定してみてください)

👉ステップの作成でお困りの場合はこちらをクリック

👉要素指定でお困りの場合はこちらをクリック

４. お題通りにツアーが作成されているかチェックしましょう

💡
ここまで来れば、Onboardingの基本操作はマスターも同然です！ 最後にサンプル通りに設定できているかチェックしましょう！

５. よくある質問を見る場合はこちら

Onboarding ヘルプページOnboarding ヘルプページ

🔰Onboarding スタートガイド