初心者向け講座早見表
前回のWeb系コラムでは、情報の関連性を余白の距離差で表現することで、読みやすく理解しやすいレイアウトが可能になるというお話をしました。今回は、WebページやWebサイト全体の見栄えのクオリティを上げる、基本的なデザインのルールについて説明したいと思います。
これまで見やすさをコントロールする、すっきりと見せるコツ、一目で理解できるレイアウトのコツと3つの見やすいページの作り方の基本的なデザインのコツについてお話ししてきました。
今回採り上げるテーマは「整列」です。整列もこれまでの3つのテーマと同様に、見栄えの良いWebサイトを作ろうと思った場合には重要な基本ルールとなります。
個々のパーツはとてもよくできているのにもかかわらず、全体を見ると残念ながら少し雑多な印象を受けるWebページを見たことがもしかするとあるかもしれません。あるいは、自分で作ったものがしっくりこないという違和感を感じる場合もあるかもしれません。このような際は、「整列」がうまく出来ていないことが理由の一つであることが多いのです。
「整列」とは、ページ上のビジュアル要素の位置が他のビジュアル要素と揃っている状態のことを意味します。整列を行う際は、実際に線などを引く必要はありません。ページ全体を構成しているイラストや文章に対して基準となる位置を決め、その位置に従ってレイアウトを行うことによって、ページ全体を体系的で整った印象とすることが可能です。
以下の例では文字が整列のルールに従って配置されています。
ここで整列されている要素は、文字の左端がページの縦方向の線によって揃えられている点と、グループ化された細字の文字の間隔が均等である点です。このように非常にシンプルなデザインにおいても整列のルールを使用することで、レイアウトのまとまりを強調してより体系的な印象を実現することが可能になります。従ってWebページのパーツを配置する際には整列のルールを意識することが大切です。
整列には基本的な形が4つあります。
・左揃え（上記例）
・右揃え
・中央揃え
・両端揃え
一般的にWebでは左端から右端へ視点が移動しやすい傾向があります。従って「左揃え」と「両端揃え」が読みやすい基本形だと言われています。「左揃え」では右端が不揃いになります。そこで左右の端を揃えた基本形が「両端揃え」です。「両端揃え」はあらゆる種類のWebページにおいて本文などに広く使用されます。文字においては上記の基本形をどれか1つに統一した方が、全体的にすっきりした印象になる傾向があります。一方でバナー画像やボタン画像などはその限りではなく、ビジュアル要素のバランスを考慮して基本形を複数組み合わせることもよくある方法です。
今回はWebページに整列のルールを使用することで、全体をより体系的に見せる方法についてお話をしました。Webページをデザインする際は、きちんと整列されたシンプルなレイアウトを心がけることで、読み手に対してメッセージや情報を的確に伝達することが可能となります。今後のWebページ作成・デザインの際にお役立ていただければ幸いです。
（担当：斉藤 万幾子）
