拡張スキンEvergreenの配色について

デザイン拡張スキンということで、多くの人に使用してもらう汎用性のある商品なので、誰でも簡単に色の変更ができるように、色使いはキーカラーを中心に展開しようと思いました。

王道の三色

適当に色を選んでしまったり、考えすぎてしまうのも良くありませんので、まずは王道の三色「背景色」「文字色」「キーカラー」を決めました。

Lightning自体が「シンプルで見やすい」デザインのテーマですので、そのまま使える色はそのままにして、あまりごちゃつかせないように意識すると失敗しないかなと思います。

Evergreenの場合は

• 背景色：白(#FFFFFF)
• 文字色：濃いグレー(#333333)
• キーカラー：青緑系（#3C8B86）

背景色とは

背景色はサイトの中で最も大きな面積を占める色になります。
白、黒、グレーの無彩色の色は他の色を邪魔しないので、よく使われる色になります。

Evergreenの場合は、クリーンなイメージを付けたかったことと、他の色を最も引き立ててくれるという理由から白にしました。

文字色

背景色を白にしましたので、文字色は理由がない限りは、黒or濃い灰色でいいかなと思います。

キーカラーの選び方

キーカラーはコンセプトや世界観から決めます。
Evergreenのコンセプトは、企業サイト向けの商品ということでしたので、青色の持つ清潔でクールな印象と、緑色の持つ安心、信頼の意味をあわせ持った「青緑」系にしようと考えました。

※色の持つイメージは、検索するといろいろ出てきますので、ぜひ探してみてください。

青緑でも、明度と彩度によってもだいぶイメージが変わります。

青緑色（#3C8B86）の彩度・明度別一覧

例えば、今回のキーカラーの青緑色（#3C8B86）の彩度・明度別の色をみると分かりやすいです。
下の一覧は彩度・明度を5個づつ表示しています。

• 彩度の高い色はビビットな色味になり、活発、積極的、派手な印象
• 彩度が低い色は落ち着いた色味になり、冷静、静かな雰囲気の印象
• 明度の高い色は明るい色（白に近づく）になり、軽くて柔らかい印象
• 明度の低い色は暗い色（黒に近づく）になり、重くて堅そうな印象

彩度と明度は高すぎず、低すぎない青緑系を使うことで、ちょうど中間の印象を感じさせることができると思い、この青緑色にしました。

サブカラー

キーカラーが決まったら、サブカラーを選んでいきます。

サブカラーの役割はキーカラーを補助する色になり、「見やすさ」「分かりやすさ」を優先して選びます。
キーカラーを補助する色なので、キーカラーよりも目立つ色は避けたほうが無難です。

背景色として使用するサブカラー

背景色として使用するサブカラーは「見やすさ」がとても大事です。
色の決め方は、例えば背景色（白）と文字色（濃い灰色）の中間色＝灰色と、キーカラーの青緑色で考えると簡単に決めれます。

Evergreenの場合は背景色が白色で文字色が濃い灰色と決めましたので、明度は高くて彩度は低い色にしなくては視認性が悪くなります。

視認性が悪い例

• 例：明度の低い背景色に黒文字
  文字色が濃い灰色なのでとても見えづらくなります。
• 例：彩度の高い背景色
  目立つのですが目に刺激を与えてしまいます。長い文章だと読んでもらえなくなってしまうかもしれません。

視認性が良い例

Evergreenのサブカラーの背景色

背景色の1つめのサブカラーは明度の高い灰色、
背景色の2つめのサブカラーは、明度は高くて彩度は低い青緑色にしました。

アクセントカラー

アクセントカラーはサイト内で使用する面積の割合は一番小さくなり、最も目立つ色が理想的です。

混合して無彩色を作れる2色の有彩色の組み合わせを互いに補色（ほしょく、英: complementary color^[1]）であるという^[2]。余色、対照色、反対色ともいう（ただし、補色は相対する色を直接に指示するのに対し、反対色の指示する範囲はやや広い^[要説明]）。

ウィキペディア（Wikipedia）より

キーカラー青緑の補色

実際に補色を置いてみますと、ちょっと補色の赤系が沈んで見えます。
この場合は、補色赤系の明度・彩度を調整しますと、違和感のない組み合わせにすることができます。

補色の彩度と明度を調整

赤系の明度と彩度を高くしました。前よりも赤系が目立つので、かなりいい感じになったのではないでしょうか。

こんな感じで、実際に置いてみて違和感のある場合は、彩度・明度を適度に変えることで調和がとれていい感じにすることができます。

以上が「Evergreen」での配色の考え方になります。みなさんのご参考になればとても嬉しいです。

色見本参考サイトの紹介

ウェブ上では、様々な配色に関するツールが存在しています。
他にもたくさんありますが、今回は2つのサイトを紹介します。

Color Hunt

配色で悩むことが多い場合は、こちらがおすすめです。
直感的に分かりやすいUIで、お気に入りの配色がみつかったらカーソルをマウスオーバーするだけでカラーコードが表示されます。
色からも検索できるし、すごいのはテーマにあった配色パターンも検索できるところです。例えば保育園や子供服などのサイトでしたら「Kids」をクリックするだけで様々なパターンを出してくれます。
ハートマークをクリックするとお気に入りに保存できます。

色から探せるcolorbase

同じような配色サイトはたくさんあるのですが、こちらはシンプルさと便利なところがいいなと思いました。
色相違い、彩度違い、補色などを簡単に出してくれたり、よく使う色をカラーパレットに保存できます。共有用URLをコピーすると、他の人にもカラーパレットが共有できます。
Evergreenのカラーパレット
サブカラーやアクセントカラーを選ぶ場合にとても便利なツールです。
色覚シミュレーションもどのような色に感じるのかを確認できます。

まとめ

Lightningのカラーパレット機能が便利

今回はLightning Pro Unit専用のデザイン拡張スキンでしたので、テーマはLightningです。
改めてすごいと思うのは、Lightning はキーカラーを選んでしまえば、カラーパレットにキーカラー（明）とキーカラー（暗）が自動で生成されることです。
自動で作ってくれるのは改めてすごいことだなと感じました。

Lightning 14.11.0 からは、カラーパレットに任意の色を追加できるようになりました。
キーカラーに加えて、サイトでよく使う色をあらかじめカスタムカラーとして設定しておくと大変便利ですので是非ご利用ください。

Evergreenの入手方法

この記事を書いた人

久納 美幸

デザインやCSSコーディング、フォーラム対応を担当しています。フォーラムでは「うなこ」という名前で投稿しています。

WordFes Nagoya（2013-2017）では、名古屋版わぷーを制作しました。

最近の投稿

• WordPress2024年12月18日Lightning G3 Pro Unit の投稿一覧を LTG コンテンツエリア投稿ウィジェットのデザイン風にする方法
• 制作・運用ノウハウ2024年12月13日これでスパムは怖くない！v2とv3の違いと ContactForm7 に reCAPTCHA v3 を導入する方法
• WordPress2024年12月8日WordPressとVK Blocks のブロックだけでサンタクロースを作ってみた
• WordPress2024年6月27日現場で使える！ChatGPT の DALL-E 3 で欲しい画像を作成するテクニック