レイアウトで統一感を出す

レイアウト技術の一つに「グルーピング」というものがある。それぞれ必要なもの関係あるものをまとめて"一塊"にすることによって、内容を直感的に理解しやすくするものだ。逆に位置揃えやそれぞれのグループの距離がありすぎると、それぞれのグループの関連性がつかみにくくなり、内容を把握しにくくなる。前述のRobin Williams氏の四大原則でいうところの"近接"という概念にあたる。Webの身近なところでは、本文の位置揃えと行間処理などでこれが具体的に現れてくるだろう。

位置揃えに気をつけて統一感を出す

テキストボックスやタイトルなど、それぞれのグループの位置揃えがバラバラだとWebサイト全体にまとまりなく、内容自体も読みにくくなる。図はトップのロゴとタイトル部分の行頭、そして、右サイドの位置揃えがバラバラだ。

図5　位置揃えのずれ

図5の位置揃えを統一したのが図6。簡単な位置揃えの調整ひとつで、かなり変化が出てくる。

図6　位置揃えを修正

行間をしっかり詰めて統一感を出す

タイトルと本文の間、本文内で過剰に開いた行間なども全体を淡泊にして、統一感のない形に。特に、本文で長い文章を挿入する場合は、改行部分のみ通常より間隔を広げると文章が纏まって見え、可読性も上がる。図7の左サイドメニューを見てみよう。メニューと下の説明文の間の行間が広がりすぎて、下に引かれたラインがなければ別のメニューと誤解されかねない。行間を修正したのが図8だ。可読性が上がり、読者の目線が迷いにくい。

図7　メニューと解説文の行間が広すぎる

図8　行間がしっかりつまりメニュー全体も引き締まった