Webデザイン最新トレンド ~イマドキUIのつくりかた

第1回使いやすいメニューはどう作る? ~水平メニュー

「使いやすいメニュー」に必要な3つのこと

よく「ナビゲーションメニュー」と言われるように、Webサイトではメニューはナビゲートするためのものです。ナビゲートする対象はもちろん人(ユーザー)ですが、もっと具体的に言及すると「情報を探しているユーザー」ということになります。そして、情報を探す際には、できるだけ簡単に探せる必要があります。

使いやすいメニューには、3つのことが必要です。1つ目はアフォーダンス。言い換えると「メニューがメニューである(次の情報に導く)とすぐにわかる」ということです。2つ目はインタラクティブ性。たとえばメニューにマウスオーバーした、あるいはクリックしたことがわかることを意味します。3つ目はカレント表示。これは「現在いる場所がわかる」という意味です。

この3つを満たすため、メニューには3タイプから4タイプの画像を用意することが多くなっています。ノーマル時、マウスオーバー時、カレント時の分け方は以前からありますが、最近ではクリック時(a:active)のケアもしている例が増えてきました。

使いやすい水平メニューをデザインする

今回は、メニューでよく使われる、水平メニューの作り方について見ていきましょう。

図1 CSS sprites用に書き出した画像
図1 CSS sprites用に書き出した画像

上記の画像は、5つのグローバルメニューを3種類デザインして、1つのPNGファイルとして書き出したものです。それぞれ、以下のように振る舞います。

  • 上段:ノーマル時
  • 中段:マウスオーバー時
  • 下段:カレント時、クリック時

アフォーダンス

Webサイトは、大部分が画像かテキストで構成されます。そのため、アフォーダンスに関しては、メニューを画像で作ってテキストと区別すると実現しやすくなります。

また、メニューはクリックできる箇所なので、浮き上がった、クリックできることがひと目でわかるようなデザインにする必要があります。

インタラクティブ性

インタラクティブ性に関しては、中段と下段のマウスオーバー時のデザインで実現しています。

中段では、ユーザーがメニューにマウスオーバーしたときに、明度が高くなります。こうすることで、ユーザーが自身でマウスをどこに動かしているかがわかるだけでなく、ユーザーのクリックを誘うことができます。

下段のデザインでは、クリックしたときに沈み込むような見せ方を実現しています。

カレント表示

カレント表示に関しては、下段のカレント時のデザインで実現しています。

現在ユーザーが見ているページに該当するメニューは、ユーザーにいまどのページを見ているのかを示すため、他と区別する必要があります。

そのため、上段・中段ともに浮き上がるようなグラデーションを使っているのに対し、下段ではくぼんだように見えるようなグラデーションを適用しています。

図2 ノーマル時のメニュー
図2 ノーマル時のメニュー
図3 マウスオーバー時のメニュー
図3 マウスオーバー時のメニュー
図4 カレント時、クリック時のメニュー
図4 カレント時、クリック時のメニュー

今回はクリック時とカレント時の画像には同じものを使いましたが、別の画像を用意してもいいでしょう。

XHTMLではメニューをリストタグで作成

XHTMLとCSSの実装方法を見てみましょう。

まずはXHTMLです。

リスト1 XHTMLソース
<div id="menuwrap">
  <ul class="menu">
    <li id="menu01"><a href="/services/"><span class="nodisplay">Services 事業内容</span></a></li>
    <li id="menu02"><a href="/works/"><span class="nodisplay">Works 実績紹介</span></a></li>
    <li id="menu03"><a href="/news/"><span class="nodisplay">News お知らせ</span></a></li>
    <li id="menu04"><a href="/company/"><span class="nodisplay">Company 会社概要</span></a></li>
    <li id="menu05"><a href="/contact/"><span class="nodisplay">Contact お問い合わせ</span></a></li>
  </ul>
</div>

ここでは、5つのメニューをリストタグで作成しています。それぞれ幅が違うため、idを指定しています。そして、それぞれのリストに背景画像として画像を指定しています。テキストはCSSが無効のときに表示されるよう、通常時は非表示となるように指定します。

CSS spritesで1つの背景画像の位置をずらす

続いてCSSの実装のポイントです。まずはソースをご覧ください。

リスト2 CSSソース
ul.menu {
  margin:0 auto;
  width:749px;
}
#menuwrap ul.menu li{
  float:left;
  height:37px;
  position:relative;
}
#menuwrap ul.menu li#menu01{
  background:url(/img/menu.png) no-repeat;
  width:151px;
}
#menuwrap ul.menu li#menu02{
  background:url(/img/menu.png) no-repeat -151px 0;
  width:139px;
}
#menuwrap ul.menu li#menu03{
  background:url(/img/menu.png) no-repeat -290px 0;
  width:128px;
}
#menuwrap ul.menu li#menu04{
  background:url(/img/menu.png) no-repeat -418px 0;
  width:164px;
}
#menuwrap ul.menu li#menu05{
  background:url(/img/menu.png) no-repeat -582px 0;
  width:167px;
}
#menuwrap ul.menu li a {
  display:block;
  width:100%;
  height:100%;
  line-height:37px;
  overflow:hidden;
  outline:none;
}
#menuwrap ul.menu li#menu01 a:active {
  background-position:0 -74px !important;
}
#menuwrap ul.menu li#menu02 a:active {
  background-position:-151px -74px !important;
}
#menuwrap ul.menu li#menu03 a:active {
  background-position:-290px -74px !important;
}
#menuwrap ul.menu li#menu04 a:active {
  background-position:-418px -74px !important;
}
#menuwrap ul.menu li#menu05 a:active {
  background-position:-582px -74px !important;
}
#menuwrap ul.menu li#menu01 a:hover{
  background:url(/img/menu.png) no-repeat 0 -37px;
}
#menuwrap ul.menu li#menu02 a:hover{
  background:url(/img/menu.png) no-repeat -151px -37px;
}
#menuwrap ul.menu li#menu03 a:hover{
  background:url(/img/menu.png) no-repeat -290px -37px;
}
#menuwrap ul.menu li#menu04 a:hover{
  background:url(/img/menu.png) no-repeat -418px -37px;
}
#menuwrap ul.menu li#menu05 a:hover{
  background:url(/img/menu.png) no-repeat -582px -37px;
}
#menuwrap ul.menu li#menu01.current {
  background-position:0 -74px !important;
}
#menuwrap ul.menu li#menu02.current {
  background-position:-151px -74px !important;
}
#menuwrap ul.menu li#menu03.current {
  background-position:-290px -74px !important;
}
#menuwrap ul.menu li#menu04.current {
  background-position:-418px -74px !important;
}
#menuwrap ul.menu li#menu05.current {
  background-position:-582px -74px !important;
}
#menuwrap ul.menu{
  zoom:1;
}
#menuwrap ul.menu:after {
  height:0;
  visibility:hidden;
  content:".";
  display:block;
  clear:both;
}

今回のサンプルは、CSS spritesを使って作成しました。

CSS spritesは、ノーマル時やマウスオーバー時の画像を1ファイルにまとめ、CSSの「background-position」プロパティでそれぞれの位置を指定する手法です。

CSS spritesを使うと、ファイルを1つにまとめることでHTTPリクエストの数を減らせるため、Webサイト表示の高速化を図ることができます。しかも、ファイル数が少なくなることでファイル管理もシンプルになります。

このサンプルでは、CSS spritesで1つの背景画像の位置をずらすことでメニューを実装しています。

5つのメニューは左方向のネガティブマージンでそれぞれ指定しています。hover、active、currentについては上方向のネガティブマージンで指定しています。5つをそれぞれブロックレベル要素にし、左にフロートさせた形になります。

今後のポイントは「よりリッチに、インタラクティブに」

今回はノーマル時、マウスオーバー時、カレント時、クリック時というユーザーの動きに合わせてデザインした例を解説しましたが、今後はよりリッチでインタラクティブ性を持ったデザインや動きが増えそうです。

ここがコンピュータから生成されるWebの特性でDTPと大きく違う点ですが、⁠使いやすい」だけでなく、⁠気持ちよく動く」⁠ストレスのないスピード感がある」など、発展性はまだまだあります。

ナビゲーションはリアルな世界でも様々なところで見られます。駅の案内やホテル、レストランの案内など、Webだけではなく、気持ちのいいインターフェースとは何かについて常にアンテナを張っておくと、Webで実装するための新たな発見があるでしょう。

おすすめ記事

記事・ニュース一覧