2024.01.09
この記事を書いた人
PENGIN LLC.
Webデザインを作成しているけど、「余白をどのように取れば良いんだろう」と悩んでいませんか？
この記事では、「余白の取り方」を解説し、デザインの特徴に合わせた余白の取り方もご紹介します。
余白の効果や、どこを意識すれば良いのかを理解し、よりクオリティの高いWebデザインを制作していきましょう！
余白とは
余白とは、画像や文字など、何も置かれていない空間のことを指します。
これだけを聞くと、余白って必要なの？と思ってしまうのですが、余白があるとないとでは、Webデザインが大きく変わってきます。
例として、こちらの画像をみてください。「見やすい」「わかりやすい」と感じるのはどちらでしょうか？
左だと図形やテキストが1つにまとまって見えていますが、右は余白が取れていることで、それぞれの図形やテキストが認識しやすくなったかと思います。
このように余白を取ることは、コンテンツの読みやすさや見栄えの良さ、注目してほしい情報をユーザーに認識してもらうことができる、とても重要な要素なんです！
Webデザインの余白を綺麗に見せるポイント
では実際に、余白の取り方について見てみましょう！
また、以前の記事でも余白の取り方について記載しているので、こちらも参考にしてみてください♪
Webデザインで同じ余白を繰り返す
Webデザインで余白を取る際は、同じ幅を繰り返し使うようにしてみましょう。繰り返して使用することで余白にリズムが生まれ、読みやすいデザインにすることができます。
こちらのデザインでも、セクション間の幅を同じサイズにしています。
Webデザインで余白を大きめにとる場合
Webデザインの中で、「高級感を出したい場合」と「要素を目立たせたい場合」は、余白を多めに取るようにします。
■高級感を出したい場合
こちらのジュエリー販売サイトでは、セクション間や行間など多めに余白を取ることで、上品さや高級感が出ています。
■要素を目立たせたい場合
要素を目立たせたい場合も、余白は効果抜群です！甑島（こしきしま）のサイトでは、1番ユーザーに伝えたい「島の魅力」を目立たせるため、行間や写真の周囲などの余白を多く取ることで写真を強調しています。
Webデザインで余白を小さめにとる場合
上記とは反対に、余白を小さめに取ると楽しい雰囲気を出すことが可能です。
こちらの幼稚園のサイトでは、余白を小さく取り、イラストや写真を全体に入れることで、ワクワク感や楽しさが伝わるデザインになっています。
Webデザインのテキスト間の余白
これまでは、サイト全体の余白について見てきましたが、テキストについても階層を分けて余白を作ることが大切です。
こちらの画像では、余白ありと余白なし、どちらが見やすいでしょうか？
余白ありの方が、フォームのボタンが認識しやすくなったり、タイトルと本文の差がわかるようになったかと思います。
このように、テキストで余白を取るときも、必ず、階層やまとまりを意識して取り入れるようにしましょう！
Webデザインの余白は、8の倍数を使用する
では、実際に余白を取るときの大きさですが、「8の倍数」で取ることをオススメします！
なぜ「8の倍数」なのかというと、一般的に使用されているスクリーンの解像度が8の倍数であることが多いからです。8の倍数でデザインを制作しておくことで、解像度が異なるスクリーンでも同じように表示することが可能となります。
また、8の倍数で数字を統一しておくと、後から修正した場合でも割合を変えれば端数が出なくなり、何より統一感のあるデザインを制作することができます！
まとめ
今回は、Webデザインにおける「余白の取り方」についてご紹介しました。
お伝えしたとおり、余白はデザインのクオリティを左右する大切な要素です。
慣れるまでは時間がかかるかもしれませんが、様々なサイトの余白を参考に、「余白の取り方」を覚えていってください！
【参考】さらに、余白について学びたい方へ
余白について、より幅広いデザインを見て学びたいという方は、『けっきょく、よはく』がオススメです！
余白の取り方について、NGな作例とOKな作例を比較しながら学べる本です。
レイアウト例も多く、余白の取り方について迷ったときにはまず参考にしています。
パラパラっと眺めて、デザインの引き出しを増やすのにも最適なので、ぜひ読んでみてください！
