余白はためらわず、思い切って入れる!

皆さんこんにちは。

今回は、WEBデザインにおける余白について書きたいと思います。

■余白とは

「余白(ホワイトスペース)」とは、WEBページ上で
何も要素が配置されていないスペースのことを指します。
画像と文字の間、見出しと文字の間、コンテンツとコンテンツの間など
余白はページ内のあらゆるところに存在し、
WEBデザインには不可欠で凄く重要な要素の1つとなっています。

では、どれくらい重要か見ていきましょう。

■余白の重要性

ユーザーにページやコンテンツを見てもらい関心をもってもらうためには、
いかに見やすくするかがポイントになります。

右と左のを比較してみてください。ぱっと見て右が見やすいですね。

左の方は、メニューボタンに圧迫感があり、サイドバーのカテゴリやその下に続く
バナーも上につまりすぎています。
テキストもがぎっしり詰っていて、読むのもイヤになってしまいます。
全体的に窮屈でギッチギチ感がありますね。

自分の場合、左のようなページが表示されたら、
「ウワ~、キッツ!」とか言いいながら、直ぐにページを閉じそうな気がします。(笑

それに比べ、右の方は、場所によって文字サイズを小さくしたり、
メニューボタンやカテゴリに高さを与えたり、上手く余白を取り入れています。
テキストの行間も広げて、ところどころ段落間隔も広くとることで、
区切りが分かりやすく、読みやすくなっていますね。

このように、余白には、ユーザーにページを見やすくさせたり、
読みやすくさせるといった裏方的な役割があります。

上手く余白を取り入れることで、ユーザーはコンテンツの
情報整理がしやすくなり、必然的に滞在時間が伸びてきます。
滞在時間が伸びれば、コンバージョン率の向上にもつながっていきますね。

今回は余白の重要性について少し触れてみました。
WEBデザインしているとき、毎回余白の間隔に悩ませれおりますが、
今後もうまく付き合っていこうと思います。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

何でもお気軽にお問い合せください。

お問い合せはこちら