いいデザインは「余白」をうまく使っている!

イメージ画像

グラフィックデザイン、WEBデザインにおいて、「余白」を意識しデザインすることは重要な要素である。「余白」が計画的かどうかで「見やすさ」が大きく左右される。
今回は、デザイン4原則の整列、近接、繰り返し、コントラストのプラス1要素として「余白」を取り上げたい。WEBデザインはこの「余白」を積極的に使うことで情報を見やすく、読みやすく出来るのだ。

「余白」の効果は次の3点が主なところである。

  • 見出しテキストなどの情報にまとまり感が出る。
  • 情報と情報、コンテンツ内容の切り分けをつけることができる。
  • デザインの品がよくなる。

 

1.「余白」は「図」の独立性を高める

下の例を見てみよう。左はタイトルやコピーやイラストの回りに「余白」が少ないものだ。文字は大きいが、とても窮屈で読みにくくなることがわかる。むやみに文字を大きくすれば、読みやすくなるというものではない。
右のようにゆとりをもって「余白」を意識的に設定することで、文章や、図、タイトルの独立性を高め、見やすく、読みやすいデザインにすることができる。

余白を作る

 

2.「余白」の取り方

内側の余白は外側の余白より狭くする。さらに同じグループになるコンテンツは近接させ、別グループのコンテンツは逆に余白を大きくとる。
そうすることで、人は無意識的に、「集まっているものは同じグループ」として認識し、情報をまとまりとしてとらえ、全体的に見やすくなり、内容もわかりやすくなるのだ。

余白の取り方

 

3.「余白」をうまく使ったWEBデザイン

余白をうまく使ったデザインで代表的なWEBサイトといえば、Appleではないだろうか。余計なものをなくし、余白をたっぷり使い、必要なものを計画的に配置している。
デザインはスッキリしているということが大事である。この“スッキリ”の傾向が最近のWEBサイトデザインでは特に求められるところではないだろうか?

アップル
Apple

レ_ポーター
re.porter

細野
株式会社 細尾

デザイン_あ
デザイン あ

 

まとめ

「余白」=ホワイトスペースは目立たない「地」の役割をする重要なデザイン要素である。図としての写真やテキストブロックを効果的に浮かび上がらせ、また、美しいバランスや分かり易い情報の流れを演出する為には「余白」を上手にコントロールし、利用することがとても重要である。
越境ECサイト構築の際にはこの「余白」を意識し、デザインに活かしていただきたい。

関連する記事

保護中: 中国Eコマース最新情報 Macyが中国ECを一時中断した理由とは?... Macy'sをご存知でしょうか? アメリカではとても有名な小売店でオンラインストアでも世界中のユーザーに支持されているサイトです。そのMacyですが、中国大陸にもマーケットを拡大しているようですが、結果的にはこのマーケットではうまくいっていないようです。やはり中国市場での越境ECは難しい...
2019年 Webデザインの潮流 Webデザインはその年、その年で新しいものが生まれ、トレンドとなったり、ならなかったりする。 2018年のトレンドと言えば、グラデーション、スプリット(分割)レイアウト、タイポグラフィデザインなど見た目のデザインが多かったように感じられる。 今年はどうだろうか? デザインを行うには「見た...
越境ECで売り上げ好調なサイト -NO.2 –... 日本では国内向けEC市場は成長を続けるものの、少子高齢化問題など、一部市場では伸び率に翳りが見られる分野もある。そのような中、早い時期に国内から海外に視点を変えることで、成功している企業も多い。12月20日のジェトロの報告書にもあるように海外販売で日本の商材を販売するという市場は魅力的な分野...
ECサイトのユーザビリティ10の心得 ECサイトのユーザビリティは週単位、月単位で見直してみる必要がある。かっこいいビジュアルデザイン、おしゃれなデザイン、それも大事ではあるが、ECサイトでは一番ベースになくてはならないのはユーザビリティである。 "デザインとは機能である"と言ったのはスティーブ・ジョブスだが...
色がもつイメージ:安心と信頼をメッセージする=ブルー効果... 色が何らかのサインを送りだしていることは誰もがよく知っている。誰がどんな色を選ぼうと、共通しているのは、その色に対して人は反応するということだ。私たちは色に条件反射し、気づくこともない。色に対する反応は直観的反応とも言われ、個々の色は人の本能的な反応と密接に関係し、その反応は生理的、感情的、環境...
スマホ・タブレット最適化に「レスポンシブWebサイト」がベストな理由... スマートフォンやタブレットの利用者数の増加にあわせ、Webサイトへのアクセス数のモニタリングから「スマホ最適化の必要性」を実感している人も多いでしょう。 昨年あたりからレスポンシブWebデザインとよばれる、PCやスマホ、タブレットなどあらゆるデバイスに対応するWebページ制作の手法が増えてきました...

タグ:

このエントリーをはてなブックマークに追加

コメントをどうぞ