ホワイトスペースを意識してデザインをするべき理由

Training.Ⅰ レイアウト

デザインの中にある“空白”のことを、一般的にホワイトスペースと呼びます。文字も画像も存在しない空きスペースですが、決してただの余白や手抜きではありません。効果的に入れることで、伝えたい情報をより強く印象づけることができるテクニックのひとつなのです。さらなるデザイナーとしてのテクニックを学ぶため、ホワイトスペースについて、ここではお話ししていきます。

ホワイトスペースとは

ゲシュタルト心理学とは、20世紀初頭にドイツの心理学者たちによって提唱された理論です。

前述の通り、ホワイトスペースとは何も存在しないスペースのことです。ホワイトといっても白とは限らず、赤や緑などの色がついていてもそこが空白であればホワイトスペースと呼ばれます。

ごちゃごちゃとたくさんの情報を詰め込んだチラシやウェブサイトも時に見かけますが、一般的なグラフィックデザインにおける“一番面積の大きい要素”はホワイトスペースだと言われています。
この要素を自在に使いこなせるようになった時、あなたのデザイン技術は飛躍的にレベルアップしていることでしょう。

ホワイトスペースを意識するべきワケ

文字や写真のレイアウトを考えていたら、結果的にいくつかの空白ができた――。この場合、空白は偶然の産物であって、テクニックとしてのホワイトスペースとは呼べません。

ホワイトスペースには「情報を目立たせる」、「読みやすくする」などさまざまな効果があります。それらを最大限に発揮するには、ホワイトスペースを意図的に“配置”することが大切です。

レイアウトを組み始める段階から「ここを空白にしよう」と決める必要はありません。「なぜ文字をその色にするのか」、「図版をそこに配置する理由は……」。ひとつひとつの意味を考え、理解しながらレイアウトを組んでいけば、自ずとホワイトスペースにすべき場所が見えてくるはずです。

ホワイトスペースの効果

では、ホワイトスペースを使うことによってどのような効果が得られるのでしょうか。グラフィックデザインでよく使われるものをご紹介します。

注目させる

私たちはチラシやポスターの内容を目で追い、脳で処理をしながらさまざまな情報をインプットしています。ホワイトスペースは、そんな目と脳の休憩地点の役割を果たしてくれるのです。また、余計なものがない空白があることで心が落ち着き、気を散らすことなく重要な情報に集中することができます。

休憩地点にする

複数の刺激があると、同じ種類のものをひとまとまりのグループとして認識する傾向です。以下の図形を見た場合、私たちは「●●」と「○○」のグループの繰り返しとして捉えます。「●○」や「○●」のグループが並んでいるように認識することは難しいですね。

抜け感や緊張感を演出

デザインの四辺をすべて余白にすると間の抜けた印象に、四辺に情報を入れて余白を無くすと窮屈で緊張した印象になります。四辺の余白をあえて入れたり無くしたりすることで、受けるイメージを演出することができるのです。

視線を誘導する

私たちが平面のデザインを目にする際、視線が左上→右上→左下→右下と移動しやすいことから、その動きをアルファベットの“Z”の形に例えて「Zの法則」と呼んでいます。その法則を踏まえてホワイトスペースを配置すると、見る人の視線の動き（Z）を邪魔することなく強調したい情報へと導くことができるのです。たとえば、導入部である左上はホワイトスペースにして入りやすくする、左下～右下に適度に情報を入れて右下へ視線を抜けやすくする、などです。

ただの空白であるホワイトスペースも、効果的に使えばデザインをより引き立たせることができます。うまく活用してデザイナーとしてのスキルアップを図りましょう。

Day.4 デザインの数学的考え方「黄金比、白銀比、青銅比」に迫るに進む→

トレーニングコラム Day.3 | ホワイトスペースを意識してデザイン