PR

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

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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスのご案内

関連記事