ツールチップとは?~カスタマーサクセスのテックタッチ施策としての活用方法~

ツールチップとは?~カスタマーサクセスのテックタッチ施策としての活用方法~

ツールチップとは端的に、「カーソルを合わせた時に出現する補足情報」のことを指します。パソコンで何かしらのサービスを使ったことがある方であれば、一度は目にしたことがあるのではないでしょうか。ツールチップを活用することで、画面に余計な情報が表示されず、必要な人にだけ必要な情報を手軽に提供することができることから、多くのITサービスで活用されています。


本記事では、ツールチップとは何か、ツールチップのメリット、その活用方法などを分かりやすくご紹介します。

ツールチップとは

冒頭でも説明したツールチップについて詳しくご紹介します。ツールチップ(英:tooltip)とは、カーソルやマウスポインタを合わせると出現する注釈・補足情報をいいます。プロダクト利用者の「普段目にしない言葉やアイコンがあるとどのように操作して良いか分からない」という思いや、プロダクト提供者の「こういう書式で入力して欲しい」という要望など、互いの情報の補完を行ってくれるのがツールチップの役割です。例えば、下の図のようなお問い合わせフォームがあるとします。

お問い合わせフォームとツールチップの例

?にカーソルを合わせると、吹き出しのような小さな領域が出現し、どのように入力したら良いかユーザーに教えてくれます。これをツールチップといいます。

住所を全角で入力してください

ユーザーは適切な方法で入力ができるためエラーで頭を抱えることが無くなり、企業側は最適な形式でデータを受け取ることができます。

ツールチップのメリット

デザインがスッキリする

下の図は、左がツールチップ導入時、右がツールチップ未導入時の注釈の見え方を表しています。左の入力欄の上には?マークが、右の入力欄の上には※で注釈が書かれています。直感的にどちらが見やすいでしょうか?

お問い合わせとツールチップ

「どちらが見やすいか」という観点で言うと、恐らく左を選ぶユーザーが多いでしょう。その理由の一つとして、「名前と住所入力欄のデザインが統一されており、余計なものが見えないから」という理由が挙げられます。上の図の右側のように、各ページの入力欄一つ一つに異なる注釈が表示されていると、作業を進めていく内にストレスに感じることがあります。一方、デザインが統一されていると、ユーザーの視線の散らばりを防ぎ、プロダクト操作に集中してもらいやすくなります。また、画面内に入れられる情報は限られているため、デザインをスッキリさせるという点でツールチップは大いに役立ちます。

必要な情報だけを必要なユーザーに表示できる

ツールチップの大きなメリットとして、必要な情報だけを必要なユーザーに表示できるということがあります。ツールチップは、カーソルでかざした時に補足情報が表示される仕組みなので、ユーザーの導線の中で情報を表示させることができます。

またプロダクトの操作に慣れてくると、ユーザーがツールチップを見る頻度は減っていきます。これはユーザーの頭の中で、「◯◯は△△という意味」とインプットされているからです。ツールチップは、それがインプットされていないユーザーが能動的にその情報を取得できるという点でも優れています。例えば、初めてプロダクトに登録したユーザーや、最終ログインから日が経過した再ログインユーザーにとっては、ツールチップが役立ちます。理由は、プロダクト内で普段目にしないアイコンや言葉を見つけると疑問が浮かび、それを知ろうとするからです。また、受動的に「補足情報が見える」のではなく能動的に「補足情報を取得しに行く」という行為は、ユーザーがプロダクトについて興味関心を抱いていることの裏返しになります。

以上のことから、ツールチップは必要な情報を必要なユーザーだけに表示することができ、情報が必要なユーザーが能動的に情報を取得することができるという点で効果的です。

ツールチップをカスタマーサクセスで活用する

カスタマーサクセスとは

カスタマーサクセスとは、ユーザーの課題や疑問を予測し、積極的に解決策や答えを提供することです。ユーザーの幸福度を最大化することで、会社としての利益や顧客ロイヤリティを高めることができます。

テックタッチでの活用

テックタッチとは、LTVで見たときに最も低いユーザーに行うテクノロジーを活用した施策のことで、一度の施策で最も多くのユーザーにアプローチすることができます。先ほど説明した通り、ツールチップはユーザーが入力や選択操作を迷わずできる仕組みを提供します。そのためSaaS上に配置することでユーザーのセルフオンボーディングを促します。またツールチップの特性上、必要なユーザーだけに表示させることができるので、情報が必要ないユーザーの邪魔をしません。そのため、どのユーザーにも親切なプロダクトを提供することができます。

ツールチップを活用することで得られる効果

ユーザーのプロダクト活用率が上がる

ツールチップを活用することによって、ユーザーが迷わずに操作できる仕組みの作成が可能です。それにより、ユーザーのプロダクト活用率を上げることができます。

CS/サポートの工数削減

ユーザーの導線の中でツールチップによる情報を表示できるので、ユーザーのおこないたい操作をフォローでき、CSやサポートへの問い合わせの減少が見込めます。そこにかかっていた工数が削減できることで、より顧客の活用につながるような支援に時間を使うことができ、顧客への成果にもつながります。

ツールチップを活用することで得られる効果

優れたツールチップのUI/UXを作成するには

ここまで、ツールチップの意味や活用方法、その効果をご紹介しました。いざツールチップを導入すると決めると、「なるべく優れたツールチップを作りたい」と思うユーザーが多いでしょう。では、どうすれば優れたツールチップを作れるでしょうか?この章では、設定する文章の長さと内容に焦点を当てながらご紹介します。

説明が簡潔である

ツールチップは、ユーザーのプロダクト操作を容易にするための道具です。プロダクト独自の言葉や見慣れない言葉の定義を事細かに説明することは、確かにユーザーの言葉への理解を促すことに繋がります。しかし、ツールチップはあくまでもユーザー操作の補助教材です。そこをメインにしてしまうとユーザーの〇〇に〇〇する可能性があります。そのため、本質を簡潔に書くことがユーザーにとって最適であると言えるでしょう。

ユーザーが次に取るべきアクションが明確

ツールチップを表示させるユーザーはどのようなユーザーでしょうか?たまたまマウスがツールチップにかざってしまったユーザーを除き、大半は操作に疑問があるユーザーでしょう。ユーザーにプロダクトの価値を漏れなく伝えるためには、先ほど紹介した簡潔な説明に加えて、彼らが次にとるべきアクションを明確にする必要があります。理由は、操作を先に進めてもらえないとプロダクトの良さが伝わらないからです。例えば、先のお問い合わせフォーム内での電話番号のツールチップに「数字は半角、ハイフンなしで入力してください」と書かれているとします。この時、正しい入力結果を合わせて表示する方が、ユーザーは直感的に理解ができるため、次に取るべきアクションが明確になります。その結果、プロダクトの価値がユーザーに伝わりやすくなります。

数字は半角、ハイフンなしで入力してください

まとめ

今回はツールチップについてご紹介しました。ユーザーにプロダクトを長く活用してもらうには、プロダクトの機能に加えて、UIの質が欠かせません。ツールチップを用いてUIを向上させ、ユーザーのプロダクト体験価値を高めることが、LTVを最大化する一つの要素となることでしょう。


【テックタッチ関連おすすめ記事】

テックタッチとは?カスタマーサクセスの重要なタッチポイント ~知っておきたい基礎知識について~

 

【よく一緒に読まれている関連記事】
チャーン(churn)とは?カスタマーサクセスに必須の指標、その意味と計算方法について
LTVとは?基礎知識や算出方法からカスタマーサクセスとの関係性など、その重要性をまとめました
オンボーディングとは?SaaSのカスタマーサクセスにおける重要な施策について徹底解説

無料プランで始める

書類不要!最低利用期間なし!
ずっと無料で使えるアカウントを発行

>フリープランでできること

  1. TOP
  2. 製品
  3. Fullstar(フルスタ)
  4. media
  5. コラム
  6. ツールチップとは?~カスタマーサクセスのテックタッチ施策としての活用方法~