何もないスペースは、ただの空間の無駄遣いなのでしょうか？ いいえ、必ずしもそうではありません。
むしろWebデザインの世界では、コンテンツの周りに多少のゆとりを持たせることが理想的とされています。
今日Webサイトにアクセスする人の多くは、膨大なコンテンツを読み込むことなく、ざっと流し読みしています。忙しくスクロールしながら読み進めていくため、レイアウトが複雑で情報がぎっしり詰まっていると、肝心の内容がなかなか頭に入ってきません。
読み手の関心を引きつけるためには、シンプルなレイアウトを追求するのがカギです。そこで注目されるのが、「余白」を効果的に使うことです。
この記事では、余白がなぜ重要なのか、また、コンバージョンを目的としたWebデザインで余白を使う効果について説明しながら、実際に余白を上手く活用して訪問者の行動につなげている9つのWebデザインをご紹介します。
5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法
HubSpotとCanvaは共同で、パフォーマンスが高く見栄えの良いウェブサイトを作成、管理する手順を詳しく説明する無料のガイドを作成しました。
- オーディエンスとそのニーズについて理解する
- オーディエンスに合ったコンテンツを作成する
- ウェブサイトを最適化し最大限の成果を上げる
- パフォーマンスレポートの作成、分析、継続的な改善
今すぐダウンロードする
全てのフィールドが必須です。
余白とは
余白とは、構成の中で何も配置されていない領域のことを指します。コンテンツとコンテンツの間にちょっとした空間があれば、読み手は自然に目を休められるため、途中で読み飽きてしまうのを防いだり、重要な情報を見つけてもらいやすくなります。.
意図的に余白を作る効果としては、見栄えが良くなるのはもちろんですが、私たちの脳が新しい情報を処理する過程にも大きな影響を与えます。たとえば、小さなスペースに多くの文字や画像が詰め込まれていると、脳が疲弊して認識力が低下し、最悪の場合、情報をまったく処理できなくなることもあります。
なぜWebデザインにも余白が必要なのか
余白がなぜ必要かを理解するには、私たちの脳が電話帳を丸々1ページ処理するのがどれだけ大変かを想像するとわかりやすいです。電話帳にはどの行にも細かい文字がぎっしりと詰まっているため、情報が塊になって見えてしまいます。これでは探している情報も簡単には見つかりません。
ただ、電話帳のレイアウトは、限られたスペースにできるだけ情報を収めるためにデザインされているので問題ありませんが、多くの印刷物は、内容ができるだけ理解しやすいように情報が配置されているものです。そこで出番となるのが、余白です。
印刷物の情報を処理する際に私たちの脳が余白にどれだけ助けられているのか、以下のDigital Inkの記事を例に考えてみましょう。
2つの記事の違いがわかるでしょうか？ 左の記事ではスペースに余すところなく情報が詰め込まれ、ごちゃごちゃしていてわかりにくい印象です。ぱっと見ただけで疲れてしまい、読み続ける気になれません。
一方、右の記事では列と列の幅が広く保たれ、段落と段落の間にもゆとりがあります。このようにデザインを少し変えるだけで、記事の魅力がぐっと増し、読みやすくなる効果があります。
余白はレイアウトをわかりやすくする以外にも、特定の要素を強調し、読み手に注目してほしい情報を見つけてもらうのにも役立ちます。レイアウトを分割したり、グループごとにまとめたりするのに余白を使うと、バランスが取れて洗練された印象になります。
次に、Printwandの名刺の例をご覧ください。
左の名刺には何もないスペースが広く取られてはいますが、すべての要素が1か所に固まっているため、全体的に雑然として素人っぽい印象を与えます。一方、右の名刺では余白が効果的に使われており、個々の要素がわかりやすく切り離されています。
余白は、Webサイトのデザインに不可欠です。それは美しさの観点からだけでなく、コンバージョンの最適化という点からも言えることです。余白を効果的に使うと、Webサイト内で次にどこに移動すればよいかわかりやすくなったり、内容を理解しやすくなったり、コンバージョン率の向上につながることもあります。
これは、見栄えが良くなったことでユーザーが次の行動にスムーズに移れるようになるためです。
事実、Human Factors Internationalの調査では、余白を使ったことでWebサイト内の重要な要素が強調され、訪問者の理解度が20%近く向上したことがわかっています。
次の2つのWebサイトのレイアウトを見比べてみてください。
左のサイトでは、CTAボタンが太めの区切り線の間に挟まれていて窮屈そうに見えます。また、そのボタンの下には、テキストがぎゅうぎゅうに詰め込まれています。ボタンに注目してもらいたいのに、周囲に余計な要素が多すぎるのです。
一方、右のサイトでは、CTAボタンの周りに十分なスペースが確保されています。これならフォーカルポイントであるCTAボタンが強調され、訪問者の目に留まりやすくなります。
見ておわかりのとおり、ボタンの周りに余白を作ると他の要素が下に追いやられてしまいますが、それでも問題ありません。すべての要素が一度に見えなくても構わないのです。実際、すべての要素を一度に見せようとすると、読み手にごちゃごちゃした印象や圧迫感を与えてしまうため、そのようなデザインは推奨されません。
余白を上手く活用しているWebサイト9例
1）Shopify
eコマースプラットフォームのShopifyのホームページの目的は、訪問者に無料トライアルにサインアップしてもらうことです。
ユーザーの行動を促すために、画面中央に登録フォームを1つ設け、その周りをできるだけ余白で囲んでいます。そうすることで、訪問者が余計な情報に気を取られたり、登録フォームを見逃したりするのを防いでいます。
また、サイトのメインナビゲーションは、登録フォームよりもはるかに小さく、画面上部に表示させています。これも、画面中央にある登録フォームを強調するための工夫です。
2）Everlane
余白を設けるというのは、色や写真をまったく使わないということではありません。余白は、注目してもらいたい要素の周りに戦略的に十分にスペースを確保して、読み手に情報を与え過ぎたり、混乱させることがないようにするためのものです。
アパレルブランドEverlaneは、最新コレクションを全面に押し出すために、その他の要素の使用を最小限に抑えました。最新の「Camel」コレクションの写真をサイト全面に採用し、画面中央に小さくCTAボタンを配置しています。
そのボタンをクリックすれば、最新コレクションの購入を始められるようになっています。ユーザーの行動をきちんと誘導しながらも、強引さや押しつけがましさのない完璧なWebサイトに仕上がっています。
3）Airbnb
民泊サービスを提供するAirbnbは、訪問者に自社サービスを最大限にアピールしてコンバージョン率を上げるため、ホームページに大量のデザイン要素を盛り込みたいという誘惑に抗い、最終的にこの直球勝負のデザインを選びました。
シンプルなキャッチコピーと画像を使った最小限のデザインに留めることで、検索ボックスの存在を強調させています。また、すぐに部屋を検索したくなるようなわかりやすいキャッチコピーを採用し、ナビゲーションやロゴはページの隅にひっそりと配置しています。
4）Wistia
余白を戦略的に使うのは難しいことではありません。重要なフォームやボタンと、その他のコンテンツの位置を十分に離せばよいのです。ちょっと手を加えるだけで、コンテンツの受け取られ方は大きく変わります。
ビデオプラットフォームを提供しているWistiaは、訪問者に呼びかけるような質問とドロップダウン形式の回答フォームをホームページに採用しました。このフォームはページ全体のフォーカルポイントであるため、サイトのメインナビゲーションや画像などの要素とは十分に距離を空けて配置しています。
5）Welikesmall
デジタル広告代理店のWelikesmallのホームページを見れば、余白は無駄なものでも、何もないものでも、動かないものでもないことがわかります。ホームページにアクセスすると、同社が最近手掛けた動画広告が全画面再生され、目まぐるしく切り替わる広告の数々に訪問者が魅了されるようになっています。
動画を全画面表示すると、うるさくなったり、くどくなりがちですが、余白を惜しみなく使うことでプロフェッショナルな印象を与えています。動画をよく見てもらうために、テキスト量はできるだけ抑えています。
また、企業ロゴは左上の隅、折りたたみ式メニュー（いわゆるハンバーガーボタンやハンバーガーメニュー）は右上の隅に配置され、中央には同社のスローガンである「Belief in the Making」の文字と、2016年に制作した動画広告の完全版を視聴できるCTAボタンが配置されています。
6）Simpla
Simplaのホームページには、ページの大部分を空白のまま残すことの効果を証明するデザインが採用されています。余白を大胆に使うことでホームページを思い切りシンプルにし、ユーザーのスクロールしたいという気持ちを刺激しています。
企業ロゴとナビゲーションの下には、大きな空間が設けられています。その下に、短いテキストと矢印と写真の上部だけを見せることで、さらにその下に書かれている企業情報や理念まで読んでもらえるように読み手を導いているのです。
このユニークな余白の使い方には、スタイリッシュな印象を与えるだけでなく、訪問者をサイトの奥へと誘い込むという戦略的な効果があります。
7）ハーバード美術館
ハーバード美術館は往年の絵画を展示していることで知られていますが、その一方、ホームページには最先端の技法が取り入れられています。ホームページ全体の白い余白部分を作品の背景のように使うことで、作品のすばらしさを強調しているのです。もはやデジタル美術展といってよい仕上がりとなっています。
ユーザーがスクロールし続けたくなるようなMasonryスタイルのレイアウトが採用され、複数の画像が密に表示されないようになっています。また、ギャラリーの美しさを保つためにシンプルさを追求し、ページ上部のサイトナビゲーションを非表示にして、ユーザーがマウスを合わせることで初めて表示されるようにしています。
8）Burnkit
ホームページで余白を多く取ろうとすると、大量のコンテンツを表示させることができなくなるため、どれを残すべきか難しい決断を迫られることになります。しかし、構図を犠牲にしたりコンテンツを詰め込みすぎたりすることなく、最小限のレイアウトで多くのコンテンツを掲載しているサイトが存在します。
デザイン事務所Burnkitのホームページには、ブログ記事や同社が手掛けた作品、企業情報などさまざまなコンテンツが掲載されています。訪問者を戸惑わせることなく、これほど大量のコンテンツを1つのページで表現する方法として、Burnkitは余白をひたすら贅沢に使っています。どのコンテンツの周りにも十分に余白が確保されており、スクロールすることで次々と新しいコンテンツが表示されるようになっています。
9）HubSpot
実際に私たちのウェブサイトも余白を大きく設置し、アクションを促しやすくするためにCTAを設置したところクリック率の向上に繋がりました。このようなWebデザインを意識的に行い、訪問者を惑わせないような構造にすることも非常に大切です。
いかがでしたから？Webデザインを新しくされたい方はワードプレスなどのCMSや、HubSpotのCMSを活用し美しいウェブサイトの構築などを行うことオススメしています。
このほかにもこちら「参考にしたい魅力的な海外ホームページのWebデザイン16の実例」でホームページに特化したデザインをご紹介しています。
皆さんのホームページはいかがですか？余白をたっぷり持った魅力的なホームページを作り、見込み客を獲得する方法について解説した無料eBookはこちらからダウンロードできますので、ぜひこちらもご参考ください。
編集メモ：この記事は、2016年11月に投稿した内容に加筆・訂正したものです。Karla Cookによる元の記事はこちらからご覧いただけます。
