デザインは「無意識」への訴求～カラー（色）の決め方と設定

shutterstock_142959790

お陰様でWordPressテンプレート「micata（ミカタ）」で作成した会社のホームページを目にさせて頂く事が増えましたが、なかなか手が出ないのか難しいのか、「カラー」まで気を配っている方は少ないように感じます。

見た人の「無意識の感情」に訴えかける。

それが、カラーの持つ大きな力です。

そこで今回は「カラー」の基本的な考え方とテーマ（micata・STINGER7・AFFINGER3）への設定方法を簡単に説明したいと思います。

カラー（色）について

色の持つチカラ

「色」はそれぞれ与えるイメージを持っています。

青は「食欲がわかない」イメージがある為、飲食店などには向きません。その代り、クール・知的というイメージもあるのでIT系の会社のホームページなどでは好まれます。そういった「無意識」に訴える力というのはデザインの本質であり、あなたが思っている以上に大きな効果があります。何度も文字で誠実さを訴えるよりも清潔なカラーのサイトの方が「無意識」故にストレートに心に届くのです。

ホームページが誰の為のものなのか？を考えれば「赤が好きだから赤」という一方通行的な考えは失敗の元となることがわかりますよね。

ほんの一部ですが例えばカラーにはこんなイメージを与える力があります。

赤	情熱・興奮・危険・愛情
黄	若さ・楽しい・注意
橙	元気・暖かい・明るい
緑	平和・安全・幸福・自然・健康
青	清潔・知性・信頼
紫	魅惑・女性・不思議

http://www.nikko-pb.co.jp/nk_comm/mok08/html/images/1001g61.pdf

入力した「キーワード」で色を作成するサイト

2016-03-10_165607

http://synthsky.com/iroiro/

iroiroは、入力した文字「色」を表示してくれるユニークなサイトです。日本語にも対応しています。

色の三属性

itai

色には「色相」「明度」「彩度」で分類する三つの属性があります。

簡単にいえば、「色相」は色の違い、「明度」は明るさの違い、「彩度」は鮮やかさの違いです。特にWebサイトでカラーを選ぶ際、標準色は「彩度」が高すぎて目に優しくない為、できるだけ「彩度」を抑えた配色を選んだ方が良いでしょう。

色相環

sikisou

色相環は色相を光の波長順で配列して円形状に示したものです。

対面（反対側）にあるものを「補色」、その近くにある色を「反対色」そして隣り合う色を「類似色」と呼びます。

※色の分け方は様々あります。

色の選び方

カラーは多すぎず3～4色まで

サイトのカラーは3～4色程度+アクセントカラーが良いと言われています。

カラーの3～4色はどうやって選び方としては

同系色でまとめる
類似色でまとめる
同じトーンでまとめる

があります。

「同系色」は、同じ色に白や黒を混ぜた同一色のグループ。「類似色」は先ほど説明した色相環の両隣にあるカラー、「トーン」は同じ色の調子のことで「明度」と「彩度」を合せたグループでまとめます。

同系色でまとめる

今回は一番簡単な方法で「同系色」で作成したいと思います。

決めるカラーは3つ。各カラー名はテーマ用に便宜的に付けただけのものです。今回の色の指定が絶対に正解というわけではありませんが統一感のあるサイトのカラーを作成する事が出来ます。

メインカラー（一番濃い色。グローバル及びサイドメニューのグラデーション色の下部、h3タグやh2タグの背景色、スマートフォンのメニューボタンなどに反映します）
メインカラー2（メインカラーを少しだけ薄くしたカラーです。グローバル及びサイドメニューのグラデーション色の上部に設定すると綺麗なグラデーションが作成できます。）
サブカラー（一番薄い色。サイドメニューの背景やh3タグ、h4タグの背景色など）