ヒントに様々なオプションを設定することで、より良いユーザー体験につなげることができます。
- 左バーから編集したいヒントを選択。
- Onboardingロゴの下にカーソルを移動させ、表示された［歯車ボタン］をクリック。
- 右バーからカスタマイズしたいオプション項目を設定
※ 設定した内容は自動で保存されます。
各ヒントのオプションの設定方法
1.ヒントタイトルを設定
ヒントのタイトルを設定できます。
※ここで設定するタイトルは、管理上の名称なため、ユーザーには表示されません。
\ こんな時におすすめ！ /
・ヒントを多く作ってどれが何のヒントか把握しづらい
- ヒントの右下の［歯車ボタン］をクリック
- 上から2番目［ヒントタイトル］を選択
- 設定したい名称にタイトルを変更
- 欄外をクリックし、自動保存
※ ヒントタイトルを空で保存した場合、「ヒント1」のようにデフォルトの数字が割り振られます。
2.ヒントを表示するページのURLを設定
ヒントの表示させるURLを設定できます。
\ こんな時におすすめ！ /
・ヒントを特定のURLにのみ表示させたい
- ヒントの右下の［歯車ボタン ］をクリック
- 表示するURLの部分の［ 前方一到 / 後方一致 / 部分一致 / 完全一到 / カスタム ］から一致方式を選択 ※ 詳細は➡️一致方式の形式についてをご確認ください
- ヒントを表示させたいURLを記入
注意
必須ではありませんが、設定することを推奨しております。 以下の「対象要素のセレクター」で設定したものと同じセレクターを持つページが複数存在する場合、意図しないページにもヒントが表示される恐れがあります。
3. ヒントの表示方法を設定
［ヒントの表示方法］は［?ボタン］と［対象要素］の2種類から選べます。
\ こんな時におすすめ！ /
- ?アイコンで画面を煩雑にすることなく、ヒントを配置したい
- エンドユーザーに必ずヒントを見て欲しい
各表示方法の挙動
?ボタン
?ボタンにマウスオーバーすると、ヒントを表示します。
対象要素
指定した対象要素（画像ではテキストボックスを指定）をマウスオーバーした際にヒントを表示します。
表示方法の設定方法
- ヒントの右下の［歯車ボタン］をクリック
- ［ヒントの表示方法］から［ ?ボタン / 対象要素 ］のいずれかを選択
4.ヒントを開くアクションを設定
［ヒントを開くアクション］は［マウスオーバー］と［クリック］の2種類から選べます。
この設定は、［ヒントの表示方法］を［アイコンから表示］に設定した場合に限り、設定できます。 \ こんな時におすすめ！ /
- マウスオーバー：エンドユーザーがすぐにヒントを確認できるようにしたい
- クリック：エンドユーザーがヒントを開きながら他の操作をできるようにしたい
- ヒントの右下の［歯車ボタン］をクリック
- ［ヒントの表示方法］にて［アイコンから表示］を選択
- ［ヒントを開くアクション］から［マウスオーバー/クリック］のいずれかを選択
※その他の表示方法では、［ヒントを開くアクション］を設定することはできません
5. ドラッグ&ドロップによる吹き出しの移動を設定
ドラッグ&ドロップで吹き出しの位置を移動できるようにする設定ができます。
\ こんな時におすすめ！ /
- エンドユーザーがヒントを開きながら、他の操作をできるようにしたい
- ヒントの右下の［歯車ボタン］をクリック
- ［ヒントの表示方法］から［アイコンから表示］を選択
- ［ヒントを開くアクション］にて［クリック］を選択 ※［マウスオーバー］を選択していると、［ドラッグ&ドロップによる吹き出しの移動］を設定することはできません
- ［ドラッグ&ドロップによる吹き出しの移動］を［あり］に変更
※その他の表示方法では、［ヒントを開くアクション］を設定することはできません
6.？ボタンの表示位置を調整
？ボタンの表示位置の調整ができます。
\ こんな時におすすめ！ /
ヒントが設置したい場所からずれて表示されてしまっている
- ヒントの右下の［歯車ボタン］をクリック
- ［？ボタンの配置調整］部分の［下へ移動］［右に移動］にそれぞれ動かしたいpx数を入力
※マイナスの値を入力するとそれぞれ上、左に移動します
【補足】「？ボタンの配置方式を変える」とは？
「？ボタンの配置方式」から、ヒントの表示方法を 「テキストの横」または「要素の横」で選ぶことができます（デフォルトは「テキストの横」）
「テキストの横」がデフォルトの設定となっている理由
- 多くの場合ヒントは「タイトル」などテキストの横に配置して追加情報を与える目的で利用されているため
- 要素のサイズはサイトのCSS設定の影響を受けて変化するので、ヒント位置が画面幅によってずれる可能性があるため
7.ヒントの横幅を設定
？ボタンをクリックした際に表示される部分の横幅を設定できます。
\ こんな時におすすめ！ /
・意図しない部分で改行されてしまう
・ヒントの余白が大きすぎる
- ヒントの右下の［歯車ボタン］をクリック
- ［ヒントの横幅］にて［カスタム］を選択
- pxで数値を入力
デフォルトの設定は350pxです。（最小250px、最大900px）
ヒントの各横幅の見え方
- 350px（デフォルト）
- 250px（最小サイズ）
- 900px（最大サイズ）
8.？ボタンの横に表示するテキストを設定
？ボタンの横のテキスト表示を設定できます。
こちらを設定することで、？ボタンが何を表しているのかを伝えることができます。
\ こんな時におすすめ！ /
・ヘルプページへの導線案内のヒントを設置したい
・このヒントが何なのか説明したい
- ヒントの右下の［歯車ボタン］をクリック
- ［？ボタンの横に表示するテキスト］欄に文字を入力
利用イメージ
Before（テキストなし）
/w=1080,quality=90,fit=scale-down)
After（テキストあり）
利用シーン
- ページ全体に関するヒントを作成したい時 例：「このページについて」「〜〜とは？」
- ヘルプページや問い合わせ導線の案内をしたい時 例：「ヘルプページはこちら」「お問い合わせはこちら」「よくある質問」
注意事項
- 入力できる文字数は30字までです。
