複数の画面解像度にどう対応するべきか
一方でパソコンの画面解像度が高くなり、他方で小さな画面しか持たない携帯電話がフルブラウザを備えるなか、ウェブマスターはどのようにサイトをデザインすればよいのでしょうか。現時点でベストと思える案を提示します。
1. PCでの画面解像度
ウェブアクセス解析調査をおこなっているオランダの OneStat.com によると、インターネットユーザーが最も多く利用している画面解像度は1024×768（ピクセル）とのことです。
| 順位 | 解像度 | 割合 |
|---|---|---|
| 1. | 1024×768 | 54.02% |
| 2. | 800×600 | 24.66% |
| 3. | 1280×1024 | 14.1% |
| 4. | 1152×864 | 4% |
| 5. | 640×480 | 0.6% |
| 6. | 1600×1200 | 0.8% |
| 7. | 1152×870 | 0.1% |
画面解像度は、パソコンのスペックが高くなるほど大きくなる傾向があり、日本での1024×768のシェアは、世界でのそれよりもさらに高いようです [Web資料館-画面解像度のシェア調査] 。
2. 携帯での画面解像度
現在、携帯でPC用ウェブサイトを閲覧することが徐々に普及しています。
携帯電話用アプリケーションの開発・販売を行うjig.jpは3月4日、専用アプリケーションをインストールすることなく、携帯電話機からPC用ウェブサイトを見られるサービス「jigブラウザWEB」を開始したと発表した。NTTドコモ、KDDIのau、ボーダフォンの3キャリアに対応する。
携帯端末では、QVGA（Quarter VGA）と呼ばれる、VGA（640×480）の1/4の解像度を持つ320×240の解像度が主流でした。しかし、フルブラウザを備えて、通常のウェブサイトをブラウズするには、これでは小さすぎます。
KDDIは、2004年10月13日に、2.6インチサイズのワイドQVGA液晶（240×400ピクセル）を搭載し、PC向けのウェブページを閲覧することができる「W21CA」（カシオ計算機製）を発表しました。
しかし、これでもまだ不十分なので、端末開発メーカーは、画像解像度をさらに上げようと努力しているようです。特に、サムスン電子は、同じ月の22日に、2.4インチ以下の携帯電話用超小型TFT-LCDパネルの解像度をVGA級に大幅向上させことに成功したと発表しました。
サムスン電子は来年第2四半期にこの製品を量産開始、後に高解像度を必要とする先端携帯電話製品への適用を拡大していく計画です。
パナソニックは、「折りたたみと回転の融合」
[Mobile：折りたたみと回転の融合～「P505iS」] をすすめ、ディスプレイを90度回転してでロックする「Newビューアスタイル」をP506iCに導入しています。ウェブページの閲覧には、横長のディスプレイの方が向いています。
通信速度や料金など、課題は多いものの、今後、640×480の解像度で携帯端末からウェッブページを閲覧する人が増えると予想されます。
3. サイトのデザインはどうするべきか
Movable Type 3.x でのコンテンツの表示エリアは、デフォルトでは、700ピクセルの幅で表示されていますが、現在PCで主流の画面解像度が1024×768であることを考えると、700ピクセルという幅は狭すぎます。
しかし、RSSリーダーなどで、サイドバーを使っている場合は、1024×768でも、実質的には幅が800ピクセルになります。小さな文字を見ることが苦痛という高齢者は、今後も800×600を使い続けるでしょうから、800×600も無視できません。
そして、携帯端末からウェブにアクセスする人が今後増えることを考えると、少なくとも本文は、640ピクセル以内の幅に収める必要があります。
パーセント表示で、あらゆる画像解析度に対応するという方法もありますが、それだと、レイアウトが予想困難となり、画像や表の大きさを決めるのに苦労するので、あくまでも、ピクセル単位でレイアウトを決めたいと思います。
私が提案するのは、左から順に
本文（640px）+ 左サイドバー（160px）+ 右サイドバー（224px）
と三つカラムを並べる方法です。このデザインなら、640×480だと本文だけ、800×600なら、左サイドバーまで、1024×768以上なら、すべてのコンテンツを見ることができます。
実際の数字を決める時には、縦スクロールの幅を除くなど、微調節が必要です。私は、CSSでは次のように数値を決めています。結果は、ご覧のとおりのものです。
body {
margin: 0px;
padding: 0px;
}
#container {
margin: 0px;
padding: 0px;
width: 1000px;
}
#center {
margin: 0px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 20px;
float: left;
width: 618px;
overflow: visible;
}
.content {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 20px;
}
#left {
margin: 0px;
padding-top: 0px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
width: 120px;
float: left;
overflow: visible;
}
#right {
margin: 0px;
padding-top: 0px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
width: 180px;
float: left;
overflow: visible;
}
.sidebar {
margin-top: 0px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
padding: 0px;
}
#container の幅は、#center，#left，#right の幅とマージン（そして、なぜだかパディング）の幅の合計に2ピクセルを足した値となります。それ以下だと、カラムが回り込まなくなってしまいます。"overflow"は、デフォルトでは、"hidden"となっていますが、これだとFirefoxで、幅の値が狂うので、"visible"にしておきましょう。
