『人は見た目が100パーセント』というタイトルの作品もありましたが、100%は言い過ぎだとしても「見た目」がモノの魅力を伝えるための重要な要素だということを疑う方はいないでしょう。
事実、資料によって多少の誤差はありますが、人間が五感（味覚、触覚、嗅覚、聴覚、視覚）で得る情報のうち、80%以上は視覚、つまり見た目であると言われています。
見た目で魅力を感じるといえば、「男性は目で恋をし、女性は耳で恋をする」という俗説もありますね。（この説が気になる方は、ぜひご自身で調べてみてください）
とすると、男性の方が視覚の感度が高いのか？と思いきや、色彩の違いには女性の方が敏感だったりします。
ショッピング中にしばしば発生する「彼女にこっちのピンクとあっちのピンク、どっちがいいかなって聞かれても違いがわからないです問題」がまさにその事例ですね。
さて、脱線した話をWEB世界の「見た目」の話に戻すと、それは一般的に「WEBデザイン」と呼ばれます。
本当は、WEBデザインには「情報デザイン（掲載情報の整理整頓）」と「ビジュアルデザイン（見た目の制作）」の2つの要素が存在していて
建築の世界で例えると、建築士とインテリアコーディネーターのような違いがあるのですが
なぜかWEBデザインの話をしましょうとなったときには、WEBデザインではビジュアルデザインの方をイメージされる方が多いようです。
そして、そのビジュアルデザインの印象を左右しているのは、実はコンテンツではなく「余白」です、というのが本記事の内容です。
◎「余白」だけで伝わる印象
◆余白がつくる洗練感
余白（スペース）によって印象が変わるのは、なにもWEBページに限った話ではありません。
いまから挙げるいくつかの場所の様子を、思い出して（想像して）比べてみてください。
「都心の一等地にあるタワーマンションのモデルルーム」と、「大家族どたばたコメディドラマの一家のリビングルーム」
「最高級ブランドのショールーム」と、「安さ自慢のバラエテイショップの売り場」
「客単価数万円以上のレストラン」と、「全品数百円の大衆居酒屋」
スペースがより多い、言い換えると、そこにあるモノやヒトの数がより少ないのは、どちらでしょうか。
居住空間、小売店、飲食店であることは同じなのに
もし写真を渡されて、どちらの場所の写真か選んでくださいと言われても、ほとんどの方が正しく解答できるはずです。
この3つの例でお気づきになったかと思いますが、余白（スペース）が伝える印象、それは洗練感です。
スペースが広いほど洗練されたラグジュアリーな印象になり、逆にスペースを詰めてコンテンツを増やすと親しみやすさやカジュアルさが伝わります。
◆WEBデザインに見える余白
さて、果たしてそれが本当にWEBデザインにもあてはまるものなのか、いますぐ確認してみましょう！
と言いたいところですが
できればまずはこの記事を最後まで読んでいただきたいので、記事の最後に比較的違いがわかりやすいサイトのURLをいくつか記載しておきます。
意識して見ると、より高級志向ブランドのサイトの方が
コンテンツ同士の間隔を広めにとっていたり、写真内の背景エリアが多かったりと余白の多さが目についたのではないでしょうか。
◆表現していることと伝えたいこと
ひとつ補足しておきたい重要なことは、このスペースの違いによる印象の違いは、どちらが良くてどちらが悪いという話ではないということです。
手軽さや親しみやすさが魅力のサービスを、限られた一部の人にしか手が届かなそうなラグジュアリー感で表現してもそのサービスを本当に必要としている顧客には、おそらくサービス本来の魅力は伝わらないと思います。
大切なのは、余白が表現している印象と、サービス・製品の伝えたい印象が一致しているかどうかなのです。
◎「余白」が伝える情報
◆ヒトの脳の不思議
余白は洗練感を伝える、というお話をしてきましたが、実は余白で表現できることがもう1つあります。
次の2行を読んで、それが何かを考えてみてください。
①リンゴ イチゴ メロン キュウリ
②リンゴ イチゴ メロン キュウリ
さて、どうでしょう？
どちらも、リンゴ、イチゴ、メロン、キュウリ、が同じ順で並んでいて、余白の位置だけが違っています。
おそらく①を読んだ時は、左の3つがフルーツで、キュウリだけが野菜、とイメージしたのではないでしょうか。
そして②を読んだ時は、左2つが赤色で、右2つは緑色、とイメージしませんでしたか？
（左2つはバラ科で右2つはウリ科と思ったあなた、博識ですね）
不思議なことにヒトの脳は、近くにあるものは同じもしくは類似の要素である、と認識するようにできているそうです。
◆スペースを正しく使えば線で囲う必要はない
この現象を知っていると、サイト内にむやみに線を引く必要はないということがわかります。
例えばWEBサイトに2つのコンテンツを上から順に並べて掲載するとき
コンテンツタイトルA
コンテンツ内容A
コンテンツタイトルB
コンテンツ内容B
こんな風に余白を均一に並べると、どこがAとBの切れ目なのかわかりにくいので、それを解消するために線を引くという方法を使いたくなります。
コンテンツタイトルA
コンテンツ内容A
—————————–
コンテンツタイトルB
コンテンツ内容B
しかし、先ほどご紹介した通り、スペースがあればヒトはコンテンツの切れ目を認識できるので、このようにスペースをあければ、線を引くことなく切れ目を表現することができます。
コンテンツタイトルA
コンテンツ内容A
コンテンツタイトルB
コンテンツ内容B
もちろん、必要な視覚効果のために使う線もありますので、一概に線を使うことが悪いということではありません。
ただ、コンテンツの数を増やすということはつまり余白を減らすということなので、余白が伝える印象をコントロールするためにぜひ活用していただきたいテクニックです。
ちなみに、WEBページのデザインに限らず、なぜかいつもごちゃついてしまうプレゼンテーションの資料なども
線を使った切れ目表現を減らしたり、1ページに詰め込んでいた内容を思い切って2ページにわけたりすることで、余白が増えてスッキリした印象に変えることができます。
◎まとめ
余白の広さが洗練感の印象を左右することや、要素の切れ目を表現できることをお話してきました。
ただ改めてお伝えすると、これは単に表現のテクニックでしかありません。
WEBサイトを作るうえで大切なのは、どんなターゲットに対して、どんな魅力を伝えたいのかというコンセプトが明確になっていることでありWEBデザインの良し悪しというのは、そのコンセプトを正しく表現できているかどうかだと思います。
主にSNSの場で、なにかと「映え（ばえ）」を気にする昨今ですが、単なるスタイリッシュさにこだわらず、自社の本当の魅力が伝わるWEBデザインなのかを改めて考えてみるのも良いかもしれません。
資生堂のブランドサイト
https://www.cledepeau-beaute.com/jp/synactif.html
https://www.seabreezeweb.com/
腕時計のブランドサイト
https://www.audemarspiguet.com/ja/
https://shop.swatch.com/ja_jp/
服飾品のブランドサイト
https://www.chanel.com/ja_JP/
https://www.shimamura.gr.jp/shimamura/
