Webサイトの色を決めるとき、どうやって決めていますか？サイトの目的、ターゲット、どのような印象を与えたいか etc…　ここらへんがポイントになってくるのではないでしょうか。Webデザインにおける配色が、どのような印象を与えているのか考えてみたいと思います。

さて、一ヶ月をきりました。何がって……野球の開幕が！とりあえず昨日オープン戦で久しぶりの野球を楽しんできました。………と、全く関係のない話をしているわけではなく…。Webサイトの配色を調べるにあたって今回はセ･リーグ6球団のWebサイトをテーマに取り上げてみました。各球団チームカラーがあるので、そのカラーを使いどのような印象を与えているか見てみたいと思います。

まず、冒頭で書いた配色を決める基準となるポイントを考えてみます。目的、ターゲット、与えたい印象の３つを書き出してみると、ざっくりではありますが目的とターゲットはどの球団もだいたい同じになると思います。違ってくるのは与えたい印象です。球団の持つ伝統やイメージによって、配色が大きく変わってきます。

競合となるサイト、つまり他球団と同じような配色にならないように気をつけます。６球団のチームカラーはこのようになっています。　大きく分けて「赤」「橙」「黄色」「青」。青の3球団は競合の中のさらに競合(？)。被りは絶対に避けたいところですね。

では早速サイトを見てみましょう！

炎・エネルギッシュ・情熱、等力強く活気付いたイメージがつきやすい色です。この球団も燃える闘志を表す意味をこめて赤となりました。赤は少ない面積で強い印象を与えることができ、それだけに使いすぎると散漫な印象になりかねません。そんな赤をチームカラーとしているサイトの色分析はこのようになっています。彩度による配色が基本となり、同じ色相内での配色になっています。色差がないため控えめな印象を作ることができます。このサイトでは本来のチームカラーである彩度の高い赤を使わず、少し暗い赤を使用しています。彩度の高い赤を広い面積で使うと強すぎてしまうため、大きく使う場合は彩度を少し落とす、という効果的な色の使い方です。ナビゲーションは、小面積の英字にのみ赤を使うことによってリズムが生まれています。また、ヘッダー(背景の空含め)はロゴとスローガン以外を白にすることで、少ない面積ながら赤の印象を強烈に与えられる工夫がされています。背景に大きくズムスタの写真を使っていますが、コンテンツ部分を同系色で控えめにまとめているので色過多な印象もありません。まさに今年のスローガン「赤道直火」！燃えるような印象を与えてくれるサイトですね。

暖かさや楽しさを伝え、元気さとエネルギーを感じることが出来る色です。赤の強烈な印象よりも少しだけ柔らかい雰囲気を作ります。親しみやすさを作りたいときには欠かせない色となります。また、明度が高いので、黒と組み合わせてコントラストを高めると、色の印象が強くなります。この組み合わせは代表的な使い方であり、まさにその色の組み合わせを使用しているチームのサイトはこちらです。オレンジと黒の２色を多く使用していますね。少しだけあるピンクは、色相環を四等分した配色に基づいています。これはコントラストのバランスがよく安定感がある組み合わせです。オレンジと黒の組み合わせは、他の色を減らすことによって明度と彩度の両方のコントラストが生まれます。色数が増えるほど、コントラストが弱くなってしまいます。このサイトでは白の領域を多く使っています。なのでオレンジとの明度差は小さくなり、コントラストも弱くなるので全体的にはライトな印象を受けるサイトとなっています。伝統ある球団だけに重い印象がありますが、元からのスタイル「常に紳士たれ」という言葉や、より多くの人に親しんでもらうということを考えた場合ぴったりなのではないでしょうか。

 黄色は明るい印象をあたえると共に、注意を表す色でもあります。使い方によっては危険なイメージをあたえてしまったり、文字が認識し辛いなど、様々な点で使い方がとても難しい色です。チーム名にもなっている虎から、黄色と黒の色合いを使用しているチームのサイトです。意外ですね、黄色の面積がほとんどありません。ただしメインビジュアルの部分をカウントしていないので、黄色のビジュアルが常時表示されると考えると結果的には黄色の印象が強いサイトになります。先ほども述べたように視認性等の面で使い方が難しい色なので、こういった展開の仕方が効果的となります。黄色をメインとしたサイトが少ないのも、このような使い難さが理由となります。また、リンクカラーや背景にある甲子園の青空は、黄色にとっては補色の関係です(厳密には青紫)。阪神ファンのような力強い印象を与える手助けをしていますね。

さて、最もチームカラーとして多く使われている青です。青は空や水を連想させ、世界で最も好まれている色の１つだそうです。国旗を見ても確かにそうですね。落ち着きや誠実さといった印象を与えます。3球団、青の色味は違いますがどのような違いがあるか比べてみましょう。がっつりと青を使っているデザインですね。アクセントカラーは補色よりも派手すぎず、おとなしくて調和しやすい関係の赤が使われています。今年からユニフォームが変わり赤がなくなりましたが、変わる前は赤を使っていたのでその名残もあるのでしょうか。全体に青を使っているので少し暗い印象になってしまっていますが、その分赤のアクセントが効果的に使われている例です。青は後退色なので、背景にあるナゴドの写真に青を重ねることによって、より奥行きを感じさせメインコンテンツを引き立たせています。淡々と優勝を狙っているような計り知れないコワさを感じられて良いですね。

 続いてこちら。パッと見は青よりも白・水色ですね。一つ前のデザインとは違い、明るい印象を受けます。薄い色ながらも同系色の青ですっきりとまとめられているため、チームカラー青のイメージを損なっていません。チケット購入部分には、オレンジ、水色、黄緑の3つのカラーが並んでいます。メインビジュアルの背景にあるハマスタの写真も左から影の青、グランドの緑、日向のオレンジ、とボタンと同じ色合いでうまくまとめられています。青とオレンジは補色の関係にあたり、青と緑はオポーネントの関係にあたるので、写真がサイトにキレイにおさまっているのも納得です。横浜の海風を感じられるような爽やかなデザインがとても良いと思います。

最後です。色相はトライアド、３色配色となっています。とてもバランスのとれた配色です。背景にはチームカラーの青と赤を大胆に使っていますね。赤と青はぶつかりやすい色ですが、メインコンテンツに白をはさんでいることで明度に差がつき、色が活きています。少し青と赤に偏りすぎているふうにも見えるので、もう少しおさえたほうが良いかも知れないですね。ユニフォーム配布企画のユニフォームも緑ですが、トライアドに多少従っていたりするのでしょうか（コンセプトは全く別です）。選手の写真を大きく使ったデザインは、本当に這い上がってきそうな躍動感に溢れていますね。

さて、以上６球団如何だったでしょうか？それぞれのチームの特徴が出ていて面白いですよね。個人的にはベイスターズのサイトが一番好きだったりします。好きな色はオレンジですけど。ちなみにパ･リーグは数年前にサイトのテンプレート統一がされ、ここまで違いがないので今回はあえて書きませんでした。

皆さんも野球観に行きましょ～！

[昨日の巨人-ヤクルト戦より]