【キャラ配色に迷わない!】配色を決める際のポイントまとめ

00_20161029150100ee7.png




配色は、見る人に一瞬で、そのイメージを
焼き付けてしまいます。

そのため、キャラクターの服や装飾品などを考える時、
人によっては配色だけで何時間も悩んでしまうものです。

たとえ、すでに配色が決まっている
版権キャラクターの色を塗る場合でも、
最終的にはカラーピッカーから似た色合いを
探し出し、自分で使う色を決めなければなりません。

今回はそういった時に役立つ、色を選ぶ際に
考えるべきポイントをまとめたmocolifeさんによる
「色彩センスゼロでも大丈夫!簡単にイケてる配色をする方法」
をご紹介します。



色彩センスゼロでも大丈夫!簡単にイケてる配色をする方法 - NAVER まとめ
Webデザインをする際にとても困るのが配色。適当に色を置くとバラバラになりますし、似たような色ばかり
使うと印象がぼやけてしまいます。そこで、色彩センスがなくても簡単にいい感じな配色が出来る方法を...




(以下要点まとめ



色彩の前提知識、色の三属性



色は彩度・明度・色相の三属性
(三要素とも呼ぶ)から成り立っている

01_20161029202321a2a.jpg

色相


赤・黄・緑・青などの言葉で区別される色のこと。
同じ赤でも赤紫・黄みの赤などがあるように、
色相の数は無数に存在する。


明度


色の明るさの度合い。
明度が高い=明るい色でさわやかで爽快なイメージ
明度が低い=暗い色で重厚で落ち着いたイメージ
といえる。


彩度


色の鮮やかさの度合い。彩度の高い色ほど
派手・華やか・目立つ色といえる。




メイン・サブ・アクセントの三つを意識する



02_20161029210515344.jpg


おおまかにメインカラー6割、サブカラー3割、
アクセントカラー1割とされている。
この面積比率を守ると、美しい配色に
仕上がりやすくなる。

メインカラー


配色の構成要素の中で、最も大きな面積を占める色。
全体のイメージを作り出す役割を持っている。

色にはそれぞれ印象があり、赤ならアクティブ、
青ならクールなど様々だが、メインカラーは
ユーザーに何を伝えたいかで選ぶことが大切。


サブカラー


メインカラーに次いで面積が大きく、メインカラーを
補う役割を持つ。

メインカラーのイメージを補う色にすると良い。
例えば、冷静な印象を与えるためにメインを青にした場合、
より冷静さを伝えたければサブに紺色や水色などを選ぶなど。


アクセントカラー


配色の構成要素の中で、最も小さい面積でありながら、
もっとも目立つ色のこと。
全体を引き締めたり、ユーザーの目を引く効果(役割)を持つ。

アクセントカラーは目立たせるための色なので、
メインカラーとサブカラーと比較して目立つ色を選ぶようにする。

色相・明度・彩度のうち、2つ以上がメインカラーと異なる色を
選ぶ事がポイント。




トーン・オン・トーン系か、マルチカラー系か



「クール」「シンプル」ならトーン・オン・トーン
「楽しい」「インパクト」ならマルチカラーが良い

トーン・オン・トーン系


トーン・オン・トーンはナチュラル配色(自然な配色)や、
同じ色合いで色調を変化させる、一番ベターな配色パターン。

03_20161029210733c5c.jpg


マルチカラー系


マルチカラーは、対比色やコンプリメンタリー(補色配色)、
トリコロール(はっきりとした三色配色)、などで違った色合いを使い、
3色(トライアド)、4色(テトラード)、5色(ペンタード)、
6色(ヘクサード)で全体配色を構成した物。

この辺はColor Noteさんの「配色のコツ」が非常にわかりやすく
解説されていますので、詳しく知りたい方はご参照下さい。

04_20161029210745dec.jpg




配色するときに意識しておきたい色の効果




色の面積効果


明るい色は小さな面積より大きな面積の方が
より明るく感じられ、暗い色はより暗く感じられる。

05_20161029213116f21.jpg



色の誘目性


人の視線の流れは、左から右・上から下へと流れていくため、
誘目性の高い色は、上側や左側に配置すると、
ページや文章にリズムをつけ自然に視線を誘導することができる。

無彩色よりも「有彩色」「彩度の高い色」
「暖色」のほうが注目されやすくなる。

06_20161029213115bba.jpg





同系色でデザインする際のポイント




隣通しの色にはコントラストを


コントラストの差がない配色は、まったりしすぎて
印象に残りにくく、ぼやけた印象になってしまったら、
コントラストをはっきり付けることで解消できる。

特に隣通しの色にはコントラストの差をつけると
よりくっきりした印象になる。


面積が重要、そしてバランスはもっと重要


それぞれの色の面積の振り分け方で、印象はかなり変化する。
その色をどれくらい目立たせるかは面積の大きさにも依存する。
特に、目立たせたい色(メインカラー)の面積は特に重要。


低彩度の中に高彩度を入れてみる


同系色の配色では、似た色相を使うため
どうしても全体的に活気がない印象になる。
少し高彩度の色を入れてみると、ぼやけた印象から
メリハリのあるデザインにできる。





色の持つ心理的効果を意識する



色には人の心理に働きかける効果があると言われ、
それぞれの色が持つ印象効果のことを「色彩感情」、
その色が何かと結び付いて連想されることを「色彩象徴」という。
配色の際にはこれらを意識するとよい。

07_2016102921573899a.jpg





黒を使わない



純粋な「黒」はほとんど無い


人間は「暗いもの」を「黒」と結びつけてしまいやすい。
しかし、ほんとうの「黒」というものは、実はめったにない。

実際のデザイン例でも、純粋な黒が避けられているものがよくある。
TwitterやSublime Text 2などのアプリケーションでは、
サイドバーは黒に見えるものの、純粋な黒にはなっていない


黒に少し色を足す


純粋な黒を避けるだけでなく、他の色を少し混ぜると、
より魅力的にすることができる。

Facebookのモバイルアプリには、一見グレーに見えるところに
テーマカラーである青が少し加えられている。

08_20161029221115b71.jpg




いかがだったでしょうか?
配色のポイントを押さえれば
伝えたいイメージに沿って自然と配色を
決めることができそうですね。

色選びは、その対象がどんなもので
どういったイメージにしたいか、デザインする人の
強い気持ちに依存します。

配色に迷ったときには、描きたい対象は
自分にとって一体何なのか、まずはその対象を
強く意識してみるとよいでしょう。


関連記事

この記事へのコメント:

管理人のみ通知 :

トラックバック: