携帯サイト画面を作る時に気をつけること

携帯サイトとPCサイトの違い

　携帯サイトをデザインする上でまず考えるのがPCサイトとの違いです。「携帯は進化してきた」と言われるようになったとはいえ、PCとは全く別物で違うものとしてとらえた方が良いでしょう。マークアップの方法もキャリアごとに違うだけでなく、端末レベルでも違ってきます。

　携帯サイトとPCサイトの大きな違いは2つあります。

　1つはPCブラウザのようにバージョンアップができないことです。最新の機種がリリースされれば表現できる幅が増えるのですが、携帯サイトを多くの人に使ってもらうためには、古い機種にも対応しなければならず、そうなると古い機種でも表現することができる最大公約数のサイトを作らざるを得ません。

　携帯サイトの場合、キャリアごとや機種ごとで記述する方法も異なるので、それぞれに対応しなければなりません。基本的にプログラムを使わないと作成しにくい場面があり、PCサイトに比べてコストがかかるのも事実です。そのため携帯画面を作成する際はその特徴をとらえ、携帯サイトのプログラマーとも強く連携していくことが必要です。

　もう1つは、表示できる画面サイズの違いです。携帯の場合、横幅が非常に狭くなります。表現したいデータが増えると横ではなく縦に情報を並べていく必要があるので、縦に長いサイトでどうやって見やすく使いやすい画面にできるかを考えていく必要があります。携帯の場合、PCのようにカーソルが使えず、画面移動は上下キーが基本操作となります。画面の高さも狭いため、画面スクロールが発生するような縦に長いサイトでは、携帯のボタンに応じた場所に移動できる「アクセスキー」や「ページ内リンク」をつけることで使いやすいサイトになります。

　携帯サイトの画面を初めて作る際には戸惑うことが数多くあります。今回は携帯サイトを作る時に気をつける点を中心に紹介していきたいと思います。

携帯サイト画面を作る上での前提知識

　まず携帯サイトを作る時に、最初にやるべきことは「今回作成する携帯サイトの対象端末範囲」の決定です。キャリアや機種ごとに表現できることと、その表現の方法が異なるため、携帯画面を作る際には「どのキャリアに対応するのか」「どの機種に対応するのか」を決めておく必要があります。

　次に事前に知っておきたいのが、利用できる画像形式と容量です。PCの場合、JPEG／GIF／PNGなど好きなように利用できますが、携帯サイトは端末によって表示できる画像形式が異なります。画像作成する際にはどの画像形式で出力するのかを把握した上で作業を行う必要があります。

　そしてページ容量にも注意しなければなりません。携帯サイトでは表現できる容量が小さいため、注意しておかないと、すぐに容量オーバーになってしまいます。特に注意すべきはauで、最近の端末では画像を含めて100Kほどの容量で表現できるものの、テキスト部分は9KB以内が推奨されています。

　9KBはすぐに超えてしまいますので、テキスト部分をできる限りコンパクトにするなど工夫が必要になってきます。容量オーバーしてしまうと表示できないという残念な結果になってしまいます。特に動的に生成した文字を表示するサイトでは気をつけなければなりません。この辺りはプログラマーとも連携してどれくらいの文字や動的な文字が入り込む可能性があるのか聞いた上で画面設計をしていく必要があるでしょう。

　キャリア別携帯ブラウザの対応画像形式と容量についてまとめた図1をPDFとしてダウンロードできますので、参照ください（786_1.zip/47.6 KB）。