Facebook Twitter RSS
ホーム ホームページ制作会社WEB企画 ウェブ企画ラボ HTML・CSS 意外と便利!!「ツールチップ」で効果的にサイトのユーザビリティをあげよう!!ツールチップデザインのポイント・実装方法

意外と便利!!「ツールチップ」で効果的にサイトのユーザビリティをあげよう!!ツールチップデザインのポイント・実装方法

この記事のタイトルとURLをコピーする
意外と便利!!「ツールチップ」で効果的にサイトのユーザビリティをあげよう!!ツールチップデザインのポイント・実装方法
https://webkikaku.co.jp/blog/htmlcss/tooltips/
facebook twitter hatena Pocket

今回はツールチップについての使い方・デザインのポイント・実装方法についてまとめてみました!

ツールチップとは

ツールチップのとは、一言で言えば、「ヒントを表示するやつ」です。

UIで直接説明がなされていないオブジェクトや普段見慣れないオブジェクトに対して、マウスオーバーすることで使い方などのヒントや説明を出す存在です。

ユーザーが情報を必要なときに、少ない動作(マウスをホバーすること)で、アクションの誘導や説明ができます。便利。

ツールチップのメリット

ツールチップには、デザインをすっきりさせつつ、説明を付加できるというステキな効果があります。レスポンシブデザインが主流の今、限られた画面内でたくさんの情報を必要とするので、意外と使い所は多いかもしれません。

ただ、画面がツールチップだらけになると、逆にユーザーを混乱させる原因となるので使いどころは見極めるようにしましょう。

ツールチップの活用方法

ツールチップの活用例をご紹介します。使い方次第ではユーザビリティ・デザイン性がよくなりますので一考の価値ありです。

フォームの制限として

フォームの入力としての補助としてツールチップを使用した例です。

フォーム全体にツールチップを当てると、必ずツールチップを表示することになり相性が良いです。

アイコンの補助説明として(特に見慣れないアイコン)

アイコンはとても便利なオブジェクトですが、内容によってはアイコンだけではユーザーに伝えづらいものもあります。そんな時ツールチップをつけるとアイコンをクリックする前に用途を伝えることができ、ユーザビリティを向上させます。

文章の注釈として

本文中などに専門的用語や昔言葉などにツールチップを用いることで、文章後に米印などをつけずにスマートに注釈をつけることができます。

スライダーの小さな点に注釈を

個人的にこれは一押しの使い方です。スライダーの現在地や総枚数を伝えるあの小さな点、小さいスペースで実装できて便利なオブジェクトなのですがクリックするまで何が表示されるか全く分からないという欠点があります。

そこで、あの点にツールチップを表示させることで、事前にどんな画像なのかを伝えることができます。

ツールチップをデザインする上での注意点

次にツールチップをデザインする時に気をつけたいポイントを紹介します。

分かりづらいツールチップは逆にユーザビリティを大きく損ねる場合がありますので注意が必要です。

簡単に見つけられるデザインに

ツールチップの弱点は、見つけるための視覚的な手掛かりが少ないことです。

アイコンなど、通常カーソルをオブジェクトに重ねて使用するものは問題ありませんが、そうでない場合はカーソルをあわせてもらうために、ボタンのようなデザインにしたり、下線をつけたりする必要があります。

また、サイト内で一貫したデザインにすることでツールチップの存在を予測できる可能性を高められます。

ポップアップした情報量に気をつける

ツールチップは、短い文章を表示するに最適ですが、テキスト量が多いものとは相性がよくありません。内容は簡潔で分かりやすい文章にする必要があります。

ポップアップする場所に気をつける

ツールチップは、カーソルがあるオブジェクトの近く(上下左右)に表示するのが原則です。ただし表示させる場所は操作を妨害するような場所に配置してはいけません。

特にレスポンシブデザインでは、PCでは大丈夫だけれど、SPになった時に表示させる場所が無い…といった事にならないように注意しましょう。

必要不可欠な情報は載せない

ツールチップはその性質上、見られない可能性も秘めています。
サイトで必ず伝えたい情報や知らないと使用できない情報はツールチップに表示しないようにしましょう。

スマホではホバーができない

ホバーでヒントを出すのがツールチップですが、スマホではホバーができないため、クリック(タップ)で表示することになります。

もちろんそういった実装も可能ですが、ツールチップ本来の使い勝手はPCより落ちるため、それを考慮したデザイン設計が必要になります。

ツールチップの実装方法紹介

最後に実装方法の紹介です。

cssで実装

まずは、シンプルにcssだけで実装する方法です。
ツールチップをdisplay:none;にしておき、ホバーするとdisplay:block;に変わる単純な仕組みです。簡単。

<ul class="sample">
  <li>目玉焼き定食<span class="tooltips">目玉焼き焼き続けて20年!!半熟具合が絶妙!!</span></li>
  <li>焼肉定食<span class="tooltips">嫌いな人はいない人気商品!!コスパ最高!!</span></li>
  <li>コロッケ定食<span class="tooltips">実は内緒で20個に1つクリームコロッケ入れてる</span></li>
  <li>焼き魚定食<span class="tooltips">亭主の昨日の釣果によって豪華度が変わります</span></li>
</ul>
.sample li {
  position:relative;
  margin:20px 0px;
  padding: 10px;
  list-style-type: none;
}
.sample li:hover {
  background: #ddbbbb;
}
.tooltips {
  display: none;
  position: absolute;
  bottom: -2.5em;
  z-index: 1000;
  padding: 0.5em;
  color: #FFFFFF;
  background: #cc3333;
  border-radius: 0.5em;
}
.tooltips:after {
  width: 100%;
  content: "";
  display: block;
  position: absolute;
  left: 0.5em;
  top: -8px;
  border-top:8px solid transparent;
  border-left:8px solid #c72439;
}

.sample li:hover .tooltips {
  display: block;
}

jQureryで実装

display:none;で要素を隠すのはHTMLとかSEO的にちょっと…という方にはjQueryを使うのもおすすめです。
ツールチップのテキストを扱うのにHTML5のカスタムデータ属性を使っています。

<ul class="sample">
  <li data-text="目玉焼き焼き続けて20年!!半熟具合が絶妙!!">目玉焼き定食</li>
  <li data-text="嫌いな人はいない人気商品!!コスパ最高!!">焼肉定食</li>
  <li data-text="実は内緒で20個に1つクリームコロッケ入れてる">コロッケ定食</li>
  <li data-text="亭主の昨日の釣果によって豪華度が変わります">焼き魚定食</li>
</ul>
.sample li {
  position:relative;
  margin:20px 0px;
  padding: 10px;
  list-style-type: none;
}
.sample li:hover {
  background: #ddbbbb;
}
.tooltips {
  position: absolute;
  bottom: -2.5em;
  z-index: 1000;
  padding: 0.5em;
  color: #FFFFFF;
  background: #cc3333;
  border-radius: 0.5em;
}
.tooltips:after {
  width: 100%;
  content: "";
  display: block;
  position: absolute;
  left: 0.5em;
  top: -8px;
  border-top:8px solid transparent;
  border-left:8px solid #c72439;
}
$(".sample li").on({
  'mouseenter':function(){
    var text = $(this).attr('data-text');
    $(this).append('<span class="tooltips">'+text+'</span>');
  },
  'mouseleave':function(){
    $(this).find(".tooltips").remove();
  }
});

これ以外にもツールチップには軽量のライブラリがたくさんありますので、そちらを使用するのも良いでしょう。

まとめ

ツールチップは効果的に使うことで、サイトのユーザビリティをあげてくれます。より使いやすいサイトを目指すなら、一つの手として覚えておいて損はないものでしょう。それでは良きデザインライフを!!

この記事のタイトルとURLをコピーする
意外と便利!!「ツールチップ」で効果的にサイトのユーザビリティをあげよう!!ツールチップデザインのポイント・実装方法
https://webkikaku.co.jp/blog/htmlcss/tooltips/
facebook twitter hatena Pocket

東京・名古屋を中心に、中小企業に特化したホームページ制作会社。マーケットやビジネスモデルに合わせ一社一社に合わせたウェブ制作・リニューアルのご提案しています。
1000サイト以上のウェブマーケティング支援で獲得したノウハウで、リニューアル後に過去最高の成果を生み出したお取引先は多数。勘ではなくロジックに基づいたホームページ制作と柔軟な対応力で多数のお客様にご評価頂いております。

どのようなお悩みでも構いません。ホームページを有効的に活用できていないと考えているご担当者の方、まずは一度弊社にご相談くださいませ。

ご提案依頼・ご相談はこちら
公式facebook、twitterから情報を受けとる
いいね!する フォローする
前のページ
次のページ
ページトップ