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

2008年11月9日(日)
吉田 悟美一

モバイルリッチサイトのXHTMLコーディング

 それでは実際にモバイルリッチサイトを制作するにあたっての、表現のポイントとその留意点を細かく見ていきましょう。

 モバイルでのリッチ表現を目指すなら、まずXHTMLベースで制作することがポイントになります。XHTMLでのコーディングにあたっては、キャリアごとのXHTML記述の違い、端末ごとの指定や対応の違いがやはり存在します。また、非対応の指定に関しては無視されることになります。

 キャリアごとのページ制作をしないで、3キャリア1枚での制作も可能です。その場合には、共通化できる指定のみ有効な表現のデザインを考えます。以下にキャリアごとの表現手法の違いをまとめてみましたので、参考にしてみてください。

 キャリアごとのDOCTYPE宣言については図2-1になります。また、キャリアごとのCSS指定については下記になります。

・docomo:インラインCSSに対応(外部CSS非対応)
・au:外部CSS対応
・SoftBank:外部CSS対応

 キャリアごとのTableタグ指定については下記になります。

・docomo:imode対応HTML6.0対応機種以上のみで対応
・au:ほぼ対応
・SoftBank:ほぼ対応

 注意点として、docomoは目安として902iシリーズ以降、auは横幅が広くなり過ぎると表組みが崩れる端末あり、SoftBankは横幅が広くなり過ぎると横スクロールが発生して読み難くなる端末あります。

 キャリアごとのDIVタグ指定(floatプロパティの指定)については下記になります。

・docomo:ほぼ対応
・au:floatプロパティには非対応
・SoftBank:ほぼ対応

 キャリアごとのIMGタグ指定(floatプロパティの指定)については下記になります。

・docomo:styleのインライン指定にて対応
・au:IMGタグのalign指定にて対応
・SoftBank:IMGタグのalign指定にて対応

 図2-2のような部分背景色と画像を組み合わせた表現や、画像に対して回り込みをさせる表現、画像を並べるような表現では、TableタグやDIVタグを使います。Tableタグに関しては上記の注意点がありますので、どちらかと言えばDIVタグで可能な表現手法の選択がオススメです。

画像サイズの違いはどう対応するか

 次に、リッチサイト表現で重要なポイントとなるのが、端末ごとに違う画面解像度の対応です。

 部分背景色と画像等を組み合わせた表現をしたい時などに、画像サイズが機種ごとに最適化されていないと、レイアウトは崩れてしまいます。デザイン的に凝ったレイアウトをする場合に、画像サイズの最適化は必須です。

 約430機種の3G端末への対応を想定した場合、ブラウザ画面の横幅(px)の違いのバリエーションは、厳密にカウントすると、24パターンにもなります。横240pxの機種が約4割と大半を占めますが、3Gの中でも比較的古い端末には240px以下でのばらつきも多く、現段階ではそれぞれに対応していく必要があるでしょう(図2-3)。

 近いサイズのものは共有化させるとしても、横120~480pxまでの、最低8~10パターンの画像サイズを用意し、機種ごとに振り分けて表示させる必要があります。また、画像フォーマットは、GIFもしくはJPEGになります。

株式会社イオス
代表取締役/CEO(デザイナー/モバイルマーケター) 。1988年 株式会社イオス設立。プロダクト/Webデザイン等、商品開発・マーケティング分野を専門に展開。1999年、モバイル事業参入後は、ゲーム・動画配信・ショッピングモール等、複数の公式コンテンツを提供。モバイルサイト構築プラットフォーム「Rockbird(http://www.rockbird.jp/)」開発・提供。著書「ケータイ小説がウケる理由」「成功するケータイ通販」 http://www.e-o-s.net/

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

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

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

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