携帯サイトのユーザビリティ向上策

リンクには細心の注意を

　前回（http://www.thinkit.co.jp/article/143/3/）は3キャリア対応の携帯サイトを作るポイントを解説しました。今回は、画面の小さいケータイならではのユーザビリティを、使いやすさや視認性といった点について具体例をだしながら、実践的に解説します。

　携帯サイトでは、PCサイトのように1ページ全体を見渡すことができません。PCサイトであれば、一瞬で目的のリンクを探すことができても、携帯サイトの場合、上から順番にリンクをたどりながら画面をスクロールしていくので、それがページのコンテンツの一部なのか、単なる広告なのか、区別する必要があります。

　例えば、携帯サイト向けの広告では「[PR]～」のようにアンカーテキストの前に広告であることを示す文言を追加したり、画面遷移を促すリンクの場合、単に「次はこちら」など分かりにくいテキストは避け、「→オススメサイト2」のように次に何があるのか、示してあげると分かりやすくなります。

　また、携帯にはせっかく絵文字があるのですから、画像の前には「カメラ」のアイコンを表示させたりすると、絵文字がピクトグラムとして活躍します（図1）。サンプルソースはこちらからダウンロード（http://www.thinkit.co.jp/images/article/143/4/14341.zip）できますので、参照ください（14341.zip/7.75 KB）。

　画面の最後には、「1つ前のページへ戻るリンク」と「トップページへ戻るリンク」を記載しておくと良いでしょう。これは、ユーザーの画面遷移をスムーズに行うための補助機能です。

　これはPCサイトでも同じ概念が存在しますが、1点注意しなければならないのは、必ずしもユーザーが用意されたリンクをクリックしないということです。携帯電話には「クリア」キーや「←」ボタンが付いていますが、1つ前の画面に戻るには、サイトに用意された戻るリンクをクリックするより、これらのキーを押せば、通信せずに画面を移動できることをユーザーはすでに知っています。もちろん理由はパケット代を抑えられるからです。

　したがって、あえて「戻る」のリンクがないサイトや、わざわざ「携帯ブラウザのバックボタンでお戻りください」と示しているサイトもよく見かけます。

アクセスキーで利便性の向上を

　また、アクセスキーをうまく使うとサイトの利便性が向上します。

　アクセスキーとは、携帯電話の入力キーに相当するもので、例えば、携帯電話の「0」のキーを押すと、トップページへ簡単に戻ることができるといった機能です。特に、縦に長いサイトの場合、フッターリンクにアクセスキーを設定しておけば、画面の最後までスクロールせずに、毎回異なるページへの遷移が可能となるので、ユーザーが慣れてくれば非常に扱いやすいサイトになるでしょう。

　アクセスキーは以下のようにリンクに設定します。もちろん、リンク以外にinputタグなどにもアクセスキーは設定可能です（図1）。

<a href="./next.html" accesskey="0">[0] ﾄｯﾌﾟﾍﾟｰｼﾞへ</a>

　注意点として、1ページ内に同じアクセスキーを重複させることはできません。また、上の例のように、アンカーテキストの前後にアクセスキーに該当する数字を付記しておかないと、ユーザーがアクセスキーの存在にまったく気づかないので、文字や絵文字で番号を記しておくことにも留意しましょう。

　なお、一般的には「[0]がトップページ」「[9]が1つ前のページへ戻る」「[5]更新」としているサイトが多いようです。必ずしもこのルールに従う必要はありませんが、1つのサイト内では同じルールに従ってアクセスキーを指定しておくべきです。