お知らせ

この記事の内容は 2021年10月28日(木)20時から開催の無料オンライン勉強会でもお聞きいただけます。ぜひお気軽にご参加ください!
connpassにて無料の参加登録をお願いいたします。

VWSオンライン勉強会 #027 Webデザインは色が決め手!? キーカラーから考える配色のキホン

背景色

背景色

文字色

文字色

キーカラー

キーカラー

背景色01

背景色01

背景色02

背景色02

アクセント

アクセント

Lightning G3 Pro Unit専用のデザイン拡張スキン「Evergreen」では、どのような色の組み合わせで配色を考えたのかを紹介します。
配色の基本的な考え方なども書いてありますので、色で悩んでいる人がいたら、少しでも役に立てれば嬉しいです。

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

王道の三色

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

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

Evergreenの場合は

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

背景色:白
#FFFFFF

背景色:白
#FFFFFF

文字色:濃いグレー
#333333

文字色:濃いグレー
#333333

キーカラー:青緑系
#3C8B86

キーカラー:青緑系
#3C8B86

背景色とは

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

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

※無彩色とは

白、黒、灰色のような色相(色味)と彩度(鮮やかさ)が無い色のことです。明度(明るさ)のみもちます。

有彩色とは

有彩色とは、色相(色味)と彩度(鮮やかさ)と明度(明るさ)を持つものを有彩色といいます。
色味を持つものはすべて有彩色になります。

文字色

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

キーカラーの選び方

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

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

色の与える印象の例

色で印象が大きく違う?色の持つ意味とは

https://creators.view.cafe/ さまから引用

赤系:活動的、活気、情熱、勇敢、積極的、挑戦 など

橙系:友情、親切、活力、成功、行動、発展 …など

黄系:幸福、決断、創造、協力、希望、明るい、楽しい …など

黄緑系:希望、順応、新鮮、自然、若さ、調和、知恵、勇気 …など

緑系:安全、安心、信頼、若者、穏やか、癒し、健康 …など

青緑系:カジュアル、洗練、冷静、治癒、豊穣…など

青系:清潔、クール、誠実、知的、神秘、調和、知性…など

紺系:革命、豊かさ、専門性、信頼感、知識、法的…など

紫系:威厳、自信、精神、忍耐、気品、優雅、高貴…など

桃系:かわいい、女性的、愛情、恋、優しい…など

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

青緑色(#3C8B86)の彩度・明度別一覧

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

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

←彩度低

彩度高→

#C8F1EE

#C8F1EE

#98F1EB

#98F1EB

#68F1E8

#68F1E8

#38F1E5

#38F1E5

#08F1E2

#08F1E2

明度高↑

#9EBEBC

#9EBEBC

#78BEBA

#78BEBA

#52BEB7

#52BEB7

#2CBEB5

#2CBEB5

#06BEB2

#06BEB2

#748B8A

#748B8A

#588B88

#588B88

#3C8B86

#3C8B86

#208B84

#208B84

#048B82

#048B82

#495857

#495857

#385856

#385856

#265855

#265855

#145854

#145854

#035853

#035853

#1F2525

#1F2525

#172524

#172524

#102524

#102524

#092523

#092523

#012523

#012523

明度低↓

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

#3C8B86


彩度・明度別の色を確認できるサイト

カラーサイト.comさんで、彩度、明度別の色を探しました。
カラーピッカーに色を入力すると彩度と明度で表示する個数が選べるのでとても便利です。

サブカラー

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

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

選び方の例

例:明度違い、彩度違いの色を選ぶ

色相は同じですので統一感がでます。

例:色数が欲しい場合は色相違いの色を選ぶ

彩度と明度はそのままなので統一感がでます。
イメージを変えやすいサブカラーの作り方です。

▼例えば青緑系(#3C8B86)の色相違いの色

#3C8B86

#3C8B86

#3C618B

#3C618B

#473C8B

#473C8B

#763C8B

#763C8B

#8B3C70

#8B3C70

#8B3C41

#8B3C41

#8B663C

#8B663C

#808B3C

#808B3C

#518B3C

#518B3C

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

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

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

視認性が悪い例

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

文字が見えづらい

【明度の低い背景色+黒文字】

文字が見えづらい

【明度の低い背景色+黒文字】

目がチカチカする

【彩度の高い背景色】

視認性が良い例

文字が見やすい

【明度の低い背景色+白文字】

文字が見やすい

【明度の低い背景色+白文字】

文字が見やすい

【彩度は低く明度は高い背景色】

【彩度の高い色】
範囲の広い背景色ではなくボタンなどに使用すると効果的

Evergreenのサブカラーの背景色

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

文字が見やすい

【明度の高い背景色】

文字が見やすい

【彩度は低く明度は高い青緑】

アクセントカラー

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

カラーの選び方は、キーカラーの補色を意識すると良いと思います。
補色とは、色相環の反対側に位置する関係の色の組合せのことをいいます。
お互いの色を最も目立たせる色の組み合わせといわれています。

わたしの場合は、補色で色を決めて、実際に色を置いてみて目立ちすぎたり沈みすぎたりする場合は明度や彩度を調節します。

円の正反対に位置する色が補色。

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

ウィキペディア(Wikipedia)より

キーカラー青緑の補色

キーカラー
#3C8B86

キーカラー
#3C8B86

暗い赤系
#8B3C41

暗い赤系
#8B3C41

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

補色の彩度と明度を調整

キーカラー
#3C8B86

キーカラー
#3C8B86

鮮やかで明るい赤系
#e21a23

鮮やかで明るい赤系
#e21a23

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

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

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

色見本参考サイトの紹介

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

配色に迷ったらColor Hunt

配色で悩むことが多い場合は、まずはこちらをチェック!直感的に分かりやすいUIで、お気に入りの配色がみつかったらカーソルをマウスオーバーするだけでカラーコードが表示されます。

詳しくはこちら
色から探せるcolorbase

サブカラーやアクセントカラーを選ぶ場合にとても便利なツールです。色相違い、彩度違い、補色などを簡単に出してくれたり、よく使う色をカラーパレットに保存できます。

詳しくはこちら

Color Hunt

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

色から探せるcolorbase

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

まとめ

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

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

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

Evergreenの入手方法

リリース記念キャンペーン


無料配布中!

2021年9月29日(水) ~ 2021年10月31日(日)23:59 まで

リリース記念キャンペーン!2021年9月29日(水) ~ 2021年10月31日(日)23:59 までは確実に無料で入手できます。
※無料配布期間は10月31日以降に予告なく終了となる場合がございます、予めご了承ください。

Lightningで使えるおしゃれなデザインスキン / コンテンツデータを試せるチャンス!

Follow me!

リリース記念キャンペーン!
G3 Pro Unit を買って


Evergreen


無料でダウンロードしよう

Lightningで使えるおしゃれなデザインスキン / コンテンツデータを試せるチャンス!