投稿日時:

前回のWeb系コラムでは「色の持つ効果」についての第二回ということで、白を取り上げました。
今回はシリーズの3回目、「灰色」についてです。
灰色の使われどころに留意しながら、Webサイトを見ていきます。

「灰色」を使ったWebサイトも多く目にすると思います。
そもそも「灰色」のイメージを考えてみると、雲り、曖昧など、あまりよくない言葉があるかもしれません。一方で、「灰色」を使うことで、都会的でシャープな印象をより強めるなど、すっきりと洗練された印象を導くこともできます。このような側面を活用すれば、Webサイトをワンランクアップさせることも可能といえるでしょう。

具体的に、Webサイトをみていきましょう。

Audi

灰色を全体にもってくることで、知的で、内面からにじみでるような格好良さがうまく表現されています。グラデーションのかかった灰色を背景におき、高級車にふさわしい質感を与えています。
また、ポイントとなっている彩度の高い赤色があります。無彩色が中心のWebサイトでは、彩度の高い、やや強めの有彩色を使っても、うるさい印象にはなりにくいです。むしろ、ポイントとなる色として重宝できるということを、覚えておくとよいかもしれません。

ちびまるこちゃんのたのしくわかるミツウロコ

灰色は基本的に無機的な色で、どちらかというと冷たい印象を与えます。その場合は、画像を使うことで、その印象を薄められることがあります。
比較的キャラクターの色がカラフルであっても、薄い灰色の背景が与える穏やかさによって、キャラクター同士がうるさくなりすぎずに、うまくまとめられています。

CODA

有彩色と組み合わせがしやすい灰色の特徴が、うまく出ているWebサイトです。彩度の高い緑色やオレンジ色に注意が向きやすく、伝えたい情報への視線の誘導がとてもスムーズにデザインされています。

無彩色で主張をあまりしない灰色のポイントを押さえて、Webサイトのデザインに是非活用してみて下さい。

(担当:斉藤 万幾子