実は四季の中では冬が結構好きなホンダです。
どちらかというと寒いほうが暑いよりも楽だし、外の景色だって冬は色が少なめなぶん形の美しさが際立つので、遠く大雪の山々や本社近くにある丘の風景(美瑛町)が、それはそれはキレイに見えるんですよ。
そして、ここから本題の色決めに関するお話。
マーケターの皆様でしたら、たとえばコンテンツのデザインで配色に困った時、ハマった時限定のTipsを掘り下げてお送りしますね。
今までのおさらい
実際の色選びについては過去のエントリでも取り上げたものがあるので、まずはそこから原則だけをおさらい。
「個々の色具合だけで考えない」
配色を考える場合特に大事なのは、いつも「個別で見た場合と、全体で見た場合の両方を考える」こと。
「『トンマナ』という考え方を取り入れる」
統一されたトーン(色調)とマナー(配置・配色のルール)でデザインに一貫性を持たせることを「トンマナ(「トーン&マナー」の略語)」という。
手当たり次第こんなことを試してみる
「原則はわかったけど、じゃあ実際はどうすればいいの?」と思った方は、これらのことを手当たり次第試してみましょう。
- とりあえず白黒で全部作ってから背景色を敷き、それに合わせて似合う色を決める。
→別エントリで紹介したやり方。形を優先して作ってから色決めをするので迷う範囲が狭くなるというメリットが。 - 配色のお手本にするものを横に置き、色づかいを参考にしつつ決める。
→配色辞典やお気に入りのチラシやWebサイトなど何でもOK。 - 写真やイラストを配置しているなら、そこで使われているのと同じ色を使ってみる。
→写真やイラストを「様々な色を持ったオブジェクト」と考え、その中で多く使われている色を選んで使うやり方。 - 色の3要素(色相・明度・彩度)のうち2つの要素は同じにして、残り1つの要素を変えながら色のバリエーションを作る。
→使う複数の色どうしに統一感を持たせるために効果的な方法。 - 中心になる色と補助になる色、アクセントで使う差し色を3色だけ決めて配色。(メインカラー/サブカラー/アクセントカラー)
→色そのものを決めるためのものではないが、最低限の色数で配色するための定番的な方法。 - 色以外の方法(大きさやレイアウト)で目立たせることも考えてみる。
→特に「目立たせる」という目的で色決めをする場合に必要な考え方。
オンラインツールの活用
どんな方法で進める場合でも、実際の色決め作業にあたって大きな助けになるものに、Webで使う配色関係のサイト(ツール)があります。

Webで使える便利モノは、どんどん使って。
a. 色の組み合わせ例を配色データから検索したり、提案してくれるサイト
b. 色の組み合わせを実際に画面で再現して確認できるサイト
配色関係のサイトはざっくり上の2つに分けられます。
たとえばaのカテゴリはこんな感じですね。
8種類の色見本と色に関する各種サービスから構成されている、定番の色見本サイト。
配色の見本帳
選んだ色をキーカラーにして、色の法則から多彩な配色イメージを提案します。
シーン別配色見本32パターン
シーンごとにまとめられている配色パターンが32あり、簡単に色についての解説も加えられています。
ColorHunt
シンプルな配色ルールで組み合わされた美しいカラーパレットがたくさんコレクションされています。
そしてb のカテゴリ(色々試せるので「ツール」と呼ばれることが多いです)だと、こんな具合。
Adobeの定番ツール。カラーホイールの操作で色の組み合わせを直感的に試せます
materialpalette
パレット上の2色の組み合わせを選んでプレビューを表示させます。画面右下に選んだ色について情報が記憶されます。
Color Supply
効果的な配色を作成するためのツール。グラデーションやアイコン、イラストなどでも色の確認ができます。
shade
カラーコードで指定した色をベースカラーにして、グラデーションを作ることができるグラデーション向けツール。
Material Mixer
UIデザインなどで使いやすい、類似色を自動で提案してくれるツール。Googleのマテリアルデザイン用配色がもとになっています。
ハマっても すぐ抜け出せば 良い経験
色決めもそうですが、ゼロから何かを作る際に一時的にハマってしまう事は避けられないことであっても、そのあと素早くリカバリーできれば、ハマった事は大したロスにはならず、かえってノウハウをひとつ得たも同じ。
さあ、起き上がりこぼしのような復元力で、色迷いの泥沼を突破しましょう!
執筆者プロフィール

- 学校では音楽関係の勉強をしてきたにもかかわらず、写植オペレーター兼版下フィニッシャーとして、約30年前にそのキャリアをスタート。工場にゴロゴロいた、もと活版…<続きを読む>
最新の投稿
マルテン2020.06.192年で何が変わった?マルテンがリニューアル!
マルテン2020.04.24今のメールテンプレートでご満足?
マルテン2019.12.03マルテンを最大活用!結果を出すメール作りとは?
マルテン2019.10.08カンタン楽々!驚きのメール作成術