MENU

ツールチップとは

目次

ツールチップとは

ツールチップは、UI(ユーザーインターフェース)の中で直接的に説明がなされていない、またはユーザーが見慣れないオブジェクトを理解する手助けをするものです。
ツールチップには、UIをすっきりさせるという大きな効果があります。ユーザーが情報を必要なときに、最小限の動作で参照することができるようになるのです。また、アプリやWebサービスの設計者は、画面のスペースをより有効に活用してまとまりのある画面を設計することができます。

これは、一番シンプルなツールチップです。「ツールチップ」のところにカーソルを合わせてみてください。


補足説明には ツールチップ を使うと良いでしょう。

よく見る表示ではありますが、必ずしも万能ではありません。使うべき場合、使うべきでない場合をよく考えて実装していくと良いでしょう。

ツールチップを使うべき場合、使うべきでない場合

シンプルなデザインを保ちたい場合や、オプショナルな情報を補助的に表示させたい場合ツールチップを使用した画面デザインは最適と言えます。
文章の注釈や、直感的に分かりづらいアイコン、もしくはユーザーからの入力において規則性を保ちたいフォームなどは、ツールチップを使うべき場合と言えます。

逆に使うべきでない場合は、重要な情報や文章量の多い情報を盛り込む必要があえる場合です。あくまで補助的な存在なので、重要項目や次の動作へのアクションに関係する内容には使用しない方がいいでしょう。

また、タブレットやスマホではホバー動作がないので、これらのデバイス利用をメインと考えているサイトには使うべきではありません。画面サイズが小さいデバイスのときは、ヒントのようなアイコンを表示させ、見つけやすく、タップしやすく、読みやすいツールチップをデザインする必要があります。

効果的なツールチップの作成方法

最も重要なことは、ツールチップは意図されたユーザーのワークフローに追加的なコンテキストを提供するものであるということです。ここでは、ツールチップを効果的に使用するための方法をいくつか紹介します。

コンテンツを隠さないデザイン

ツールチップの大きさや場所によっては、後ろのコンテンツを隠してしまいます。
レイアウトに配慮して、ユーザー体験を損なったり、気を散らしたりしないように心がけることが大切です。

導線上に配置する

基本的にツールチップはマウスオーバーされたところに表れるものなので、ユーザーに気づかれにくい場合があります。
サービスの操作や利用にあたり不可欠な情報は、直接表示したりポップアップを用いたりするなどして分かりやすくユーザーに伝える工夫が必要です。

ツールチップのサンプル

一番シンプルなツールチップ

ツールチップサンプル

ヒントボタンでツールチップ

     !
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

肩書:Webプログラマー兼Webライター
名前:ゆいちゃん
経歴:ライド株式会社ではコーポレートエンジニアとしてWebサイトの開発・保守・運用を行う。
   ホテルマン、総合商社で勤務していた経験から顧客との対話は大切にしている。
   IT系と育児系の情報収集が得意。
保有資格:ITパスポート
使用言語:HTML/CSS, PHP
好きな言葉:Done is better than perfect.

目次