携帯サイト開発で考慮すること
PCサイトの作成経験者が初めて携帯サイトを作るときには，どのような所に違いがあるのかをまず認識しなければなりません。PCサイトの場合ブラウザの数も限られており，またそれぞれの動作も大きくは異なりませんが，携帯サイトではキャリアはもちろん機種ごとにも動きが変わってきてしまいます。そして携帯サイトはPCと違い，ブラウザのバージョンアップができません。そのため広く使ってもらうサイトを作るには古い機種にも対応しなければならず，多種多様な仕様の端末を想定して開発をしていく必要があります。そのため開発の前にどのような点に気をつけなければならないかをきちんと認識しておく必要があります。
携帯サイトの開発において，最初のポイントは「携帯端末で画面を正しく表示すること」です。PCサイトと同じように携帯サイトを作成すると，画像が表示されなかったり，画面レイアウトが崩れたりといった現象が起こってしまいます。まずは携帯サイトを正しく表示することから始めてみましょう。
サイトを作る前の前提知識
携帯サイトを作る前にまず気をつけるポイントを見ていきましょう。1つめが「画像の形式」です。PCサイトの場合，gif，jpg，pngといったさまざまな画像形式が利用できますが，携帯サイトは機種によってjpgやgifが利用できないといったことがあります。事前にきちんとチェックしておく必要があります。
表1-1 携帯ブラウザの対応画像形式と容量（docomo）
| 種類 | 対応端末 | ページ容量 | 画像形式 | ||||
|---|---|---|---|---|---|---|---|
| GIF | JPEG | PNG | MNG | BMP | i-mode対応HTML1.0 | MOVA 501iシリーズ | 5KB（画像含む） | *1 | ─ | ─ | ─ | ─ | i-mode対応HTML2.0 | MOVA 502iシリーズなど | 標準モード：5KB（画像含む） 拡張モード：10KB（画像含む） |
○ | ─ | ─ | ─ | ─ |
| i-mode対応HTML3.0 | MOVA 503iシリーズなど FOMA 2001／2002／2101V |
MOVA：10KB（画像含む） FOMA：100KB（画像含む） 30KB（画像を除く） |
○ | *2 | ─ | ─ | ─ |
| i-mode対応HTML4.0 | MOVA 504iシリーズなど FOMA 2051／2102V／2701 |
MOVA：10KB（画像含む） FOMA：100KB（画像含む） 30KB（画像を除く） |
○ | ○ | ─ | ─ | ─ |
| i-mode対応HTML5.0 | MOVA 505i, 506iシリーズなど FOMA 900i, 901iシリーズなど |
MOVA：20KB（一部10K/画像含む） FOMA：100KB（画像含む） 30KB（画像を除く） | ○ | ○ | ─ | ─ | ─ |
| i-mode対応HTML6.0 | FOMA 902iシリーズなど | FOMA：100KB（画像含む） 30KB（画像を除く） | ○ | ○ | ─ | ─ | ─ |
| i-mode対応HTML7.0 | FOMA 903i, 904iシリーズなど | FOMA:100KB（画像含む） 30KB（テキスト） | ○ | ○ | ─ | ─ | ─ |
| i-mode対応HTML7.1 | FOMA 905iシリーズなど | FOMA：100KB（画像含む） 30KB（テキスト） | ○ | ○ | ─ | ─ | ─ |
| i-mode対応HTML7.2 | FOMA 906iシリーズなど | FOMA：100KB（画像含む） 30KB（テキスト） | ○ | ○ | ─ | ─ | ─ |
*1 ノンインターレースのみ
*2 FOMAと一部MOVA端末のみ対応
表1-2 携帯ブラウザの対応画像形式と容量（au）
| 種類 | 対応端末 | ページ容量 | 画像形式 | ||||
|---|---|---|---|---|---|---|---|
| GIF | JPEG | PNG | MNG | BMP | HDMLブラウザ搭載端末 | A1000／C1000／C400／C300／C200シリーズ | モノクロ機種：1.2KB以内推奨（画像含め） カラー機種：7.5KB以内推奨（画像含め）*1 |
○ | *2 | ○ | ─ | ─ | WAP2.0ブラウザ搭載端末 | HDMLブラウザ搭載端末以外すべて | 9KB推奨（画像含め）*3 | ○ | ○ | ○ | ─ | ○ |
*1 テキスト部分は1.2KB以内推奨
*2 一部対応
*3 ・画像を含めた実際のサイズは各端末ごとに違います
・WIN端末は一部を除き約130KBまで表示できます
・ただしテキスト部分は9KB以内推奨です
表1-3 携帯ブラウザの対応画像形式と容量（SoftBank）
| 種類 | 端末発売時期 | ページ容量 | 画像形式 | ||||
|---|---|---|---|---|---|---|---|
| GIF | JPEG | PNG | MNG | BMP | C型 | 2000～2006年頃 | 6KB（画像含む） | ─ | ○ | ○ | ─ | ─ | P型 | 2002～2006年頃 | P4, P5型：12KB（画像含む） P6, P7型：30KB（画像含む） |
─ | ○ | ○ | ○ | ─ | W型 | 2003～2004年 | 200KB（画像含む） | ○ | ○ | ○ | ○ | ─ | 3GC型 | 2004年以降 | 300KB（画像含む） | ○ | ○ | ○ | ○ | ─ |
各端末の表示幅や高さにも注意が必要です。現在発売されている端末では横幅240pxが多いですが，中には横幅120px程度の物や，はたまた480pxのものもあります。1つの画像を同じように画面に出していたのでは表示されなかったり，画面に対して小さくしか表示されなかったりします。そのため対応している画面サイズはもちろん，容量なども合せて，各端末ごとにプログラムで調整して出力するなどの工夫が必要になります。
次に気をつけるポイントは「画面の記述方法」についてです。画面を表現するために用いる記述方法を最初の段階で決定しておく必要があります。携帯端末はそれぞれに応じて記述方法がいくつかあり，HDML，CHTML，MML，HTML，XHTMLなど混在している状況です。そのため作りたい画面のレイアウトなどを考慮に入れマークアップする言語を決定する必要があります。
3つ目はページ容量です。携帯サイトは表示できる容量が小さいため，気をつけていないとすぐにサイズオーバーしてしまいます。最近発売されている端末では1ページ当たり100Kほど使えるようになってきており安心ですが，古い端末の場合そこまでの容量を利用することはできません。またau機の端末では，1ページあたり100Kといえど，テキスト部分は9Kまでにするといった縛りがあります。そのため画像を抜いたテキストの部分で考えた場合，かなりスリムに書かないと「表示できません。」と行ったエラーになってしまいます。
まずはこれらのことを考慮に入れれば，簡単な携帯サイトを作れることになります。逆に言えば「必要最低限のHTMLタグしか使わない」「小さい容量しか作らない」「見られない端末は切り捨てる」くらいのサイトであれば，特に意識する必要もなく，PCサイトと同じような感覚で作ってもよいと言うことになります。
次はHTMLとXHTMLの違いについてみていくことにしましょう。
