2021.1-11 デザイン日記#6 コントラストの付け方

こんにちは。今日もデザイン日記書いていこうと思います。今回はWeb制作会社のWebサイトデザインを比較していこうと思います。選んだ理由は、将来Web制作会社で働きたいからです。

今回比較するWebサイト
株式会社ネオインデックス：https://www.neoindex.co.jp/
株式会社CRIMZON：https://crimzon.co.jp/
CODIA株式会社：https://codia.co.jp/

コントラストの付け方

今回３つのWebサイトを比較していく中でそれぞれのサイトのコントラストの付け方について詳しくいこうと思います。

コントラストとは

コントラストとはある要素と別の要素を対比させるデザイン手法です。「強調したい内容」と「そうでない内容」を区別する為に利用します。コントラストをつける方法は、次のように様々です。
１．大きい文字と小さい文字の対比
２．写真や図と文章の対比
３．色の対比
４．密度の高い部分と余白の対比
コントラストをつける際のポイントは「強調したい要素を明確にする」と、「しっかりと違いをつける」の2点です。あれもこれも強調してしまったら結果的にコントラストが弱まってしまいます。また要素同士にあいまいな違いを出しても効果はありません。

写真や図と文章の対比

これは株式会社ネオインデックスのWebサイトです。このサイトは写真や図と文章を対比させ、コントラストを付けています。写真や図には会社が一番伝えたい情報を掲示し、文章で詳しい会社の説明をしています。このようなコントラストを生むことにより、強調したい内容を明確に伝えられるように工夫されています。

大きい文字と小さい文字の対比

これは株式会社CRIMZONのWebサイトです。Be Creative & Strategicという大きな文字が目立ちます。創造的かつ戦略的にという企業理念を強調しており、活力的でインパクトのあるデザインになっています。

密度の高い部分と余白の対比

これはCODIA株式会社のWebサイトです。画面トップのテキストには大きな余白が加えられているのに対し、それ以外の要素にはそれほどの余白は加えられていません。他の要素との余白を大きく取ることで余白を取った要素がサイト上で際立って見えるようになります。今回は学校説明会につなげるホームページを提案というメッセージを強調させたデザインになっています。