You are here: Home » デザインメモ » ただの余白ではない…ホワイトスペースなデザイン

ただの余白ではない…ホワイトスペースなデザイン

スペースとういう便利な物

世の中には様々なスペース=隙間があります。

宇宙のスペース
サッカーなどのスポーツのスペース
単純にインテリアの隙間のスペース
デザインでは、ホワイトスペース

ほとんどのグラフィックデザインで一番面積の大きい要素はなんだと思いますか?それはホワイトスペースです

でも、最近情報を詰めまくっているデザインも多いですが…

なんにも存在しないスペース、これを一般的にホワイトスペースと言います。ホワイトスペースはどんなデザインにでもかなり重要なスペースになり、ホワイト=白に限らず、赤でも青でも余白ならホワイトスペースです。

デザインに興味のない人はただの余白を思ってる人も多いですが、このスペースを上手く使うとかなりいろんな物事が捗ったり、すっきりします。デザインでは特にそうです。

スポンサーリンク

デザインの意味を見出すとホワイトスペースが生きてくる

なぜそこに置いたの?なぜその色なの?の答え=良いホワイトスペースになりやすいです。

デザインを考えるときありがちなのが、写真をどこに置くかや、文字の配置などに気を使い、結果的に余白が出来てしまう事があると思いますが、それではディレクターやクライアントに「なぜここは余白なの?」と聞かれた時に明確な答えが出てこないはずです。

そのデザインの写真や文字の要素一つ一つに

なぜその色なのか?

なぜそこに配置したのか?

の意味をしっかり自分で把握しながらデザインすると、意図した又は計算したホワイトスペースが出来上がるケースが多いです。

詰めるとこは詰めて、揃えるところは揃える。

ホワイトスペースの役割

デザインを見た時の人間の目の動きはよくZやFの動きをすると言われ、文字を横に書くと左から書くのでそれを追うように左から右に動きます。必ずその動きをするとは限りませんが。

紙媒体はZの動き

紙媒体はZの動きをすることが多いです。

Webサイトなどの場合Fの動き

Webサイトなどの場合、Fの動きをすることが多いです。

 

名刺を例にすると
左上からまず名刺の情報を探し目線はZやFの動きをして、最終的に右下で読み終わる事が多いです。

なので、名刺など余白が多くなりがちなデザインの場合、左上の読み始めを、なんにも置かないホワイトスペースにして壁を作らないようにすることが多いです。そのかわり、読み終わりの右下の部分は要素を適度に配置すると、心地良い抜け感ができるはずです。

上の名刺の場合、右の緑の部分はカベになり同じホワイトスペースの中にある Company Nameや住所を最初に目につくようにして、最後に同じホワイトスペースが右に抜けている本人の名前に目線を誘導することができます。その時nameとWhite Spaceのジャンプ率を大きくすることで名前を印象づけることができます。

逆に左上に何かのカベになる要素を置くと、例外もありますが、読む行為が窮屈になってしまいます。

ホワイトスペースや余白は一番大きい要素なので、見る人の視線が集まりやすいので、上手く使うと人の視線を誘導しやすいのです。

また、目で情報を見ながら頭で処理しつつデザインされた物を見るので、必ず目の休み場所が必要になってきます。ホワイトスペースは何も無い場所なので安心の場所にもなるのです。

適度なホワイトスペース

画面の四辺全てをホワイトスペースにすると、間抜けな印象になりがちです。

逆に四辺全て余白がないと、結構息苦しくなってしまします。

デザインした画面の写真や文字をわざと見ないで、ホワイトスペースだけを見る

デザインが終わったら、そのデザインの要素以外の部分のホワイトスペースのみに注目するといろんな物が見えてきます。

こんな感じでデザインを見ると、どこに要素があって、どこがホワイトスペースなのかはっきり分かります。

そんな感じでデザインにおいて、ホワイトスペースはかなり重要な役割なのです。

スペース=隙間って有効活用するって大事ですね。

スポンサーリンク

スポンサーリンク

コメントを残す