3キャリアに対応するためのコツ
ここからは前方互換と後方互換のどちらの方法を採用するかにかかわらず、単一ページで3キャリアに対応させるための共通のポイントを紹介します。
文字コードはShift_JIS
携帯用ページの文字コードは、Shift_JISが無難です。UTF-8やEUC-JPなどに対応している携帯端末も多くありますが、EZwebでサポートされている文字コードはShift-JISのみとなっています。
ファイルサイズに注意する
携帯端末は扱えるページサイズ(キャッシュ容量)に制限があります。第3世代の端末を対象とするなら、ファイルサイズは、文章や画像を含め、1ページ100KB以内を厳守しましょう。古い端末も考慮するなら、30KB以内を目安に抑えるのがベターです。
| キャリア | 世代 | ファイルサイズの目安 |
| NTTドコモ | mova | 10KB以内 |
| FOMA | 100KB以内 | |
| au by KDDI | Aシリーズ | 45KB以内 |
| Wシリーズ | 130KB以内 | |
| ソフトバンクモバイル | C型 | 6KB以内 |
| P型 | 12~30KB以内 | |
| 3GC型 | 300KB以内 |
画面サイズは横240px以内
携帯サイトでは、240pxという幅サイズが一つの基準となっています。携帯の端末自体が高解像度に対応していても、携帯ブラウザ使用時には横240ピクセルに合わせる端末が多くなっています。
なお、スクロールバーが表示された際、実際の画面領域より狭くなる端末があるので注意しましょう。このような端末でスクロールバーが表示されると、幅240ピクセルの画像は自動的に縮小して表示されます。幅240ピクセルで作ってもサイズ的には問題ありませんが、縮小化によって視認性が悪くならないよう配慮が必要です。
文字サイズ
携帯ブラウザの画面で、1行に収まる文字数は機種ごとに異なります。大、中、小などの文字の大きさの仕様もそれぞれです。詳細は各キャリアの仕様を確認していただくことになりますが、大体の目安としては、標準の文字サイズで1行につき全角10文字(半角で20文字)程度です。1行で表示できる文字サイズを越えると、自動的に折り返して表示されます。
画像フォーマットはGIFおよびJPEG
対応する画像フォーマットについても、機種ごとに異なりますが、iモードブラウザ1.0ではPNGやBMPをサポートしてません(iモードブラウザ2.0はGIF、JPEG、BMPに対応)。従って、イラスト系はGIF、写真系はJPEGを使用するのが無難です。
携帯サイトで使える絵文字の仕様
携帯の特徴である絵文字は、キャリアごとに種類や記述の仕方が異なるため、絵文字を含む場合に「静的な単一ページで3キャリアに対応する」ことは難しくなります。互換性については、au by KDDIの端末でiモード用の絵文字を表示できますが、その逆はできませんし、ソフトバンクは他のキャリアと互換性がありません。
| 絵文字\端末 | NTTドコモの端末 | au by KDDIの端末 | ソフトバンクモバイルの端末 |
| NTTドコモの絵文字 | ○ | ○ | × |
| au by KDDIの絵文字 | × | ○ | × |
| ソフトバンクモバイルの絵文字 | × | × | × |
従って、絵文字を含む場合には、NTTドコモとau by KDDI用のページ(NTTドコモを基準に作成)と、ソフトバンクモバイル用のページを用意し、ユーザーエージェントを利用してスクリプトでキャリア別に振り分けるなどの工夫が必要になります。ユーザーエージェントには、ドコモなら「DoCoMo」、au by KDDIなら「UP.Browser」、ソフトバンクなら「J-PHONE」「Vodafone」「SoftBank」という文字列が含まれているので、これらの文字列を取得することで携帯電話のキャリアを判別することができます。
NTTドコモの絵文字
NTTドコモの絵文字には、基本絵文字と後から追加された拡張絵文字があり、拡張絵文字はiモード対応HTML4.0以降に対応している機種で利用可能となっています。
絵文字の入力方法は、バイナリコード、Unicodeテキスト、Shift-JISテキスト入力の3種類ありますが、全機種に対応したい場合にはバイナリコード入力が適しています。
| 入力形式 | 対応絵文字 | 対応機種 |
| バイナリコード | 基本絵文字/拡張絵文字 | 全機種 |
| Unicodeテキスト | 基本絵文字/拡張絵文字 | iモード対応4.0以降の機種 |
| Shift-JISテキスト | 基本絵文字のみ | 非公開 |
バイナリコードを入力できるエディタが必要になりますが、NTTドコモでは、「i絵文字」という絵文字入力ソフトが用意されているので、これを利用すると良いでしょう。
au by KDDIの絵文字
au by KDDIの絵文字には、古い機種で対応している「Cタイプ」と、現在の多くの機種で対応している「Dタイプ」の2種類があります。端末によって表示できる絵文字数が異なりますが、古い機種の場合でも実装していない絵文字については、auが用意した「EZサーバ」からダウンロードして表示されるため、Dタイプの絵文字を使用しても問題ありません。
入力方法は、XHTML、MDML、Shift-JISバイナリコード、Unicodeテキスト入力の4種類あります。
| 入力形式 | 対応絵文字 | 対応機種 |
| XHTML | 図柄タイプC/D | 全機種 |
| HDML | 図柄タイプC/D | 全機種 |
| Shift-JISバイナリコード | 図柄タイプC/D | 全機種 |
| Unicodeテキスト | 図柄タイプC/D | 全機種 |
XHTMLによるページ制作の場合は次のように記述することで絵文字を挿入することができます。
<img localsrc="絵文字番号" />
ソフトバンクモバイルの絵文字
ソフトバンクモバイルの場合、NTTドコモの基本絵文字や拡張絵文字、au by KDDIの図柄タイプCや図柄タイプDのように、絵文字の区分はなく、1タイプとなっています(SoftBank 4-2 seriesを除く)。
絵文字の入力方法は、ウェブコード(バイナリコード)とUnicodeの2つですが、Unicodeでの入力は、S!アプリ(Yahoo!ケータイ対応携帯電話の一部で実行できるJavaアプリケーションおよびサービス)で絵文字を表示させたい場合に使用します。
ドコモのような絵文字ソフトは提供されていないので、MOBILE CREATIONで公開さている絵文字一覧から使いたい絵文字のコードをコピーして利用します。
まとめ
以上、3大キャリア対応の携帯ページの作り方として、前方互換、後方互換の2つの方法を紹介しました。
PC用のWebブラウザがCSSを正しく解釈することができるようになるまで、テーブルとCSSの両方を使ったハイブリッドレイアウトを採用する時期があったように、携帯サイト市場も、今まさにそのような過渡期にあるように思います。実際、スペーサーGIFの使用など、PCサイトでは使われなくなった手法が携帯サイトで使われていることも少なくありません。iモードブラウザ2.0が登場して1年も経過していませんから、iモードブラウザ1.0の仕様に合わせて、仕方なく後方互換で制作しているケースもあるでしょう。反対に、iモードブラウザ2.0や未来の端末に合わせて、前方互換で制作するケースもこれからは増えていくでしょう。過渡期にある今、そのどちらにも対応できるよう、2つの方法を紹介してみました。
次回は、多様なデバイス向けのページ制作その3として、Nintendo DSやPSPなどの携帯ゲーム機用ページの作り方を扱いたいと思います。
