余白は、デザイナーらが「けっきょく、よはく。余白を活かしたデザインレイアウトの本」などの本を取り上げることから見られるように、余白を上手に使う事は、レイアウトする上で大切です。
ここでは、そんな余白の上手な使い方をごく簡単に説明します。
余白の大小で印象が決まる
エリア内にどれくらい余白があるかによって、見る者の印象は変わります。
デザインする目的やターゲット層に応じて、余白部分を調整し、レイアウトを決めて行く。
余白の少ないレイアウト
余白が少なく、レイアウト内に文字や写真が占める構成のレイアウト。
余白の少ないレイアウトが与える印象
情報量が多いことが強調される。
余白の少ないレイアウトが適したデザイン
雑誌や新聞、ニュースブログなど情報量の多さを強調したい際のデザイン。
余白部分が大きいレイアウト
余白部分が大きい構成のレイアウト。
余白部分が大きいレイアウトが与える印象
上品で穏やかな印象を与える。
余白部分が大きいレイアウトが適したデザイン
高価な商品、高級感を持たせたいブランドのデザイン。
余白を活用したレイアウト
余白でグルーピングする
要素間の余白部分が小さく、要素が近接していると、ユーザーは、その要素らが、内容的に関係があるものとして受け取る。
逆に、要素間の余白部分が大きく、要素が離れた位置にあると、その要素らは、互いに無関係なものとして受け取る。
視線を誘導する
余白は、また、視線を誘導させることができる。
デザインの整列の法則にも関わるが、要素を揃え、縦方向に余白を作ると、ユーザーに、縦方向への視線を導くことができる。
参考書籍
Webデザインとコーディングのきほんのきほん
この記事を読んだ人はこんな記事にもご興味があるかも
2019-01-29 [ CSS ] ナビゲーション固定し、スクロールしても動かないヘッダーを作成する方法![[ Webデザイン ] レイアウトの基礎知識](https://i0.wp.com/webdesign.ki-blog.biz/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/20.jpg?resize=150%2C150)
2018-12-14 [ Webデザイン ] レイアウトの基礎知識
2016-03-15 自宅の家賃、光熱費は、どこまで経費として認められるか
2016-10-05 HTMLタグ記述の基礎、基本![[-コーディング-]-ナビゲーション（グローバルメニュー）の作成法](https://i0.wp.com/webdesign.ki-blog.biz/files/%E3%82%B3%E3%83%BC%E3%83%86%E3%82%99%E3%82%A3%E3%83%B3%E3%82%AF%E3%82%99-%E3%83%8A%E3%83%92%E3%82%99%E3%82%B1%E3%82%99%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%EF%BC%88%E3%82%AF%E3%82%99%E3%83%AD%E3%83%BC%E3%83%8F%E3%82%99%E3%83%AB%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%EF%BC%89%E3%81%AE%E4%BD%9C%E6%88%90%E6%B3%95-2.png?resize=150%2C150)
2020-03-19 [ コーディング ] ナビゲーション（グローバルナビゲーション）の作成法
2016-12-11 モックアップから画像を最適化、切り出す２つの方法
(Visited 389 times, 1 visits today)