配色に困った時考えること

配色に困った時考えること

実は四季の中では冬が結構好きなホンダです。

どちらかというと寒いほうが暑いよりも楽だし、外の景色だって冬は色が少なめなぶん形の美しさが際立つので、遠く大雪の山々や本社近くにある丘の風景(美瑛町)が、それはそれはキレイに見えるんですよ。

そして、ここから本題の色決めに関するお話。

マーケターの皆様でしたら、たとえばコンテンツのデザインで配色に困った時、ハマった時限定のTipsを掘り下げてお送りしますね。

今までのおさらい

実際の色選びについては過去のエントリでも取り上げたものがあるので、まずはそこから原則だけをおさらい。

「個々の色具合だけで考えない」

配色を考える場合特に大事なのは、いつも「個別で見た場合と、全体で見た場合の両方を考える」こと。

「『トンマナ』という考え方を取り入れる」

統一されたトーン(色調)とマナー(配置・配色のルール)でデザインに一貫性を持たせることを「トンマナ(「トーン&マナー」の略語)」という。

手当たり次第こんなことを試してみる

「原則はわかったけど、じゃあ実際はどうすればいいの?」と思った方は、これらのことを手当たり次第試してみましょう。

  • とりあえず白黒で全部作ってから背景色を敷き、それに合わせて似合う色を決める。
    別エントリで紹介したやり方。形を優先して作ってから色決めをするので迷う範囲が狭くなるというメリットが。
  • 配色のお手本にするものを横に置き、色づかいを参考にしつつ決める。
    →配色辞典やお気に入りのチラシやWebサイトなど何でもOK。
  • 写真やイラストを配置しているなら、そこで使われているのと同じ色を使ってみる。
    →写真やイラストを「様々な色を持ったオブジェクト」と考え、その中で多く使われている色を選んで使うやり方。
  • 色の3要素(色相・明度・彩度)のうち2つの要素は同じにして、残り1つの要素を変えながら色のバリエーションを作る。
    →使う複数の色どうしに統一感を持たせるために効果的な方法。
  • 中心になる色と補助になる色、アクセントで使う差し色を3色だけ決めて配色。(メインカラー/サブカラー/アクセントカラー)
    →色そのものを決めるためのものではないが、最低限の色数で配色するための定番的な方法。
  • 色以外の方法(大きさやレイアウト)で目立たせることも考えてみる。
    →特に「目立たせる」という目的で色決めをする場合に必要な考え方。

オンラインツールの活用

どんな方法で進める場合でも、実際の色決め作業にあたって大きな助けになるものに、Webで使う配色関係のサイト(ツール)があります。

Webで使える便利モノは、どんどん使って。

 

a.  色の組み合わせ例を配色データから検索したり、提案してくれるサイト
b.  色の組み合わせを実際に画面で再現して確認できるサイト

配色関係のサイトはざっくり上の2つに分けられます。

たとえばaのカテゴリはこんな感じですね。

原色大辞典
8種類の色見本と色に関する各種サービスから構成されている、定番の色見本サイト。

配色の見本帳
選んだ色をキーカラーにして、色の法則から多彩な配色イメージを提案します。

ColorHunt
シンプルな配色ルールで組み合わされた美しいカラーパレットがたくさんコレクションされています。

そしてb のカテゴリ(色々試せるので「ツール」と呼ばれることが多いです)だと、こんな具合。

Adobe ColorCC
Adobeの定番ツール。カラーホイールの操作で色の組み合わせを直感的に試せます。

materialpalette
パレット上の2色の組み合わせを選んでプレビューを表示させます。画面右下に選んだ色について情報が記憶されます。

ハマっても すぐ抜け出せば 良い経験

色決めもそうですが、ゼロから何かを作る際に一時的にハマってしまう事は避けられないことであっても、そのあと素早くリカバリーできれば、ハマった事は大したロスにはならず、かえってノウハウをひとつ得たも同じ。

さあ、起き上がりこぼしのような復元力で、色迷いの泥沼を突破しましょう!

執筆者プロフィール

本田 一彦
本田 一彦
学校では音楽関係の勉強をしてきたにもかかわらず、写植オペレーター兼版下フィニッシャーとして、約30年前にそのキャリアをスタート。工場にゴロゴロいた、もと活版…[続きを読む]

執筆者に質問しちゃう!

「もうちょっと突っ込んだこと知りたい……。」とお思いのあなた!このブログの執筆者に、直接質問をしちゃいましょう!

メルマガ登録

マーケターやマーケティングにご興味のある方へ。些細なことから「おっ」と思う注目の事柄まで、読んでお得な情報をメールで配信中!気になる方は今すぐご登録を!

アンケートに答えてアマギフをGET! 2024 MA利用状況調査モニター募集 詳しくはこちら!