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

2008年10月28日(火)
柴崎 正也

リンクには細心の注意を

 前回(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つのサイト内では同じルールに従ってアクセスキーを指定しておくべきです。

PCおよび携帯サイト制作のほか、デコメ、SEO、LPOなどWEBサイト全般の業務に携わる。過去にイントラネットのデザイン改修、コーポレートサイトの企画および制作、タイアップバナー広告の作成、Movable TypeなどのCMSテンプレートカスタマイズ、PHPプログラミング等を経験。3年ほど前から携帯サイト制作にシフト。著書に「携帯サイト コーディング&デザイン」。そのほか、HTML/CSSリファレンスサイト、携帯サイト制作支援ブログなどを運営。HTMLタグボード:http://www.dspt.net/携帯ホームページを作ろう!:http://dspt.blog59.fc2.com/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています