X
  1. TOP
  2. 余白とテイスト
今週のgoodNews余白とテイスト
2024.10.03

余白とテイスト

はじめに-余白の持つ効果-

こんにちは!スピカデザインでデザイナーをしている木村です!

突然ですが、皆さんは普段サイトを見るときに余白に着目していますでしょうか!? デザインにおける余白は、単なる空白ではなく、デザイン全体の雰囲気や印象を大きく左右する重要な要素となっています。

余白を効果的に活用することで、視覚的な整理、情報の伝達、そしてデザイン全体の印象を大きく左右することができます。

なので、今回はこれらを実例を交えて分析していきたいと思います!

高級なデザイン

https://joen-ji.or.jp

こちらは、青森県にあるお寺のサイトです。 文字のサイズが小さかったり、それぞれの間やボタンにたっぷりと余白が設けられることによってゆとりある高級感が表現されています。 また文字は大きさの変化(ジャンプ率)がつけられていないことが多く見受けられました。

このことから高級なデザインには

  • 文字が小さい
  • ジャンプ率が低い
  • 余白はたっぷりと取っている(おおよそコンテンツ間は200px以上取っている)

ということがわかりました! 余白を多く使うと、空間に“余裕”が生まれ、開放感や洗練さ、スマートさを与えることができ、そこが高級感につながっているのではないでしょうか?

ポップなデザイン

https://network.mobile.rakuten.co.jp/ad/reportcard/

こちらは携帯会社のLP(ランディングページ)です。 ところ狭しと要素が並べられていて、空いた余白にはイラストを置くなど賑やかな印象が見受けられます。 また文字はウェイトの太いものが使用されていて、そこも余白が狭く感じるの要因だと考えられます。

https://gatturi-datte-healthy.bulldog.co.jp/

こちらはソースを使った料理の魅力を伝えるためのLP(ランディングページ)です。

入ってすぐFVからもわかる通りアニメーションが豊富で色々なところに散りばめられた料理や文字がちゃかちゃかと動いていて見ていて楽しさを感じさせます。 またこのサイトには塗りが多く使われていてそれも相まって、余白の狭い賑やかな様子が表現されています。

このことからポップなデザインには

  • 文字が太い
  • ジャンプ率が高い
  • 余白は狭くなっている(余白が50px以下の箇所が多い)

ということがわかりました! 所狭しと要素を並べることによって、デザインの賑やかさを調整し、各要素を際立たせることで、デザイン全体のバランスを取り、視覚的な訴求力を高めることができ、そこがポップな印象につながっているのではないでしょうか?

まとめ

いかがでしたでしょうか?

もちろん紹介したものが全てではないですが、余白の持つ魅力に皆さん気づいたのではないでしょうか……!?

余白が与える印象はデザインのテイストを大きく左右する重要な要素です。

余白の量、配置、形状を意識的に使い分けることで、より効果的なデザインを作成することができるので皆さんも参考にしてみてください!

ご覧いただきありがとうございました〜!🙌

この記事をシェアする

関連記事

おすすめ記事

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

© 2020 spiqa design

×