初心者向け！Webサイトのデザイン制作フロー（配色）
「初心者向け！Webサイトのデザイン制作フロー（サイズとフォント）」の続きです！
前回はワイヤーフレームにフォントを乗せたところで終了しました。今回は配色！
Webサイトだけでなくファッションにも応用でき、それでいて情報の廃れもないので、覚えておいて損はないんではないかなと思います！
とりあえず適当に配色していた段階でしたが、ここからは全体のバランスをみながら統一感のある着色をしたいと思います。
やみくもに着色してもターゲットとするユーザーが思い描く印象とかけ離れたものになれば、サイトにマイナスなイメージを持ってしまいます。
色には人の心に働きかける効果があり、ある町では街頭を青色にしたら犯罪率が減ったという例もあるほどです。
相手に与える印象をこちらでコントロールできるようにするため、まずは色の効果を知っておきましょう。
色が人に働きかける効果
赤の印象
イメージ 愛・活気・危険・興奮・暑い・情熱・生命・怒り
心理作用 熱を感じさせる。食欲、購買意欲を増進させる。興奮を促す。時間の経過を早く感じさせる。
橙の印象
イメージ 暖かい・陽気・家庭的・自由・健康・昼・親しみ
心理作用 陽気な気分になる。仲間意識を高める。緊張をやわらげる。食欲を増進させる。
黄の印象
イメージ 明るい・愉快・軽快・希望・知識・躍動・注意・幼さ
心理作用 気分が明るくなる。集中力、判断力、記憶力がアップする。注意をうながす。
緑の印象
イメージ 穏やか・平和・環境・自然・バランス・協調・保守的・回復
心理作用 目の疲れを癒す。緊張を緩和する。穏やかな気持ちにさせる。
青の印象
イメージ 男性的・冷たい・憂鬱・清潔・開放感・さわやか・精神・誠実
心理作用 食欲を抑える。気持ちを落ち着かせる。時間の経過を遅く感じさせる。
紫の印象
イメージ 優雅・高貴・感性・神秘・魅力・二面性・不安定・孤独
心理作用 想像力を豊にする。勘を鋭くさせる。性的なものを感じさせる。
桃の印象
イメージ 女性的・弱い・優しい・柔らか・艶やか・甘い・恋・幸福
心理作用 優しい気持ちになる。可愛らしく見える。愛情を求める。
白の印象
イメージ 威厳・空虚・神聖・純粋・天国・無垢・無・透明感
心理作用 始まりを感じさせる。汚してはいけないと思わせる。広さを感じさせる。
黒の印象
イメージ 悪・暗闇・恐怖・沈黙・深さ・高級・自信・極限
心理作用 重く感じさせる。圧力、権力など力を感じさせる。高級感を与える。
灰の印象
イメージ 温厚・上品・地味・曖昧・信頼・過去・大人・思い出
心理作用 上品でスタイリッシュな印象を与える。落ち着いた雰囲気を与える。物事を受け入れやすくなる。
以上１０色のみですが、色が人の心に働きかける効果は様々なんですね！
ちなみにこの色の違いのことは色相といい、リング状に並べた物を色相環と呼びます。
メインとなる色相を決め、その色がどこに位置しているか確認してみてください。
その色の隣合う色は同系色といい、配色の際に相性の良い色で、反対側にある色は反対色・補色といい、相性の悪い色となりますが、使い方次第で鮮やかに見せることができます。
明度と彩度
メインカラーの彩度・明度というものを変えて、よりサイトに相応しい色を探してみましょう！
明度とは明るさの度合いのことで、彩度とは鮮やかさの度合いのことをいい、彩度がない色、つまり「白」「黒」「灰」なんかは無彩色といいます。
Photoshopのカラーピッカーというのがあるんですが、これで説明すると・・・
横方向が彩度、縦方向が明度となってます。
実際に明彩度が高い色と低い色を置いたものを見てみましょう。
明度が高すぎると文字にした時に読みにくくなってしまうので、明度が高いものはオススメしません。
クライアントからの依頼の場合は大抵企業カラーがあるので、メインカラーはそれを使用するのが無難かとおもいます。
色の黄金比
メインカラーが決まったら、今度は別の色を決めましょう！
実は配色には美しく見える黄金比のような法則が存在し「ベースカラー70%」「メインカラー25%」「アクセントカラー5%」という比率が美しいとされています。
ベースカラーは70%とほかのカラーに比べると割合が大きいのでWebサイトでは背景などに使われます。
彩度が高すぎると目がチカチカするし、明度が低いとサイト全体が暗くなりがちなので、白やメインカラーと相性のいい同系色を薄くした色、メインカラー自体を薄くした色が扱い易いと思います。
アクセントカラーですが、5%と非常に割合が小さいです。
存在感を出すには反対色を置いたりすると、サイト全体が鮮やかになります。
ですが、３色だけでは勿論足りないこともあります。そんな場合は比率を保ったまま分割して色を足していきましょう。
僕は大体５色に抑えるようにしてます。なぜならまとめきれる自信がないからです・・・。
自信があるかたは色んな色を使うのも良いかと思いますが、そこはサイトによって使い分けましょう！
カラー写真をサイトで使う際は写真の色味で十分な時もあるので、無彩色のトーンでも結構鮮やかになります。
写真の点数や扱う写真も考慮して色を選ぶとより良いデザインになるはずです！
配色方法
どんな色を選べばいいのか解らない方は、配色技法を少し知って頂きたいと思います。
大きく分けるとトーンかマルチカラーに分かれると思います。まずはトーン系の配色の一部をみてみましょう。
ドミナントカラー
色相がそろっていて、明度、彩度に差のある配色です。
ドミナントカラーの一種でトーン・オン・トーンという配色もあり、最大の違いは明度の差ですが、大体一緒なので割愛。
ドミナントトーン
明度、彩度のトーンがそろっていて色相の違う配色。
ドミナントトーンにもトーン・イン・トーン、トーナルというお仲間がいますが、こちらも割愛。大体一緒！！
カマイユ
曖昧な配色で、色相、明度、彩度の差がほぼない配色。少し離れたところから見ると単色にみえがち！
トーン系の配色は統一感が出易く、使い易いです！特にドミナントカラーはWebサイトでよくみられる配色です。
逆にカマイユなんかは全然見ないです。文字が見えないですもんね・・・これ。ファッション方面から生まれた配色なので、仕方なし！
続いてマルチカラーですが、これは色相環がかなり関係してきます。
ダイアード
色相環を2分割した位置にある色相同士の配色。
トライアド
色相環を3分割した位置にある色相同士の配色。
スプリット・コンプリメンタリー
色相環を2分割し、その一方を両脇の2色に分裂した配色。
マルチカラー系は、使いこなせば凄くオシャレな配色になりますが、扱いが難しいので上級者向けな感じがします。
配色に迷った時の選択肢として、色を扱っているサイトを紹介します。
僕は迷ったらとりあえずCOLORloversのお世話になっています！
人気度順にみれるので、受け入れられ易い色なんかが良くわかります。他にパターンなんかもあります。
和なテイストのデザインを作るときは必ずここを見ます。
日本で使われてきた伝統的な色が沢山あるので、調べたいとき凄く便利！
着色
前回まで作りかけだったデザインカンプに着色をしていきます。
僕の場合はパン屋さんで、使う写真も茶色のものが多いのでメインカラーは茶色を選び、解り易く3色のみにしました。
ワイヤーフレームと見比べてみましょう。
前回の比較後、データを削除してしまっていたので写真とか変わってしまいました。すみません！
説明していないことも色々あってさらに申し訳ないんですが、大体ここまでになっているんではないかなーと思います。
画像が小さいので大きいサイズは下記より確認してください。
配色は以上です！良いカラーリングが出来ると幸いです。
記事を書いた人
コメントする