|
今回のポイント 主要コンテンツ領域を横幅固定で中央に置く コンテンツ領域左右の余白の処理の仕方 |
PCのモニター・ディスプレイは，ここ数年で液晶が標準となり，併せてワイド化が進んでいます。ワイド液晶ディスプレイが登場するまでPCの画面構成比は，一部のノートPCなどの小型端末を除いて，「横4対縦3（640*480）」～「横5対縦4（1024*768）」という比率でした。解像度は「XGA（1024*768）」を大多数の環境としていればよく，XGAベースで構成しておけば「SXGA（1280*1024）」でも特に問題はありませんでした。
一時期，「サイトデザインはSVGA（800*600）を意識しろ」と言われていましたが，現実問題としてSVGAはほぼなくなりました。2006年の時点でディスプレイ全体の出荷台数に占める液晶ディスプレイの比率は99.7％（電子情報技術産業協会の市場調査結果）です。SVGAまでしか表示できない液晶ディスプレイはほとんどありませんから，これが現在の「XGAを標準解像度環境としたページ・レイアウト」という考え方のベースになっています。
しかし最近では，横1680pxを表示できるワイド液晶ディスプレイが3万円を切る価格で売られ始めており，「8対5（WVGA系）」～「19対9（WXGA系）」という解像度のディスプレイが増加する傾向にあります。Webサイトは，いったん立ち上げると数年間は維持されるものですから，これから標準となっていくであろうワイド液晶を意識したサイト・デザインを考えておかなければなりません。
解像度混沌時代の到来
市場リサーチ各社が発表しているデータを見てみましょう。2006年には10％程度だったワイド・モニターは，2007年には総出荷台数の25％弱を占めるにいたりました（モニター製品単体の統計）。モニターとセットで販売されるメーカー製PCでは，ワイド液晶ディスプレイがほぼ標準でセットになっています。
ノートPCに至っては，2006年の段階ですでに，出荷台数の60%以上がワイド画面を搭載しています。こうした数字から考えると，PC全体に占めるノートPCの比率が高い日本では，現在稼働しているうち4割程度のPCがワイド画面であろうと考えられます。
実際のサイトの解析結果を見ながら，ワイド化の現状を見てみましょう（図1）。この解析はGoogle Analyticsを使った解析結果です。解析を開始してから日数が浅いため，数値や比率は参考程度に見てください。
 |
| 図1●あるサイトのアクセス解析の結果 [画像のクリックで拡大表示] |
まずSXGA（1280*1024）が圧倒的な比率であることがわかります。図で解像度の個所を赤の枠線で囲ってあるものがワイド系ですが，全体に占める割合は合計で30％程度です。先述のように，すでにSVGA（800*600）というレガシーな解像度環境からのアクセスはありません。
ワイド系の解像度はバラバラです。横サイズでは1280，1400，1440，1680，1920の5種類がありました。現時点の解析結果を見る限りは，ワイド解像度のスタンダード・サイズが特定のひとつのサイズ（例えば1280*800）に近々固まっていくということはなさそうに思えます。まさに解像度混沌時代の到来です。
Webサイトの開発者は閲覧者がどんな解像度のディスプレイでブラウザを開くのか本当に予測できません。自分はブラウザを全画面では開かないから（私のことですけど）といって，閲覧者も全員そうなんだとは言えないわけですね。このワイド化にどう対応していけばいいのか少し考えてみましょう。
ディスプレイの左右の余白をどうしようか
実例を交えつつ，解像度とサイト・デザインの関係について考察していきましょう。まず実際にアクセスが多いであろうサイトが，閲覧者のいろいろな解像度にどのように対応しているのかを見てみましょう。図2はコカコーラのサイトにあるページのひとつです。意図的に1280*1024（私のモニターは残念ながらワイドではありません）で表示しています。文中の縮小画像ではわかりにくいかと思いますので，できれば拡大画像を見てください。
 |
| 図2●コカコーラのサイトの商品紹介ページ（左右の青い線は筆者が入れた） [画像のクリックで拡大表示] |
 |
| 図3●左右背景に貼り付けられている画像。これを水平方向にリピートして本文部とシームレスに見せている [画像のクリックで拡大表示] |
主要コンテンツ部分を800pxのdivに入れ，左右には余白を付けておくというのは，多くの商用サイトが使っている手法です。主要コンテンツ部分を800pxに収めておけば800*600という解像度で見ても横スクロールが発生しません。800pxを超える解像度で見た場合には，左右に余白部分が出てくるという作りです。
図2のコカコーラのサイトでは，見た感じ，本文部分と左右の余白との区別が付かなくしてあります。これは余白となっている部分に，本文部の背景と同じものを背景画像として貼り付けてあるからです（図3）。図3は白っぽい背景画像をわかりやすくするために黒いバックの上に乗せてあります。グレー系の淡いグラデーションは，これでもちょっとわかりにくいかもしれません。この連載を読んできた方は，余白部に背景画像を置くのは特に難しいテクニックではないことはわかりますね。
コカコーラではこの背景画像を横方向のみにリピートして使っています。背景画像にあるグラデーションの下のほうは白くなっていて，これが背景ブロックの白と区別が付かなくなるので画像が水平方向にだけリピートしていることに気がつきにくいわけです。
主要コンテンツ部を中央に配置して左右に余白を作るという構造のレイアウトは，ページのメインである文章や写真を，閲覧者が左右に視線を大きく動かすことなく読めるという点でユーザー・フレンドリーです。このことは，ほぼ余白なしで構成されたページを見てみるとよくわかります。
サンプルとしてW3Cのリファレンス・ページを見てみましょう（図4）。
 |
| 図4●W3CのCSSリファレンスページ。フォントサイズを小さくして擬似的に1600px相当に見せている [画像のクリックで拡大表示] |
このページはページ左端に若干の余白がありますが，ほぼ全画面を使った自動折り返しで構成されています。技術文書ですから文字数が多く読みにくいのは当然として，全画面表示ではどうしても1行の文字数が極端に長くなり，読むときには視線を左から右に大きく動かし，行末でまた大きく左に視線を動かす必要が出てきます。英語の場合は単語ごとにスペースが入るので，ある程度の可読性を維持できますが，日本語は句読点以外にスペースがなく，1文字あたりの画数も多いため英語よりも可読性が落ちます（ただし日本語は文中の漢字のみをつまみ食いすることで流し読みでも文意は把握しやすいようです）。
サイト内リンクのようなメニュー配置も含めて，ユーザーの視線とマウスの移動量をいかに少なくするかは，ユーザー・インタフェース・デザインの分野で長い間研究され工夫と進化を続けています。コカコーラとW3Cでは対象とする読者が違いますから，同じ土俵の上で比べることはできせんが，業務でサイトを構築するようなケースでは，多くの場合，一般的なユーザーを対象としたサイトを作っていく必要があります。W3Cのページがそうだからと言って，「Webページは左端から右端までテキストがあって自動折り返しが基本なんだよ」という考えでレイアウトしてしまうと，発注主や閲覧者の同意は得られません。そして同意が得られなければビジネスとして成立しないわけです。
一般に商用サイトでは，W3Cのドキュメントのような文章量はありません。だからこそ余計に自動折り返しの“ナリ（なりゆき）”でデザインしてしまうと，スカスカ感が漂ってしまいます。小さな面積に文章をぎゅっと凝縮しすぎても文字の黒い塊で圧迫感が出てしまいますが，レイアウトが散漫になると手抜きデザインのようにも見えてしまいます。したがってメイン・コンテンツを800px程度の幅に入れてセンターに配置するという手法は，デザイン的に極めて理にかなっているというわけです。
divで真ん中に800px領域を確保する
例として挙げたコカコーラのように，本文部分を800pxで作るというのは閲覧者が多いサイトでは一般的な手法です。ただ，800px領域をテーブルで作るか，CSSを使ってdivで作るのかはサイトによってまちまちです。コカコーラのサイトではテーブルではなくdivを使ったCSS的アプローチを採用しています。
ここではdivで本文の横幅800pxの領域を確保したサンプルを作ってみることにします（リスト1）。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>本文ブロックを800pxで構成</title>
<style type="text/css">
/*全体をセンタリングするためのコンテナ*/
body {
/*説明のための背景色*/
background-color:#0000ff;
}
/*センターの800px部*/
.cont {
/*幅*/
width:800px;
/*左右余白を自動設定*/
margin-left:auto;
margin-right:auto;
/*解説のための境界線と背景色*/
border-style:solid;
border-width:1px;
border-color:#ff0000;
background-color:#ffffff;
}
/*テキスト部*/
.main{
padding:0px 3em 3em 3em;
}
</style>
</head>
<body>
<!--本文は適当な長さのテキストでかまいません-->
<div class="cont">
<div class="main">
<h1>大見出し</h1>
<p> このページはページ左端に若干の余白がありますが，ほぼ全画面を使った自動
折り返しで構成されています。技術文書ですから文字数が多く読みにくいのは当然として，
全画面ではどうしても1行の文字数が極端に長くなり，読むときには視線を左から右に大きく
動かし，行末でまた大きく左に視線を動かす必要が出てきます。記法上，英語の場合は単語
ごとにスペースが入るので，ある程度の可読性を維持できますが，日本語は句読点以外に
スペースがなく，1文字あたりの画数も多いため英語よりも可読性が落ちます（ただし日本語
は文中の漢字のみをつまみ食いすることで流し読みでも文意は把握しやすいです）。</p>
<h2>中見出し</h2>
<p> サイト内リンクのようなメニュー配置も含めて，ユーザーの視線とマウスの移動
量をいかに少なくしていくかは，アプリケーション・インタフェース・デザイン界で長い間
研究され工夫と進化を続けています。コカコーラとW3Cでは対象とする読者が違いますから，
同じ土俵の上で比べることが適切とはいえませんが，業務でサイトを構築するようなケース
では，多くの場合，ごくごく一般的なユーザーを対象としたサイトを作っていく必要があり
ますね。「HTMLというのは左端から右端までテキストがあって自動折り返しが基本なんだよ」
と固執した考えでレイアウトしてしまうと，中々対象とする閲覧者や発注主（この方たちは
ほとんどのケースで極めて一般ユーザーに近いか，一般ユーザーそのものです）の同意は得ら
れません。そして同意が得られなければビジネスとして成立しないわけです。</p>
<p> 一般に商用サイトではW3Cのドキュメントのような文章量はありません。だから
こそ余計に自動折り返しの”ナリ”でデザインしてしまうとスカスカ感が漂ってしまいます。
ぎゅっと小さな面積に文章を凝縮しすぎても文字の黒い塊で圧迫感が出てしまいますが，レイ
アウトが散漫にすぎると手抜きデザイン・サイトのようにも見えてしまいます。したがって
メイン・コンテンツを800px程度の幅に入れてセンターに配置するという手法は，デザイン的
に極めて理にかなっているというわけです。</p>
</div>
</div>
</body>
</html>リスト1のHTML文書をブラウザで開くと，真ん中に800pxの領域が確保されたページを確認できます（図5）。
 |
| 図5●リスト1のブラウザ表示。背景の白い部分が800pxの領域 [画像のクリックで拡大表示] |
800pxの領域がわかりやすいようにbodyの背景は青（#0000ff）に，また800pxの領域には赤い境界線を付けてあります。ブラウザを最大化しても白い部分の幅は800pxで変わりません。800pxを確保している部分は<div class="cont">としてスタイル指定しています。contのCSS設定は次のようになっています。
|
ブラウザの中央に指定幅の領域を表示するのは難しいことではありません。widthに幅指定をした後にmargin-leftプロパティとmargin-rightプロパティにautoを指定すると，余白部の幅は勝手に割り当てられます。margin-left/rightに特定の数値を指定してしまうと，たしかに真ん中は800pxで確保されるものの，800pxの部分が画面の左右中央にセンタリングされなくなってしまいます。
いろいろな知識が混ざってしまうと「センタリングはどうだっけ」「floatで並べるんだっけ」と迷ってしまいがちですが，text-align:centerのようなセンタリング処理は必要ありませんし，floatを使っているわけでもありません。境界線と背景色をほ除けば，実質3行でブラウザの真ん中に指定幅のブロックを出せるというわけです。
リスト1のコードでは<div class="cont">の中に<div class="main">というもうひとつのdivを含んでいます。今の段階ではmainクラスではpaddingの指定だけをしています。
|
どうしてcontに対して直接paddingを指定しないの？と思うかもしれませんが，試してみると答えがわかります。contに対してpadding指定をすると，たしかに境界線とテキストの間に指定した余白が入りますが，contそのものの幅が800pxではなく，「800px ＋ padding指定分」になってしまいます。
mainは，mainの親であるcontの中にあります。contは800pxと決まっているので，この中をサイドメニューやトップバナーなどで分割していっても，800pxという幅がしっかり固定されているのでレイアウトの間違いが少なくなります。
