ホームページ、Webサイトのデザインは、技術とセンスが現れ、時代とともにスタイルが変わってきていますよね。その中でも「余白」に注目してみると、
行間が広い・狭い
画像の周りがすっきり・ごちゃごちゃしている
デザインでふと感じることは多々あるかと思います。
これは好みなのでしょうか、それとも何か戦略があるのでしょうか。
余白の役割とは何か？
余白に関してじっくり考えたことはあるでしょうか？Webデザイナーは別として、一般的なユーザーはただのスペース、これくらいあけておけば読みやすい？くらいの感覚でいる方が多いかと思います。
余白とは、レアウトにおいて
をいいます。白色ではないこともあり、情報がない部分ということですね。
これはWebサイトだけに限らず、ポスターや絵画、トークの手法でも「余白」「間」が使われているのと同じ役割だと言えます。
例えば、ポスターで主張したいものの周りにはごちゃごちゃ描かずにメインを引き立たせる、スピーチの間には沈黙という余白を作って聞き手に間を与えるなど、Webサイト以外でも「余白」が使われています。
音楽ではサビの部分のインパクトを出すため、直前が「静」のように音が小さめにすること、この静が余白と同じ役割になっています。
余白の取り方で意識することとは？
それでは、Webデザインで余白をどのようにコントロールするとよいのでしょうか。
情報がぎっしり詰め込まれていると読みにくいから空白を多くした。けれど、やたらと空白部分が多いデザインは逆にスクロールが面倒と思われてしまう。
コントロールが難しいですね。
ユーザーの目的は、スマホで言うならば小さい画面の中からパッと自分が知りたい情報を見つけ出すことです。
すっきりとしたデザインだからといって余白が多く、あちこちに情報がちらばっていては意味がありません。
１． グループを意識する
小学校時代、作文の書き方で「一文ずつを改行するのではなく、内容でまとめて段落分けをする」と習いましたよね。
ブログも同じで、一文ごとに一行の余白があったのでは、逆に読むテンポが狂ってしまいます。文章だけでなく、Webデザインも同じように、文章と画像の組み合わせ・グループを意識してみることがポイントとなります。
・同じ種類も同じグループとしてまとまりやすい
これを意識すると、近づけてよい物と離れさせた方がよい物を意識的に余白を使ってコントロールする必要性がわかってきます。
ユーザーがパッと見た時に判断しやすいように余白には役割があります。
２．情報量と余白の関係
情報がたくさんあり、余白も多い･･･これもデザインとして成り立たなくなります。
例えば、新聞のようなニュース、情報系は伝えることが目的のため、文章が多くなります。そうなると余白は最低限となります。
一方、情報が少なく、画像、写真、商品の宣伝などはユーザーがじっくり読むというよりも、興味があるものを拾い上げていくスタイルです。その場合は、ゆったりとした余白が必要です。
余白の使い方で印象がグッと変わる
余白の使い方でグループのまとまり感をだしたり、切り離したり、コンテンツの境目がわかりやすくなります。余白よりも情報量を優先させてしまうと、ユーザーは休憩なく一気に文章を読まされている気持ちになり、疲れがでて、離脱･･･。
いくら情報量が多いサイトでも、余白は必要です。
「間」「空間」を活かし、デザインの良さがあらわれるようなWebサイトを目指して弊社ではWeb制作を行っております。お気軽にご相談ください。
下記リンク先より弊社のWEB制作についてご覧いただけます。是非ご覧ください。