余白という用語はネガティブスペースという用語と互換的に使用されることがあり、同じ概念です。この用語は特に「白い」スペースのことを指しますが、その部分が白である必要は全くありません。これは単にウェブページのレイアウト内にある要素の周りの、何もない空白スペースを指しているのです。
このようなスペースは、画像やグラフィック、綴じ代、余白、コラム、タイプされた行間の空白など、様々な形態をとることができます。一見何のデザイン要素も配置されていないだけの、「何もないもの」から作られているように見えますが、余白はそのように扱うべきではありません。余白を「何もないもの」のように扱ってしまうと、真に美しく、魅力的なものを設計する機会を逃してしまう恐れがあります。
適切に扱われた余白は、たくさんのメリットをウェブデザインにもたらします。ウェブデザインにおける余白の割合を減らす代わりに、その常識に逆らってウェブページにおける余白を確実に増やすようにしましょう。有名で人気のあるブランドの中には、すでにこのような方向で動いているものもあり、今こそより多くのデザイナーが彼らの先導に従う時なのです。
余白はあればあるほど優秀なブランドやウェブサイトになる
一般的にクライアントはサイトの作成コストやメッセージを表示する画面に制限があることから、ウェブサイト上でできるだけ多くのスペースをデザイナーに使用してもらいたいと考えています。しかし逆に余白を増やすことで、より限定されたスペース内によりスマートな企業メッセージを生み出すようにデザイナーへ促すことができます。
さらに、余白が多いウェブサイトは、余白のコンテンツが画面のスペースよりもさらに重要であるという認識をしています。その結果、企業は自社のコンテンツのメッセージを伝えることにより多くの画面のスペースを費しているように見えるため、企業自身が質的に豊かで優れているように見えるのです。
質の高いブランドはこのような現象への理解を誤ることなく、的確な効果を発揮させるためにより多くの余白を定期的に活用してきました。Pottery Barnは高級家具の有名な小売業者で、ウェブサイトにおける余白を賢明に利用し、T字型にしています。余白でホームページを占領し、その多くをページの両側に取り入れることで、サイト訪問者の注意をページ中央にあるお得情報や宣伝に直接向けさせることができるのです。ページ上部にあるブランド名自体も、文字の間に十分な余白を確保して特徴づけています。
余白はスムーズな検索に貢献する
余白の効果的なシンプルさを示した理想的な例は、GoogleとYahoo Searchという２つの大手検索エンジンで見ることができます。
Googleは、特定の検索トピックを探しているユーザーが大量の背景や広告に邪魔されたくないと考えていることを理解しています。よって、余白がGoogle検索エンジンのページ全体を占領し、実際の検索はページ中央の細長いスペースのみを使用しています。同様に、Yahoo検索もこのような余白の賢明な活用を実現しています。ウェブページには非常に長いメニューバーが上部に表示されていますが、考え方としてはGoogleと同様で、多くの余白によってユーザーが検索だけに集中できるようにしているのです。
余白はリーダビリティーとレジビリティーを向上させる
あらゆるウェブサイトにおけるリーダビリティーとレジビリティーは、余白が賢明な方法で使用されることで強化されます。もしページ上のテキストが過度に圧縮されてしまうと、快適なリーディングエクスペリエンスを妨げ、そして総合的なUXを台無しにしてしまいます。より多くの余白を取り入れることでテキストにざっと目を通しやすくなり、さらにテキストの一貫性を生み出すのでリーディングエクスペリエンスの改善につながります。
この法則に従って管理されている個人サイトの１つにInformation Highwaymanというものがあり、コピーライター兼マーケターであるD Bnonn Tennant氏が運営しているサイトです。優れたウェブコンテンツがあらゆる小規模の事業に機能することを彼は知っている、と言われているように、Tennant氏が自分のサイトで語ったことの実践を見ると心強く感じます。見出しコピーやテキスト、メニューバーにおける文字の間の空間は、リーダビリティーとレジビリティーを保証する要因となっています。
さらにスペースはコンテンツの異なるセクション間にも使用することができ、リーディングエクスペリエンスの改善だけでなく、コンテンツの様々な部分を細分化することで情報の吸収がより簡単になります。Andrew Lucas氏のサイトも、この点を見事に例示しています。彼はロンドン出身のウェブデザイナーで、自身のホームページ上で余白を効果的に使用しています。
余白を活用し色を際立たせる
おそらく余白の最も直接的で簡潔なメリットは、ウェブサイト上のその他の色を今までよりも鮮やかに映るように際立たせることだと思います。これによって色の深みや豊かさ、そして鮮明度がより一層強調されるので、サイト訪問者の注目を惹きつけるのに非常に役立ちます。
I Am Dan のウェブサイトを支えているウェブデザイナーはこの点をよく理解しており、わずかな色使いで自分のホームページ上にこの概念の典型例を示しています。ウェブサイトの大部分は、ところどころにある赤色で分割された余白となっています。このように、ポートフォリオへのリンクを強調し、サイト訪問者に彼のサイトの閲覧を促す赤色が効果的に際立っていて、訪問者がCTAを完了する機会を結果的に増加させています。
ウェブデザイン会社であるZurbも、余白がいかに色を際立たせているかを例示しています。同社のホームページは上部にある１つの固定カラーと、（スクロールをしなくても見ることが可能なウェブページのすぐそばにある）異なるウェブページに使用された色とりどりのアイコンによって特徴づけられています。最小限の色使いに加え、ホームページ全体のデザインが余白を特色としているのです。
緑やオレンジ、赤といったシンプルな色は、心地の良い、焦点がしっかり定まったような外観を構築する効果があります。上記にご紹介したサイトはどちらも十分な余白を取り入れているため、色に対してミニマリスト的なアプローチを採用しています。その結果、色は非常に慎重に使用されており、ユーザーがこれらの色を一層評価することになります。
余白は無駄なスペースではない
ウェブデザイナーは、サイトを設計する際にあらゆる要素や色を可能な限り画面に詰め込まなければいけない、という誤った考え方から離れなければなりません。上記の例で示されているように、余白はブランドのコンテンツを強調し、リーダビリティーとレジビリティーを向上させ、そしてミニマリスト的に色を際立たせた場合、強力な影響を与えることができます。
「より少ないことは、より豊かなこと」というフレーズは、皆さんが余白に対してどのような見方を持っているかにかかわらず、余白の総合的な概念にあてはまっていると思います。広い意味で言えば、ウェブデザインにおけるミニマリズムに対するこの見解は最近人気を集めており、確実に今後も続いていく傾向であるといえるでしょう。
