レイアウトで欠かせない相手を魅了する空間「余白 (ホワイトスペース)」

lost places 1798613  340 - レイアウトで欠かせない相手を魅了する空間「余白 (ホワイトスペース)」

こんにちは、デザイナー・ブロガーの
ゆっきー(@elcielo_design)です。

今回は、レイアウトで使えるコツ
「ホワイトスペース」について紹介します。

スポンサーリンク

時間をかけてレイアウトしても …

他の人のデザインやイラストを見た時に、
「これ見にくいな。」「読み辛いな。」
「どこから読めばいいのだろうか。」
「どれが1番大切な部分なんだろう。」
そういった経験はないですか?

自分のポスター、雑誌、ビラ、カタログ、
リーフレット、バナー、Webサイト等、
せっかく色んなデザインを制作しても、
読んでもらえないし見てももらえない。

それを解消するテクニックとして、
レイアウトする上で特に意識して欲しい
とても大切なポイントが1つあります。

スポンサーリンク

空間を意識する。

その意識すべきことは「余白」です。

「余白」と聞くと、隙間が無駄とか
スペースがもったいないと思われがちで、
余計な文字や画像 (写真・イラスト) を
入れて埋めようとしがちだと思います。

でも実は、デザインする上で、
余白を文字や画像などと同じように
1つの素材として上手く使うことで、
とてもデザインがよく見えるんです。

そもそも、
余白 (ホワイトスペース) とは?

根本的な部分からですが、
文字「余白」に「余る」があるから
余計なものだというのは違います。

字や絵などが書いてある紙面で、何も記されないで
白く残っている部分。「欄外の余白」

実際、辞書の意味はそうなのですが、
デザイン上の余白 (ホワイトスペース) は、
構成する要素同士の間隔のことです。

デザイン分野・業界では、
「ホワイトスペース」とも言われますね。

ホワイトスペースがあることで、
ビジュアル的に明確で上手く配置され、
そのデザインは見る人に好まれます。

デザインのホワイトスペースは、
作ったり描く上で余った部分ではなく、
意識的に意図的に作るものなんです。

余白 (ホワイトスペース) の効果

余白 (ホワイトスペース) を使うことで、
デザインで色んな効果を出すことが可能。

その中で特に4つの効果があるので
紹介してみようと思います。

  • 情報の緩和

  • 情報のグループ化
  • 視線誘導

  • 印象変化

1つずつみていきますね。

① 情報の緩和

余白 (ホワイトスペース) の効果で
1番使うものになります。

もしかしたら、無意識に使っている
効果の1つかもしれませんね。

情報の緩和とは、
デザインに多くの情報が存在する際に
その情報それぞれの主張 (強調) を
緩め和らげるということになります。

デザイン全部の情報が主張していると、
何を見ればいいのか、大切なのかが
分からなくなってきますよね。

例えば、文字周りや各文章の塊の間に
ホワイトスペースを設ける必要があります。

デザインの情報を緩和させましょう。

② 情報のグループ化

これもホワイトスペースで
大切な1つの効果になります。

グループ化 (区分け) とは、各カテゴリーの
内容を近づけ過ぎないように離すこと。

ホワイトスペースが広いほど
カテゴリーの別物感が出でくると思います。

③ 視線誘導

この視線誘導は、視覚階層と
合わせて知ってもらいたいことです。

視線誘導は、文字通り人間の視線を
誘導したいところ (方向や目的地) へ
導くことになります。

文字や画像の配置、色、大きさで
導くことも多いのですが、
ホワイトスペースをカテゴリー間で
近づけることで近いものを関連づけ
先に読ませたり見せさせたりします。

なお、視覚階層については、
次の記事を読んでみて下さい。

④ 印象を変化させる。

ホワイトスペースが多いと、
高級感が増すと聞いたことありませんか?

ホワイトスペース1つで
デザインの印象を変えることができます。

ホワイトスペースが少ない場合は、
詰まった、賑やか、安さ等の印象。

ホワイトスペースが多い場合は、
高級感・存在感、シンプル等の印象。

デザイン制作物のコンセプト (狙い・目的)
情報量・用途や方法で使い方は変わります。

また、このホワイトスペースの効果は、
ジャンプ率と似た様な要素を含んでいます。

ホワイトスペースが大きいというは、
デザイン要素のジャンプ率は
低い可能性があるので確認が必要です。

ホワイトスペースはデザイン要素の周り、
ジャンプ率はデザイン要素自体の考え方。

ジャンプ率については、
次の記事を読んでみて下さい。

余白 (ホワイトスペース) を感じる。

08 WhiteSpace1 - レイアウトで欠かせない相手を魅了する空間「余白 (ホワイトスペース)」

余白 (ホワイトスペース )の効果
「印象変化」を感じてみてください。

例えば、上の図のように
要素を中央に置き余白を設けることで、
「清潔感」「洗練れた感」を出せます。

また「存在感」「高級感」が強くなったり
相手の視線を長めに引きつけます。

それに、文章も何行空けるかで、
読みやすさがグッとと変わって
最後まで読みやすい文章になります。

意識する始めのポイント

最初は、文章を書いてる時に
何行空けた方がいいか、幅はこれくらいか
客観的に意識し書くことがおすすめです。

それができたら、
項目、画像と見出しの間隔、単語間
大きな要素と要素同士の間隔等
色んな余白を意識して使ってみて下さいね。

ホワイトスペースはデザインをする上で、
大切なテクニックなのでマスターしましょう。

スポンサーリンク

シェアする