画面が小さい携帯電話向けサイトに於けるサイト制作のティップとして、サイトを有効に利用出来るようにするためのナヴィゲーションバーの一例を紹介します。
携帯電話は
と言う事もあり、多くの携帯電話専用サイトでは公開すべき情報を切り詰め、サイトの構造も簡素なものとしております。
ですが、やはり規模の大きなサイトになれば、当然サイト内のナヴィゲーションもある程度は用意したいものです。
ナヴィゲーションバーにはテキストでも良いのですが、小さな画面で有効なナヴィゲーションを実現するのであれば、画像を活用すると言うのも手と言えます。
画像はテキストのフォントサイズの制約を受けないため、スクロールのないナヴィゲーションバーを実現させる事も可能になるからです。
尚、携帯電話ではクリッカブルマップは使えないので、一つのアンカーに一枚以上の画像を対応させる事になります。
つまり、アンカーごとに画像を並べて行く事とします。
今日の日本国内での携帯電話は大半が幅240ピクセルズと見てよいでしょう。
つまり、幅240ピクセルズに収まるように画像を並べれば良いと言う事になります。
尚、閲覧者の中には画像表示を止めて閲覧する方もいる事が予想出来ますので、当然ながら画像表示をとめていても満足に利用出来るようにすべきである事は言うまでもありません。
これは、画像を埋め込む<img>要素のalt属性で実現出来ますね。
モバイル商用サイトを想定して、以下のようなナヴィゲーションバーのサンプルを考えてみました。
ページ冒頭のロゴの真下と、ページの一番下のクレジットの直前にナヴィゲーションバーを入れると言うものです。
上下二箇所に設けたのは、後ろの方を見ている場合に先頭へ移動するのは容易ではない事に依ります。
このサンプルは、制作者が平成21年11月下旬にルフトハンザ ドイツ航空のモバイルサイト(http://lufthansa.jp・PCからのアクセスではユーザエージェント文字列を変更する必要あり)を見ていてそこで使われていたナヴィゲーションを参考にしております。
携帯電話向けサイトのナヴィゲーションバーのサンプルを実現するには、適切な画像を用意したうえで以下のようなHTMLを作成します。
<?xml version="1.0" encoding="shift_jis"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"><head><meta http-equiv="content-type" content="text/html; charset=shift_jis" /><title>ナヴィゲーションテンプレートの一例。</title><link rel="start" title="ホーム" href="./" /><link rel="next" title="商品案内" href="Products/index.html" /><link rel="next" title="商品ご購入" href="Shop/index.html" /><link rel="appendix" title="お役立ちコンテンツ" href="Oyakudachi/index.html" /></head><body text="#000000" bgcolor="#ffffff" link="#009900" vlink="#003300" aling="#00cc00"><h1><img alt="○○商店" src="Images/MobiMenu-Logo.JPG" width="100%" /></h1><div id="HEADER_NAVI" class="navi"><!-- ナヴィ本体。実際に用いる場合には、<a>要素間の改行を全部詰めて下さい。 --><a class="toHome" href="./"><img alt="ホーム " src="Images/MobiMenu-2Home.GIF" width="45" height="18" /></a><a class="toProducts" href="Products/index.html"><img alt="商品 " src="Images/MobiMenu-2Items.GIF" width="36" height="18" /></a><a class="toShop" href="Shop/index.html"><img alt="ご購入 " src="Images/MobiMenu-2Shop.GIF" width="49" height="18" /></a><a class="toOmake" href="Oyakudachi/index.html"><img alt="お役立 " src="Images/MobiMenu-2Oyakudachi.GIF" width="46" height="18" /></a><!-- ナヴィはここまで --></div><!-- 本文始まり --><p>○○商店のモバイルサイトへようこそ！</p>(以下略) <!-- 本文ここまで --><div id="FOOTER_NAVI" class="navi"><!-- ナヴィ本体。実際に用いる場合には、<a>要素間の改行を全部詰めて下さい。 --><a class="toHome" href="./"><img alt="ホーム " src="Images/MobiMenu-2Home.GIF" width="45" height="18" /></a><a class="toProducts" href="Products/index.html"><img alt="商品 " src="Images/MobiMenu-2Items.GIF" width="36" height="18" /></a><a class="toShop" href="Shop/index.html"><img alt="ご購入 " src="Images/MobiMenu-2Shop.GIF" width="49" height="18" /></a><a class="toOmake" href="Oyakudachi/index.html"><img alt="お役立 " src="Images/MobiMenu-2Oyakudachi.GIF" width="46" height="18" /></a><!-- ナヴィはここまで --></div><hr /><address>(C)2009 ○○商店 <a href="mailto:mobi@oo-shoten.uso">お問合せ</a></address></body></html>
このとき注意したい事を挙げておきます。
上記のソースでは見易くするために改行とタブを入れておりますが、これらは全て詰めてください。
アンカーとアンカーの間に空白文字が入ると、隙間が出来てしまい、その隙間の幅はどのくらいなのか分からないからです。
画像が表示されない場合のために、画像に書かれている文字はalt属性にテキストで記述すべきなのは基本中の基本ですが、画像を隙間なく並べるため、代替テキストも隙間なく並ぶ事となる筈です。
このため、代替テキストの末尾に空白文字を入れる事で区切りとなるようにします。
初めに述べた通り、日本での携帯電話の画面は幅240ピクセルズが主流です。
画像の横幅が240を超えると途中で折返しになってしまうので、240未満になるようにします。
携帯電話の場合、端末の十字ボタンでフォーカスを移動します。
テキストアンカーであれば、フォーカスされているアンカーが反転表示されるのですぐ分かりますが、ブラウザに依っては、画像アンカーがフォーカスされている場合、画像や背景が白でないと分かり難くなる場合があります。
フォーカスされている状態が分からないのはユーザビリティ上最悪ですので、対処する必要があります。
つい画像だと背景を凝ったものにしたくなりますが、この問題を考えてアンカーに用いる画像は是非とも白無地にしてください。
携帯電話では、十字ボタンでアンカーのフォーカスを移動しますが、ナヴィゲーションバーの項目数が多過ぎると、スキップの数がその分多くなってしまい、ユーザビリティを損ねる事になります。
ですから、ナヴィゲーションバーの項目数は最小限のものに絞り込むと良いでしょう。
商用サイトでは先ずやらないと思いますが、モバイルサイトをPC向けサイトと兼用させたいと思う方もいるかも知れません。
今日のPC向けウェブブラウザでは、大半がCSS, JAVAスクリプト, DOMに対応しておりますので、これらを活用してPC向けに見栄えやナヴィゲーションなどを改善する事が考えられます。
サンプルのHTMLでは、各アンカーにクラス名を与えておりますが、PC向けサイトであればこのアンカー名を頼りにHTMLをDOM操作などで書換える事も出来るでしょう。
