デザイン4原則でラクラクデザイン -その4:コントラスト(強弱)-

イメージ画像

デザインの良い、悪いを決める大きな要因であるコントラスト。
コントラストとは強弱、メリハリをつけることで、見る人に印象づけ、面白みをあたえるテクニックである。コントラストには2つの要素が必要である。2つの要素に違いをつけることで、生まれるデザインだ。
2つの要素に違いをつけるにはいろいろな方法がある。
フォントの大小、線の太さ、色、形、サイズ、余白の大きさなどで差をつける。この差、違いは少しではなく、大きくつけることがコントラストである。
今回はこのコントラスト(強弱)の方法について見ていこう。

コントラストは、読者をはっとさせてページ引き込むような視覚的な面白さを加えたり、異なる要素の間に組織的な構造を作りだすための効果的なデザイン手法である。
重要なのは、コントラスト効果を発揮させるには、コントラストは強く、大きく、大胆に行うということである。
コントラストは2つの要素が異なる場合に適応できる。コントラストの原則というのは、2つの項目が同じでないなら、はっきり違いを出すことで生まれる。
例えば、大きな活字と小さな活字で対比させる。太い線と細い線、寒色と暖色、滑らかな肌合いと粗い肌合い、小さな画像と大きな画像など、違いを大きくつけることで、情報をまとめ、ページデザインに面白みを与えることである。ページが面白そうに思えれば、そのページを読んでもらうことができる。
コントラストの原則は“コントラストをつけるのに臆病になってはならない” である。

 

1.コントラストをつける

(図1)の上部は「見出し」と「本文」にあまり差がない場合、下部ははっきりとした差を付けた場合。

図01

(図1)

コントラストとは文字の太さやサイズによって階層をつくることだ。
本文より小見出しを小見出しよりタイトルを目立つように、心がけて大きくする。
コントラストは重要な箇所とそうでない箇所に思い切って強弱をつけること。差が大きくなると、遠くから見ても一目で内容が分かり、それだけで、全体の構造や重要な箇所を把握でき、理解しやすくなる。

 

2.文字のジャンプ率

ジャンプ率とは本文の文字サイズに対するタイトルや見出しの文字サイズの比率である。
ジャンプ率が低いと落ち着いた印象になり、逆に高いと躍動感が生まれる。また、注目すべき点が明確になり、読みやすくなる。絶対的な大きさではなく、本文に対するタイトルや見出しの相対的な大きさで決まる。(図2)の左はジャンプ率が低いデザイン、右は高いデザイン。

図02

(図2)

ジャンプ率が低いものは、「じっくり読ませる」ようなコンテンツに向いている。
ソフトウェア開発に使われるアプリの「使い方マニュアル」などに多く見られる。
逆に高いものは、バナー広告やポスターやチラシデザインなどに応用するとよい。

 

 3.「コントラスト」まとめ

ページ上のコントラストは私たちの目を引く。私たちの目はコントラストが好きなのだ。
コントラストを行うとき、同一ページにある2つの異なる要素は似せてはならない。コントラストを効果的にするには、2つの要素をはっきり意思をもって、異にすることだ。コントラストはデザインの善し悪しを決める大きなファクターであると考えよう。
コントラストは重要なところ、注目させたいところ、焦点を当てたい情報を整理し、強弱をつけることで、視覚的なメリハリを与えるということである。
そして、大きい=目立たせる。ということではなく、重要なものはより大きくし、重要でないものはより小さくすることでデザインで差異化をつけることである。つまり、明確な意思をもって、情報を階層化すること。それが「コントラストをつける」ということである。
この「コントラストの原則」を使い情報を階層化しあるECサイト構築し、訪れたユーザーにとって分かりやすく、面白みのある情報を提供していただきたい。

関連する記事

2017年 WEBデザイントレンドまとめ 今年も6月に入り、梅雨シーズン到来である。 2017年も半ばを過ぎようとしている今回は、久々に「今年、WEBサイトで注目されているデザインは何か?」をまとめてみた。 2016年のデザインキーワードはシンプル、マテリアルデザイン、パララックスなどであったが、2017年はこの潮流はどのように...
配送スピードだけじゃない! DHLのすごいところ... 10月1日よりLive CommerceではDHLプラグインがリリースされた。 これにより、Live Commerceをご利用のお客様はDHL管理画面からの入力で、アメリカ、ニューヨークなら最短で2日(36時間)でDHL海外配送が可能となった。 今回は、圧倒的なスピードを誇るDHL国際配...
Buyボタンを設置、Twitterが本格的にEコマース参入?... Twitterは9月8日、Eコマース機能のテストを開始したと発表しました。アメリカ在住の少数のモバイルユーザーを対象に実施され、Twitter上で簡単、便利に商品購入ができる新たなサービスの提供を目的として行われています。 いよいよTwitterのEコマース参入は秒読み段階なのでしょうか? ...
今、若者に人気のSNSって何? 今年3月、ニールセン デジタルは主要なSNSやアプリの国内利用状況の調査結果を発表した。 (下図参照) 結果は、1位はLINEでスマートフォン利用者の80%にあたる4,807万人が利用し、2位はTwitterの2,392万人、3位はFacebookで2,093万人、4位がInstagram...
個人向け海外配送代行サービス 「Live Commerce ロジ」リリース... 当社が越境ECで行っている物流サービスを、一般個人向けにもご利用できる形でリリースさせていただきました。 https://www.live-commerce.me EMSよりも安く早く到着可能 最大91%OFFの格安送料で海外まで送れる 1個から受託可能 全...
売れるスマホECサイトを作る10の法則 Googleは今年2015年4月21日から、Webサイトが「モバイル・フレンドリー」の状態であるかどうかを検索結果に反映させると発表した。これはスマホ対応されていないサイトやページは今後、検索上位になることは難しいことを意味する。 さらに、今後は自宅のパソコン利用より、スマホからのECサイト...

コメントをどうぞ