NEWS & COLUMN
お知らせ・コラム
SCROLL
DESIGN
ホームページをデザインする際に意識したい余白がもたらす効果について
2023
.04.17
昔のホームページは余白が狭く、コンテンツ間が詰まった窮屈な印象のデザインが散見されました。しかし、近年のホームページは余白を広めに設けているデザインが多く見受けられます。これは単なる流行だけではなく、時代が進むにつれて余白を設けるべき理由が浸透してきているからであることが推測されます。そのため、WEBデザイナーの皆さんはなんとなくという匙加減で余白を設けるのではなく、余白がもたらす効果をしっかりと理解した上でホームページをデザインするべきです。
今回は、ホームページをデザインする際に意識したい余白がもたらす効果についてご説明します。
情報を見つけやすくなる
同じグループのコンテンツ間の余白は狭めに、異なるグループのコンテンツ間の余白は広めに設けるなど、各コンテンツの間に適切な余白を設けることにより、情報をグループ化することが可能です。グループ化することによって、どの文章がどの見出しにかかっているのかが分かりやすくなるほか、コンテンツの区切り目も分かりやすくなり、ユーザーが求めている情報を見つけやすくなります。情報を見つけやすくなるということは、伝えたい情報を余白によって意図的に目立たせることも可能です。目立たせたいからといって他の部分と異なるフォントや文字のサイズ、色を使用してしまうとセールス感が強く出てしまうため、伝えたいコンテンツがある場合はその周りに広めの余白を設け、自然にユーザーの視線を誘導すると良いでしょう。
なお、各見出しの周りやコンテンツ間などのマージンの数値が統一されていないと、まとまりのないホームページだと感じさせてしまうおそれがあります。余白を設けつつもまとまりのあるデザインにするために、マージンの数値はそれぞれ統一しましょう。
文章が読みやすくなる
文字間や行間が狭い文章は、ユーザーに窮屈な第一印象を与えてしまいます。その結果、せっかく企業の強みやサービス内容を記載しているにもかかわらず、ユーザーが文章を読む気にならず、離脱してしまうおそれがあります。企業がお金をかけてホームページを制作していてもユーザーに対して強みやサービス内容をアピールできなくては意味がないため、WEBデザイナーの方は文章の読みやすさを意識した文字間や行間でデザインを行いましょう。
なお、文字間や行間は広すぎても文字がパラパラと散らばった印象となってしまいます。隙間時間にギャラリーサイト等で様々なホームページを閲覧し、どのくらいの文字間、行間が一番読みやすいかを勉強すると良いでしょう。
ユーザーが受け取る印象が変わる
余白は、狭めに設けて1viewに多くのコンテンツを表示すると情報量の豊富さをアピールでき、広く設けるほどシンプルさや高級感、企業の余裕感を感じさせることが可能です。
余白で印象が違うホームページ
情報量の豊富さを感じる余白が狭めのホームページ：LIFE LABEL
シンプルさを感じる余白が広めのホームページ：ORBIS
また、余白はホームページの空白部分だけでなく、写真でも活用することが可能です。被写体がアップになるようトリミングした写真はインパクトを感じ、被写体の周りに広めの余白を設けた写真はすっきりとした印象や開放感を感じます。
ホームページの余白にしても写真の余白にしても、ホームページのターゲット層や企業のブランディング等を考慮した上で余白の広さを検討すると良いでしょう。
今回のまとめ
新聞や活字のみの本を読むよりも、雑誌を読んだ方が頭に情報が入ってきやすいように、ホームページも余白を適切に設けることにより、情報の伝わりやすさや文字の読みやすさが格段に異なります。昔の余白が狭いホームページを見慣れている場合、最近のデザインに対して「この余白の広さは適切か」と疑問を持つ方も稀にいらっしゃいますが、余白は必ず意味を持って設けています。WEBデザイナーの方は余白がもたらす効果をしっかりと理解し、情報の整理や印象のコントロールを行えるようになると良いでしょう。
