今日からあなたもデザイナー!?忘れがちな商業デザインの配色テクニック

デザイナーの商業デザイン配色テクニック

配色については過去ある程度テクニックは書いてきたけどまとめてみる。
これはデザイナーだけじゃなくて、料理人やフラワーアレンジメント、インテリア、写真にも応用可能だと思っている。
そんな配色について僕自身が使っている色の特性と人間が美しいと感じる色数についてまとめてみる事にしよう、そうしよう。

色数で美しさは変わる?

まず人間が美しさを感じる定義について考えてみよう。難しい話は無しにして以下の写真をご覧ください。

01_base

02_base

03_base

どうでしょう。どちらが美しいと感じますか?Aでしょうか。それともBでしょうか。あるいはCでしょうか
どう見てもAとCだと思います。(いやBの人もいるかもしれないですが…)
ではBが美しいと思う前提で話を進めます(汗
基本的に芸術家もそうですが、皆さん色の数を限定している事がわかると思います。
それでは歴史ある芸術家の絵を見てみましょう。

01-art
画像参照先

02_art
画像参照先

いかがでしょうか。有名な画家ほど色の数は制限していて、形も単純な事が見て分かります。
これは何を意味しているかと申しますと、人間は単純な事に関して脳が理解する処理速度が速いからです。
単純であればあるほど、処理は速いはずです。しかし、構図や色が多いと認識に時間がかかり処理も当然
認識している事により遅くなります。
これにより人間は認識に時間がかかる事により、言い表わせない不快感や
センスがないなど相対的な言葉で表現してしまうのではないでしょうか。

商業デザインはせいぜい3色程度

では具体的に商業デザインを見てみましょう。

04_musisasare
画像参照先

04_shitimi
画像参照先

04_tabako
画像参照先

ロゴは別にいいとして、プロダクトデザインを見ると全てが2色や1色
が多いと思います(白は除く)。つまり人間が認識できる色は少ない方が良いことが分かります。
皆さんも身の回りのものを見ると、大筋2色程度で構成されていると思います。
さらに訴求をしているところはしっかりと色を強調した構成になっているはずです。
そこに5色、6色は絶対にないはずです。

料理の盛り付けから、フラワーアレンジメントまで

05_cooking01

05_cooking02

05_cooking03

もちろんこれは商業デザインだけではなく、料理の盛り付けやフラワーアレンジメント、写真にも有効です。
より絞った色と訴求したい1つの色を見つけてあとは構図を考えてみると割と良くできたりします。
是非試してみてください。

Webデザインに置き換えて配色を考えてみる

ではこのように色に関して、極力少なく考えた時にUIとして置き換えた場合にどのような配色が有効か考えてみましょう。
Webデザインに関して配色は非常に重要です。(今更ですが)配色というよりも色数か。

skitched-20180814-223313

skitched-20180814-223355

ではまとめると

1 Webデザインをする前に色数を指定しよう。

  • ・通常ボタン時の色
  • ・ユーザーに押して欲しい時の色
  • ・テキストリンクの色
  • ・通常文字の色
  • ・構図の中には必ず要素を少なくする

2 写真を撮る時、料理のもりつけ、フワラーアレンジメントの時は単純な構図と色を2色まで制限しよう。

いかがだったでしょうか。何かを作る時って色々な事を強調したり、文字が多くなったりしがちですが
あなたは何を相手に伝えたいのかもう1度考えてみよう。
好きな相手に思いを伝える時に「えー僕はあなたの髪の長いところとシャンプーの香りと料理がうまくて早起きで、仕事もできて…なんで好きなんです。」って言われるより「あなたが好きです。僕と付き合ってください!」って言ったほうが相手に届くでしょ。そのあとに相手から質問があったら答えればいいだけで、最初から答える必要ないってことだね。

以上今日からあなたもデザイナー!?忘れがちな商業デザインの配色テクニックでした。気に入ってくれたらシェアしてね!

関連記事

410cb567eef6283065274df2547a2b9a_s

Webサイトで問い合わせが来る必要なマーケティング・デザイン手段5選

久々の更新… さて今回はWebデザインを続けていくと、Webサイ...

記事を読む

smartphoneIMGL0018_TP_V

UIデザインの幅に関しての基本的な考え方と理論

全く更新できず時間が過ぎていく…気ままに更新していきますのでたまに見て...

記事を読む

domain_cms

今年こそWebデザイナーになりたい!現役Webデザイナーに必要なサーバー・ドメイン・CMS 基本知識について

今回で第5回を迎えました。なんとか頑張って続けていきます!Webデザイ...

記事を読む

cssjshtml_img15

今年こそWebデザイナーになりたい!Webデザイナーに必要なコーディングスキル編(html/css/js)

今回はコーディングスキル編として、Webデザイナーとして就職するために...

記事を読む

新着記事

_4da9d299-fa39-4639-bd84-79ffedfd71e9

指示をするということはプログラミングする事と一緒

ほとんど更新してませんが、ひっそりとオランダで生きてます(笑)オランダ...

記事を読む

410cb567eef6283065274df2547a2b9a_s

Webサイトで問い合わせが来る必要なマーケティング・デザイン手段5選

久々の更新… さて今回はWebデザインを続けていくと、Webサイ...

記事を読む

smartphoneIMGL0018_TP_V

UIデザインの幅に関しての基本的な考え方と理論

全く更新できず時間が過ぎていく…気ままに更新していきますのでたまに見て...

記事を読む

PASONAZ160306470I9A2122_TP_V

ECサイトに必須!商品検索したあとの検索結果の正しい表示について考える

ECサイトに必須!商品検索したあとの検索結果について考える ECサイ...

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

_4da9d299-fa39-4639-bd84-79ffedfd71e9
指示をするということはプログラミングする事と一緒

ほとんど更新してませんが、ひっそりとオランダで生きてます(笑)オランダ

410cb567eef6283065274df2547a2b9a_s
Webサイトで問い合わせが来る必要なマーケティング・デザイン手段5選

久々の更新… さて今回はWebデザインを続けていくと、Webサイトの効

smartphoneIMGL0018_TP_V
UIデザインの幅に関しての基本的な考え方と理論

全く更新できず時間が過ぎていく…気ままに更新していきますのでたまに見て

PASONAZ160306470I9A2122_TP_V
ECサイトに必須!商品検索したあとの検索結果の正しい表示について考える

ECサイトに必須!商品検索したあとの検索結果について考える ECサイト

skitched-20180814-223313
今日からあなたもデザイナー!?忘れがちな商業デザインの配色テクニック

デザイナーの商業デザイン配色テクニック 配色については過去ある程度テク

→もっと見る

  • -売る技術-

    ウエブデザイン暦21年目。犬をこよなく愛するデザイナー。今はディレクションとデザイン を中心に制作全般をしてます。主にマーケティングを軸にデザインを組み立て商品が売れるサイトを構築しています。 デザインとマーケティングについて研究の日々。現在はオランダでWebデザイナーとして働いています。

    ツイッターやってます。
  • Amazonアソシエイト・プログラム規約による記載

    売る技術はamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

PAGE TOP ↑