« ブログのトップページに戻る

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

   投稿者 : 2015年5月12日 By

イメージ画像

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

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

 

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

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

図01

(図1)

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

 

2.文字のジャンプ率

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

図02

(図2)

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

 

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

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

関連する記事

説明なしでもわかる? マイクロインタラクションとは... これからのWebサイトデザインの方向性は「内容(コンテンツ)の充実」と「体験の向上」にあると言われている。それらを実現するひとつの解は、「ヒューマンセンタードデザイン(人間中心デザイン)」という思想である。 そして、ヒューマンセンタードデザインのアプローチの方法として、マイクロインタラクシ...
色がもつイメージ:安心と信頼をメッセージする=ブルー効果... 色が何らかのサインを送りだしていることは誰もがよく知っている。誰がどんな色を選ぼうと、共通しているのは、その色に対して人は反応するということだ。私たちは色に条件反射し、気づくこともない。色に対する反応は直観的反応とも言われ、個々の色は人の本能的な反応と密接に関係し、その反応は生理的、感情的、環境...
ツイッターの最新機能Twitter CardsとBuy from Tweet... Eコマースの運営において、ツイッターのようなソーシャルメディアが欠かせないパートナであることを、もう皆さんは随分と意識されていることでしょう。しかし、いつも自社のサイトへのリンクに注目を注ごうと努力するのではなく、直接ソーシャルメディアで販売を行えないかと考えたことがありませんか?実際、お客さん...
実店舗では必須のMEO対策 取り組むべきポイントは?... 実店舗ではSEOより重要だと言われる、MEOをご存知だろうか? 例えば、カフェでコーヒーが飲みたくて、カフェとGoogle検索しても、新宿にいる場合と大阪にいる場合では検索結果が違ってくる。検索結果では一番上部に地図が表示され、さらに下段では3店舗の店名と説明文、写真が表示され、その後にS...
デバイス毎のWebブラウザシェアは? 2017−2月... 前回2016年9月からブラウザシェアはどのような変化が見られたか、Google Chromeはどこまでシェアを伸ばしたか、Microsoft Edgeのシェアは普及し、どこまで伸びたのだろうか? 今回も各ブラウザ毎に日本と世界で見ていこう。 ※掲載に使用したデータは「Stat...
AmazonとeBay その違いはどこにある? 2018年最後のブログとなり、今年は皆様にとって、どんな1年だっただろうか? 越境ECにおいては、今年も確実に拡大成長が続いた一年だった。 最後のブログは、これから、越境ECを始めようと考えている方、そして、海外販売を行っていて、もっと収益を上げたい方、越境ECを始めたいが、そもそも自社商...
このエントリーをはてなブックマークに追加
 

今なら海外展開の為の成功BOOKを無料ダウンロードできます。是非この機会にお読みください。