N. Design

webデザイナーやってます。お茶請け程度にどうぞ→@nnndmemo (Twitter)

イメージスケールという配色方法

f:id:nnnde:20160512200545p:plain

こんにちは、今日はちょっとデザイナーぽい話をしたいと思います。

テーマは「イメージスケール」という内容です。

 

デザインを作る際にいつも一番悩むのが配色だと個人的に思ってます。

色彩学に沿ったり、キーワードから色を配色したり、web上の配色サービスなど使ったりしても時にしっくりこないことがあります。

困ったもんだと思い、自己流ですが試した方法があるので紹介したいと思います。 

 

 

そもそも「イメージスケール」を知ったきっかけは

先日に行ったUX JAM8で株式会社ディー・エヌ・エー 飯島さんのLTで

キーカラーの設定という中で「イメージスケール」というものを使ってました。

すごく面白い図&方法だなと思いました。正直、言葉や図なども知りませんでした。調べてみて「イメージスケール」という言葉を知ったぐらいなので

 方法についてもっと詳しく聞いてみたかったのですが、残念ながらお話できる機会がなかったので、あくまでLTを見て参考させていただいた部分+自己流な話になります。

 

 「イメージスケール」とは?

日本カラーデザイン研究所というところが考案したものです。

「WARM」 「COOL」「SOFT」「HARD」の4つの言葉で分けいくつかの「心理的なキーワード」をそれぞれに分けるという感じです。

 

上の図がイメージスケールで、心理的な感じで分かれてます

(画像引用:日本カラーデザイン研究所様)

もっと詳しくはこちらを参考になってくださいませ。

www.ncd-ri.co.jp

 

 

「イメージスケール」で配色してみた 

 仕事で弊社サービスを作るという内容のプロジェクトがあったので早速「イメージスケール」を使って配色しようと思いました。

配色する際にそのものに対しての、キーワードをあげるかと思います(女性向けサイト、かわいい など)それがまず必要になります。

以下キーワードとは配色対象(webページ、ロゴなど)のキーワード(女性向けサイト、かわいい など)を指します。 

 

f:id:nnnde:20160512194715p:plain

1と2 用意しているキーワードから近い色をpickupする

まず、1の図から配色対象のキーワードを設定しているかと思うので、近いイメージのものをpickupします。あまり多すぎると方向性がブレてしまう可能性もあるので5、6つぐらいかいいのかと思います。

(1のイメージスケール画像引用:日本カラーデザイン研究所様)

 

3 pickupした色を使って配色する

色の設定は3色ぐらいにしています。ベースカラー1色とサブカラー2色にしてます。

設定しているキーワードを3つあげ、2でpickupした色のイメージの中から近いものを配色します。(黒い部分は内容の具体的情報になるので伏せさせていただきます)

大きいな四角の部分がベースカラー、小さい四角の部分がサブカラーになります

 

f:id:nnnde:20160512194719p:plain

4 3をベースに違う色や違う組み合わせを用意する

3で出した配色をベースに色を微妙に変えてみたり、他の配色して数パターン用意します。

 

5 キーワードに近い色を用意しておく

念のため、用意していたキーワードに合うをあげておきます。

ここで気づいた点があったら4の部分に配色を追加してもいいかと思います。

この作業と4の作業逆にしてもいいかもしれません。

(方向性が間違ってないか確認の意味もあるかと。)

 

4と5の作業は不要だと思う方もいるかと思います。

個人的意見ですが初めの段階では案はたくさん出して選択肢を増やすという意味で用意していいと思ってます。

 

 イメージスケールを使ってみた結果

f:id:nnnde:20160512194725p:plain

f:id:nnnde:20160512194722p:plain

(イメージスケール画像引用:日本カラーデザイン研究所様)

 

 上のような感じで配色資料が用意できました。

 

よかったと思った点

  • だいたいのイメージから近いものから選ぶので決まっているキーワードからずれにくい。
  • イメージから用意するのでキーワードが決まっていると割とスムーズに配色できる
  • 色がある程度用意されているので配色しやすい

 

この方法が難しい場合

  • ベースカラーが決まっている場合、この方法は難しいかも(サブカラー程度)
  • 同じ色に偏る可能性がある

 

ベースカラー決まっているとちょっと難しいだ方法だなぁなとは思ってましたが特にベースカラー決まってなかったので使いました。

仮にベースカラー決まっていても、他案としてこの方法を使った配色を提案というのもありかなとは思います。(ベースカラー案とは別に)

 

今回、自己流ですがこの方法を使って楽だと思ったのは「ある程度色が用意されている」ので1から考えなくていいと思ったこと。何よりキーワードに沿って配色するので目的からずれにくいと思ったことです。

 

もちろん設定しているキーワードがずれていると配色も異なってしまい、「イメージと違う」が起こるかと思います。

ターゲット層や、配色対象に対してのキーワード の設定は大事になります。

 

まだ試行錯誤の段階なので、他に「イメージスケール」使ってこうした方がいいかもとかっていうのが出てきそうな気はします。(調べてもあまり出てこないので) 

もし、ご意見ありましたら教えていただけるとありがたいです。

 

読んでくれてありがとうございます。