東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

シンプルなデザインと余白の関係

2017.05.25 Posted by

シンプルなデザインと余白の関係みなさん、こんにちは。ウェブラボのデザイナーチームです。今月より、ウェブラボのスタッフブログに私たちデザイナーチームも加わることになりました。Webサイトのデザインに関することを中心に広くご紹介していきますので、どうぞよろしくお願いいたします。

今回は、シンプルなデザインと余白のもつ力についてのお話です。

シンプルなデザインはまだまだ人気

日頃ネットサーフィンをしていてお気づきの方も多いと思いますが、ファッションやメイクのように、Webサイトのデザインにもトレンドがあります。
ここ数年、Webデザインのトレンドに必ず挙げられているのは、白色をベースにしたシンプルなデザインです。黒やグレーと組み合わせることで美しい写真を生かした、モノトーンのWebサイトなども多くなりました。

そこで大切になるのが「余白」です。

余白の役割とは

余白と聞くと、どうしても「空いたスペース」「埋めるもの」というイメージが先行しがちです。
ジグソーパズルしかりテトリスしかり、、
空間があったらなんとなく、ちょうどいいものを置きたくなってしまいますよね。

しかし今回は、そこをなんとかぐっとこらえてください!使い方次第で、余白は様々な役割を担ってくれます。
シンプルになればなるほど余白のもたらすデザイン効果は大きくなっていくのです。

1. グループ分けをするための「余白」

まずは、コンテンツなどのグループ分けをするために使われる余白があります。
こちらの画像をご覧ください。白をベースにしたシンプルなWebサイトの例です。
※分かりやすくするために、一部分を拡大させてもらっています。

ドラマチック四街道プロジェクト
ドラマチック四街道プロジェクト

コンテンツの境目には線や枠がなく、色分けもされていないシンプルなデザインです。しかしそれでも、上下のコンテンツの境界線がなんとなく感じられますね。
これこそが、余白の持つ役割です。この余白を埋めてしまうと、まとまりのないごちゃっとしたWebサイトになってしまいます。

2. 品質の良さを出すための「余白」

また、余白はしばしば品質の良さをイメージさせるものとしての役割を担うこともあります。
こちらのWebサイトの画像をご覧ください。

これはどちらもWebサイトのメインに使われている画像部分ですが、商品ロゴやキャッチコピーが載っているだけのとてもシンプルなデザインです。
しかしゆったりとした余白をとっているため、穏やかで落ち着いた印象を受けます。また、装飾がないぶんロゴや文字が際立つのできりりと潔く見えます。自信が感じられますね。写真がある場合はそちらにも目がいくので、商品/会社の雰囲気がより伝わりやすくなります。

このような余白の使い方は、素材へのこだわりや品質の良さといったものをアピールしたいときには大変効果的です。

——

使い方次第でぐっと魅力的なデザインになる「余白」。
シンプルなデザインにしたいと思ったときには、装飾だけでなくぜひ余白にも注目してみてください。

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278