3キャリア共通携帯サイト作り方
キャリアでちがう携帯サイトの表示
携帯サイトを作るときに頭を悩ますのが、キャリアごとの表示の違いです。日本の３大携帯キャリアはau、ドコモ、ソフトバンクですが、このキャリアの違いにより携帯サイトの表示のされ方が全く違うのです。３キャリア共通のルールがありませんし、これからも統一される見込みはありません。
よって、企業が携帯サイトを作る場合、キャリアごとに別々の携帯サイトを作り、プログラムで振り分けている場合が多いです。
しかし、私のようなアフィリエイターの場合、キャリア別に携帯サイトを用意するのはむずかしく管理も大変。。。できれば３キャリア共通の携帯サイトを作りたいのが本音です。
そこでここでは、３キャリア共通の携帯サイトの作り方のポイントを紹介します。実は、携帯サイトの場合、キャリアだけでなく携帯電話の機種によっても表示のされ方がちがい、大昔の機種までカバーしようとするとキリがありません。。。
そこで、当サイトの３キャリア共通携帯サイトの目安は
・キャリアが違っても致命的な表示のズレがないようにする
・機種については携帯サイトのメインユーザーを中心に考え、３年以上前の機種のことは考えない
に設定しています。
ファイルサイズ
３キャリア共通携帯サイトを作るなら、1ページのファイルサイズは9kb以内に抑えましょう。これは1ページに含まれる文章や画像を合わせたサイズです。
CSS(スタイルシート)
通常、パソコンサイトの場合は外部CSSを使ってサイトをデザインします。携帯サイトでもau・ソフトバンクは外部CSSを使えるのですが、ドコモが外部CSSに対応していません。
つまり、スタイルシートを別で用意してリンクで関連付けたることができないのです。３キャリア共通携帯サイトを作るなら、CSSは各htmlタグ内に書き込むようにしましょう。
画面の解像度・横幅
３キャリア共通携帯サイトを作るなら、サイトの横幅は240px以内に設定しましょう。この240pxという数字は携帯サイトを作る上でひとつの基準となる数字です。それほど古くない携帯電話なら大体、画面サイズは240pxを超えているからです。
機種によっては縦スクロールバーの表示により画面サイズがもう少し小さくなります。確実に表示したいなら横幅は228px以内にしましょう。特に画像は画面サイズより大きくなると自動縮小されて汚くなるので注意が必要です。
文字コード
携帯サイトの場合、文字コードはShift_JISが無難です。UTF-8でも大丈夫なのですが、対応機種が多少せばまります。UTF-8を使わざるを得ない理由が特にないのなら、Shift_JISを使いましょう。
画像形式
携帯サイトで問題なく使用できる画像形式はGIFとJPEGですが、GIFは一部キャリアの機種が対応していません。
３キャリア共通携帯サイトを目指すならJPEGに統一するのがベストですが、ファイルサイズの問題もあるので、私はGIFとJPEGを使っています。
表<table>タグは使わない
背景に色をつけたり画像などの配置を調節したりするのに便利な表ですが、ドコモとの相性が悪いようです。3キャリア共通携帯サイトを作るなら表は使わないようにしましょう。背景色は<div>タグなどで設定します。
DOCTYPE宣言
これは迷うところですが、デザインの幅を広げるためにもXHTMLを使いたいところです。さらにSEO対策として、検索エンジンに携帯サイトだとしっかりと認識させるために「xhtml-mobile」を使いましょう。
携帯サイトとして作成したのに、検索エンジンにパソコンサイトと認識されて、GoogleモバイルやYahooモバイルなどの検索結果に表示されないという被害報告があります。「xhtml-mobile」を使用して携帯サイトということをしっかりとアピールしておくと良いでしょう。
ヘッダの例
携帯サイトを作る際に悩むことの多い、ヘッダの記述例を紹介しておきます。
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=shift_jis” />
<title>サイトタイトル</title>
</head>
|
