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

けい線文字とメニュー

　携帯ユーザーは画面の遷移を多くするサイトを嫌います。それは画面が切り替わることでパケット代が発生すること、再通信の際に必ずしも電波状況が良いわけではないことなどの理由が考えられるからです。携帯サイトは多少縦に長くても、電波のあるところで一度ページを表示させておいて、地下鉄の電車内など後でゆっくり見るといった使い方をするユーザーも多くいると言われています。

　このように不必要な画面遷移を嫌うユーザーのことを考えると、トップページにできるだけ多くのリンクを記載してもよく、それによって画面が長くなっても離脱率が高くなることはあまりありません。ただし、やみくもにリンクを掲載するだけでは、煩雑なページになりかねないので、携帯サイトではサイト構成などを示すために、けい線文字がよく使われます。

　けい線文字とは「├」や「└」のことで、これをうまく使うと、メインコンテンツとサブコンテンツを分けつつ、1つのページにリンクを収めることができるようになります。これも前回（http://www.thinkit.co.jp/article/143/3/）のサンプルサイトを参考にしてください（図3-1）。悪い例のサンプルソースはこちらからダウンロード（http://www.thinkit.co.jp/images/article/143/4/14343.zip）できますので、参照ください（14343.zip/7.81 KB）。

　また、同じような考え方で図中の「検索メニュー」の部分のリンクでは「リンクメニュー：説明」（コロン区切り）という行が並んでいます。これは、モバゲー（http://www.mbga.jp/.pc/）やR25（http://r25.jp/utility/mobile/）などでも使用されている手法で、メニューの説明を1行に収めるための一例です。通常PCサイトなどでは、メニューの下に説明を付記したりしますが、それでは画面が長くなるので、1行で収める方法が使われています。

　「：（コロン）」の位置がすべて整っているのは、携帯ブラウザのフォントのおかげで、PCサイトとは異なり、文字幅において「半角2文字＝全角1文字」という関係が成立しているからできることです。これも「文字でデザインする」一例です。もちろんtableタグなどは使用していません。

　携帯サイトはできる限り、1画面に情報を詰め込むため、PCサイトとは異なり、基本的に余白をとらない傾向にあります。区切り線によってカテゴライズされたブロック間も余白をとることはなく、詰めて表示させます。余白をとればそれだけスクロールする範囲も広くなるからです。余白を詰めても見やすいデザインにするためには、領域ごとに背景色を変えたり、先ほどの文字によるデザインなどを駆使することでメリハリを出すことが重要です。

サイト階層と背景色

　携帯サイトのユーザー導線は、PCサイトがトップページから深部へと進み、サブコンテンツ間を移動するのに対し、携帯サイトを利用するユーザーは基本的にトップページを起点、経由点としてコンテンツ間を平行に遷移します（図3-2）。つまり、トップページからサブコンテンツに飛び、いったんトップページへ戻ってから、ほかのコンテンツへ飛ぶといったような移動をします。

　したがって、携帯サイトは深い階層でサイトを構成するより、コンテンツが並列にならんだような構成にすると、ユーザーの遷移を効率よく行わせることができます。ページのフッターに付けるリンクも、これに応じた作りにすると良いでしょう。

　関連して、サイトマップやSEO効果として良いとされるパンくずリストは、携帯サイトにはあまり設置しません。そもそも階層が浅く作られている携帯サイトにパンくずリストは意味を成さないという点、画面の上位にパンくずリストが占領するのは、見た目、画面の効率的使用ともによろしくないといった点が主な理由となっています。

　携帯サイトは携帯電話上で閲覧されるという特性から、携帯サイトの色の扱い方についても多少のルールがあります。基本的にはPCサイトと同じように白を背景とするのが良いとされていますが、携帯サイトは色をふんだんに使った盛り上がり感のあるサイトが良いとされているため、これも一概には言えません。

　ただし、携帯電話は屋外でも使用されることを忘れてはなりません。直射日光が直接画面に当たる屋外では、周りの写り込みが激しいので、写り込みの多い黒を背景としたサイトは屋外利用には不向きです。このような配慮も携帯サイトには必要です。

　以上4回にわたって、入門的な携帯サイトの制作の基本をお伝えしましたが、いかがだったでしょうか。本連載によって少しでも多くの良質な携帯サイトが生まれることを期待しています。

　なお、本稿の執筆にあたって、以下を参考にしました。

「携帯XHTMLでの入力モードのまとめ：ゆどうふろぐ（http://d.hatena.ne.jp/Yudoufu/20080914/1221393041）」（アクセス：2008/10）