デザインにおいて各要素間の色のコントラストや空き（スペーシング）を間違えると、読者にとって読みにくいだけではなく、場合によっては誤認させ不利益を与えてしまう。いわゆるBad UIである。実際の例を通して色のコントラストと空きの改善点を説明する。これはWEBサイトだけでなく、チラシやパンフレット、書籍など文章を扱うデザインに共通の問題だ。
誤認させてしまうレイアウト
先日、ある企業の情報サイトを見ていて非常に分かり難く感じたページがあった。
以下の画像はそのページを再現したものである。
情報をタイル状に並べて詳細はリンク先にある。多くの情報を扱うサイトによくあるレイアウト。このように全体を縮小して俯瞰で見ることができれば、どこに問題があるのか分かり難い。実際にモニターに表示される等倍での画像が以下になる。
この表示を見て、例えば「きれいな花の画像-D」という見出しはその直上にある「オレンジ色の花の画像」の見出しだと分かるだろう。そして「きれいな花の画像-D」 の要約された説明はその直下にある文章であることも分かる。
では 「きれいな花の画像-D」 の「詳細を見る」ボタンは、「オレンジ色の花の画像」の上にあるものか、下にあるものか、どちらだろうか。
「詳細を見る」ボタンが上の画像のものなのか、下の画像のものなのか誤認させてしまう理由は、各要素のグルーピングが曖昧なことにある。ボタンがどちらのグループに属しているか分からない。これは各タイルごとのグルーピングが不明確なために起こるのだ。
色のコントラストの問題
まずWEBサイトのボディ背景色（バックグラウンドカラー）と、その上に載る各タイルの背景色のコントラストが低く曖昧だ。ボディの背景色は#F9F9F9で、タイルの背景色は#FFFFFF。「詳細を見る」ボタンの上には、Solid 1px #E2E2E2 の直線（ボーダー）が引いてある。
これではタイルの境界が曖昧で、各タイルがどこで区切られているのか良く見ないと分からない。またタイルという一つのグループの中に、ボディの背景色より濃い#E2E2E2の直線が引いてあるのがより混乱を起こしている。この直線にはボタンをタイルのグループから分離する効果がある。要するにタイルとボタンは別のグループに見えてしまう。
改善 ━ 色のコントラストを高くし、余計な区切り線は削除する
色のコントラストによる改善の例としては、WEBサイトのボディー背景色を#CCCCCCなどより濃い色にして、タイルの背景色とのコントラストを高くする。また区切り線は削除する。この場合意味のない飾りは必要ない。
改善した例が上図だが、各タイルのグルーピングが明確になり、これなら「詳細を見る」ボタンが、どの要素に掛かっているのかを誤ることがない。
もしどうしても区切り線を引きたいというのであれば、ボディ背景色よりも薄い色にしなけばならない。
上図は元の区切り線（#E2E2E2）を引いた例。ボディの背景色#CCCCCCより薄いのでグループは明確になっている。
空き（スペーシング）の問題
コントラストとは別の見方をすると、空き（スペーシング）が適切でないことが挙げられる。
該当サイトを見ると、【きれいな花の画像-E】のように見出しは1行と2行の場合があり、その下の説明文には、4行と5行の場合がある。このような場合は、最大文字数を考慮してデザインする必要がある。
ボディ背景色（#F9F9F9）とタイルの背景色（#FFFFFF）のコントラストが低いため、花の画像はその上にあるボタンに関連付けられてしまう。本来は説明文の下にあるボタンに関連付けられるはずだが、BよりもAの方が、画像+見出し+説明文のグループにより近いためこのような誤認が起こってしまう。ボタンの上にある区切り線（#E2E2E2）が、より画像+見出し+説明文とボタンの関係を断絶させてしまっている。
改善 ━ 関係性を強めるために空きを少なくする
上図のBのような無駄な空きは、説明文の文字数を多く見積もり過ぎたためと推測される。実際は見出し2行、説明文5行が最大となっているので、この最大行数に合わせれば良い。
上図、要素間の空きがC≧Dとなるように空きを調整する。これで画像、見出し、説明文の関係性が強まり適切にグルーピングされた。
その他 罫線による最も簡単な改善方法
それ以外で最も簡単な改善方法は、タイルに囲み罫を引くことだ。下図の例では solid 1px #B2B2B2 のボーダーでタイルを囲んだ。
囲み罫を引けば、コントラストも空きも関係なくグルーピングできる。ただし、罫で囲むのには制作するWEBサイトのデザイン方針などを考慮する必要がある。このWEBサイトの場合は、他のUIパーツを罫線で囲むようなことはしていないので、引かない方が適切であろう。
誤認させないために、適切なコントラストや空きを考える
レイアウトをする場合、各要素の関係性は色のコントラストや空きで決まる。特に注意したいのが空きだ。WEBサイトやチラシでも空きが考慮されておらず、このキャッチはどの文章にかかるのか、この図版はどのキャッチにかかるのか不明確なレイアウトを良く見かける。不適切なレイアウトは、読者を混乱させ、ひどい場合には読者に不利益を与えてしまうことさえある。情報を整理し、読者に最適な状態で図版や文章を認識させることが目的の商業デザイナーは、軽視してはいけない重要な点である。
