素敵なデザインには必ず余白がある?「余白」を生かすWEBデザイン

デザインする上で余白は重要な要素の一つですが
「ここは目立たせよう」
「でもこっちも重要な情報なので目立たせたいし、キャッチコピーも大きく見せたい」
と、すべてを目立たせた結果、何も目立たなくなった経験はありませんか?

限られたスペースに情報を盛り込む紙のデザインに比べて
Webデザインでは余白を大きく置くというアプローチが可能なのですが
余白の扱いって本当に難しいですよね。

ただできてしまった余白は「空間」にすぎませんが
上手なデザインを見ると、余白は意味があって「置かれているもの」になります。
適切な情報量を渡すためにも、余白は上手に使っていきましょう。

【コンセプトのための余白、4つのパターン】

余白を広くとったパターン

1つのコピーと1つのビジュアルで構成させたページは
ビジュアルで伝えたいことが何かを明確にできます。

サイト全体としてまず強く認識してもらいたいことがある場合や
雰囲気から自分にマッチするかを感じてもらえます。

ただし、一画面での情報量が少ないので
必然的に伝えられることも少なくなるというデメリットがあります。

要素を増やして余白を狭めにしたパターン

一画面に表示する情報量を増やせますが、狭い余白のレイアウトになります。

ファーストビューで見られる情報量が多く
何をやっているのかを明確に認識してもらうことができます。

デメリットとしては全体的にメリハリが弱くなり、印象も弱くなることです。

フォントのための余白

フォントに関するフィードバックとして
「文字が小さくて読みづらいから大きくして」と言われることが多いです。

本当に小さくて読みづらくなっている場合もありますが
フォントを大きくすることで解決するかといったら、必ずしもそうではありません。

そこで試したいのがトラッキングと行間による余白調整。
CSSでいうと
letter-spacing

line-height
ですね。

フォントサイズを単純に大きくしなくても
余白で読みづらさを改善することはできるので
サイズを大きくする前に試すことをオススメします。

コンテンツのための余白

情報のグルーピングと優先度付けを余白で分かりやすくするということです。

  • 一覧でそもそもこんな読まない→本文冒頭部分要らない
  • 全体的にギチギチ→要素ごとのマージンを確保して違いを認識させる
  • 更新日は基本新しいものが上に表示されているもの→公開日の優先度下げる
  • カテゴリで選択するニーズもある→目立つ位置に共通で置いておける

例えば、目を引くアイキャッチとタイトル以外は余白で構成されたページを作り
興味があればリンク踏んで詳細ページへ進む、という具合に
読むかどうかの判断をさっさとさせる構造にすると
見るべきものと見なくても良いものを一目で判断でき
結果的にサイトがスッキリし、使いやすさにも繋がります。

※余白に関してはトレンドがあり、時代によって捉え方が違いますし
普及しているデバイスにもよります。

今回の記事で、うまく余白が置けるデザインを考える機会になれば幸いです。

最新情報をCheck!
>Webサイト制作の事なら何でもおまかせください!

Webサイト制作の事なら何でもおまかせください!

Webサイト制作をする楽しさや、お客様に喜ばれる嬉しさを知り、この仕事に専念したいと思いフリーランスになりました。些細なことでも、お気軽にお問い合わせください。ご相談だけでも可能です。

CTR IMG