2021.1/9 デザイン日記#4 配色を考察

こんにちは、今日もデザイン日記書いていきたいと思います。今回はお笑い賞レースのWebサイト（M1グランプリ、キングオブコント、R-1グランプリ）をピックアップして、それぞれのWebサイトを考察していこうと思います。選んだ理由は僕自身お笑いが好きで、賞レースも大好きだからです。

今回比較するWebサイト
M-1グランプリ：https://www.m-1gp.com/
キングオブコント：http://www.king-of-conte.com/2020/result.php
R-1グランプリ：https://www.r-1gp.com/

配色の仕方

今回３つのWebサイトを考察していく中で、それぞれのWebサイトの配色の仕方、どんな色を基調として、目立たせたい情報にはどのような色を使っているのかを見ていこうと思います。

配色の基本

比較する前に配色の基本についてまとめたものを紹介します。Webデザインにおける配色の基本は「70：25：5」といわれています。
ベースカラー
配色の70%を占めるもの。配色の中で占める割合が多く、ほかの色を邪魔しないものが選ばれる。基本的には、無彩色と呼ばれる黒、白、グレーといった色が適している。
メインカラー
配色の25%を占めるもの。配色の中で主役となるカラー。基本的にはロゴのカラーやコーポレートカラーが使われる。ベースカラーやアクセントカラーに比べて、自由度の高い配色である。
アクセントカラー
配色の5%を占めるもの。配色の中でもっとも割合は小さいが、もっとも目立つ色を使用する。

M-1グランプリ

ベースカラーに黒、メインカラーに金色、アクセントカラーに赤を使っています。
ベースカラー
ベースカラーの黒は、メインカラーである金色を目立たせる配色になっています。
メインカラー
メインカラーである金色からは高級感を感じられ、厳しい予選を勝ち上がってきた芸人を称えているような印象を持ちました。
アクセントカラー
アクセントカラーにエネルギッシュで活動的な色である赤を使うことにより、M-1戦士たちの熱い情熱を表現出来ています。


決勝と敗者復活戦の配色の違い

敗者復活戦のメインカラーには青が使われています。冬の寒さを伝えるのにも使われる青は、極寒の冬空の下、野外ステージで敗者復活の座を争うM-1戦士たちを表現しているようにも感じ取れました。

キングオブコント

ベースカラーに白、メインカラーに紫、アクセントカラーに金色を使っています。また出場した芸人たちは赤い服を着ています。
ベースカラー
ベースカラーは紫と調和しやすい白になっています。トップページは紫がベースカラーのようになっていますが、ページ全体を見てみるとべーズカラーは白になっていました。
メインカラー
メインカラーである紫は高貴で神秘的なイメージのある色です。今回のページのメインカラーは紫と赤を組み合わせたようなグラデーションになっている為、紫が持つ高貴なイメージと赤が持つ情熱的なイメージを上手く組み合わせた配色になっています。
このメインカラーの配色がキングオブコント決勝の高級感を際立たせ、芸人たちの熱い情熱を表現出来ていると感じました。
アクセントカラー
アクセントカラーには高級感のある金色を使っています。ジャルジャルの優勝を称えるテキストの影に金色を使うことにより、勝者を称える運営側の気持ちが伝わってきました。

R-1グランプリ

ベースカラーに白、メインカラーに青、アクセントカラーに金色を使っています。
ベースカラー
ベースカラーは青色の邪魔をしない白でした。
メインカラー
メインカラーに使われている青には開放感を表すイメージがあります。ピン芸人の大会ですので、ピン芸人の多種多様な自由さを表現しているように感じました。
また青色のトーンが少し低めです。トーンが低めな色は重圧的で威厳的な印象を持たれます。この少し低めのトーンがR-1グランプリ予選の厳しさを物語っているとも感じ取れました。
アクセントカラー
アクセントカラーには高級感のある金色を使い、M-1やキングオブコント同様、大会の高貴で特別なイメージを表現していると感じました。

Webページの配色を見比べてみて

今回3つのWebページの配色を見比べてみるとそれぞれ高級感や高貴な印象を出す為に金色を使っていたり、M-1とキングオブコントのWebサイトは情熱的な色を表す赤を使っていました。配色デザインを分析することによってWebサイトのコンセプトや伝えたいことを感じ取れました。これからも何か１つの観点に着目してWebサイトを観察してみようと思います。