モバイルサイトをリッチ化する

モバイルリッチサイトとは

　前回（http://www.thinkit.co.jp/article/145/1/）では、モバイルサイトにもリッチ化やデザインが求められている市場の状況を紹介しました。実際に、最近では次々とデザイン性に優れたモバイルサイトが生み出され、サイトへの集客やサービスへの効果を上げています。

　今回は、具体的なモバイルサイトのリッチ表現方法とその導入法・実現方法などについて紹介していきます。

　では現状で表現可能なモバイルのリッチサイトとはどんなサイトなのでしょうか。以下にモバイルリッチサイトの制作・表現のポイントを挙げてみました。

・XHTMLベース（CSS指定、Table、DIVなどのタグに対応）
・VGA（640×480ドット）など高解像度に対応
・インラインFlash、インタラクティブFlashでの表現
・動画での表現

　図1での制作事例を基に、大まかなポイントを見ていきましょう。

　まずは、XHTMLでの表記をベースにしたページ制作です。これはリッチな表現をするために必須な手法といえます。事例ではDIVタグを使い、画像と部分背景色を組み合わせて見せることで、単純に見ないレイアウトを実現しています。

　また、画像に対する文字の回り込み、文字のサイズ指定なども表現できます。XHTMLベースで制作することで、パソコン向けサイトでの表現に近づけることが可能なのです。

　画像は高解像度に対応する方がベターです。後ほど詳しく紹介しますが、機種によって解像度の違いが多様にあります。より精度を上げたリッチ表現をするためには、それぞれの端末解像度に適した画像を用意することが必要になります。

　Flash Lite（携帯電話向けに開発されたFlash Player）での表現も重要なポイントです。この事例ではインラインFlashを導入しています。インラインFlashではページ全体をFlashで作成する必要がなく、部分的にインタラクティブな印象の演出が可能です。

　この事例にはありませんが、動画での表現も可能なら取り入れたいところです。最近では少しずつ長尺なムービーが見せられるようになってきています。モバイル動画については11月の特集での連載で詳しく紹介したいと思います。

リッチサイトでの対応端末をどう考えるか

　モバイルリッチサイト制作にあたっては、まず対応端末をどう考えるかということがとても重要です。現状で市場に出回っている携帯端末は600機種以上、モノクロ端末から最新のVGA端末まで、さまざまなスペックを持つ端末が混在しています。これらすべてに対応する前提では、やはりリッチ表現は難しくなってしまいます。

　スペックが低く、アクセスシェアも低い古い端末は、そろそろ外して考えてもいいでしょう。古い端末を含めてしまうと、リッチ表現はおろか、サイトの機能や容量の制限もでてきますので、サービス自体の見直しや運用コストがかかってしまうことも想定されます。

　2008年10月現在、実に市場の98％を超えるアクセス占有率が、リッチ表現に対応する端末で占められています。これらは、XHTML、Flash Liteなどに対応している端末ということになります。具体的には3G端末以上をめどにするのがベストでしょう。

・docomo：FOMA端末以降
・au：WIN端末（WAP2.0対応端末）
・SoftBank：3GC端末

　それでも約400機種への対応ということになります（上記端末でも、らくらくホンや簡単ケータイなど、表示に制限がある端末もあるので注意が必要です）。