お陰様でWordPressテンプレート「micata(ミカタ)」で作成した会社のホームページを目にさせて頂く事が増えましたが、なかなか手が出ないのか難しいのか、「カラー」まで気を配っている方は少ないように感じます。
見た人の「無意識の感情」に訴えかける。
それが、カラーの持つ大きな力です。
そこで今回は「カラー」の基本的な考え方とテーマ(micata・STINGER7・AFFINGER3)への設定方法を簡単に説明したいと思います。
カラー(色)について
色の持つチカラ
「色」はそれぞれ与えるイメージを持っています。
青は「食欲がわかない」イメージがある為、飲食店などには向きません。その代り、クール・知的というイメージもあるのでIT系の会社のホームページなどでは好まれます。そういった「無意識」に訴える力というのはデザインの本質であり、あなたが思っている以上に大きな効果があります。何度も文字で誠実さを訴えるよりも清潔なカラーのサイトの方が「無意識」故にストレートに心に届くのです。
ホームページが誰の為のものなのか?を考えれば「赤が好きだから赤」という一方通行的な考えは失敗の元となることがわかりますよね。
ほんの一部ですが例えばカラーにはこんなイメージを与える力があります。
赤 | 情熱・興奮・危険・愛情 |
黄 | 若さ・楽しい・注意 |
橙 | 元気・暖かい・明るい |
緑 | 平和・安全・幸福・自然・健康 |
青 | 清潔・知性・信頼 |
紫 | 魅惑・女性・不思議 |
http://www.nikko-pb.co.jp/nk_comm/mok08/html/images/1001g61.pdf
色の三属性
色には「色相」「明度」「彩度」で分類する三つの属性があります。
簡単にいえば、「色相」は色の違い、「明度」は明るさの違い、「彩度」は鮮やかさの違いです。特にWebサイトでカラーを選ぶ際、標準色は「彩度」が高すぎて目に優しくない為、できるだけ「彩度」を抑えた配色を選んだ方が良いでしょう。
色相環
色相環は色相を光の波長順で配列して円形状に示したものです。
対面(反対側)にあるものを「補色」、その近くにある色を「反対色」そして隣り合う色を「類似色」と呼びます。
※色の分け方は様々あります。
色の選び方
カラーは多すぎず3~4色まで
サイトのカラーは3~4色程度+アクセントカラーが良いと言われています。
カラーの3~4色はどうやって選び方としては
- 同系色でまとめる
- 類似色でまとめる
- 同じトーンでまとめる
があります。
「同系色」は、同じ色に白や黒を混ぜた同一色のグループ。「類似色」は先ほど説明した色相環の両隣にあるカラー、「トーン」は同じ色の調子のことで「明度」と「彩度」を合せたグループでまとめます。
同系色でまとめる
今回は一番簡単な方法で「同系色」で作成したいと思います。
決めるカラーは3つ。各カラー名はテーマ用に便宜的に付けただけのものです。今回の色の指定が絶対に正解というわけではありませんが統一感のあるサイトのカラーを作成する事が出来ます。
- メインカラー(一番濃い色。グローバル及びサイドメニューのグラデーション色の下部、h3タグやh2タグの背景色、スマートフォンのメニューボタンなどに反映します)
- メインカラー2(メインカラーを少しだけ薄くしたカラーです。グローバル及びサイドメニューのグラデーション色の上部に設定すると綺麗なグラデーションが作成できます。)
- サブカラー(一番薄い色。サイドメニューの背景やh3タグ、h4タグの背景色など)
メインカラー
メインカラーはサイトの「主要なカラー(メインカラー)」で一番与えるインパクトの強いカラーになります。先ほどお話した、「色」の持つイメージを考えつつまず1つ色を決定します。既に「ロゴ」をお持ちの会社やお店の場合はそれに合わせた方が統一感が出ます。
カラー選択で僕が愛用しているのは「Material Design Colors」です。
http://www.materialui.co/colors
気に入った色をクリックするとカラーコードがコピーされます。
Webのカラーは先頭に「#」を付けたカラーコードで指定します。上図の場合は「#1976D2」となります。
残りのカラーを決める
上図のようにシンプルに残りの2つを決めても構いませんが、より繊細なデザインカラーを考えたい場合は「ColorHexa」がお勧めです。
http://www.colorhexa.com/f2fafe
サイトにアクセスしてメインカラーの「#1976d2」を入力して検索ボタンをクリックします。
細かいグラデーションや
類似色、補色(色相環で反対に位置する色)など様々なカラースキームも確認できます。
HUEなどを使用したカラー作成も人気です。
テーマのカラーを設定する
テーマ専用管理画面の「オリジナルカスタマイザーを使用する」にチェックを入れると様々な箇所のカラーを「外観」→「カスタマイズ」で変更出来るようになります。
3つカラーを決めたら、そのカラーだけを軸に設定していくのがポイントです。
統一した方が良いと思うカラー設定一覧
メインカラー |
【基本カラー】 【[+]各見出し色】 【[+]オプションカラー】 |
メインカラー2 |
【基本カラー】 【[+]各見出し色】 【[+]オプションカラー】 |
サブカラー |
【基本カラー】 【[+]各見出し色】 |
※グローバルメニューとサイド固定ページ用メニューカラーは連動しています
※全て設定する必要はありません。
[speech_bubble type="fb" subtype="L1" icon="1.jpg" name=""]面倒かもしれませんがサイトのイメージが格段に変わるのでしっかり設定しましょう [/speech_bubble]
良ければ以下の記事もぜひ、お読みください。