余白の使い方でホームページの印象はどう変わる？

デザイン・技術2026年10月30日読了時間：約3分

ホームページを見て「なんだかごちゃごちゃしている」「詰まっていて読みにくい」と感じることはありませんか。
その原因の多くは、余白の使い方にあります。

この記事では、余白の使い方でホームページの印象がどう変わるのかと、整って見える余白の基本を解説します。

1.余白は、関係と順番を伝える

余白とは、文字や画像のまわりの、何もない空間のことです。余白は、ただの空きではなく、情報のまとまりや順番を伝える役割があります。

人は、近くにあるものを「関係のあるもの」として見ます。見出しと本文の間より、本文と次の見出しの間の方が狭いと、見出しがどの文章のものか分かりにくくなります。

また、余白が少なく情報が詰まっていると、窮屈で読みにくい印象になります。反対に、ほどよい余白があると、落ち着いた、整った印象になり、読む人は内容に集中しやすくなります。

余白は、関係のあるものを近く、区切りは広くするのが基本です。

余白の大きさをバラバラにせず、決まった単位の倍数でそろえると、全体が整って見えます。たとえば、8pxを基本にして、8px、16px、24px、32px…と決めておく方法がよく使われます。

※余白を広くしすぎると、情報が離れすぎて、かえって分かりにくくなることもあります。

余白が多いと、情報が少なく見えませんか？

余白が多いと、一度に見える情報は減りますが、ひとつひとつが読みやすくなります。大切な情報をしぼって、余白で目立たせる方が伝わることも多いです。

スマートフォンでは、余白を減らすべきですか？

画面が小さいため、パソコンより少し狭くするのが一般的です。ただし、画面の左右の端には、文字が詰まらない程度の余白を残しましょう。

自分で余白を直せますか？

WordPressなどでは、ブロックの設定で余白を調整できることがあります。全体をそろえる場合は、CSSで調整するのが確実です。

余白の単位は、8pxでないといけませんか？

決まりではありません。大切なのは、決めた単位でそろえることです。

余白は、情報のまとまりや順番を伝える大切な要素です。使い方しだいで、ホームページの印象と読みやすさが大きく変わります。

まずは、自分のホームページで、見出しが前の文章に近づいていないか確かめてみましょう。文字の読みやすさについては、Webサイトで読みやすいフォントの選び方で解説しています。

ホームページの見た目を整えたい場合は、浅草Web屋にご相談ください。