ユーザーに読みやすいWebデザイン。Webページにおける余白の効果。

余白は無駄なスペースでしょうか？

ホームページは情報を載せるもの、可能な限り情報を詰め込んでスペースを減らせば減らすほどページの価値は上がる…そんなふうに思ってはいませんか？

実はその考え方、ユーザーにとってはマイナスに働くこともあるのです。ページの中にあるスペース…余白をコントロールすることは、ユーザーとそのページにとって良い効果を生み出すことができます。

何もないように見えるその余白には、とても重要な価値があるのです。

余白とは？

ウェブページのレイアウト上で、レイアウトの周りにある何もない空間にみえる箇所のことを余白といいます。ページによって白ではない色だったりうっすらと画像が施されていたりすることがありますが、情報の載っていないエリアという点で共通しています。

しかしこの情報の載っていないエリアは、適切にコントロールすることで情報の載っているエリアを引き立てる効果を出すことができます。

余白の効果

要素と要素の間 ～段落～

この余白はページ内のコンテンツを読みやすくしてくれます。異なる要素間を隔てることで情報の分類や順序をはっきりさせ、ユーザーが必要な情報へアクセスするのを助けます。

適切なコーディングと合わせることで、ページ内のブロックごとにどういった情報を扱っているのか、SEO的な観点からもはっきりさせることができます。

文字と文字の間 ～行間～

テキストの行間を適切に設定することで、ユーザーにとって読みやすいテキストを作ることができます。行間の詰まりすぎたテキストはユーザーの左右への目の動きを衰えさせるということが研究でわかっており、読み疲れてしまったユーザーがテキストを流し読みしてしまう可能性が高まります。

逆に開きすぎた行間だとテキストごとのまとまりが薄まり、同じ行を二度読んでしまったり意味の分類が読み取りづらくなったりします。

行間を適切に設定することで、読み飛ばしや読み疲れを抑制することができるのです。

レイアウトの隙間 ～情報量の調節～

一般的にWebでの横書き一行に適切な文字量は45～75文字だと言われています。レスポンシブや1カラムでデザインされたサイトの場合、レイアウトに余白を設けることでこの量をコントロールすることができます。

例えば文字の左右に余白を配して、テキストエリアそのものをスリムな形にしてしまうことができます。段落内のカラム数を増やし余白で区切って、可読性を上げる方法も取れるでしょう。

また情報が正しく分類されたコンテンツは、ページの価値を高めることにも効果を発揮するでしょう。

余白は「何もないスペース」ということで過小評価されがちです。しかしそのスペースをコントロールすることでユーザーにとって読みやすい、目を通しやすいページを作ることができます。
余白によってユーザーへの導線が整理されたページレイアウトはコンバージョン率のアップにも期待できます。

ページを整理し情報をコントロールする手段として、余白の活用をぜひ実践してみてください。