モバイルのツールチップガイド

最終更新日: 2022年11月10日 10:16

モバイルツールチップとは、アプリ内の特定の要素の横に表示されるガイドのことです。

ツールチップガイドは、新機能のリリース時に特定の機能を強調表示したり、見つけやすくしたりするために使用されます。ツールチップは、ガイド付きウォークスルーまたはオンボーディングフローの一部にすることもできます。マルチステップガイドの作成方法については、こちらの記事を参照してください。

権限

Visual Design Studioを使用するには、Pendoユーザーは以下の2つの権限のいずれかが必要です。

Pendo管理者権限
最低でも以下のうち1つを実施できるPendoユーザー権限
- レイアウトからガイドを作成する
- 公開されたガイドを管理する

ガイドの作成

新しいガイドを作成します。
ツールチップのレイアウトを選択します。「ガイドの詳細ページ」にリダイレクトされ、新しいツールチップガイドが表示されます。

ツールチップの位置

［編集（Edit）］コンテナの［場所（Location）］タブで、要素とツールチップのデフォルトの場所を変更できます。選択された要素でツールチップのための十分なスペースが画面上にない場合、Pendoは自動的にツールチップを再配置します。

視覚的背景

デフォルトでは、ユーザーがクリックできるように、ターゲット要素が背景の上に表示されます。ユーザーがターゲット要素をクリックすると、ツールチップが閉じたり進んだりします。視覚的背景の設定をカスタマイズするには、コンテナ内の［スタイリング（Styling）］にアクセスしてください。

背景を削除する - ユーザーはアプリをクリックして進むことができます。一度クリックすると、ツールチップが閉じてツアーが進みます。

背景の上にターゲット要素を表示（Show Target Element Above Backdrop） - 背景の下にある画面上の要素やその他の領域はクリックできません。これは、特定の機能を強調表示したい場合、またはユーザーがツアーを続行する必要のあるガイド付きウォークスルーを提供する場合に使用できます。このオプションは、ツールチップボタンと一緒に使用する必要があります。

注：作成したツールチップは、Visual Design Studio上では正しい位置に表示されません。アプリ内でのツールチップの実際の位置を確認するには、お使いのデバイスでツールチップをテストしてください。

よくある質問

小さなガイダンスツールチップを作成するにはどうすればいいですか？

ツールチップを使用して特定の機能を強調表示するには、このツールチップでアプリをブロックするかどうかを検討してください。ユーザーが画面をクリックすると消えるノンブロッキングツールチップの場合：

「ツールチップスモールヘルパー（Tooltip small Helper）」など、ボタンのないレイアウトを選択します
ツールチップの設置場所となるページと要素を選択します
[スタイリング（Styling）]タブで、視覚的背景を削除します。これは、ユーザーが画面をクリックするとツールチップが閉じることを意味します。

ボタン付きのツールチップを作るのにおすすめの方法はありますか？

ツールチップで機能を強調表示しつつ、ユーザーには同じページで次のステップに進んでもらいたい場合があります。この場合、［OK］／［了解（Got it）］ボタンのツールチップを追加し、ユーザーが機能をクリックできないようにします。

ボタン付きのレイアウトを選択するか、既存のツールチップにボタンを追加します。
[スタイリング（Styling）]タブで、[背景の上にターゲット要素を表示する（Expose Target Element Above Backdrop）]のチェックを外します。
これにより、ツールチップのボタンをクリックするだけでツアーを進める/終了することができます。

複数のアプリページにまたがるツアーの作成

アプリ内の特定のフローをユーザーに案内するツアーでは、フローを進めるためにユーザーがターゲット要素を時々クリックする必要があります。これを実装するために推奨される方法は次のとおりです。

「ツールチップスモールヘルパー（Tooltip small Helper）」など、ボタンのないレイアウトを選択します
ツールチップの設置場所となるページと要素を選択します
デフォルト設定のままにして背景を含め、背景の上にターゲット要素を表示します

権限