Webを取り巻く技術の進歩で、グラデーションやシームレスな背景パターンなど、Webサイトをカラフルに彩る技術も発達していますが、いまだに根強い人気を誇るのが「白」をベースとしたWebサイトです。もともと、HTMLやCSSのデフォルトでも背景が白地だということも、採用される理由のひとつです。しかし、最近立ち上げられたWebサイトでは、新しい意味での「白地」の使い方を提案しているようです。
そこで今回は、Web技術が発達したいまだからこそ押さえておきたい「白」ベースのWebサイトの構築の7つのポイントを、事例とともにお伝えしていきます。
デザイナーがあえて白地を使う理由
王道の白地背景パターンですが、まだTableレイアウトが主流だったWebの黎明期と比較すると、デザイナーは少し違った意味合いで白地のデザインを選択することが多いようです。通販サイトやブログでは昔から頻繁に使われていましたが、最近では次のようなトレンドが大きく影響しています。
1. グリッドレイアウト＆レスポンシブデザイン
ページをいくつかの列に区切ってワイヤーフレームを作成していくグリッドレイアウトでは、余計な装飾をするよりも余白を活用したほうが、デザインがしやすくなっています。ある決まった範囲にだけ装飾を施し、そのほかのスペースは白で統一されているサイトもあります。
2. ミニマリズム
装飾や要素を最小限に抑えるミニマルなデザインは、中立的で色彩的な誇張をしない白とも相性がよく合います。コンテンツ自体とは直接関係のないさまざまな要素やグラデーションや透過演出などの装飾を極力避けることで、コンテンツそのものの魅力を引き出すことができます。
3. ブランディング
白は、高級感や清潔感などをイメージさせるので、ブランディングともとても相性がいいです。ECサイトでは、背景を着色すると商品がチープに見えるため、できる限り白を活用しています。例えばAmazonでは、商品画像までもがほとんど白抜きになっており、商品を客観的かつ高級感あふれる魅せ方をしています。
4. ユーザビリティ
白地の背景は黒い文字色のコントラストを最大限に引き出し、可読性を高めてくれます。必要な情報を瞬時に読み取るのに、白色背景のデザインは一役買ってくれます。
白ベースのサイトにするときの注意点
ただやみくもに白を残すだけでは、強いメッセージを伝えることはできません。明確にデザインの意図を読み手に伝えるには、何に気をつければいいのでしょうか。
ポイント１：余白とのバランスを考える
白がベースとなるサイトは、余白があってこそ背景の白が活きてきます。全面の情報をまとめ上げつつデザインも重視したいのであれば、テキストであれば十分な行間、画像やdivであれば十分なマージンをとりましょう。
musubime - Graphic Designer カワセ タケヒコ - musubime.jp
ポイント２：コントラストを大切に
明度の低い色や彩度の高い色は、白地に配置するとコントラストが高まり、よりコンテンツを強調するようになります。ブログサイトではテキストに黒が使われていたり、ECサイトでは金額に赤やオレンジが利用されているケースも多く、可読性が配慮されています。同じように、写真やイラストの周りにも影をつけたり黒縁のボーダーを設定することで、白い背景とのコントラストが活きて、訴求力が高まります。
京都の宿泊施設 nine hours - ninehours.co.jp
ポイント３：バランスのいいフォントフェイスを選ぶ
白い背景のサイトでも、統一感のない情報がバラバラしたサイトではせっかくのクリーンなイメージが台無しです。使うフォントは１つか２つで十分。シンプルにしたいのであれば、タイトルのタイポグラフィには装飾のあるフォントを使ってもいいですが、本文のテキストは日本語ならゴシック、英字フォントならサンセリフを使うとモダンな印象を与えてくれます。
Deviens un mange-gardien - mangegardien.com
ポイント４：アクセントカラーを決める
あえて白黒だけでデザインすることもありますが、このようなデザインは上級者向きです。イメージとなるアクセントカラーを決めるのがいいでしょう。格好の例はGoogleで、ロゴでは4色活用していて注目を集めますが、一方で連携サービスで活用しているマテリアルデザインのメインカラーとして活用しているブルーは、情報の補助的な役割をします。
Angelia Ami - angeliaami.com
ポイント５：情報のまとまりを考える
ほかのさまざまなポイントとも関連しますが、白ベースのサイトにすることにより情報のまとまりを明確にすることができるので、関連する情報は寄せて、その他の情報は離すなどして、情報のリズムをデザインで表現するようにしましょう。
琉Q - ruq.jp
ポイント６：余計なものは排除
情報の観点からも余計な写真やイラストなどは排除すべきですが、デザイン全体からも余計なものがないか再確認しましょう。白地は複雑な情報よりも、シンプルなデザインにぴったりです。 
twenty-three - no23.jp
ポイント７：全体の統一感を確認する
よりモダンでクリーンなイメージを与えるサイトにするために、全体の統一感を見ておきましょう。部分的にはシンプルにしたつもりが、全体的にはアンバランスなこともあるからです。
Madwell - Advertising Agency in Brooklyn - madwell.com
まとめ
「白い背景のWebサイト」自体は目新しいものではありませんが、Webを取り巻く環境とともに、その新たな意味が捉えられ始めています。これまでとは違ったアプローチで白色の背景を利用することで、コンテンツが主役となるデザインとなり、情報も拡散されやすくなります。デザインに困ったら、もう一度「白紙」に戻してワイヤーフレームを組みなおすと、新しいアイデアが生まれるかもしれませんね。
