[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

 

余白は、デザイナーらが「けっきょく、よはく。余白を活かしたデザインレイアウトの本」などの本を取り上げることから見られるように、余白を上手に使う事は、レイアウトする上で大切です。

ここでは、そんな余白の上手な使い方をごく簡単に説明します。

余白の大小で印象が決まる

エリア内にどれくらい余白があるかによって、見る者の印象は変わります。

デザインする目的やターゲット層に応じて、余白部分を調整し、レイアウトを決めて行く。

余白の少ないレイアウト




余白が少なく、レイアウト内に文字や写真が占める構成のレイアウト。

版面率の高いWebサイト:Yahoo!

余白の少ないレイアウトが与える印象

情報量が多いことが強調される。

余白の少ないレイアウトが適したデザイン

雑誌や新聞、ニュースブログなど情報量の多さを強調したい際のデザイン。

余白部分が大きいレイアウト

余白部分が大きい構成のレイアウト。

版面率の低いWebサイト

余白部分が大きいレイアウトが与える印象



上品で穏やかな印象を与える。

余白部分が大きいレイアウトが適したデザイン

高価な商品、高級感を持たせたいブランドのデザイン。

余白を活用したレイアウト

余白でグルーピングする

要素間の余白部分が小さく、要素が近接していると、ユーザーは、その要素らが、内容的に関係があるものとして受け取る。

逆に、要素間の余白部分が大きく、要素が離れた位置にあると、その要素らは、互いに無関係なものとして受け取る。

余白でグルーピング

視線を誘導する

余白による視線の誘導

余白は、また、視線を誘導させることができる。




デザインの整列の法則にも関わるが、要素を揃え、縦方向に余白を作ると、ユーザーに、縦方向への視線を導くことができる。

参考書籍

Webデザインとコーディングのきほんのきほん

 

(Visited 292 times, 1 visits today)
[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください