はじめてのデザイン 〜デザインの基本・考え方〜

2-2. デザインの4つの基本原則 - コントラスト

  • デザインの考え方

デザインには4つの原則があります。このレッスンではその中の1つである「コントラスト」について解説します。「コントラスト」とはページ/画面上の要素同士にメリハリをつけ、情報を明確に伝えるために効果的な手法です。

公開日:2019/07/02最終更新日:2021/01/28

1.コントラストとは

コントラストは、視覚的に面白さを加えたり、要素の構造に区別を付けるために最も効果的な方法です。言い換えると、複数の要素がお互いに類似し、埋没してしまうことを避けるのに有効です。

コントラストを意識することにより、次のようなことを実現できるようになります。

  • ページが平淡で無くなり、面白そうに見える
  • 情報の構造(順序や重要度合い)が明確になり、コンテンツを読みやすくなる

人は何かを見るときに、無意識にその情報を詳しく見るべきかどうかを判断していると言われています。コントラストで情報にメリハリがあるものほど、視覚的な認知が容易になるので見る人の気を惹きやすくなります。

2.実現方法

フォントや色といったスタイルを用いて情報や構造にメリハリをつけることにより、コントラストを創り出します。

  • 色を変える
  • 形や大きさを変える
  • フォントを変える

などが方法としてあります。

ただし、少し違うだけでは効果がありませんので注意しましょう。誰が見ても感じられるくらいメリハリを付けることが大切です。

3.コントラストを意識した例

ここで1つ、例をお見せしましょう。
本の表紙を例にしてみました。
左がコントラストを意識する前のものになります。右がコントラストを意識したものになります。

上記を見て、この2つの違いを5つ挙げてみてください。
その違いこそが、コントラストの実践的なテクニックです。

2つの異なるポイント

  1. はじめてのデザインの文字サイズ(タイトルの強調)
  2. タイトルとサブタイトルの文字の太さ(タイトルの強調)
  3. タイトル・サブタイトル部分の背景色(タイトル・サブタイトルの強調)
  4. 著者と所属の文字サイズ(著者の強調)
  5. 所属の文字の色(著者の強調)

4.まとめ

いかがだったでしょうか?
実際に何かをデザインしていく際に、ぜひ参考にしていただければと思います。

  • コントラストとは、視覚的に面白さを加えたり、要素の構造に区別を付けるために見た目のメリハリを付けることです。
  • 要素の色を変えたり、形や大きさを変えたり、フォントを変えたりすることでコントラストを生むことができます。
  • コントラストを機能させるには要素ごとの違いをしっかりと認識できるくらいメリハリを付ける必要があります。

理解度チェック





はじめてのデザイン 〜デザインの基本・考え方〜

1. デザインを考える前に

2. デザインの4つの基本原則

3. 色と配色の基本

4. タイポグラフィ

5. 写真や画像を効果的に使う

6. イラストレーションを効果的に使う

7. デザインしてみよう



このレッスンの著者