概要

スマートチップは、ページにある特定のアイテムについての追加情報を提供するために、画面上にガイダンスを提供します。 スマートチップは、サイトでユーザーがしばしばミスをするプロセスやフォームに対処する際に特に役立ちます。

スマートチップには、スマートチップとAIスマートチップの2つのタイプがあります： AIスマートチップは、キャプチャポップオーバーのデフォルトタイプになり、対象となるすべてのお客様が利用できます。 標準のスマートチップとは異なり、AIスマートチップはユーザーの入力をリアルタイムで評価し、定義した検証ルールに基づいて提案を生成するため、テキストフィールドに適しています。

このガイドに従って、スマートチップセットとスマートチップを作成します。 AIスマートチップについては、こちらで設定方法をご確認ください。

使用方法

スマートチップセットを作成する

1. エディタから、+アイコンをクリックします
2. スマートチップセットを選択します
   
3. スマートチップセットに名前を付けます
   これはユーザーに表示されないため、意味のある名前を選択してください
4. スマートチップスセットの表示方法を選択します。 2つのオプションがあります：

   1. 特定のページにのみ設定された表示 | 推奨

      1. この方法を使用する理由：

         1. 表示するセットの特定のルールを確認することで、パフォーマンスを最適化します

         2. ほとんどのスマートチップセットは、特定の1ページにのみ表示されます

   2. セットを複数のページに表示する

      1. この方法を使用する理由：スマートチップはすべてのページ（ヘッダー、フッター、ナビゲーションペインなど）に表示されます

5. 特定のページのみで表示セットを選択した場合は、「Create rule to identify page（ページを識別するルールを作成）」をクリックします

   1. スマートチップセットがいつ表示されるかを指定する条件を定義します。

   2. これは一般的に、ページのURLに基づきます。ただし、プラットフォームによって異なるルールが必要となる場合があります。

   3. ［完了］をクリックします。

6. 必要に応じてセグメンテーションタブでセグメントを適用し、スマートチップセットをターゲットオーディエンスのみに表示します

7. メモタブを使用して、同僚とコミュニケーションし、アイテムに関する重要な情報を文書化します

スマートチップの作成

スマートチップセットを作成したら、次に個々のスマートチップを作成します。

1. スマートチップセットの+プラスアイコンをクリックして、新しいスマートチップを追加します
   
2. スマートチップを添付するエレメントを選択します
   
3. ミニエディタポップアップを使用して、スマートチップの初期設定を定義します。

   1. スマートチップ名を編集します

      1. テキストエレメントを選択した場合、WalkMeはタイトルを自動入力することがあります

      2. これは表示名であり、エンドユーザーには表示されません

   2. スマートチップタイプとしてスマートチップを選択します

      1. AIスマートチップは、入力フィールドをキャプチャする際のデフォルト選択です。 AIスマートチップを使用したい場合は、AIスマートチップの記事に移動します

4. スマートチップのタイプを選択します：ガイダンス、検証、または両方

   1. ガイダンススマートチップは、ページにある特定エレメントに関する追加情報を提供します
      • これはスマートチップの最も一般的な種類です。
   2. 検証スマートチップは、テキストフィールドで使用して、ユーザーがフォームを正しく入力できるようにすることができます
      • 検証スマートチップの詳細については、検証スマートチップのサポート記事をご覧ください

5. ［完了］をクリックします。

スマートチップのカスタマイズ

編集するスマートチップセットを開き、スマートチップのタイトルをクリックして設定を開きます。

行動タブ

「スマートチップの種類を選択する」ドロップダウンを使用して、アイテムが標準のスマートチップであるか、AIスマートチップであるかを選択します。

[スマートチップのオプション]で、トグルを使用して必要な部分を有効にします。

• ガイダンス – 情報メッセージを表示するには、これをオンにします。 スマートチップテキストフィールドにメッセージを入力するか、リッチテキストエディタをクリックして、書式設定オプションを設定し、アセットライブラリーから画像を挿入します（TIFF、SVG、PNG、JPG、JPEG、GIFがサポートされています）。
• 検証 – この機能を有効にすると、ユーザー入力をルールと照合して確認し、テキストフィールドにエラー（および必要に応じて成功メッセージ）を表示できます。 セットアップの詳細については、検証スマートチップガイドを参照してください。

[オーバーレイコントロール]で、スマートチップの表示方法と場所を調整します。

• アイコンの位置 – 3x3グリッドを使用して、キャプチャされた要素を基準としたアイコンの配置位置を選択します
• アイコンに対するツールチップの位置 – [自動]を選択して、WalkMeでツールチップの位置を自動的に設定するか、[手動]を選択して、自分で配置を設定します。
• オフセット位置 – ピクセル単位で入力された左側と上側の値を使用して、配置を微調整します
• 要素にロックする – スクロール中にスマートチップを要素に固定し、レイヤー化の問題が発生しないようにします
• レイヤーの配置（z-index）– スマートチップが他のページ要素の背後にあるか、または他の要素と重なった場合に可視性を調整します。ページ上で編集を使用して、微調整します。

Designタブ

「表示スタイル」で、スマートチップに「アイコンあり」または「アイコンなし」のどちらを表示するかを選択します。

ガイダンスデザインの編集で：

• ツールチップの色 – ツールチップのテキスト色、塗りつぶしの色、境界線の色を、それぞれ独自の不透明度（%）で設定します。
• ハイライト – トグルをオンにして要素の周囲に色付きのフレームを追加し、注意を引きます（直接調整するには、ページ上の「編集」をクリックします）。 境界の色と境界の太さを設定し、必要に応じて要素にカーソルを合わせる際にハイライトを非表示にするを選択するか、位置とサイズを調整してより詳細に制御できるようにします。

ガイダンス スマートチップ

ガイダンススマートチップは、入力フィールドで入力すべきコンテンツのフォーマットとデータの追加情報をユーザーに提示します。

ガイダンススマートチップはアイコンで表示することができ、アイコンの上にカーソルを置くか、要素をクリックするとメッセージが表示されます。また、プレースホルダーテキストに表示することもでき、ユーザーがフィールドに入力するまで常に表示されます。

スマートチップの表示方法は？

• アイコン付き。 アイコンの位置を選択します。 このオプションが選択されると、ガイダンスアイコンがエレメントの横に現れ、ユーザーがカーソルを合わせるとメッセージが表示されます
• アイコンなし：このオプションが選択されると、ユーザーがエレメントにカーソルを合わせるとメッセージが表示されます
• このオプションが選択されると、アイコンは表示されず、プレースホルダーテキストのみを表示します

プレースホルダーテキスト

テキストフィールド内に位置するプレースホルダーテキストは、特定のフィールドに必要な情報の追加のヒント、説明、または例です。 ユーザーがフィールドで入力を開始すると、消えます。

ホバー上のプレースホルダーとメッセージの両方を持つことができます。

プレースホルダーテキストオプションは、ガイダンススマートチップでのみ利用できます。 検証または両方が選択されている場合は、使用できません。

キャプチャされたエレメントは、サポートされるプレースホルダーテキストの入力フィールドである必要があります。 エレメントがjQueryで定義されている場合、プレースホルダーテキストを使用することもできます。

検証スマートチップ

検証SmartTipsでは、テキストフィールドのユーザーの入力をチェックして、提供された情報がフィールドの要件を満たしていることを確認できます。 検証SmartTipは、フィールドを赤で強調表示し、入力された情報が無効な場合にはエラーを表示します。 「検証スマートチップ」はテキストフィールドに配置する必要があります。

1. 検証スマートチップを作成するには、スマートチップを既存のスマートチップセットに追加したり、新しいスマートチップセットを作成したりします。
   注：スマートチップオプションのインタラクションタブにある［Add Validation（検証の追加）］ボタンをクリックして、既存のガイダンススマートチップに検証を追加することができます。
2. 該当するスマートチップセットで、オレンジ色のプラス記号をクリックします。
3. ［Validation（検証）］ラジオボタンをクリックして、このスマートチップを検証スマートチップにします。
   
4. 検証メッセージがいつ表示されるかを選択し、［Done（完了）］をクリックします。 すると、エディタでスマートチップオプションページが開きます。
5. 検証ルールの利用可能なオプションから選択します（いずれも該当しない場合は、条件ビルダーを使用して有効なエントリを定義できます）。
   1. 必須フィールド
   2. 数値フィールドの検証
   3. 日付形式の検証
   4. 時刻形式の検証
   5. 米国電話番号形式の検証
   6. メールアドレス形式の検証
   7. ウェブアドレス形式の検証
6. 入力されたテキストが無効な場合に表示するエラーメッセージを入力します。
7. 必要に応じて、サクセスインジケーションボックスにチェックを入れると、入力されたテキストが有効になった時点でテキストフィールドが緑で強調表示されます。 入力された情報が正しい場合に表示されるサクセスメッセージを含めることもできます。

技術注記

AIスマートチップを無効化します

AIスマートチップを使用しないことを希望する場合は、キャプチャ中にいつでもスマートチップタイプのドロップダウンからスマートチップを選択できます。 この機能を完全に無効にするには、CSMまたはWalkMeサポートに連絡してください。

SAPユーザー

SAPユーザーは、アカウントでAIを有効にし、WalkMe AI利用規約に署名する必要があります。