正也Tweetリンクには細心の注意を前回(http://www.thinkit.co.jp/article/143/3/)は3キャリア対応の携帯サイトを作るポイントを解説しました。今回は、画面の小さいケータイならではのユーザビリティを、使いやすさや視認性といった点について具体例をだしながら、実践的に解説します。携帯サイトでは、PCサイトのように1ページ全体を見渡すことができません。PCサイトであれば、一瞬で目的のリンクを探すことができても、携帯サイトの場合、上から順番にリンクをたどりながら画面をスクロールしていくので、それがページのコンテンツの一部なのか、単なる広告なのか、区別する必要があります。携帯サイト向けの広告では「[PR]~」のようにアンカーテキストの前に広告であることを示す文言を追加したり、画面遷移を促すリンクの場合、単に「次はこちら」など分かりにくいテキストは避け、「→オススメサイト2」のように次に何があるのか、示してあげると分かりやすくなります。携帯にはせっかく絵文字があるのですから、画像の前には「カメラ」のアイコンを表示させたりすると、絵文字がピクトグラムとして活躍します(図1)。画面の最後には、「1つ前のページへ戻るリンク」と「トップページへ戻るリンク」を記載しておくと良いでしょう。これは、ユーザーの画面遷移をスムーズに行うための補助機能です。これはPCサイトでも同じ概念が存在しますが、1点注意しなければならないのは、必ずしもユーザーが用意されたリンクをクリックしないということです。携帯電話には「クリア」キーや「←」ボタンが付いていますが、1つ前の画面に戻るには、サイトに用意された戻るリンクをクリックするより、これらのキーを押せば、通信せずに画面を移動できることをユーザーはすでに知っています。理由はパケット代を抑えられるからです。したがって、あえて「戻る」のリンクがないサイトや、わざわざ「携帯ブラウザのバックボタンでお戻りください」と示しているサイトもよく見かけます。アクセスキーで利便性の向上をまた、アクセスキーをうまく使うとサイトの利便性が向上します。アクセスキーとは、携帯電話の入力キーに相当するもので、例えば、携帯電話の「0」のキーを押すと、トップページへ簡単に戻ることができるといった機能です。縦に長いサイトの場合、フッターリンクにアクセスキーを設定しておけば、画面の最後までスクロールせずに、毎回異なるページへの遷移が可能となるので、ユーザーが慣れてくれば非常に扱いやすいサイトになるでしょう。アクセスキーは以下のようにリンクに設定します。リンク以外にinputタグなどにもアクセスキーは設定可能です(図1)。トップページへ</a>注意点として、1ページ内に同じアクセスキーを重複させることはできません。上の例のように、アンカーテキストの前後にアクセスキーに該当する数字を付記しておかないと、ユーザーがアクセスキーの存在にまったく気づかないので、文字や絵文字で番号を記しておくことにも留意しましょう。一般的には「[0]がトップページ」「[9]が1つ前のページへ戻る」「[5]更新」としているサイトが多いようです。このルールに従う必要はありませんが、1つのサイト内では同じルールに従ってアクセスキーを指定しておくべきです。この著者の記事一覧PCおよび携帯サイト制作のほか、デコメ、SEO、LPOなどWEBサイト全般の業務に携わる。TypeなどのCMSテンプレートカスタマイズ、PHPプログラミング等を経験。3年ほど前から携帯サイト制作にシフト。コーディング&デザイン」。そのほか、HTML/CSSリファレンスサイト、携帯サイト制作支援ブログなどを運営。ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。VeloCloudが選ばれる理由SD-WANとはなにか。Linuxエンジニア育成への思いF5とNGINXの組み合わせで、サービス公開をよりセキュアに。ITがお届けするポッドキャストです。