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

   2016/07/29   icon-clock-o読了時間:約8分1秒

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

 目次 

テーマカラーを決める
カラーコードについて
カラーコードと色見本 掲載サイト

テーマカラーを決める

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

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

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

カラーコードについて

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 ↓
RGBカラーバー

 CMYK 

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

 HSB 

HSBカラーバー
人間が直感的に捉えられる要素を元に色味を表すもの。
色相(Hue)、彩度(Saturation)、明度(Brightness)の加減で色を表現します。
『 青寄りで、くっきりしてて、けっこう明るい 』というような感覚を元に調整できるので、
RGBよりも扱いやすいというひともいますね。

色見本 掲載サイト

私も日ごろお世話になっているカラーコード掲載サイト様やカラーデザインのサイト様です。
それぞれのサイト規約に従ってご利用ください。

 原色大辞典 

原色大辞典
様々な色見本が掲載されています。
日本の伝統色の見本 和色大辞典は色の名前も美しく、見ているだけで楽しいです。
背景色と文字色を実際に配置テストできる配色大辞典もサイト作成に役立ちます。

 pluscolorn 

プラスカラー
一つの色から、類似色や反対色、その色に合う色などを見ることができます。
配色例が豊富なので、サイト作成だけでなく、様々なシチュエーションのデザインに役立ちます。

 COLOURlovers 

パレット
色の組み合わせからパターン(模様)まで、色々なデザインが集められています。
『 Palettes 』から色の組み合わせやカラーコードを見ることができます。
組み合わせを人気順などで並べ替え表示できるので、世界でどんな色味が人気かといった目安にもなります。

 Brand Colors 

ブランドカラー
様々な企業のサイトカラーを抽出して掲載しています。
海外の方がサンプリングしたものなので海外企業がメインですが、
Twitterの色、Facebookの色、Microsoftの色など、
その企業サイトを彩るカラーを分かりやすく並べてくれています。

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket