デザイナーが忘れてはいけない「余白」のこと。 | 京都のWebサイト・ホームページ制作 - KACCO DESIGN STUDIO[カッコデザインスタジオ]

デザイナーが忘れてはいけない「余白」のこと。

デザイン 2020.01.10
デザイナーが忘れてはいけない「余白」のこと。

みなさんは余白についてどのくらい気にしていますか?
見ている人の心を引きつけるためには、シンプルなレイアウト作成。そこで注目されるのが、「余白」を効果的に使うことです。
今回はデザインするにあたって、大きな存在の「余白」についてお話していきます!

余白とは?

余白(margin)とは何も書かれていない空間、もしくは何も配置されていない空白部分のことをいいます。
根本的なところからですか、余白って名前に「余る」という字が入っているからといって余計なものと思っていませんか?
ちなみにデザイン業界では「ホワイトスペース」と言ったりもします。
余白は「置かれている」ものであって、意味があって存在しています。
デザイン上の余白とは、作る上で余ってできたスペースではなく、意識して作り出すものなのです!

余白の効果

余白を上手く活用すると、さまざまな効果を生み出すことができます。
コンセプトをデザインに落とし込むときには、余白の広さに注目します。

余白を広くとったデザイン

まずサイト全体として強く認識してもらいたいことがある場合などに多く使われるパターン。
キャッチコピーとメインの画像を画面いっぱいに使用し、伝えたいことが何かを明確にしています。
デメリットとしては、一画面での情報量が少ないので、伝えられることが少なくなることです。

情報量を多くして余白を狭くとったデザイン

ファーストビューで見られる情報量を多くし、何をやっているのかを明確に認識してもらう場合使われるパターン。
デメリットは、一画面の情報量が多く、メリハリが弱くなるため印象も弱くなりやすいことです。

余白を広めに取ればスタイリッシュでインパクトのある雰囲気を出しやすく、反対に余白を狭くすればカチッとした雰囲気を出しやすくなります。
そのコンセプトに沿って、何を伝えたいかを読み取り、適切な余白をおくことが大切です。

文字の余白

文字間が極端にせまかったり、行間にほとんどスペースがない文章は、それだけで読みにくくなります。
文字と文字の間、行と行の間の余白を適切にとることができれば、文章を読みやすくなります。
ユーザーはできるだけ早く、負担がなく、コンテンツを読みたいと思っているので、この文字と文字、行と行の間の余白は重要になります。
文字に関する意見としてよくあるのが、「文字が小さく読みにくいから大きくしてほしい」というものです。
もちろん本当に小さくて読みづらくなっている場合もありますが、文字を大きくすることで解決するかといったら必ずしもそうではありません。

たとえば、この文字のフォントサイズだけ大きくしてみます。

一文字一文字が大きくなりましたが、読みづらさが改善したかというと微妙な感じです。

そこで試したいのが文字間と行間の余白調整です。
CSSでいうとletter-spacingとline-heightですね。

このようになりました!

比較するとこんな感じ。
文字サイズを単純に大きくしなくても余白で読みづらさを改善することはできるので、サイズを大きくする前に試して欲しいです。

コンテンツの余白

情報を整理するためにも、余白は用いられます。
情報を分けるグルーピングと、伝えたい内容の優先順位を余白でわかりやすくするということです。
見てわかることをユーザーに考えさせないためにも、デザインであらかじめ整理しておくことが大切です。

このサンプルを見ると、全てが同じグルーピングになっているため、見ている人は必要な情報を選択するという工程が必要となります。
読んでほしい情報と、読まれなくても良い情報をしっかりとわけてデザインすることで、Webサイトの使いやすさ、見やすさにつながっていきます。

整理するこのようになります。
スッキリと見やすくなり、目を引くサムネイル画像とタイトルだけで、リンクを踏むかどうかの選択だけをしてもらえるような構造にしています。
見ている人が、必要な情報かいらない情報かを選択しなくても、すぐに次の段階の判断だけをしてもらえるようになります。
そのコンテンツがもつ役割を考え、デザイナーが整理してあげるのもデザインだと思います。

まとめ

いかがでしたか?
余白のとり方はデザインによって変わってくるので「これが正解!」というものはありませんが、
デザインを始めたばかりの方や、余白のとり方に迷っているという方の参考になればと思います。
みなさんも、余白のとり方を考えてデザインしてみてください!