ELEMENT, INC.

Webデザインをする上で、文字や図などの配置を詰めてしまった経験はありませんか？デザイン全体が窮屈な印象になってやり直しをしたデザイナーがいると思います。

デザインでとても重要になる余白の役割やポイントについて解説をしていきたいと思います。

Webデザインの余白とは

余白とは、文字や画像などが何もない状態の空間のことを言います。下の写真のように何もない空間の箇所が一般的に余白と呼ばれる部分です。

Webデザインのレイアウトをする上で重要な役割を持ちます

Webデザインの余白の役割

Webデザインの余白は様々なものがありますが、ここではいくつか代表的なものをご紹介していきます。

可読性を上げる

余白の最大の役割と言える役割は、文字や画像の可読性を上げることです。新聞のように文字や写真がぎっしりと詰まっていたら、どうでしょうか？多くの人はこのページはとても読み辛いと思い、すぐに離れてしまいます。

余白があることで、文字が読みやすくなりますし、画像も目に入りやすくなります。読み手は欲しい情報がすぐに手に入れることができますし、商品やサービスの購入につながりやすくなります。

情報のグループ化ができる

余白を作ることでランディングページにある情報をグループ化することができます。人間の脳は情報をグループで捉えようすることがあるので、余白を作ることで内容を伝えやすくなります。

図や画像を引き立たせる

文字と同様に、図や画像も余白があることで、目に入りやすくなります。ランディングページで図や画像を使い、情報を読み手に伝えるケースがほとんどです。

特に、商品やサービスの申し込みボタンはとても重要です。ボタンの周りに文字や写真が詰められていると、読み手は見つけづらくなりますし、購入につなげにくくなります。

余韻や印象を作る

デザインをする上で、余白を上手く活用することで全体的に見栄えの良いページを作ることができます。余白があると、何か文字や画像で埋めてしまいたいと思うデザイナーも多くいます。

しかし、余白を敢えて使うことで、伝えたいメッセージ、見せたいイラストや写真をより伝えることができ、印象にも残りやすくなります。

Webデザインの余白のポイント

余白を使う上で、ただ間隔を空けるだけでは、うまく情報を伝えることはできません。余白を上手く使うためのポイントについて解説をします。

文字の余白

文字の余白は可読性を上げるために一番重要な部分です。文字の行間、文字間隔、段落できちんと余白を使うことで、読み手にわかりやすいWebページやランディングページを作成することができます。

読みやすさを意識しながら、文字の行間、文字間隔、段落で余白を作っていきましょう。

余白でブロックを作る

余白でブロックを作ることで、ビジュアル面で見やすくするだけでなく、グループや関係性を作ることができます。下の写真のように、余白でブロックを作ることで、パッと見た時にグループや内容の関係性が分かりやすくなります。

比較の説明、商品やサービスのメリットの説明などで図やイラストを使う時は意識しましょう。

やや広めに余白を取る

デザインをする時に文字や図を詰めて配置してしまう癖があるデザイナーは自分が思っているよりも、広く余白を取る意識をしてみましょう。自分で余白の間隔が分からない時は、他のデザイナーやディレクターに確認してもらいましょう。

まとめ

余白はデザインで上手く活用することで目に入りやすく、情報が伝わりやすいものになります。余白の役割やポイントをしっかりと理解して、デザインに活かしていきましょう。