イマイチな配色、さよなら！初心者でもわかる色選びのセオリー

意外と時間のかかる「色選び」。あんなに時間をかけたのにイマイチパッとしない...という経験をしたことはありませんか？

本日はそんな色選びのセオリーについて考えていきます。

もくじ

• カラーに３つの役割を与える
• 色を選ぶ
• 最近のWEBサービスの特徴

カラーに３つの役割を与える

カラーを３つの役割をあたえ、つかう割合を決めましょう。

　①メインカラー（主役色）：25％
　②ベースカラー（背景色）：70％
　③アクセントカラー（アクセント色）：5％

引用：http://seguimi.blog.fc2.com/blog-entry-105.html

色を選ぶ

上記でご紹介した①→②→③の順番に色を選びましょう。

メインカラーは「サービスのブランド」にふさわしい印象の色、ベースカラーは「白、グレー、メインカラーの明度を高め、彩度を低くした色」、アクセントカラーは「メインカラーの補色」がセオリーです。


引用：http://www.slideshare.net/marippe/ss-9003317

色をもっと加えて活気を出したい！という場合は、カラーを分割して追加しても大丈夫です。


引用：http://www.slideshare.net/marippe/ss-9003317

カラーを分割した場合、「色相が同じでトーンが異なる色」か、「トーンが同じで色相が異なる色」を選ぶと調和が崩れません。

最近のWEBサービスの特徴

アクセントカラーがないことが多々あります。「全体に活気をもたらすこと」がアクセントカラーの役割ですが、人物画像やインタラクションで代替しているように感じます。


引用：https://business.antenna.jp/

AntennaのWEBサイトはメインカラーが黄色、ベースカラーが白と色が少ないようだが、MVで動画を用いており、活気がある。動画に出現する色との調和もはかれています。

ogamo:)