余白でイメージを表現する。

Tweet

[`yahoo` not found]

Share on Tumblr

[`evernote` not found]

Pocket

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

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

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

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

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

余白の少ないレイアウト

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

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

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

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

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

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

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

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

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

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

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

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

余白でグルーピングする

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

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

視線を誘導する

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

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

参考書籍

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

Tweet

[`yahoo` not found]

Share on Tumblr

[`evernote` not found]

Pocket