携帯画面の表示サイズについての考察
毎年50近くの機種が発売される携帯電話。季節が変わる度にキャリアの発表会があり、社内で話題になります。しかし、携帯電話が普及したのはここ10年ばかり。10年前の携帯電話といえば、表示画面はモノクロで、今では当たり前になっているメールやWebの機能もなく、電話機能しかありませんでした。今回のエントリーでは、そうした携帯電話の進歩の中で、表示サイズの変遷に関してまとめます。なお、本エントリーでは、表示領域の横に並ぶピクセル数を便宜上「表示サイズ」と呼んでいます。物理的な寸法のことではありませんのでご注意ください。
関連記事：
- Androidスマートフォンの壁紙サイズの法則が見えてきたぞ
- 画像をピッタリ横並び表示させるテクニック
- 携帯電話のユーザー識別情報まとめ
- [VGAとQVGA] 2倍の解像度の差が引き起こすデザイン崩れ part.1
ハードウェアの「液晶表示サイズ」
ここで「液晶表示サイズ」とは、携帯電話の液晶全画面に表示できるサイズ（ピクセル数）のことを指します。携帯電話の待ち受け画面に設定できる最大サイズと考えてもらえればよいと思います。今まで発売された携帯電話の「液晶表示サイズ（横）」をグラフ化してみました。
グラフを見ると、大きく4つのグループがあるということがわかります。
- 100px以下のグループ
- 120pxのグループ
- 240pxのグループ
- 480pxのグループ
これらのグループは発売された時期と関係しています。 例えば100px以下のグループは主に1999年～2000年にかけて発売されていて、モノクロの表示画面が中心でした。120pxのグループは2000年～2002年を中心に販売されていて、カラー表示が主流になってきた世代です。docomoの503iシリーズなどは、このグループに入ります。また、auのC4XXシリーズなどもこのグループです。大部分を占める240pxのグループは2003年～現在まで発売されています。docomoの505iシリーズなどが該当します。480pxのグループですが、2006年末にSoftBankを中心に販売が始まり、2007年末のdocomoの905iシリーズ以降、増えてきているグループです。
このように「液晶表示サイズ」は世代毎に統一されているようですが、なぜでしょう。携帯電話の液晶パネルはメーカーを問わず、共通のものを使っているのでは、と仮説を立てられないでしょうか。ハードウェアとしての液晶パネルは、メーカーを問わず、そのとき、そのときに流通・普及しているサイズを使っているため、こうした「液晶表示サイズ」のグループができていると私は考えました。
ソフトウェアの「ブラウザ表示サイズ」
今まで携帯電話の「液晶表示サイズ」について取り上げてきましたが、それとは別に、「ブラウザ表示サイズ」を考慮する必要があります。ここで「ブラウザ表示サイズ」とは、携帯電話に内蔵されているブラウザを利用した際にWebコンテンツの表示に利用できるサイズのことを意味します（今回、フルブラウザは除いて考えます）。docomoでは、iモードブラウザで表示できるサイズ、最近のauではWAP2.0ブラウザで表示できるサイズになります。この「ブラウザ表示サイズ」は「液晶表示サイズ」とは異なっています。「ブラウザ表示サイズ」を「液晶表示サイズ」と同様にグラフ化してみました。
「液晶表示サイズ」と「ブラウザ表示サイズ」で大きく異なるのは220px～240pxのサイズです。「液晶表示サイズ」では全て240pxのグループに収まっていましたが、「ブラウザ表示サイズ」では220px～240pxの間に分散しています。キャリア・機種によりますが、携帯電話のブラウザでは「液晶表示サイズ」を全て使うことができず、こうした事象が起きています。実際の携帯電話で確認してみましょう。
この携帯電話はauのW61Kで、弊社のKTOYというサイトを表示しています。W61Kのスペックはこうなっています。
- 液晶表示領域：240px×400px（横×縦）
- ブラウザ表示領域：232px×348px（横×縦）
赤色で囲った部分が、ブラウザの表示には利用できない液晶の領域です。横はスクロールバーの8px、縦は電池残量や電波状態、ブラウザメニューなどの52px、ブラウザ表示できる領域が小さくなっています。これはこの機種特有の事象ではありません。この機種毎のブラウザ表示サイズの違いこそ、携帯サイト開発者がサイト表示のデザインで頭を悩ます点です。こうした違いは、ハードウェアである「液晶表示サイズ」と異なり、ブラウザはソフトウェアで、各メーカーが比較的自由にデザインを決定できるためであると考えることができます。こうしたわずか1pxの違いにより、サイトによっては、意図しないスペースができる、といった事象が発生します。機種毎のブラウザ表示サイズの違いを明確化するために、220px～240pxにかけて、1px毎の機種数をグラフ化してみます。
グラフからわかるように、機種の数の違いはありますが、1px毎の各サイズに機種が存在します。240pxの機種数は196機種と他のサイズに比べて圧倒的に多いですが、これは505iシリーズ以降、docomoが販売している機種の大部分が240pxのブラウザを搭載しているためです（計149機種）。この範囲内でグルーピングしてみます。
- 220px～229pxのグループ
- 230px～239pxのグループ
- 240pxのグループ
上記のグルーピングで何ができるでしょうか？一例として、画像の出し分け区分として使えるのではないかと考えました。サイトを作成する上で、ロゴ画像などは、少しでも高品質で表示させたい部分です。しかし、高品質な画像は、機種によっては表示可能なファイルサイズの上限を超えるため、表示できないこともあります。例えば220px～229pxのグループに所属する機種からのアクセス時には、横サイズが220pxでファイルサイズが小さめの画像を用意し、表示する仕組みにすれば、機種に合った高品質な画像を表示できます。逆に240pxのグループは機種数も多いことから、このグループ専用の画像を用意・表示することで、よりサイトをきれいに見せることが可能になります。
最も多くのアクセスが予想されるページをきれいに見せることが可能になります。
これからの「ブラウザ表記サイズ」はどうなる？
これまで「液晶表示サイズ」と「ブラウザ表示サイズ」について説明してきました。では、これから表示領域はどうなっていくのでしょうか。携帯サイト開発を考える上で重要な「ブラウザ表示サイズ」と今までの携帯電話の発売日の分布図を作成しました。
この分布図からは「ブラウザ表示サイズ」が100px～120pxが中心であったころから、、240pxへ移行してきた過程を垣