- 左バーから編集したいヒントを選択。
- Onboardingロゴの下にカーソルを移動させ、表示された［歯車ボタン］をクリック。
- 右バーからカスタマイズしたいオプション項目を設定
※ 設定した内容は自動で保存されます。
各ヒントのオプションの設定方法
1.ヒントタイトル
- ヒントの右下の［歯車ボタン］をクリック
- 上から2番目［ヒントタイトル］を選択
- 設定したい名称にタイトルを変更
- 欄外をクリックし、自動保存
※ ヒントタイトルを空で保存した場合、「ヒント1」のようにデフォルトの数字が割り振られます。
2.ヒントを表示するページのURL
- ヒントの右下の［歯車ボタン ］をクリック
- 表示するURLの部分の［ 前方一到 / 後方一致 / 部分一致 / 完全一到 / カスタム ］から一致方式を選択 ※ 詳細は➡️一致方式の形式についてをご確認ください
- ヒントを表示させたいURLを記入
必須ではありませんが、設定することを推奨しております。 以下の「対象要素のセレクター」で設定したものと同じセレクターを持つページが複数存在する場合、意図しないページにもヒントが表示される恐れがあります。
3. ヒントの表示方法
- 機能名やボタンの意味をツールチップでエンドユーザーにわかりやすく補足・解説したい
- 入力時に注意してほしいポイントを、事前にアナウンスしたい
- 禁止文字や入力ミスなどを、入力内容に応じてその場で即時に通知したい
各表示方法の挙動
アイコンから表示
アイコンにマウスオーバーすると、ヒントを表示します。
対象要素から表示
指定した対象要素（画像ではテキストボックスを指定）をマウスオーバーした際にヒントを表示します。
入力されたテキストから表示
指定した対象要素（画像ではテキストボックスを指定）への入力内容が任意の条件にマッチした際にヒントを表示します。
表示方法の設定方法
- ヒントの右下の［歯車ボタン］をクリック
- ［ヒントの表示方法］から［ アイコン / 対象要素 / 入力されたテキスト ］のいずれかを選択
.png&w=640&q=90)
- ［入力されたテキストから表示］を選択した場合、［ヒントの自動表示条件設定］を設定
- ［条件を作成］をクリック
- ［条件名］を入力
- ［条件］を設定
- ［条件］をクリックして終了
①［入力欄に文字を入力した/入力欄からフォーカスを外した］から選択
②［値を入力］に条件を入力
③ 条件を［含む/含まない］を選択
④ 複数の条件を登録する場合は［＋］をクリック
⑤ 条件の組み合わせは［and / or］で設定
【参考】条件設定の具体例
例）「株式会社」を「(株)」と略してほしくない場合
4.ヒントを開くアクション
この設定は、［ヒントの表示方法］を［アイコンから表示］または［対象要素から表示］に設定した場合に設定できます。 \ こんな時におすすめ！ /
- マウスオーバー：エンドユーザーがすぐにヒントを確認できるようにしたい
- クリック：エンドユーザーがヒントを開きながら他の操作をできるようにしたい
- ヒントの右下の［歯車ボタン］をクリック
- ［ヒントの表示方法］にて［アイコンから表示］または［対象要素から表示］を選択
- ［ヒントを開くアクション］から［マウスオーバー/クリック］のいずれかを選択
※その他の表示方法では、［ヒントを開くアクション］を設定することはできません
5. ドラッグ&ドロップによる吹き出しの移動
\ こんな時におすすめ！ /
- エンドユーザーがヒントを開きながら、他の操作をできるようにしたい
- ヒントの右下の［歯車ボタン］をクリック
- ［ヒントの表示方法］から［アイコンから表示］または［対象要素から表示］を選択
- ［ヒントを開くアクション］にて［クリック］を選択 ※［マウスオーバー］を選択していると、［ドラッグ&ドロップによる吹き出しの移動］を設定することはできません
- ［ドラッグ&ドロップによる吹き出しの移動］を［あり］に変更
※その他の表示方法では、［ヒントを開くアクション］を設定することはできません
6.アイコンの表示位置を調整
- ヒントの右下の［歯車ボタン］をクリック
- ［アイコンの配置調整］部分の［下へ移動］［右に移動］にそれぞれ動かしたいpx数を入力
※マイナスの値を入力するとそれぞれ上、左に移動します
【補足】「アイコンの配置方式を変える」とは？
「アイコンの配置方式」から、ヒントの表示方法を 「テキストの横」または「要素の横」で選ぶことができます（デフォルトは「テキストの横」）
「テキストの横」がデフォルトの設定となっている理由
- 多くの場合ヒントは「タイトル」などテキストの横に配置して追加情報を与える目的で利用されているため
- 要素のサイズはサイトのCSS設定の影響を受けて変化するので、ヒント位置が画面幅によってずれる可能性があるため
7.ヒントの横幅
- ヒントの右下の［歯車ボタン］をクリック
- ［ヒントの横幅］にて［カスタム］を選択
- pxで数値を入力
デフォルトの設定は350pxです。（最小250px、最大900px）
ヒントの各横幅の見え方
- 350px（デフォルト）
- 250px（最小サイズ）
- 900px（最大サイズ）
8.アイコンの横に表示するテキスト
- ヒントの右下の［歯車ボタン］をクリック
- ［アイコンの横に表示するテキスト］欄に文字を入力
利用イメージ
Before（テキストなし）
/w=1080,quality=90,fit=scale-down)
After（テキストあり）
利用シーン
- ページ全体に関するヒントを作成したい時 例：「このページについて」「〜〜とは？」
- ヘルプページや問い合わせ導線の案内をしたい時 例：「ヘルプページはこちら」「お問い合わせはこちら」「よくある質問」
注意事項
- 入力できる文字数は30字までです。
