作業効率が上がる配色ストックの作り方

こんにちは、デザイナーのossoです。
デザインに携わって10年以上経ちましたが、配色には悩みがつきません。
過去に制作したものに似てしまったり、挑戦的な配色には時間がかかってしまったり。

自分好みの色以外の組み合わせをひねり出すには、自分の中の引き出しを増やす以外にないんですよね。なので、気になった配色があれば積極的に配色ストックしています。

しかし実は先日、何かの拍子にそのファイルを削除してしまったようで・・・
作ってきた=悩んできた歴史が詰まった積年のカラーストックだったのでショックも大きいですが、ここは頭を切り替えて新しく作り直すことにしました。

今日はその流れをご紹介します。

配色ストックってなに?

配色ストックとは、気になるデザインを見つけたらその配色を分解してファイルなどにまとめておくことです。ただ色をみるだけでなく、組み合わせや色数、面積の比率などの情報もまとめることができます。

気になる配色の見つけ方

どこで見つける?

日常生活でアンテナを張っておく

例えば・・・

・スマホで撮影
・スクリーンショット
↓↓↓↓↓↓
・画像をフォルダなどに整理
・カラーピッカーで配色をストックする

風景が綺麗だな、と思ったらスマホで撮影
ネットサーフィン中に素敵な画像やサイトにであったら、スクリーンショット
好きな画家の使っている色を調べることもあります。
映画のポスター、人気商品のパッケージ、生活の中にもデザインのヒントはたくさんあります。
自由に色集めを楽しむと、いいものにたくさん触れられると思います。

ついで探しをする

インターネットで何か調べ物をしているとき、ページに広告バナーが表示されることはないでしょうか?小さな画像の中にわかりやすく詰められた情報はデザインストックにも最適です。どんな色がどんな割合でつかわれているのか研究してみましょう。

他にも、検索してヒットしたサイトがとってもおしゃれだったら!?ぜひ色を抽出してストックしておきましょう!

目的別に配色を探す

最近はピンタレストやInstagramでも素敵な写真を簡単に見つけることができます。
テーマを決めて検索すれば、配色ストックもどんどん増えます。

用途別にストック

健康志向のデザインに使われている色は?
赤ちゃん向けの配色は?
など、テーマを決めて物をみることで、配色の共通点が見えてくることも。

デザインテイスト別にストック

「シンプルなのにわかりやすい配色」
「楽しそう」
「賑やかすぎず読みやすい」
など、自分が感じた言葉と一緒にストックするのもいいなと思います。

色をみつけたら?

まずはどんな色がつかわれているかじっくり確認します。
こういう作業は、インスピレーションを受けたものを「配色」という角度から理解する訓練にもつながります。たくさん見れば、テーマや使用目的による配色ルールを見つけることができるようになります。

画像はインスピレーションフォルダにまとめるもよし、ピンタレストにピンするもよし。項目別にフォルダが分けられたりタグをつけて後で検索できると便利ですよね。
また、IllustratorやPhotoshopで配色ファイルを作るもよし。あらかじめ配色グループを作っておくと、制作中にコピペして使えるので作業効率があがる気がします。

配色ファイルとしてストックする3つの方法

わたしは、配色ストック専用のIllustratorファイルを作り、下記のような方法で作った配色パレットを並べてカタログのようにしています。
デザイン制作に使いたい配色が見つかったら、パレットを作業ファイルへコピペして、スウォッチの中に「新規カラーグループ」として登録して使っています。

5色ごとにパレットを作る

写真を構図に合わせて5つにスライスして、各部屋の中のメインの色をIllustratorのスポイトツールで抽出していきます。
5色そろった時の組み合わせが気持ち悪いと感じたら、抽出し直して整えます。

例えば海の写真だと、空・水平線近くの空・遠洋・浜辺・砂浜 と5つの色が取れます。
自然の中にある配色はすでに人の中にインプットされているものなので、例えば「ビーチバレー」など「海で開催される」イベントの配色に使いやすいものになります。
(この写真はグアムで撮った写真です)

配色バランスも意識してパレットを作る

配色は下の図のように、ベースカラー70%+アクセントカラー5% +メインカラー25% の面積比が美しく見えると言われています。

広告バナーのように面積の小さいものは特に色数を絞る必要があるので、3色の配色をストックしておくのは合理的です。
棒グラフのように面積の比率を変えてパレットにしておくと、自分のデザインに応用するときにも作業効率があがります。

アクセントカラーは必ずしも1色とは限りません。たくさん色数があった時は、気になる色を全て5%のサイズで抽出しておくと、後々組み合わせを変えるときに便利です。

面積は必ずしも70%+25%+5%とは限りませんが、パレットにするときは「なんとなくこんな面積比だと落ち着くな」という感じで作ればいいと思います。

グラデーション

最近のグラデーション

以前流行ったものの、フラットデザインにその座を明け渡したことで「ダサい」と感じられるようになったグラデーションですが、最近(2019年現在)はInstagramやFacebookのアプリアイコンに使われるなどすっかりおしゃれなテクスチャを演出するためにかかせない存在になりました。
グラデーションをあしらう方法が昔と変わったので、好まれる配色も変化しています。

例えば昔は陰影や距離感を出すために使われていましたが、最近は文字にかぶせたり写真に深みを出したりと、正確な奥行きの表現ではなくおしゃれなテクスチャとして扱われているように感じます。
こういう流行との変化は長い期間で変遷を追っていかないと気付きにくいものかもしれません。

パレットを作成

わたしは、グラデーションとそれに使われた色をパレットにしてカタログ状に並べています。

グラデーションをIllustratorでスウォッチとして登録するには

1)作ったグラデーションを選択した状態で 「スウォッチパネル」を開く
2)オプションから「新規スウォッチ」を選択
3)「新規グラデーションスウォッチ」として保存できます。

グラデーションをスウォッチパネルの中にドラックするとパターンとして認識されてしまい、その後配色や透明度などの変更ができませんのでご注意ください

自然が作り出すグラデーションはとても美しいので、花や空や海などの風景画像から探すのがおすすめです。また、お気に入りの色から近い色を組み合わて、淡いグラデーションを作ることもあります。

まとめ

この作業は、長い長いスパンで継続することをお勧めします。
配色には流行があります。
世の中に流通する商品=目にする情報の色もどんどん変化します。
自分自身のライフスタイル(結婚出産など)が変わったり興味をもつ分野が変わっただけで、好みだと感じる・気になる配色も変動するものです。
長い時間をかけて少しずつ違う主観でストックしていくことで、自分だけの味わい深い配色事典を作ってみてください!
そして、無くさないようにバックアップをとっておきましょう。(涙)

About me

ブランディングデザイナー/売上コンサルのossoです。ウェブを使ってオリジナルブランドを展開したい女性起業家の方へ、マーケティングとクリエイティブの力を掛け合わせて「理想のお客さまをお得意先に」するためのお手伝いをしています。 「すべての選択は叶えたい未来へのチケット」であることをコンセプトに、らしさでブランド力をあげ、寄り添いで売上を上げるデザイン制作と、作るだけにとどまらないきめの細かいサポートを行なっています。