ツールチップとは?使いどころと入れてはいけない情報、スマホでの注意点

ツールチップの基本

まずは、ツールチップとは何か、どんなパーツでできていて、似た部品とどう使い分けるのかを押さえましょう。

ツールチップとは

ツールチップとは、ボタンやアイコンにマウスを乗せたとき(ホバー)や、キーボードで選んだとき(フォーカス)に表示される、短い補足説明の吹き出しのことです。

ホバーは「マウスのカーソルを要素の上に重ねること」、フォーカスは「キーボードのTabキーなどで、操作する対象としてその要素が選ばれている状態」のことです。

ホバーは、クリックはせずに、マウスの矢印をアイコンの上に置いたままにしている状態だと考えると分かりやすいでしょう。

フォーカスは、Tabキーを押すたびに、選ばれているボタンの周りに枠が付いて、次のボタンへ順番に移っていく状態です。

マウスを使いにくい人や、画面の読み上げソフトを使う人などは、このキーボード操作で画面を進めます。

キーボード操作の作り方をまとめたWAI-ARIA Authoring Practices Guide(APG)でも、ツールチップを「要素がキーボードフォーカスを受けたときや、マウスがその上に乗ったときに、その要素に関する情報を表示するポップアップ」と説明しています(Tooltip Pattern | APG(英語))。

たとえば、ハートのアイコンだけでは「いいね」なのか「お気に入り」なのか分かりにくいとき、ツールチップで「お気に入りに追加」と添えると、押す前に意味を確かめられます。

ツールチップの構成

ツールチップは、「きっかけになる要素」「吹き出し本体」「中の文字」「矢印」の4つのパーツでできています。

• きっかけになる要素
  アイコンボタンや「?」マークなど、ホバーやフォーカスで吹き出しを出す元の要素です。
• 吹き出し本体
  文字を載せる小さな箱です。
  周りの画面と区別しやすいよう、濃い色の地に白い文字にすることがよくあります。
• 中の文字
  補足の説明です。
  ひと目で読める短さにします。
• 矢印
  吹き出しがどの要素の説明なのかを指し示す小さな三角です。
  要素が密集している画面で特に役立ちます。

アイコンボタンについて、ふだんの状態とホバーしたときの状態を並べてみましょう。

見本Bでは、吹き出しの下の小さな三角(矢印)がアイコンを指しているので、どのボタンの説明なのかが迷わず分かります。

ホバー時はアイコンの背景にもうっすら色を付け、「いまこのボタンに乗っている」ことが分かるようにしています。

似た部品との使い分け

補足の説明を見せる部品はツールチップのほかにもあり、「その情報がどれくらい大事か」で使い分けます。

部品	見え方	向いている情報
ツールチップ	ホバー・フォーカスしたときだけ出る	知らなくても操作できる、短い補足(アイコンの名前など)
ヘルプテキスト	入力欄の近くなどに常に表示されている	入力の条件や注意など、操作に必要な情報
ポップオーバー(クリックで開く説明の吹き出し)	「?」マークなどを押すと開き、もう一度押すか外側を押すと閉じる	少し長めの説明や、リンクを含む説明
モーダル	画面の手前に開き、閉じるまで後ろを操作できない	今すぐ確認や答えが必要なこと

ツールチップに向いているのは、表を見て分かるとおり「見なくても困らないけれど、見ればもっと安心できる」情報です。

迷ったときは、「いつ見えるか(いつも見えている/乗せたときだけ/押したときだけ)」と「中に押せるものがあるか」の2つで見分けると整理しやすくなります。

APGでも、リンクやボタンなど押せるものを含む吹き出しは、ツールチップではなく別の作り(モードレスのダイアログ)にするよう示しています。

ツールチップの使い方とデザインのコツ

ここからは、ツールチップに入れてよい情報・いけない情報と、スマホや表示位置で気をつけることを見ていきます。

大事な情報や操作は入れない

ツールチップには、操作を終えるために欠かせない情報や、押せるボタン・リンクを入れてはいけません。

ツールチップはホバーやフォーカスをしないと見えないため、気づかない人や、ホバーできない環境の人には、その情報が届かないからです。

UIの研究で知られるNielsen Norman Groupも、作業を終えるのに欠かせない情報にはツールチップを使わない、としています(Tooltip Guidelines – Nielsen Norman Group(英語))。

よくあるのが、パスワードの入力条件をツールチップの中だけに書いてしまうケースです。

NGの見本では、条件を知らないまま入力して送信し、エラーが出てから初めて「?」を見に行く、という遠回りが起きます。

OKの見本のように、操作に必要な情報は最初から見える場所に書いておき、ツールチップは「知っていればもっと便利」な補足だけに使いましょう。

スマホではホバーできない問題

スマートフォンやタブレットのようなタッチ操作の端末には、マウスを「乗せる」という操作がありません。

そのため、ホバーで出るツールチップは、タッチ操作では基本的に見られないと考えておく必要があります。

Androidアプリでは、アイコンを長押しするとツールチップが表示される仕組みがありますが(ツールチップ | Jetpack Compose | Android Developers)、長押しで説明が出ることを知らない人も多いので、それに頼りきるのは危険です。

スマホでも説明を見てほしい場合は、次のような方法を選びましょう。

• アイコンの横に文字のラベルを付ける
  アイコンの意味を伝えたいだけなら、最初から「お気に入り」と文字を添えるのがいちばん確実です。
• 「?」マークをタップで開く形にする
  タップすると説明が開き、もう一度タップするか外側をタップすると閉じる吹き出しにします。
• 説明を本文に書く
  大事な情報なら、そもそもツールチップにせず、画面に常に表示します。

迷ったら、まずアイコンの横か下に短い名前を添えられないかを考え、どうしても場所がないときだけタップで開く形にする、という順番で考えると決めやすくなります。

表示位置は、見たいものを隠さない場所に

ツールチップは、説明する要素のすぐ近くに出し、その要素や、いま読んでいる内容を隠さない位置に置きます。

吹き出しが入力欄やとなりのボタンにかぶさると、説明を読んでいる間、肝心の画面が見えなくなるからです。

要素の上に出すのが一般的ですが、画面の上端に近い要素では下に出すなど、画面からはみ出さない向きに切り替えます。

NGの見本では、長い説明の吹き出しがボタンの列にかぶさり、どのボタンの説明なのかも、ほかのボタンが何なのかも分からなくなっています。

OKの見本では、文字を「太字」の一言に絞り、ボタンの列を隠さない位置に出して、矢印で対象のボタンを指しています。

出し方・消し方のルール

ツールチップは、マウスだけでなくキーボードでも出せて、見る人の都合で読める出し方・消し方にします。

Webの国際的なアクセシビリティ(障害の有無などにかかわらず使えること)のガイドラインWCAG 2.2では、ホバーやフォーカスで表示される内容について、次の3つを満たすよう求めています(WCAG 2.2 達成基準1.4.13 ホバー時又はフォーカス時のコンテンツ・WAIC日本語訳)。

• 非表示可能
  マウスやフォーカスを動かさなくても、吹き出しを消せること(たとえばEscキーで消せる)。
  吹き出しが下の内容を隠してしまったときに、すぐどかせるようにするためです。
• ホバー可能
  マウスを吹き出しの上に移しても、吹き出しが消えないこと。
  画面を拡大して見ている人などが、吹き出しの文字を読めるようにするためです。
  拡大していると吹き出しの一部が画面の外にはみ出しやすく、マウスを動かして読みに行った途端に消えてしまうと、最後まで読めなくなります。
• 継続
  ホバーやフォーカスが外れるか、見る人が消すまで、勝手に消えないこと。
  読み終わる前に数秒で消える作りにはしません。
  文字を読むのに時間がかかる人もいるので、消えるタイミングは見る人に任せます。

また、マウスがたまたま通り過ぎただけで次々に吹き出しが出ると落ち着かないため、APGが示すように、少し間をおいてから表示する作りがよく使われます。

コーディングでツールチップを作るとき

ここからは、Webサイトを自分でコーディングする(HTMLなどのコードを書いて形にする)人向けの補足です。

コードを書かない人は、この節は読み飛ばして「実践のポイント」へ進んでも構いません。

HTMLのtitle属性を付けると、ブラウザーが自動でツールチップのような小さな説明を出してくれますが、これだけに頼るのはおすすめしません。

この説明はブラウザーが用意する簡易的なもので、見た目を自由にデザインできないうえ、マウスで乗せたときにしか出ないことが多いからです。

MDNでも、title属性はタッチ操作だけの人やキーボードで操作する人などにとって大きな問題になる、と注意しています(MDN: title属性)。

キーボードでも使えるツールチップを作るときは、先に紹介したAPGのTooltip Pattern(英語)にある、キーボード操作の説明が参考になります。

実践のポイント

ツールチップのデザインで陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• ボタンの文字と同じ言葉を、ツールチップでもう一度表示してしまうことがあります。
  「保存」ボタンに「保存」と出しても何も増えないので、新しく分かることがないなら付けないほうがすっきりします。
• 画面のあちこちにツールチップを付けすぎて、説明を読まないと使えない画面になってしまうことがあります。
  ツールチップが増えてきたら、ラベルの言葉や画面の作り自体を見直すサインです。
• 吹き出しの文字が小さすぎたり、地の色との差が小さすぎたりして読めないことがあります。
  文字と地の色のコントラスト比(色の明るさの差)は、本文と同じく4.5:1以上を目安にしましょう(詳しくはコントラスト比とは?で解説しています)。
• 同じ種類のアイコンなのに、ツールチップがあるものとないものが混ざってしまうことがあります。
  付けるなら、同じ役割のアイコンにはそろえて付けましょう。

よくある質問

• Q. ツールチップの文字はどれくらいの長さがいい?
  A. 決まった文字数はありませんが、ひと目で読める短さが基本です。
  アイコンの名前なら「お気に入りに追加」のような一言、長くても1〜2文程度にとどめ、それ以上になるなら本文やヘルプのページで説明しましょう。
• Q. 「ポップオーバー」とは何が違う?
  A. 呼び方はデザインシステムによって違いますが、一般にポップオーバーは、クリックやタップで開き、ボタンやリンクなど押せるものも入れられる、少し大きめの吹き出しを指すことが多いです。
  ツールチップは、押せるものを含まない短い説明に限るのが基本です。
• Q. アイコンに文字のラベルを付けられないときは?
  A. 画面の幅が足りないなどで文字を付けられない場合は、ツールチップで名前を補います。
  そのうえで、どの画面でも同じ意味で使われる、なじみのあるアイコンを選ぶことが大切です。

まとめ

ツールチップとは、ホバーやフォーカスをしたときに出る短い補足説明の吹き出しで、知らなくても操作できる補足だけを入れる部品です。

操作に必要な情報や押せるものは入れず、スマホではホバーできないことを前提に、見たいものを隠さない位置に出して、勝手に消えない作りにすることがポイントです。

まずは自分のサイトやデザインのツールチップを1つずつ見て、「これがスマホで見られなくても困らないか」を確かめてみてください。