ツールチップとは？役割とデザインで押さえるべき5つのポイント

この記事を読むための時間：5分

Webサイトで使用されることが多いツールチップを知っていますか？何かわからないという方も、一度は目にしたことがあるはずです。

今回は「ツールチップって何？」という方向けにツールチップの役割やデザインのポイントなどを詳しく紹介します。

ツールチップとは？

ツールチップ（英: tooltip）とは、マウスオーバーした際に表示される補足説明のことです。「tip」とは日本語で「ヒント」という意味。詳しく説明されていない、もしくはユーザーに精通していないアイコンなどについて、ユーザーの理解を手助けするヒントを表示します。

Microsoft Officeでは「ポップヒント（英: ScreenTips）」と呼ばれており、図・ヘルプ記事へのリンクを付属した「拡張ポップ ヒント（英: Enhanced ScreenTips）」もあります。

また、Microsoft Windowsには、ツールチップと同じような機能を持つテキストボックス専用の吹き出し型「バルーン（英: Balloons）」も存在しています。

ツールチップが活躍する場面・役割

ツールチップはどのような場面で活躍するのでしょうか？ここからは、ツールチップの主な役割を紹介します。

オブジェクトの補助説明

ツールバーの操作ボタンやアイコン、画像などのオブジェクトは、サイトの操作性や見た目を簡潔にするデザインのひとつの手法ですが、ユーザーがその意味を完全に認知していない可能性があります。

ユーザーがオブジェクトにマウスオーバーすると自動的にツールチップが表示されることで、何を意味するオブジェクトなのかをスムーズに理解してもらえます。

文章の注釈

専門的な用語を使用する時や文章に補足をしたい時にも、ツールチップが役に立ちます。

ツールチップを使用しないと、「※1・※2…」などとして文章後に注釈をつけることになり、リンクを設置したとしてもユーザーは行き来しなければなりません。そのため、ツールチップを使用した方がユーザビリティ（使いやすさ）が上がるケースがあります。

フォームの入力補助

入力フォームにツールチップを設置して、ユーザーの入力をサポートする役割もあります。半角・全角、カタカナ・漢字などの制限や入力例を表示することでエラーや離脱を防止し、入力完了率やコンバージョン率アップに繋がることもあるでしょう。

ツールチップを使用するべきではないケース

ツールチップは様々な場面で役立ちますが、普段は表示されていないため、なんでもツールチップで説明するのはおすすめできません。

そこで、ツールチップを使用するべきではないケースを紹介します。

本来ユーザーにわかってもらうべき情報を補足する

ツールチップは、わかりにくいサイトをわかりやすくする目的では使用するべきではありません。あくまでも情報の補足やサポートであり、ツールチップがないと操作が難しいサイトはUIデザインを改善する必要があります。

必ず認知してほしい情報をツールチップにする

ツールチップはマウスオーバーしないと表示されないため、必ず認知してほしい必要不可欠な情報の提供には向いていません。

必ずユーザーの目に触れさせたい情報はコンテンツ内やサブメニュー、ポップアップウィンドウなどで表示しましょう。

ツールチップのメリット

ツールチップのメリットには以下のようなものがあります。

• UIデザインをスッキリさせることができる
• 最小限の動作で必要な情報だけ表示できる
• 情報が必要ないユーザーの注意を逸らさない

ツールチップを使用することによってUIデザインをスッキリさせつつ補足情報を付け加えられます。また、情報が欲しい部分にカーソルを合わせるだけで表示させられるので、ユーザーには最小限の動作を求めるだけで済むのもメリットです。

ツールチップのデメリット

ツールチップのデメリットには以下のようなものがあります。

• ユーザーの行動を邪魔することがある
• スマホやタブレットでは使いにくい
• SEO効果がない

うまくデザインしないと思うように操作ができなくなるなど、ツールチップのせいでサイトのユーザビリティが低下する恐れがあります。

また、スマホやタブレットではホバー（マウスオーバー）ができないため使いにくく、ツールチップ自体を使うサイトは減りつつあります。ツールチップの内容はSEO効果がないのもデメリットです。

ツールチップをデザインする際の5つのポイント

最後に、ツールチップをデザインする際のポイントを紹介します。ツールチップをデザインする際に気をつけたい点は以下の5つです。

1. 見つけやすいようにする
2. 適切な大きさ・情報量を意識する
3. 表示場所に注意する
4. 表示の継続時間と非表示にする方法を最適化する
5. スマホではホバーができないことを前提にデザインする

それでは、順番に解説していきます。

1. 見つけやすいようにする

ツールチップは見つけるための視覚的手がかりが少なく、ユーザーに気付かれない可能性があります。入力フォームやアイコンなどでユーザーが必ずホバーするものは問題無いですが、そうでないものは見つけやすいようにしなければなりません。

ユーザーは過去の経験や雰囲気からツールチップがありそうな場所にカーソルを合わせます。そこで、ツールチップを持っているオブジェクトや文章にはサイト内で一貫したデザインを使用するなどの工夫を施してユーザーにヒントを与えましょう。

2. 適切な情報量を意識する

ツールチップは短い文章の表示に向いています。通常のツールチップは一定の時間が経つ、もしくはオブジェクトからカーソルを外すと消えてしまうので、長い文章はユーザーが読みきれない可能性が高いのです。

ツールチップで補足する情報は、簡潔で有益性の高いものに限りましょう。

3. 表示場所と大きさに注意する

「適切な情報量を意識する」とも通じる部分ですが、ツールチップが大きすぎるとページ内の他のオブジェクトを隠してしまい、ユーザビリティを低下させます。

また、マウスオーバーしたオブジェクトは隠さない、画面から見切れずに表示させるなど、表示場所も適切にする必要があります。

4. 表示の継続時間と非表示にする方法を最適化する

ツールチップが一定の時間が経つと消える設定にする場合、ユーザーが内容を把握できる最適な表示時間にする必要があります。

また、表示されたツールチップはユーザーが簡単に非表示にできるように設定しましょう。ツールチップによって隠れた部分を見たいと思ったり、ツールチップを目障りだと感じたりする可能性があるからです。

5. スマホではホバーができないことを前提にデザインする

「ツールチップのデメリット」でも述べたように、スマホはホバーができません。そのため、タップや長押しで表示させることになります。

ホバーができるPCに比べるとユーザーの負担が大きくなりますが、情報が必要ないユーザーの注意を逸らさない、UIデザインをスッキリさせることができるなどのメリットは活かせます。

モバイルでツールチップを活用するときには、どこをタップするとどんな情報が表示されるのかがわかるようなデザインを作成する必要があるでしょう。

まとめ

今回は、ツールチップについて説明しました。

UIをスッキリさせつつ、ユーザーに負担のかからない方法で補足ができる便利な機能ですが、サイズや表示内容、スマホでのユーザビリティなど、考慮する点は意外と多いです。紹介した5つのポイントを押さえて、最適なツールチップをデザインしましょう。