fbpx

As Best Creative, Do Everything For a Goal…

Blog 社員ブログ

BLOG

社員ブログ

デザイン
Webデザインにおける余白の意味と使い方
2019/06/25


Webデザインと聞くと、ページ上にさまざまなコンテンツを配置するイメージを持つ人が多いでしょう。
たしかに、「画像をどこに置くのか」「テキストはどのように並べるのか」などを考えるのがWebデザインだと言えます。
しかし、ページのすべてをコンテンツで埋め尽くすのは逆効果になることもあるのです。
今回はWebデザインにおける「余白」の意味と、上手な利用方法について詳しく解説します。

目次

「余白」が持つ意味

Webデザインにおける「余白」には別名があり、「ホワイトスペース」あるいは「ネガティブスペース」と呼ばれることもあります。
余白は、「ページの空白スペース」を指すものです。
画像やテキストなどのコンテンツが置かれていない部分であり、「空間的に何もない場所」とも言えます。
Webデザインの原則は、「ユーザーに何かを伝える」ことにあります。
そう捉えると、Webページに余白がある状態はあまり望ましくないと思えるでしょう。
たしかに、余白そのものが何かの情報を伝えることはほとんどありません。
しかし、余白の効果は「余白があることで、それ以外の部分に影響を与える」という点にあるのです。

スマートな印象を与える

余白がデザインにもたらす効果として、「スマートさ」を与えてくれるというものがあります。
たとえば、サイト全体を埋め尽くすように、画像やテキストが配置されている状態を想像してみましょう。
サイト内には多くの情報が含まれており、ユーザーにとって好ましい内容に触れる機会を提供しているようにも見えます。
しかし、こうしたページはユーザーからあまり好まれません。
なぜなら、単に情報を羅列しているだけに映るからです。
また、あまりにも情報が多すぎると、ユーザーは情報を確認する気力を失ってしまいます。

ユーザーは「自分が欲しい情報だけを求める」傾向にあります。
余白のないデザインは、「きちんと情報を精査・整理していない」というイメージを抱かせてしまうでしょう。
そして、無用な情報が多いと判断すれば、サイトから離れる可能性もあります。
そうした状態を改善するのは、余白を作るのがもっとも簡単です。
適切な余白のあるデザインは、それだけで「不要な情報が少ない」という印象を与えます。
情報量自体もある程度抑えられた状態になるため、ユーザーが読むのをためらう可能性を低くできるでしょう。

ユーザーの注目を集める

余白を上手に利用することで、ユーザーに届けたい情報をハッキリと認識してもらうことができます。
広く余白を取った場所に、1つだけフレーズを配置すれば、ユーザーが目を留める可能性が高まるのです。
Webサイトを閲覧するユーザーの多くは、ページ全体を流し読みするように眺めます。
何もない空間に1つだけ情報が置かれていると、それに注目してしまうのです。
余白を効果的に利用すれば、アピールしたい情報を確実に届けるデザインを作ることもできるでしょう。

ただし、こうしたケースでは「どんな情報を伝えるか」が普段以上に重要になります。
広い余白のなかに情報を置く場合、配置できる情報は極めて少ないからです。
たった1つのフレーズや1枚の画像だけで、ユーザーの興味を引きつけるものでなければなりません。
アピールポイントがあるなら、余白によって注目を集めるという手法は効果的です。
Webサイト全体を見てもらうためのきっかけ作りにつながっていきます。

情報を切り離す

余白を置くことで、前後の情報を切り離すという利用方法があります。
これは、特にテキストについて有効な活用方法です。
サイトに配置するテキストの場合、すべてのテキストを連続させてしまうと、読みにくい印象を与えてしまいます。
内容の区切りがわからなかったり、違う話題に入ったことに気づかなかったりするためです。
そのため、内容が切り替わる場面では、余白として改行を行いましょう。
また、重要なポイントについては、前後に余白を入れて目立たせることもできます。
「切り離す」というのは、デザインにおける重要な要素であり、余白の持つ効果でもあるため有効に活用していくことが大切です。

バランスを整える

Webサイトにコンテンツを配置するとき、しっかりと余白を作らないとバランスが崩れてしまう場合があります。
たとえば、サイトの右端および左端に余白を置くことで、コンテンツを画面の中央にそろえることができるといったケースです。
こうした場合、「何も置かれていない部分がある」からと、それを無理に埋める必要はありません。
むしろ、余白がなくなると、ページ全体のバランスを崩してしまう可能性があります。
Webデザインではそれぞれのパーツだけではなく、全体の印象もとても重要です。
余白には、全体のイメージを整え、見やすさや読みやすさを向上させる効果もあります。
そのため、必要に応じて「余白を置く」という発想を持てるようになりましょう。

余白を効果的に活用しよう!

Webサイトに余白があると、「空いたスペースがあって大丈夫か」と不安になる人もいるようです。
たしかに、意味もなく余白を残すようなことは避けるべきでしょう。
しかし、余白があることで、ページのデザインがスッキリしたり特定の情報を印象づけたりすることができます。
余白を上手に活用することは、Webデザインの上達につながるものです。
人気サイトのデザインなどを参考にしながら、余白の使い方を身につけると良いでしょう。

SHARE

PLEASE CONTACT US

Web制作、SEO、各種デザイン制作など、集客についてお困りのことがあれば、
いつでも下記のボタンからお問い合わせください。

Go to TOP
Go to TOP