WEBレイアウト　４つの原則

　WEBページは、レイアウト次第でユーザビリティ（使いやすさ）が大きく変化します。 基本的な４つの原則に従うことで、視覚的に関連付けられた分かりやすいページを作ることが可能になります。 この原則は、WEBに限らず印刷物などにも共通の大原則です。

近接の原則

　近接の原則とは、関係のある情報は近づけて配置し、関係のない情報は遠ざけて配置するという原則です。 また、類似した情報をグループ化することで、ユーザは直感的に関連性を理解します。 悪い例の様に、説明文を画像と画像の中央に配置した場合、ユーザはどちらの説明文なのか迷うことになります。

整列の原則

　グループ化された情報でも、配置がバラバラであればユーザは混乱します。 位置や大きさ、色などを揃えることで視覚的な調和が生み出されます。これが整列の原則です。 コンテンツを整列させる際には、見えない線を活用するといいでしょう。

対比の原則

　グループ化し揃えることに意味があるように、逆に揃えないことにも意味が生じます。 大きさや色で強弱をつけたり、文字であればフォントを変えることでメリハリをつけるのが対比の原則です。

反復の原則

　グループ化や整列、対比を繰り返すことでリズムが生まれ、調和のとれたデザインが出来上がります。 これが反復の原則です。 同じ様式を繰り返し使用することで、認識し易くなり、視覚的に整った印象になります。

　下の例は、コカコーラのキャンペーン一覧のページです。 左側にバナーを配置し、右側にタイトルと詳細説明が配置されています。 また、反復の原則だけでなく、他の原則も適用されているのがわかります。

2007年10月16日更新