サイト職人スタッフブログ

普段何気なくホームページをみていると気が付かない、余白。
この余白って意外なほど重要だってこと、ご存知でしたか？
読み手となるユーザーの関心を引き付けるために、見やすいホームページを作るのがイチバンですよね。
その見やすいホームページを作るのに欠かせないのが、「余白」(ホワイトスペース)なんです。

そもそも「余白」とは

余白は文字も画像もないただの白いスペース、ではありません。
内情を知らないと、ただの空間の無駄遣いと思われがちですが、意図的にデザインされ、設置されている余白は、たくさんのメリットをもたらします。

では、なぜ余白が必要なのか考えてみましょう。
例えば、電話帳からある会社の住所を探すとします。
電話帳にはどの行にも細かい文字がぎっしりと詰まっているため、情報が塊になって見えてしまい、なかなか目的の情報が見つからないのが一般的です。
情報がごたごたしていて整理できず、見ていても疲れてしまいますよね。とても読み続ける気にはなれません。

そこで出番となるのが、余白です。
電話帳でも、文字と文字の間や列と列の幅が広く保たれていれば、読みやすさは増します。可読性が増すんですね。
余白はもともと1920年代のモダニズムの中で、モノをよりエレガントに引き立たせる技法の一つとして生み出されたデザインの概念です。約100年経った現在でも余白の持つ意味と美しさは引き継がれているように、とても大切なものです。

ではウェブホームページにおける「余白」の役割をまとめてみましょう。

情報を明確にする

文字が詰まっていても、余白があると「さっきのかたまりとは違う」ということがわかります。加えて余白の広さで区切りのレベルも変えることができます。
たとえばインデント。一文字下げて階層を表現するときに使うアレですが、情報が入れ子になっている場合は、余白をうまく使ってわかりやすくするとホームページやトピックスの構造がわかりやすくなります。画面スペースの限られたスマホでは有効活用できますね。

＜必要な情報を探しやすくする＞

適度な余白があれば、欲しい情報を最短の時間で探したいユーザーにとってざっと全体に目を通すだけで、必要なコンテンツを探すことができます。画像ギチギチ、文字つめつめな感じで見づらいと、せっかく伝えたい情報も伝えられません。

余白を使ったことでWebホームページ内の重要な要素が強調され、訪問者の理解度が20%近く向上したという結果もでています。
http://www.humanfactors.com/newsletters/yeah_but_can_you_give_me_a_reference.asp

印象を変えることができる

これはデザイン的なスマートさやエレガンスに関わってきます。エレガントとまでいかなくても、「余白が多いと高級感が出る」部分が多々あります。
逆に、余白が少ないと「ぎっしり、賑やか、庶民的」な印象になります。安売りが得意なスーパーの広告を思い出せばわかりますよね。このようにユーザーに与える印象を変えることができます。

余白の種類とは

余白にはいくつか種類がありますので、少しご紹介します。
まずはマクロスぺースです。その名の通り大きな余白のことで、これを意図的にデザインすると、要素間にメリハリができ、階層構造が見た目でわかるようになります。

次にマイクロスペース。文字通り小さい余白ですね。文字と文字の間、行間、マージンやパディングで表現できます。これを意図的にデザインできれば、ユーザーの可読性の向上に役に立つでしょう。

目立たせたいものがあるときは、アクティブスペースを活用しましょう。余白を取ることで逆に対象が目立つ、そんな使い方もできます。

最後に要素と要素の間を小さな余白で区切りたい時に使う、パッシブスペースという考え方もあります。導線をキッチリ作りたいときや可読性をアップさせたいときに使います。

まとめ

「余白」について説明してきましたが、いかがだったでしょうか。余白はレイアウトをわかりやすくする以外にも、特定の要素を強調し、読み手に注目してほしい情報を見つけてもらうのにも役立ちます。ユーザーに伝えたい情報があるときは
思い切って余白をとってみるといいかもしれませんね。