こんにちは、ラビです。
世の中は色であふれています。
無色透明の世界なんてどこにもないですよね。
デザインの世界もそんな色を上手く使うことで
色々な世界観を演出することができます。
今日はそんな配色の基礎をご紹介しようと思います。
色の基礎
まず配色の基本の前に
色の原則をお伝えしておきます。
もしかすると小学校の絵の具授業で知ってるかもしれませんが、
色は全て赤・青・黄の色が混じり合うことで表現されています。
いわゆるRGBというやつですね。
それぞれの量を調整することで色んな色が再現できます。
さらにデザインの世界ではRGB以外にも複数のカラーガイドがあり、用途に応じて色の表現を分けることができます。
- CMYK
- HEX
- DIC
ここでは、そんなものがあるんだぁ
くらいに捉えてもらえばokです。
配色の基本
さて、それでは配色の基本といえる項目をいくつか紹介しますね。
先述した色には、明るさや濃さ・色味や鮮やかさなど、色の基礎を支える3つの項目があります。
色相
これは前述した赤、青、黄などがそれにあたります。
色相は色の基本的な特性であり、色の種類を表します。
色相は色相環という色の位置によって定義され、色の見た目がどのように異なるかを示します。
彩度
彩度は色の鮮やかさや純度を示す尺度です。
彩度が高い色は明るく鮮明で、彩度が低い色は灰色がかったり洗いざらしのような感じになります。
彩度は色の強さを増減させ、より鮮やかまたはよりくすんだ色を生み出すことができます。
明度
明度は色の明るさを示す尺度で、色がどれだけ光を放つかによって決まります。
高い明度の色は明るく、低い明度の色は暗いです。
明度を調整することで、色の輝きを増減させることが可能です。これにより、同じ色相や彩度の色でも、異なる明るさのバリエーションが生まれます。
3原色+これら値の組み合わせで、配色が成り立っているんですね。
配色の技術
では配色の基本が分かったところで、今度はそれをどう組み合わせたらいいのか気になりますよね？
一つずつお伝えしましょう。
色数を絞って使う
色数を絞ることでバランスの取れたデザインを作ることができます。
具体的には、背景などに利用される全体の70%を占めるベースカラー、見出しや主要部位に利用される全体の25%がメインカラー、そしてリンクボタンや強調箇所に使われる5%のアクセントカラーを用います。
こうするとデザインに統一感を持たせることができます。
色相環を利用した配色(補色や近似色など)
別名カラーホイールと呼ばれる色相環。
色の配置から配色を考えることができます。
例えば赤と反対位置の色を利用すると、配色を外しにくい。など、ルールに沿った配色を考えることができます。
反発しあう色に気をつける(ハレーション)
色は隣り合わせると、チラついて眩しく見えたりする組み合わせがあります。
ハレーションといいます。
これを意識せず色を組み合わせると、とてつもないギラギラにしたデザインが完成してしまうので注意しましょう。
色のイメージを利用する(暖色、寒色など)
色にはそれぞれイメージがあります。
赤は情熱、青は安心というような色それぞれの雰囲気ですね。
デザインの中でこういった雰囲気をうまく取り入れた配色をすると、
イメージに合わせたデザインを作成することができます。
ざっと説明しましたが、色んな配色方法や色味を試すことで、自分のレパートリーも増えていきます。
まずは手を動かして色々試してみましょう。
配色に役立つおすすめツール
とはいえ、いきなり一から自分で考えてくれって言われても難しいですよね、、、
そんな時に利用できる配色ツールをいくつか紹介しましょう。
Adobe Colorは、色の組み合わせを探したり、色相環を使って配色を生成したりできるツールです。色のトレンドを探る機能もあり、デザインに最適なカラースキームを簡単に見つけ出すことができます。
Coolorsは非常に直感的に使える配色生成ツールで、ランダムに色を生成したり、既存の色から配色を展開したりすることができます。アプリ版もあり、デザイン作業中にすぐに色を調整するのに便利です。
Color Huntは、ユーザーが共有する多くのカラーパレットを提供するウェブサイトです。新しいインスピレーションを求めているデザイナーやアーティストに適しており、さまざまな色の組み合わせを簡単に見つけることができます。
おすすめ書籍
そのほか自分が見て分かりやすいなあと思った本をいくつか紹介しておきます。
COLOR DESIGN カラー別配色デザインブック
タイプ別にどんな配色が合うか図解している、配色を真似しやすい学習本です。
自分で思い付かない配色が見つかったりするので、引き出しを増やすのにうってつけです。
見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色PART2 見てわかる、迷わず決まるシリーズ
先述した利用する色を絞って使うトレーニングには非常に良い良本です。
人気があるのかシリーズ化されていて他のラインナップもあるので、よかったら横断購入してみるのもありですね！
あくまでデザインの一要素。うまい配色で良いデザインを
最初のうちはなかなか基準が見えず、闇雲に配色をしてしまいがちです。
しかし、その基準となる知識が少しでもあれば、あなたが配色する際の道標になってくれるはずです。
まずは基礎勉強。
あとは、、、作業しまくりましょう 笑
それでは、今日も一日お疲れさまでした。
では、また今度！
