製品情報やオンラインマニュアルをウェブで提供する場合、そのコンテンツを提供するメーカーのドメインの中で「スペシャルコンテンツ」のような独立した体裁を取ることが多い。ここではそうした独立コンテンツで特に有効なレイアウトテクニックについて説明したい。
標準的な画面サイズを求める
ぺージ全体の構成を決めるにあたり、最初にしなければならないのは基準とするディスプレーサイズを決定することだ。サイズはターゲットとするユーザーが標準的に使用している大きさで決める。
ここ最近の標準的なディスプレーサイズは1024×768ピクセルだ。ここから表示に使用する領域のサイズ全体を割り出す。1024ピクセル幅の場合、960ピクセル程度がコンテンツの最大幅となる。最小限のディスプレーサイズは800×600ピクセルの解像度だが、こちらに合わせると表示に利用できる最大の幅は760ピクセル程度だ。
対応ユーザーの幅を広げる意図で一回り小さい800×600ピクセルのディスプレーサイズを採用する場合も考えられるが、この幅だと3カラムなど一覧性を確保するレイアウトパターンを採用するのは難しくなる。
また、レイアウトにあたっては幅だけでなく高さについても意識する。操作上重要な要素が標準的な表示領域に収まらないと、ユーザーは頻繁にスクロール操作しなければならず、結果的に使いにくいページになってしまう。内容的に重要な部分が表示から外れないようにすることも基本である。そのページの内容を示す見出しなどは、基準ディスプレーサイズ内に収まる位置に配置することを検討したい（図1）。
 |
| 図1●ターゲットユーザーのディスプレーサイズで表示したAnycall SCH-C210のヘルプページ。見出しと本文の1セットが1画面に収まり読みやすい [画像のクリックで拡大表示] |
読み物は余白が重要
ウェブページの場合、検索機能や表示速度など技術面に心を砕きがちだが、基本的には「読み物」なので、画面上読みやすく仕上げることは不可欠だ。読み物に重要なポイントは面積に余裕があり適度な余白が与えられていることだ。
ウェブページは画面上部にブラウザーのインターフェース群が表示される。この部分とコンテンツを視覚上切り離して読者の意識をコンテンツに集中させるため、画面の上部に十分な余白を設ける手段が取られる（図2）。
また、テキストの行間も読みやすさにつながる「余白テクニック」の1 つであろう。まとまった長さの文章では文字の大きさ以上に行間の量が読みやすさを左右する（図3 ）。文字のサイズが変われば行間も同時に変わるような実装方法を採用するなどし、適切なレイアウトを心がけたい。
 |
| 図2●Anycall SCH-201オンラインマニュアルも画面上部には余白を設けてコンテンツとブラウザーの区切りを明確にしている [画像のクリックで拡大表示] |
 |
| 図3●文字の読みやすさはサイズ以上に行間の設定が影響する。文字が大きくても行間が狭いと読みにくい |
用途に合わせて画面を区切る
 |
| 図4●スタンダードな「逆L字型」レイアウトパターン。読み物中心で機能が単純なページに向いている |
ぺージの切り替え操作に使うリンクテキストなどのメニュー群を配置する部分と、本文などの情報を配置する部分は適宜スタイルを分けて区別する。一般的な構成は画面上部のメニュー群にサブメニューを持たせる「逆L字型」のメニュー構成だ（図4）。
メニュー構成はコンテンツ全体で共通のサイズ設定を使い、トーン＆マナーを統一して一貫性を保つ。これは操作に慣れてもらうことが目的だ。ユーザーがあまりパソコンを日常的に使いこなしていないことも予想される場合、メニュー構成はできるだけ単純にする。提供するコンテンツが多く、ユーザーのリテラシーも高いと予想できるサイトの場合は、カラムを3つに区切るなどしてメニュー用のボックスを増やし、一覧性を強める方法も検討できる。
本文の表示個所を伸縮可能な状態に保ち、ブラウザーウィンドウのサイズ変更に伴って幅を変える「リキッドレイアウト」を採用する場合もある（図5）。リキッドレイアウトはポータルサイトなど記事本文の量が一定しない場合や、広告を臨機応変に挿入したい場合など、1画面に収める情報量が予測しにくい企画に使うスタイルだ。読みやすさ重視の製品情報の場合、1行あたりの文字数を固定したレイアウトが適している（図6）。
 |
 |
|
|
図5●3カラムで中央のボックスが可変のリキッドレイアウトを採用した例 NIKKEI NET http://markets.nikkei.co.jp/ [画像のクリックで拡大表示] |
図6●Anycall SCH-C210の用語集ページ。行の最大幅が一定で読みやすい [画像のクリックで拡大表示] |
