ホワイトスペース(余白)を活かしたスマートなWebデザインを。事例13選
デジタルメディアや屋外広告、オンライン広告が溢れるなか、多くの人が注目するコンテンツをつくるためには、情報を正しく...
- UI/UXデザイン
- Webデザイン
- シンプル
ホワイトスペースは、デザインとデザインの間にある空白のスペースのです。サイトの画面上などにおいて、情報を見やすくするため、目立たせるために用いられます。
ホワイトスペースは白色である必要はなく、どのような背景色、背景画像が使われていても、情報の存在しない空きスペースであればホワイトスペースとして活用できます。未だホワイトスペースは「スペースの無駄遣い」として認識される場合がありますが、伝えたい情報をユーザーに届けるための効果的なテクニックであり、デザインにおいてはとても重要な要素です。
■ ホワイトスペースの効果
(1)情報を目立たせる
ホワイトスペースを設けることで、特定の情報が目立ち、ユーザーの注意を引けます。
(2)理解度の向上
文字のサイズやフォント、行間などを調整して、ユーザーがにとって読みやすい情報にします。余白がなく情報が詰まりすぎていると、ユーザー読むのに疲れ、離脱してしまいます。
(3)デザインの印象
ホワイトスペースがあると、デザインとして高級感や抜け感を演出できます。
■ ホワイトスペースの種類
ホワイトスペースには2種類あり、両者の使い分けが大事です。
(1)マイクロホワイトスペース
デザインの要素間のスペースのなかでも、規模の小さいもののことです。具体的には段落や行間のスペースがマイクロホワイトスペースに当たります。とくに情報の読みやすさなどに影響します。
(2)マクロホワイトスペース
主要なデザイン間にある、大きなスペースのことで、デザイン全体に影響するものです。