ちょっと仕事で「ん？」って思った機会があったので週末に改めてしらべてみました。”ホワイトスペース”の話です。デザインの話をするときはここからするっていう方も多いと聞きます。
ホワイトスペースってなに？？
ホワイトスペースとは、文字、画像など、デザインのエレメントが何もない場所のことです。ここが何もないのですが、あらゆるデザインにおいて重要なエレメントになります。
ホワイトスペースをうまく操ることで、あるコンテンツに注目させたり、全体的に見やすいデザインになったり、様々な効果が期待できます。
ホワイトスペースの特徴
”エレメントの美しい形” ＝ “ホワイトスペースの美しい形”
- ほとんどのグラフィックデザインで最も面積が大きい
- 適度に「間」をもたせる
- 注目させたいコンテンツに視線を集める。
同じ内容のグラフィックデザインもスペースのつくりかたによって、見え方はまるっきり違ってきます。デザイナー自身はクライアントが何を表したいのかをきっちり理解しておく必要があります。
うまくホワイトスペースを活用するコツ
上の図のように、エレメントが画面全体にまんべんなく広がっていると、ホワイトスペースがまとまらず、散漫な印象になります。内容に応じて、寄せたり詰めたりして、意識的にホワイトスペースを作成しましょう。おおまかに気をつけたいことは以下の3点になるかなー。
- “結果的にあいてしまった余白”をなくす
- コンテンツのラインを揃え、詰めるべきコンテンツをしっかりと寄せる
- コンテンツの抜けをどのあたりにおくかを考えておく
ウェブデザインでワイヤーフレームを利用するのもこの結果的に空いてしまった余白を極力少なくすることにつながります。グラフィックデザインは第一印象はとても大切なので、ここには特に神経を使いますよね。
また、コンテンツのラインを揃えたり、抜けをどのあたりにおくかを計算しておくことによってそのコンテンツ全体の印象を変えることができます。また抜けを極端に増やしたり減らしたりやりすぎてもちょっと問題がでてきそうです。
画面の４辺のホワイトスペース
抜け間につながり、少し間抜けな印象になりがち。
画面の４辺全てをコンテンツでふさぐ
窮屈で息苦しい印象になりがち。
ホワイトスペースのテクニックの例
1.視線を集めるテクニック
もっとも目立たせたい要素の周囲に大きなホワイトスペースを作る。
そのほかのエレメントを小さめにして、目立たせたいコンテンツから離すことで中央に視線を集中させるテクニックです。
参考ウェブサイト
グラフィックデザイナーのカワセタケヒロ氏のポートフォリオサイト。トップページは余計な装飾はなく、中央の名前に視点が集まるようにデザインされています。氏のサイトは1ページで作成されていてなんかきれいですね。
グラフィックデザイナーやフォトグラファーのウェブサイトは特にホワイトスペースがうまく計算されていて、コンテンツが引き立つように作られているものが多い気がします。
2.ティザー広告
ホワイトスペースのテクニックとはちょっと違ってくるかも知れませんが、ティザー効果をご紹介。ティザーとは英語の”tease：じらす”という単語が語源で、目的の要素を明らかにせず、見る人の興味・好奇心をかき立てる手法です。構成要素を減らし、2つ(複数)のパートにわけて視線を行き来させる対比の効果もあります。じらし広告ともいいます。
ティザー広告の注意点
- 一般的に注目度の高い商品・サービスで行う
- あまりしつこいとあきられる
興味をそそるといっても一見何の広告なのかわからないものなので、見る人にがっかりさせたりあきさせないような工夫が必要です。知名度の高い商品でつかうことをおすすめします。自動車メーカーなどでよく見ますね。最近では今、ニュースを賑わせているオリンパスのカメラ、”PEN”の海外サイトで布をかぶせるといったプロモーションの形で使われていましたね。
参考：Olympus Corporation of the Americas Inc.
参考ウェブサイト
最近ではFacebookページのウェルカムページなどでもよく使われています。”いいね”を押してもらうようにキーワード等で興味をひくといったページが増えました。
あれ？？スクリーンショットとページのデザインがかわってる。。。まあご愛敬でXD
まとめ
今回のホワイトスペースの話はまだまださわりの部分にすぎません。余白の話はこれだけに限らず、文字組や行間などのDTPデザインに関わるものや、グリッドレイアウトなども考える必要がでてきます。その辺の話も後々勉強して、ブログの記事にしていこうかなと思います。奥が深いですね。
それでは
参考にした書籍
アマゾンのページにとびます。
コメント