Webサイトを作ろう！【4】テーマカラーを決める

前回Webサイトを作ろう！【3】ページの構成を考えるにて、おおよそのサイトの造りなどの展望が決まったら、次はサイトのテーマカラーを考えてみましょう。
サイトの色合いは、そのサイトの特性を訪問者に一目で理解して貰うためにとても大切な要素です。

テーマカラーを決める
カラーコードについて
- 色の名前と由来
- 様々な色表現
  - CMYK
  - HSB
色見本掲載サイト

テーマカラーを決める

どこかのサイトを訪問した時、そのサイトに使われている色味によって
「なんか派手で落ち着かない、見づらいなー」　
「綺麗な色分けで見やすいなー」
といった様々な第一印象を抱くことがあると思います。
訪問者にとって一目見た時の印象は、そのままＵターンするか、じっくり内容を見るかを決める大切な要素です。
せっかくですから、訪れたひとが「ゆっくり見ていこう」と思ってくれるようなユーザビリティ（ユーザーにとっての使い勝手）の優れたサイトを目指しましょう。

例えば病院なら清潔感や信頼感を感じて貰えるように白・青・緑が基本色になっていることが多いですし、カフェなら落ち着いて寛げる空間であることを表現したアイボリー・茶・薄緑などが使われます。
ホテルであれば高級感を出すために金・赤・ダークブラウンなど。
食料品店であれば、食欲増進とお得感を与える赤を基本にして、親しみやすさを感じさせるオレンジ、安全性をアピールするなら緑、興味を持ってもらうならピンク、とかでしょうか。
他にも会社やお店のテーマカラーが決まっているならその色をメインに彩りを考えると良いですね。
個人のサイトであればもう何も気にせず、お好きな色にしていただくのが一番です。

色の組み合わせというのは結構難しく、芸術的センスが試されます…センスに自信の無い私はもう仕方がないので好みで適当に決めています。
青系統の色が多いのは私が青やブルーグリーンが好きだからです。
見た目で気をつけている点は文字を小さくしすぎないことと、目に厳しい色合いにしないことくらいでしょうか。
激安特価！！みたいな赤に黄色の組み合わせなどは、たまにならいいのですがずっと見ていると疲れますしね。
逆に多少の見づらさがあっても、それが魅力的な個性になるようなら派手な色使いもＯＫではないでしょうか。

カラーコードについて

Web上で思い通りの色を表示させるためには、カラーコードを指定しなければなりません。
カラーコードとは、RGB（Red、Green、Blueの光の三原色）を基準にして色を数値で表したものです。
例えば私のブラウザでもあなたのブラウザでも『青が青として表示される』のは『青』に対応したカラーコード『 #0000ff 』がその場所に指定されているからです。

0～9までの数字とA～Fのアルファベットによる16進法を使い、2桁で0～255の256段階の色を示します。
段階は色の濃淡を表し、最小値（0）ならその色を一切含まず、逆に最大値（255＝ff）ならその色を最大限含むという意味になります。

全ての色を最大にした#ffffffなら白、全ての色を最小にした#000000なら黒になります。

色の名前と由来

このブログの上部メニューのブルーブリーンは浅葱色・あさぎいろ（#00a3af）とターコイズブルー（#40e0d0）のどっちも捨てがたいな～と思いつつカラーバーで調整して作りました。
浅葱は元は成長しきっていないネギの青さのことです。新撰組の羽織の色、武士の切腹の際の裃の色などで有名な色ですね。
最も、切腹の際の裃はこんなに濃い浅葱色ではなく、白藍・しらあい（#c1e4e9）や水浅葱（#80aba9）に近い薄い色だったようです。
水浅葱は囚人服の色でもあったようで、自分の罪を認めて切腹するという粛々とした気持ちを表したものだったのかもしれません。

和色の白藍（#c1e4e9）や水色（#bce2e8）に近い洋色ではアリスブルー（#f0f8ff）があります。
このブログの背景色（薄い水色）はアリスブルーを少しだけ濃くしたものです。
1901年にアメリカ大統領に就任したセオドア・ルーズヴェルトの娘・アリスが由来です。
美しいだけでなく自立心に溢れ、女性解放運動などにも励んだアリスはアメリカ国民に愛され、彼女が好んだ薄い水色に微かに灰色を混ぜた色合いが『アリスブルー』と名づけられました。
『不思議の国のアリス』の原作ではアリスは黄色いワンピースを着ていたのですが、このアリスブルーが有名になるとともに、物語のアリスも水色のワンピースで描かれるようになりました。

このように一つの色をとってみても様々な名前や由来があるので、カラーコードを決める時にはそういったことも踏まえて決めてみると楽しいかもしれません。

様々な色表現

上でご紹介したRGB（Red、Green、Blueの光の三原色）以外にも、CMYKやHSBといった色表現の方法があります。
Webデザインでは細かい調整が効くRGBとカラーコードでの表現が一般的ですが、その他の色彩表現を使用しているサイトさんなどもあるので、そういうのもある、とぼんやり覚えておくと安心です。

これがRGB　↓

CMYK

印刷用インクの色で色味を表すもの。
シアン（Cyan）、マゼンタ（Magenta）、イエロー（Yellow）、ブラック（Key plate）があり、
CMYの3色を混ぜるとブラック（K）になります。
印刷用の原稿を作るにはとても向いていますが、Web上となると他の色表現に比べて再現できる色味が少ないという短所があります。