意図的に作る空間_ホワイトスペース

eye-catch

こんにちは、お花見の季節ですね。お花見はしましたか?今週がピークみたいですので、お早めに!私はお花見の予定はないけれど、代々木公園の桜を毎朝散歩がてら見ております♪

本日はホワイトスペースという一つのレイアウト技についてです。

ホワイトスペースとは

簡単にいえば、計算されたスペースのことをホワイトスペースといいます。イメージの周り、文字の間、隙間、これら全てです。ホワイトスペースとは言いますが必ずしも白い訳ではなく、紙媒体のときに大抵の印刷物が白い部分であったことからそう呼ばれているそうです。

大切なのは、デザインしている中で【偶然出来た空間】ではないということ!
【意図的に作り出した空間】こそがホワイトスペースと呼べるものです。

ホワイトスペースのもたらす効果

ホワイトスペースを作り出すことによって、高級感が出せたり強調したい画像などの要素を効果的に見せることが出来ます。
ですので、魅せたい、少しでも印象付けしたいものの周りには白い空間や何もない空間を作り出すと効果的です。

以下は文字要素を大きめにおき空間を無視したもの、空間を作り文字を置いたものです。

極端ではありますが、右のほうが高級感を感じることが出来ます。

ホワイトスペースを効果的に使っているサイトとして、よく例にあがるのがAppleのサイトです。appleのサイトはホワイトスペースを多く使い、要素が少ないのに高級感が感じられます。


http://www.apple.com/jp/

下記のサイトも効果的に余白が使われています。

http://momochisoap.com/
情報の提供が目的であるWebでは、このような余白を「スペースの無駄」とされてしまう場合もあります。スペースの無駄、といわれないような高級感のある余白のとり方をすることが大切です。
あえて作ったスペースが変だと、逆にチープなサイトになってしまいます。

偶然出来てしまった余白はなくす。
何か置けるスペースでも、あえて置かない。

このような引き算のデザインは、デザインの中で基本、且つ重要なことです。