Web技術実習
	戻る〔２２．バナー（バナー広告）とアニメーション〕　次へ〔２４．フレーム〕　目次

２３． レイアウト □□□□□□□□□□□□□□□□□□□□□□□□□□■□■■■

　Webページのレイアウト(layout)とは、文字や画像を配置することである。レイアウトするときには、見やすく、伝えたいことがはっきりわかるように気をつける。

23-1 画面サイズ

　「1-5 ディプレイの解像度」で学習したように、すべては点の集まりで表示されている。この点をドット（ピクセル）と呼ぶ。画面サイズはこのディスプレイの解像度のことである。
　画面のサイズは、1024×768以上の解像度が一般的であるが、古いコンピュータを使っているユーザのことも考えて800×600程度の画面サイズを想定して作成するとよい。

23-2 レイアウト

　これまで作成してきたWebページは「左寄せ」のレイアウトである。このほか、代表的なレイアウトを次に示す。

　分割した場合は、メニューと本文を合わせたレイアウトにするのが一般的である。分割しない場合は、メニューや次のWebページに進めるようにリンクを設定するのが一般的である。

レイアウトには、表を使うのが簡単である。基本的な表の設定を次に示す。 センター配置 　表《1行×1列》　表の属性《位置揃え(I)=中央揃え、表の幅(W)=640ピクセル、枠表示(D)=チェックなし》 左右二分割 　表《1行×2列》　表の属性《表の幅(W)=100%、枠表示(D)=チェックなし》　表の列の属性《1の列幅=35%、2の列幅=65%》 ※注意　幅や高さを"%"で設定した場合、Webブラウザの大きさによってレイアウトが変わるので、その点に対しての配慮が必要である。

　左：Yahoo Japan　　右：首相官邸　　右上：三菱東京UFJ銀行

23-3 視線の動線

　Webページなどを見るとき、見ていく順番を追ったものを視線の動線という。新聞などでは、見出しに視線を動かして興味のある見出しについては内容も読んでいく、あるいは、写真とそのコメントに視線を動かして興味のあるものについて内容も読んでいく、というように見る人によって変わる。一般的には、次の点に注意するとよい。

• 「左から右へ、上から下へ」視線が進むようにレイアウトする。
• 関連する情報をグループ化する。
• 視線の動線をできるだけ短くする。（あまり縦長にしない）

23-4 視覚効果

　視覚効果を計るため、次のような基準（尺度）がある。

(1) 視覚度

　見た目の強さのことである。文字の中に図や写真があると、図や写真は視覚的に強く目に入ってくる。文字だけの場合でも大きくするとその部分は視覚的に強く目に入ってくる。
 

(2) 図版率

　全体に占める図（イラスト・写真）と文章の面積比である。新聞の1面は文字の中に写真が配置され、図版率が高く見やすくなっている。逆に、新聞の株式欄は文字だけで図版率はゼロであるが、余白（スペース）や罫線で見やすくなるように工夫されている。
 

(3) ジャンプ率　

本文の文字サイズ（基準）と最も大きい見出し文字との大小比である。ジャンプ率を上げて、タイトルが目立つようにし、とばし読みができるようにすることで、全体の趣旨を理解してもらうことができる。また、画像についても同じことが言える。
 

(4) グリッド拘束率

　画面を等分した格子（グリッド）に合わせてレイアウトされている比率である。グリッドの間隔は内容によって変わってくる。
　HPBには「どこでも配置モード」があり、グリッドに関係なくレイアウトできるが、Web技術実習では「標準モード」で作成するので、グリッド率は100%である。
 

(5) 版面率

　Webページの内容（文字や画像）と余白との比率である。

23-5 操作性

(1) インターフェース

　何かと何かの間を仲介するもの。Webページではリンクなどユーザが操作するもののことである。
 

(2) ユーザビリティ

　「使いやすさ」のことである。いろいろなインターフェースに対してわかりやすく簡単に操作できることが良いユーザビリティということになる。
 

(3) アクセシビリティ

　どれくらい広い範囲の人に利用可能であるかを表す。特に、高齢者や障害者などハンディを持つ人にとって、どの程度利用しやすいかという意味で使われることが多い

インターフェース(interface)　ユーザビリティ(usability)　アクセシビリティ(accessibility)

戻る〔２２．バナー（バナー広告）とアニメーション〕　次へ〔２４．フレーム〕　目次
Web技術実習	Copyright © 2006,2007 Hiroshi Masuda