ウェブレイアウトの過剰なボックスやボーダーを取り除くスタディ

Post on:2010年7月26日

sponsors

ボックスやボーダーはウェブレイアウトでコンテンツを組み立てるためによく使用される便利なパーツです。
しかし手軽に使用すると、過剰になってしまうこともあります。そんな過剰になってしまったボックスやボーダーを取り除くスタディを紹介します。

下記は上記の記事を意訳したものです。

ウェブデザインにおいて、ボックスやボーダーはコンテンツを組み立てるためによく機能します。しかしながら、そのボックスやボーダーがある一点に過剰に集まってしまうことがあります。

上記のページでは、五つのボーダーが集まっています。

ページ下部のエリアをフルで見てみましょう。

上下に並んだ二つのコンテンツセクションが容器に内包されており、下のコンテンツセクションには「Helpful Tips」用にもう一つボックスが使用されています。

シンプルにボーダーで表現すると、下記のようになります。

これは情報を損なわないで、単純化することができると思います。
まず、外側の容器を取り除いてみます。これは上部のナビゲーションにつながっているボックスですが、取り除いても機能する方法があります。

次に「Helpful Tips」の周りのボックスを取り除いてみます。コンテンツセクション内には内容の異なる別のコンテンツがあります。これを分離するために、コンテンツセクションのボックスにボーダーを配置します。

この二つの変更を適用すると、下記のようになります。

シンプルなボーダーをはずしてみましょう。

容器のボックスを取り除き、コンテンツを分離するためにボーダーを配置しました。インターフェイスはより明るくなり、雑然とした感じがなくなりました。
ボーダーの代わりに、充分なホワイトスペースを使用してコンテンツを整理することもできます。