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

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

この記事を読むのに必要な時間:およそ 3 分

「使いやすいメニュー」に必要な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が無効のときに表示されるよう,通常時は非表示となるように指定します。

著者プロフィール

川下城誉(かわしもくにたか;CREAMU)

Web制作・ブランディングを主軸とした(株)CREAMU 代表取締役。海外のWeb情報を紹介するblog「CREAMU」を運営中。

URLhttp://www.creamu.co.jp/

コメント

コメントの記入