ガイドごとの使い方の例

ガイド名	ガイドの種別	種別の説明	解決できるエンドユーザーの困りごと	用途の例	備考
ヒント	アイコン型	「？」「お知らせ」「操作方法」「よくある質問」など、エンドユーザーが目でアイコンを確認することが出来、当該ヒントアイコンをマウスオーバー/クリックすると吹き出しを表示することができる	・プロダクト内に分かりづらい用語が存在している・重要なお知らせをプロダクト内で把握できない・新機能の存在に気付けない・注意事項がある場合に分からない	・？アイコンでエンドユーザーが疑問が発生しそうな用語の定義や使い方の説明する・お知らせアイコンでエンドユーザーに届けるべきお知らせを伝える・Newアイコンで新機能であることを明示する・三角に！の⚠️マークでエンドユーザーに注意が必要である旨＋注意内容を知らせる	【参考例】 💡アイコン型ヒントの例
ヒント	対象要素型	対象要素のセレクターで指定した要素にマウスオーバーすると吹き出しを表示することができる	・入力する際に電話番号の「-」が不要なことに気付けない・画面上にあるボタン要素をクリックすることでどういったことが起きるか不安だから押せない	・入力の際の注意事項を知らせる　└電話番号の「-」不要、全角カタカナではなく、半角カタカナ入力であるなど・次に何が起こるボタンなのか？を明示する	【参考例】 💡対象要素型ヒントの例
ポップアップ	チュートリアル型	特定ページにアクセスしたユーザーなどに、当該ページの使い方を説明することができる	・初めてページにアクセスしたけど何からすればいいのかわからない	・特定ページのウェルカムツアー・操作方法のレクチャー	【参考例】 💡チュートリアル型ポップアップ
ポップアップ	広告表示型	セミナーのお知らせ、新機能リリース、活用ノウハウなど、エンドユーザーに届けたい広告を表示することができる	・新機能の存在に気付けない・活用ノウハウが知りたいけどどこにあるか分からない	・新機能リリース・セミナー告知・活用ノウハウの提供	【参考例】 💡広告型ポップアップの例
ツアー	-	イントロと呼ばれるメニューリストの中にチュートリアルを並べ、設定の流れや具体の設定方法などを案内することができる	・初期設定の流れや方法が分からない・今自分はどこの設定でつまずいているのか分からない	・初期設定としてやることが分からないエンドユーザーにツアーを見せることでやるべきことを案内する・目的別の機能活用ノウハウを案内する	【参考例】 💡ツアーの参考例（イントロ）【エンドユーザーがツアーを開始するまでの流れ】 ①〜③の手順でツアーが開始される ①「利用ガイド」のランチャーボタンをクリックする→②チュートリアルメニュー（イントロ）を表示させる→③エンドユーザーがメニュー内のチュートリアルをクリックする【注意】ツアーは1ユーザーに表示されるツアーは1つだけです。表示されたツアーは全ページで同じものが表示されます。例えば、Onboardingのレポートページはレポート用ツアー、カスタムイベントのページではカスタムイベント用ツアーなどの出し分けを行いたい場合、今エンドユーザーがどのページにいるのか？というパラメータの実装が必要です。
ヒント×ポップアップ	特定ページ用のツアー型	ヒント内に埋め込んだボタン（ローコード実装）をクリックすると、チュートリアル型のポップアップが立ち上がるようにする	・このページの使い方を知りたいけどどうすればいいか分からない	・特定ページの設定方法のツアー	【参考例】 💡ヒント×ポップアップ_特定ページ用のツアー型【おすすめ】ヒントはアイコン型ヒントにし、「クリックで表示」と「ドラッグアンドドロップをあり」にすることがおすすめです。 →「マウスオーバーで表示」の場合、マウスが外れるとボタンが押せなくなったりして、エンドユーザーがポップアップを起動する操作が簡単でなくなるためです。

💡アイコン型ヒントの例 💡対象要素型ヒントの例 💡チュートリアル型ポップアップ 💡広告型ポップアップの例 💡ツアーの参考例（イントロ）💡ヒント×ポップアップ_特定ページ用のツアー型