PR
スポンサーリンク

【デザイン4大原則】コントラスト(対比)を徹底解説!

コントラスト アイキャッチ Webデザインに必要な知識

デザイン4大原則の最終回、「コントラスト」について徹底解説していきます!

「近接、整列、反復、コントラスト」の4大原則を知って、脱初心者デザインを目指しましょう!

早速ですが、このデザインにコントラストをつけると、どんなデザインになると思いますか?

このままでは、大事なところがわからず、のっぺりした印象になってますよね…

では、一緒にコントラストをつけるとはどういう事が見ていきましょう!

 

デザイン原則 コントラストとは

デザイン コントラスト

まず、デザインで言う「コントラスト」とは、色々な要素同士を「対比」させる手法の事を言います。

強調したい部分」と「そうでない部分」を区別するために、対比させ利用します。

そうすると、各要素同士がメリハリがついて、読み手に魅力的に伝える事ができ、かつ読んでみようという気にさせる事ができます。

単調で見栄えが良くないイラストは、目にも止まらないですよね(笑)

すなわち、スルーされちゃうんです…!

では、どんな要素にコントラストをつけデザインするのでしょうか?

 

コントラストの要素

要素は4つに分類できます。

コントラストの要素
  • 文字の大きさの対比
  • 写真・イラストと文章との対比
  • 色の対比
  • 密度の高い部分と余白の対比

 では、それぞれの要素の例を見ていきましょう。

 

コントラストを付ける 2つの方法

デザインでコントラスト付ける時のポイントは、2点あります。

上記4つの例のように、「強調したい要素を明確にする」と「違いをハッキリとつける」という事です。

 

強調したい要素を明確にする

あれも大切なので強調、これも大切なので強調、これも…

と、あれもこれも強調しては、結果的に全体のコントラストが弱まったデザインになります。

見たときに、強調した部分がわからなくなってしまいますね…。

コントラストが適切に表現できていないデザインからは、制作者の意図をくみ取る事はできません。

これは、何としてもコントラストを習得したいですね!

そのため、強調したい部分は、大きさなのか、色・イラスト・余白なのかを決めましょう!

 

違いをハッキリとつける

「AとBはどちらかと言えばBの方が大きい」という、あいまいな違いでは効果がありません。

「Bの方がAよりも明らかに大きい」と感じられる程度に差を付けなければ、コントラストとは言えません。

つまり、誰しもが気づく大胆な違いを付けるようにします。

そうすることで、紙面にメリハリがつきますし、情報も理解しやすくなります。

要するに、『強調したいのは「大きさ・色・イラスト・余白」なのかを1つ決めますます。

そして、思い切ってコントラストを付けデザインすると言う事です!

これを覚えよう! コントラストのポイント
  1. 強調したい要素を明確にする
  2. 違いをハッキリとつける

 

コントラストの例

わかりずらいコントラストが感じられないデザイン例を用意してみました。

左の文章では、コントラストが弱いため、読みずらく、見た目も良くないですね…。

右の文章では、明確なコントラストがあり、「タイトル」「見出し」などに明確な違いがあります。

内容を読まなくても、一目で情報の役割を認識できますし、見栄えも良いですね!

2つの文章を比べると、右の例の方が「読んでみよう!」という気になりますよね!

つまり、コントラストを付けて付けて魅力的なデザインにすると、最後までもらえる確率が上がります。

要するに、これはやらない手はないでしょ!!!

 

デザインはコントラストで生まれ変わる

さて、コントラストで生まれ変わるとは、どういう事なのか見ていきましょう!

「目的や役割」「重要度」の異なる要素を、同じ大きさでレイアウトしてしまうと、退屈で面白味の無いデザインになってしまいます。

「重要な要素」や「面白味のある部分」を見つけて、コントラストを付けると魅力的なデザインに生まれ変わります。

つまり、こういう事です。

  

どうですか?

コントラストのポイント「違いをハッキリつける」で、こんなにもデザインは変わります!

中途半端にケーキを大きくするのではなく、最大限までケーキの写真を大きくしました。

そうすることで、強いコントラストを、パッと見た瞬間から読み手に伝えるデザインになります。

 

コントラストにジャンプ率を活かす

デザイン コントラスト ジャンプ率

ジャンプ率とは

デザイン上の「大きい部分」と「小さい部分」の比率の事を「ジャンプ率」と言います。

そして、ジャンプ率は「高い」「低い」で表現します。

比率が高いこと:ジャンプ率が高い
比率が低いこと:ジャンプ率が低い

デザインが読み手に与える印象は、ジャンプ率によって大きく変わります。

ジャンプ率が高くなればなるほどセンセーショナルな印象になり、訴えかける印象が強くなります。

一方、ジャンプ率が低くなると、静かで落ち着きのある印象になります。

つまり、高級感のあるデザインとなります。

※センセーショナル:人の感情・感覚を強くゆすぶる性格をもつさま

これを覚えよう! ジャンプ率のポイント
  1. ジャンプ率が高い:センセーショナルな印象
  2. ジャンプ率が低い:落ち着きのある印象

 

では、実際にジャンプ率の例を見てみましょう!

 

文字のジャンプ率

ジャンプ率の意味は分かったでしょうか?

では、次は「文字のジャンプ率」を見ていきましょう!

 

文字のジャンプ率とは

「本文の大きさ」に対する「タイトル」「見出し」「キャプション」の大きさの比率です。

文字要素それぞれの役割を加味した上で、文字サイズを変えてコントラストを付けていきます。

つまり、文字を変えて、伝えたい文字要素順に大きさを変えていくのです。

そうすれば、読み手は迷うことなく読み進める事ができます。

そして、「伝えたい情報」をしっかりと伝える事ができるようになります。

では、記事冒頭の答え合わせをしていきましょう!

 

右のデザインの方が、「10の考え方」という部分が一番初めに目に入ってきますね!

「文字のジャンプ率」が高く、コントラストが感じられるデザインになっています。

これこそが、文字のジャンプ率」の力です!

 

文字のジャンプ率を詳しく解説

注目を集めたいデザインでは、タイトルやのジャンプ率を高くデザインします。

そうすると読み手は、紙面全体を眺めるだけで、読みたい情報を探し出すことができます

文字を大きくするのは、とてもシンプルな技法です。

瞬時に情報を伝えられる雑誌の表紙や、新聞の見出し、広告、様々な媒体で使用されています。

一方で、読むことを前提とした書籍や、ゆったりと読み進める紙面では、ジャンプ率を低く設定します。

これを覚えよう!

文字のジャンプ率を高くすると、注目を集める事ができる

 

文字のジャンプ率が高いデザイン

先ほども言いましたが、文字のジャンプ率を高くすると、デザインを眺めるだけで、読み手に情報を伝える事ができます。

この手法は、瞬時に情報を伝えたい広告や雑誌・POP、そしてYouTubeのサムネイルなど利用されています。

ジャンプ率が高くコントラストが付いたデザインは、インパクトを与えるのに効果的な手法です。

 

文字のジャンプ率が低いデザイン

ジャンプ率を低く設定すると、読み手に以下のイメージを事ができます

ジャンプ率が低い
  • 高級感や信頼感
  • 上品で説得力がある
  • 知的で賢い

時間をかけてゆっくりと読んで欲しい書籍やカタログ、あいさつ文などに向いていると言えます。

結婚式場で使用されるメニューのデザインは、ゆったりとした空間に合わせつため、文字のジャンプ率を低く設定しています。

 

これを覚えよう! 文字のジャンプ率のポイント
  • 文字のジャンプ率が高い:注目を集める
  • 文字のジャンプ率が低い:高級感信頼感が出る

 

まとめ

デザイン コントラスト まとめ

デザイン4大原則、「コントラスト」は、いかがでしたでしょうか?

コントラストをデザインに活かすと、間違いなくデザインでもビジネスでも、魅力的で注目を集める事ができます!

これだけはやってみる!

コントラストを付ける時は、とにかく大胆に!中途半端はダメ!

 

今回で、「近接、整列、反復、コントラスト」の4大原則は全て終了になります。

デザインは「センスが必要」と思っている方がほとんどです。

しかし、実は理論を覚えると誰でもできちゃうんですよね!

これは間違いない事実で、副業でデザインを始める方、企画書・プレゼン・ビジネス資料を作成するビジネスマンには、必ず、必ず、必ず役立ちます

デザインの4大原則の全てを知って、他の人に差を付けちゃいましょう

 

こちらの書籍を参考
デザイン コントラスト 参考書籍

本ブログの内容は、こちらの本を参考に作成しました!

読みやすく、実例もありわかりやすい内容になっていますので、私のおススメ本の一つです。

最後まで見ていただき、ありがとうございました!

本ブログでは、Canvaやデザイン知識をたくさん発信していますので、他の記事も是非見ていって下さいね。

では、次の記事で会いましょう!

プロフィール
この記事を書いた人
しゅう☆

こんにちは!看護師をしながら副業をし、豊かな人生を目指しブログを開設しました。昨年からWebデザインの副業を始め、デザインを中心に発信していきます。応援して頂けると、とても嬉しいです!
詳しいプロフィールは「しゅう☆」をクリック!しゅう☆の動画もあります↑

\良かったらシェアしてね/
Webデザインに必要な知識デザインの教科書
スポンサーリンク
\良かったらシェアしてね/

コメント

タイトルとURLをコピーしました