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

イメージ画像

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

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

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

 

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

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

余白を作る

 

2.「余白」の取り方

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

余白の取り方

 

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

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

アップル
Apple

レ_ポーター
re.porter

細野
株式会社 細尾

デザイン_あ
デザイン あ

 

まとめ

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

関連する記事

カゴ落ち対策を行っていますか? お店に買い物に行って、料理などのいろいろな食材をカゴに入れ、レジ並んでる間に気が変わって食材を棚に戻すことがある。ECサイトの場合は「カートに入れる」までは完了したが、決済や配送のステップで気が変わり、別のサイトに移ってしまう。 このようにカートに商品を入れたにもかかわらず、途中でページから...
あなたはいくつ知っている? EC業界キーワード... EC業界では専門用語やさまざまな独自のIT用語が日々飛び交っている。IoT、オムニチャンネル、O2O、など。今回はそんなEC業界で仕事をするうえでの、最近のトレンドとも言うべき、代表的なキーワードについて説明する。皆さんも一つでも聞いたことない用語などあったら、チェックし、詳しく調べてみると良い...
スマホ・タブレット最適化に「レスポンシブWebサイト」がベストな理由... スマートフォンやタブレットの利用者数の増加にあわせ、Webサイトへのアクセス数のモニタリングから「スマホ最適化の必要性」を実感している人も多いでしょう。 昨年あたりからレスポンシブWebデザインとよばれる、PCやスマホ、タブレットなどあらゆるデバイスに対応するWebページ制作の手法が増えてきました...
ショッピングモールサイトではなく、自社ECサイトで売上げをアップするには?... 独自ドメインで自社ECサイトを運営しているが一向に売上げが上がらない、しかし、ショッピングモールサイトでは売上げが上がり、ますます、Amazonや楽天などのモールサイトの依存度は高まり、どうしたら、自社ECサイトでしっかりした売上げ基盤をつくり、モールでの売上げではなく、自社ECサイトで売上げを...
海外のECプラットフォームのメリットは?... 日本のBtoCにおけるEC市場規模は15兆1,358億円(2016年)、2020年には20兆円規模にまで拡大すると予測されている。EC化率は物販系分野で5.43%。このEC化率においてはアメリカは7%、中国は15%などと比べるとまだまだ低い数字と言えるだろう。 逆に言えば、まだまだ、店舗が...
今、ECサイトに効果的な「カード型デザイン」がトレンド... Webデザインは時代ごとに変化してきている。今やWebデザインはパソコンやタブレット、スマホなどたくさんのディバイスに対応するため、従来のサイドバーを活用したWebデザインよりシングルカラムのデザインが主流になりつつある。そして、2015年は特にレスポンシブに対応した「カード型デザイン」が注目さ...

タグ:

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

コメントをどうぞ