この記事の目的
Webの世界は日進月歩で進化していて、便利で新しい技術がどんどん登場しています。
その進化に伴い、新たな用語も年々増えています。
私たちが提供する「ホームページ制作サービス」の観点から専門用語を抜粋して分かりやすくお伝えします。
この記事の対象読者
Web制作を始めたばかりの人。
Webデザインを行なっているが、言葉の定義を再確認したい人。
自社でWeb担当を任されたが専門用語についていろいろ知りたい人。
など、Webに限らずDXに携わるすべての方に。
ツールチップとは
ツールチップは、UI（ユーザーインターフェース）の中で直接的に説明がなされていない、またはユーザーが見慣れないオブジェクトを理解する手助けをするものです。
ツールチップには、UIをすっきりさせるという大きな効果があります。ユーザーが情報を必要なときに、最小限の動作で参照することができるようになるのです。また、アプリやWebサービスの設計者は、画面のスペースをより有効に活用してまとまりのある画面を設計することができます。
これは、一番シンプルなツールチップです。「ツールチップ」のところにカーソルを合わせてみてください。
よく見る表示ではありますが、必ずしも万能ではありません。使うべき場合、使うべきでない場合をよく考えて実装していくと良いでしょう。
ツールチップを使うべき場合、使うべきでない場合
シンプルなデザインを保ちたい場合や、オプショナルな情報を補助的に表示させたい場合ツールチップを使用した画面デザインは最適と言えます。
文章の注釈や、直感的に分かりづらいアイコン、もしくはユーザーからの入力において規則性を保ちたいフォームなどは、ツールチップを使うべき場合と言えます。
逆に使うべきでない場合は、重要な情報や文章量の多い情報を盛り込む必要があえる場合です。あくまで補助的な存在なので、重要項目や次の動作へのアクションに関係する内容には使用しない方がいいでしょう。
また、タブレットやスマホではホバー動作がないので、これらのデバイス利用をメインと考えているサイトには使うべきではありません。画面サイズが小さいデバイスのときは、ヒントのようなアイコンを表示させ、見つけやすく、タップしやすく、読みやすいツールチップをデザインする必要があります。
効果的なツールチップの作成方法
最も重要なことは、ツールチップは意図されたユーザーのワークフローに追加的なコンテキストを提供するものであるということです。ここでは、ツールチップを効果的に使用するための方法をいくつか紹介します。
コンテンツを隠さないデザイン
ツールチップの大きさや場所によっては、後ろのコンテンツを隠してしまいます。
レイアウトに配慮して、ユーザー体験を損なったり、気を散らしたりしないように心がけることが大切です。
導線上に配置する
基本的にツールチップはマウスオーバーされたところに表れるものなので、ユーザーに気づかれにくい場合があります。
サービスの操作や利用にあたり不可欠な情報は、直接表示したりポップアップを用いたりするなどして分かりやすくユーザーに伝える工夫が必要です。
ツールチップのサンプル
一番シンプルなツールチップ
ツールチップサンプルヒントボタンでツールチップ
