グーグルアドセンスの使い方(GoogleAdSense)

3キャリア共通携帯サイト作り方

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」を使用して携帯サイトということをしっかりとアピールしておくと良いでしょう。

ヘッダの例

携帯サイトを作る際に悩むことの多い、ヘッダの記述例を紹介しておきます。