Blog スタッフブログ

こんにちは、Webデザイナーのそいです。今回はUIデザインで最近導入されている「ツールチップ」についてを紹介していきたいと思います。

ツールチップの効果的な活用方法を事例を交えて紹介していきますので、ぜひUI/UXの向上に活用してみてください。

ツールチップとは？

ツールチップとは、アイコンやボタンのホバー時などに、小さな吹き出しで補足説明を表示するUIパーツのことです。
「？」マークアイコンに添えるケースや、ボタンの詳細説明、略語の解説などによく使われる機能でWebシステムに実装されることも多く見かけるようになりました。

どういう時に使うのがいいの？

1つの画面に機能やボタンが密集する時など、見づらくなりがちな複雑な画面で活用すると効果的です。

例えば「追加」「編集」「コピー」「削除」といったボタンを設ける場合にこのように省略することができます。

ボタンにアイコン＋文字を置いた例

ツールチップを活用した例

ボタンをホバーすることでその機能の説明が表示されるUIです。すっきりしたUIデザインを表現できユーザーに、直感的に使いやすい印象を与えられるようになります。

ただし注意点も・・・

このように複雑な印象を受けるようなシステムUIを改善する役割をもつツールチップですが、注意点があります。まず、ツールチップは小さい領域に表示するため内容は端的で短めの文章でないと読みづらくなることがあります。また、ホバーの概念が無いスマートフォンやタブレットでは使えないため端末ごとで表現方法を考える必要があります。

また、誰もがわかるようなアイコンを選ぶこともポイントです。

実際に活用されているシステム・サービスを見てみよう

コミュニケーションツールのSlackやChatworkは、機能が密集しておりボタンやツールがたくさん並ぶUIです。入力欄まわりではこのようにツールチップを採用されています。どちらも複雑で多彩な機能を持つサービスですが主要のボタンはだいたいがアイコン1つでまとまっており、最適化されたUIですっきりとシンプルな印象を受けるよう工夫されています。

まとめ

いかがでしょうか。今回はツールチップについてを紹介しました。Webサイトのみならず、Webシステムの設計で知っておいて損はない手法ですので、ぜひ活用してみてくださいね。

今回もご一読いただきありがとうございました。