第8回　適切な説明を加えたデザインにするには

ツールチップでさりげなく情報を伝える

サイトの情報設計をする際、カテゴリーを整理したり、グローバルメニューの分け方を考えるのが重要ですが、メニューでひとことでは言い切れない場合が少なくありません。

特に、ユーザーの利用頻度が多い管理画面などは、「⁠あれ、これ何のページだっけ？」ということが起こり得ます。運用・管理の引き継ぎで大変な想いをした方も少ないないのではないでしょうか。

そんなときに、「⁠ひと言だけれど、カーソルを合わせたときに説明が出る」ようにすれば、ユーザーにとってわかりやすく、ユーザビリティの高いUIになります。

今回は、ツールチップを使って、ユーザーの操作の邪魔にならない形でさりげなく情報を伝える方法をご紹介します。ツールチップとは、カーソルを合わせたときに補足情報が表示される小さな枠のことで、使い方によっては効果的なUIを実現することができます。

tipsyとDD_belatedPNG.jsを準備する

今回のサンプルは以下のようなものです。

今回は、「⁠tipsy」というjQueryのプラグインを使って、ツールチップを表示します。

tipsyは、Twitterでも使われているのでご存知の方もいらっしゃるのではないでしょうか。MITライセンスで配布されている、使いやすいプラグインです。

下記サイトからパッケージをダウンロードしてください。

http://onehackoranother.com/projects/jquery/tipsy/

そして、JavaScriptとCSSを、以下のファイル構成図のように配置します。

今回は透過PNGを使用し、IE6に対応させるため、「⁠DD_belatedPNG.js」もダウンロードしておいてください。

http://www.dillerdesign.com/experiment/DD_belatedPNG/

フェードインの動きと透過PNGを取り入れる

動きにフェードインなどの効果をつけると、ユーザーに「おっ」と思わせるようなUIにすることができます。また、透過を用いれば、デザインの自由度が高くなり、より魅力的なにすることができるのではないでしょうか。

今回は、動きにフェードインを取り入れ、透過PNGを使って、ツールチップをデザインします。それぞれ、tipsyのオプションによる設定、および透過PNG（IE6用にDD_belatedPNG.jsを使用）を使います。

では、ソースを見ていきましょう。

XHTMLソース（head内）

<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/tipsy.css" type="text/css" />
<script type='text/javascript' src='js/jquery-1.3.2.min.js'></script>
<script type="text/javascript" src="js/jquery.tipsy.js"></script>
<script type='text/javascript'>
  $(function() {
    $('.tooltip').tipsy({gravity: 'w',fade:true});    
  });
</script>
<!--[if IE 6]>
	<script src="js/DD_belatedPNG.js"></script>
	<script>
		DD_belatedPNG.fix('.transparent');
	</script>
<![endif]-->

「style.css」でページのスタイルを指定し、「⁠tipsy.css」にツールチップのデザインのスタイルを記述します。

「jquery-1.3.2.min.js⁠」⁠、「⁠jquery.tipsy.js」を読み込みますが、今回はデザインをtipsyのデフォルトのものから変更しているため、「⁠jquery.tipsy.js」に大きく変更を加えています。

tipsyは、ツールチップを表示する方向を指定することができます。

w・・・右に表示
s・・・上に表示
e・・・左に表示
n・・・下に表示

上記のアルファベットを、tipsyのgravityオプションに指定します。

「$('.tooltip')」には、tipsyを指定するclassを記述します。今回は「fade:true」とすることで、フェードイン・フェードアウトの動きを指定しています。

最後の[if IE 6]の部分では、IE6のみに対応させる透過PNGを設定を記述しています。

ツールチップに表示するテキストを指定する

続いて、ツールチップに表示するテキストを指定する部分です。

XHTMLソース（body内）

<div id="wrap">
<div id="left">
<ul>
<li><a class="tooltip" href="" title="トップページに戻ります">ホーム</a></li>
<li><a class="tooltip" href="" title="弊社のサービス「○○○」についてご紹介しています">サービス</a></li>
<li><a class="tooltip" href="" title="最新情報をブログ形式でご紹介しています">ニュース</a></li>
<li><a class="tooltip" href="" title="弊社への地図とご連絡先について">アクセス</a></li>
<li><a class="tooltip" href="" title="メールにて受け付けています。お気軽にご連絡ください。">お問い合わせ</a></li>
</ul>
</div><!--left end-->
<div id="right">
<h1><img src="img/logo.gif" alt="Menu with Tool Tips" width="313" height="39" /></h1>
<p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
<p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
<p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
</div><!--right end-->
</div>

メニューのリストには「class="tooltip"」を指定。

title属性に指定したテキストが、ツールチップとして表示されます。

クラス分けしたdiv要素をjquery.tipsy.js」に追記

ポイントは全体がtipsyクラスとなっていることです。

その中を、以下の図のように4つの部分に分けています。

CSSのソースは以下のとおりです。

tipsy.css

.tipsy {
	margin:3px 0 0 -20px;
	font-size: 10px;
	width:239px;
	color: #fff;
}
.tipsy-inner {
	background: url(../img/bg_tooltipCenter.png) repeat-y;
	padding:0 15px 12px 12px;
	position:relative;
	z-index:1;
}
.tipsyBottom {
	background: url(../img/bg_tooltipBottom.png) no-repeat;
	height:5px;
}
.tipsyRight {
	background: url(../img/bg_tooltipTop.png) no-repeat 0 top;
	padding:12px 0 0 0;
	width:225px;
	float:left;
	position:relative;
	left:14px;
}
.tipsyArrow {
	background: url(../img/arrow.png) no-repeat;
	position:relative;
	top:29px;
	z-index:2;
	width:15px;
	height:19px;
	float:left;
}

最後に、デザインに合わせてクラス分けしたdiv要素を、「⁠jquery.tipsy.js」に追記します。

jquery.tipsy.js

                if (!tip) {
                    tip = $('<div class="tipsy"><div class="tipsyArrow transparent"></div><div class="tipsyRight transparent"><div class="tipsy-inner clearfix transparent"/><div class="tipsyBottom transparent"></div></div></div>');
                    tip.css({position: 'absolute', zIndex: 100000});
                    $.data(this, 'active.tipsy', tip);
                }

XHTMLのhead内にIE6用の「DD_belatedPNG.fix('.transparent');」を記述しましたが、transparentクラスに対してpngのfixを指定しています。それに対応して、透過PNGを使っている「tipsyArrow」「⁠tipsyRight」「⁠tipsy-inner」「⁠tipsyBottom」にtransparentクラスを指定します。

CSS3でも表現可能

透過PNGは依然IE6用にJavaScriptなどによる対策が必要ですが、CSS3のRGBaプロパティによっても透明度を表現することができます。フェードのアニメーションも、CSSのtransitionプロパティを使えば、JavaScriptを使わずに実現させることができます。

HTML5／CSS3による表現はプロパティごとのブラウザの対応状況に注意が必要ですが、実装方法や優れたサンプルをチェックしておくと、作るときのアイディアも広がるのではないでしょうか。

今回解説したサンプルファイルがダウンロードできます。

サンプルファイル