勉強の一環でUI観察を始めていますが、今回はツールチップです。

（その他のUI観察記事はマガジンはこちら ↓）

ツールチップとは

「ヒント」と言い換えると分かりやすいですね。ツールチップは使用しているツールで分かりづらいところや専門用語などを補足説明してくれます。

各デバイスの表示として（PCは hover・SPはタップ）で表示されます。

見た目として、ツールチップは吹き出しのデザインが主となりますが、様々なサービスのツールチップをまとめてみて、ツールチップのさまざまな使い方の参考にしてもらえたらと思います。

さまざまなサービスのツールチップ

■ Bootstrap（ブートストラップ）

黒い背景で白文字のツールチップが表示。文字サイズは小さめ。

■ Google

薄い黒の背景に白文字で表示。文字サイズは小さめ。hoverしたアイコンの下にツールチップが表示。

受信トレイをhoverすると表示。ヘッダーと違い、右にツールチップが表示。（画面の適切な箇所に応じて、上下左右を配慮している）

■ Figma

濃い黒の背景に白文字。下に「チームライブラリ」と表示。

？マークをhoverすると、上に「ヘルプとリリース」と表示。

■ freee

白い背景に黒文字。吹き出しに影。139文字と文字量が多い。

■ note

薄いグレー背景。文字は濃いめのグレー。

■ Slack

黒背景に白い文字。太さはbold。文字量が多め。

■ Canva

黒背景に白い文字。説明文言は文字量が多め。

まとめてみて

これらのサービスのツールチップを観察してみて、ツールチップを効果的に使う上で大事な点は以下の通りです。

• デザインは黒い背景、白文字がベター。

• アイコンを補足説明する時はタイトルのみ記載。

• ツールチップ内の文字量が多い場合は、色・文字サイズの変更も考慮。

• 表示位置によって、適切な上下左右のどこかに配置する。

• 長くても150文字以内。それ以上の場合はヘルプページなどに記載する。

• スマホ時はhoverができないため、タップで表示する。

まとめ

ツールチップは文字を補足する際に使用しますが、場合によっては説明することが多く、情報量が多くなってしまうケースもあると思いますので、適切な情報量にすることを心がけましょう。
ユーザーインターフェース作りに参考になると幸いです。