![見出し画像](https://assets.st-note.com/production/uploads/images/103460156/rectangle_large_type_2_6e4d77cb261b8aa9a4e5884169a35ff7.png?width=800)
UI観察 - ツールチップ
勉強の一環でUI観察を始めていますが、今回はツールチップです。
(その他のUI観察記事はマガジンはこちら ↓)
ツールチップとは
ツールチップ(英: tooltip)とは、マウスオーバーした際に表示される補足説明のことです。 「tip」とは日本語で「ヒント」という意味。 詳しく説明されていない、もしくはユーザーに精通していないアイコンなどについて、ユーザーの理解を手助けするヒントを表示します。
「ヒント」と言い換えると分かりやすいですね。ツールチップは使用しているツールで分かりづらいところや専門用語などを補足説明してくれます。
各デバイスの表示として(PCは hover・SPはタップ)で表示されます。
見た目として、ツールチップは吹き出しのデザインが主となりますが、様々なサービスのツールチップをまとめてみて、ツールチップのさまざまな使い方の参考にしてもらえたらと思います。
さまざまなサービスのツールチップ
■ Bootstrap(ブートストラップ)
黒い背景で白文字のツールチップが表示。文字サイズは小さめ。
![](https://assets.st-note.com/img/1680182312147-mpMyHC8RtP.png?width=800)
薄い黒の背景に白文字で表示。文字サイズは小さめ。hoverしたアイコンの下にツールチップが表示。
![](https://assets.st-note.com/img/1680183051513-WfaznaXptZ.png?width=800)
受信トレイをhoverすると表示。ヘッダーと違い、右にツールチップが表示。(画面の適切な箇所に応じて、上下左右を配慮している)
![](https://assets.st-note.com/img/1680183182154-Q04l9R1Zqy.png?width=800)
■ Figma
濃い黒の背景に白文字。下に「チームライブラリ」と表示。
![](https://assets.st-note.com/img/1680183740029-jTsPn6hukW.png?width=800)
?マークをhoverすると、上に「ヘルプとリリース」と表示。
![](https://assets.st-note.com/img/1680183893908-bnXfngn0wU.png?width=800)
■ freee
白い背景に黒文字。吹き出しに影。139文字と文字量が多い。
![](https://assets.st-note.com/img/1680263134186-NL0pxGrzAj.png?width=800)
■ note
薄いグレー背景。文字は濃いめのグレー。
![](https://assets.st-note.com/img/1680263937119-Qzb1G4Exc4.png?width=800)
■ Slack
黒背景に白い文字。太さはbold。文字量が多め。
![](https://assets.st-note.com/img/1680264761646-52bXcKus8E.png?width=800)
■ Canva
黒背景に白い文字。説明文言は文字量が多め。
![](https://assets.st-note.com/img/1680265354923-y8HU9IYvuv.png?width=800)
![](https://assets.st-note.com/img/1680265433084-PHDIqpP5Y8.png?width=800)
まとめてみて
これらのサービスのツールチップを観察してみて、ツールチップを効果的に使う上で大事な点は以下の通りです。
デザインは黒い背景、白文字がベター。
アイコンを補足説明する時はタイトルのみ記載。
ツールチップ内の文字量が多い場合は、色・文字サイズの変更も考慮。
表示位置によって、適切な上下左右のどこかに配置する。
長くても150文字以内。それ以上の場合はヘルプページなどに記載する。
スマホ時はhoverができないため、タップで表示する。
まとめ
ツールチップは文字を補足する際に使用しますが、場合によっては説明することが多く、情報量が多くなってしまうケースもあると思いますので、適切な情報量にすることを心がけましょう。
ユーザーインターフェース作りに参考になると幸いです。
この記事が気に入ったらサポートをしてみませんか?