読むだけで配色センスがレベルアップ！５分程度で読める良記事まとめ
ある国で純白の白色は「死」、米国での緑色は「お金」をあらわす。経理財務に関係するサイトで「赤」を無意味に使用してはならない。
世界のさまざまな地域の人たちを対象にデザインする場合は、文化や色の意味にも配慮しなければならない。
世界を相手にすることなんてないけど、売上アップさせる為の色使い、自然な配色の選び方・適切な余白の使い方・バランスのとり方・・・専門家じゃないのでパッと分からないです。そして長時間悩む。
あまり時間を取られないように、「わかりやすくて５分程度で読める良記事」をまとめました。配色がわからなくなったり、売上に困ったらこれらの良記事読んどきゃ大丈夫。
デザイナー、ウェブ系じゃない人もきっと参考になると思います！
Sponsored Link
もくじ
色とマーケティング
１．青「#0044CC」でクリック率をあげる
２．赤色で購買率をあげる
３．販売色カラーで売上をあげる
４．配色による視線誘導
色と心理を学ぶ
５．デザインでは黒を使うな
６．サイト別で多く使われる色を分析
７．青色が与える27の効果を知る
８．メッセージによる色彩心理
９．１２色が与える印象
１０．男性と女性、物の見え方
配色の基礎を学ぶ
１１．配色の基本
１２．7つの配色技法
１３．余白の使い方を知る
１４．複数の色を使うときのバランス
１５．例：工程とデザイン手法
１６．スマホアプリなどの色の決め方
１７．デザイナーの考え方まとめ
配色ツールを使う
１８．イラストレーターの「カラーガイド」
１９．色覚チェック
２０．Chrome拡張 カラーピッカー
２１．配色系ツール22個まとめ
２２．カラーチャートまとめ
PCサイトから配色インスピレーションを得る
２３．有名企業のブランドカラー
２４．国産のWebデザインギャラリー
２５．カテゴリ別デザインギャラリー
２６．上質なサイトを直観的に探す
スマートフォンサイト制作前にインスピレーション
２７．iPhoneサイトデザイン集 / PC比較
２８．iPhone国内＋海外デザインまとめ
２９．Androidアプリデザイン集
色とマーケティング
１．青「#0044CC」でクリック率をあげる
テキストリンクの場合、青「#0044CC」を使って年間売上高が8000万ドル増加したという面白い記事。こういう情報を知ってしまうとつい試したくなっちゃいますよね。CTRアップの提案に。
２．赤色で購買率をあげる
「唯一の違いは画面の背景の色（赤または青）のみだった。その結果、赤色の背景を見せられた入札者のほうが、入札価格の上昇幅が大きく、よりアグレッシヴな傾向を示した。 」
これ実際に４年前ヤフオクで試したことあります。赤い机の上に中古ゲームソフトを置いた画像を載せておいたら、新品×90%くらいの値段で売れたことがありました。
３．販売色カラーで売上をあげる
Flickr: antwerpenR's Photostream
「赤は色彩心理学やカラーマーケッティングでは、販売色カラーといわれ、この色を入れることによって、売り上げが２０％伸びるというデータもあるほどです。」色の不思議と心理
余談ですが、アメリカでは回転率を早める為にファーストフード店ではオレンジを使用することが多いとか。オレンジは落ち着かない色だからです。
逆に長居をさせたいバーなんかでは青色を使用します。これらの心理ってサイトにも十分に応用出来ます。
４．配色による視線誘導
視線の流れを意識してサイトを作るわけですが、ヒートマップを見ているとFやZの重要さを再認識させられます。このサイトはパターンごとに解説してあるので分かりやすいですね。配色や彩度による視線誘導の部分がおすすめ。
色と心理を学ぶ
５．デザインでは黒を使うな、という話
「TwitterやSublime Text 2などのアプリケーションでは、サイドバーは黒に見えるものの、純粋な黒（#000000）にはなっていない」
純粋な黒と見比べてみるとよくわかります。Facebookアプリのグレーの部分にはテーマカラーの青色が少しだけ入っているんですね。
６．サイト別で多く使われる色って？
「ブログでは赤、グローバルサイトでは青、デザイン系サイトではグレーや黒、ゲーム関連サイトでは緑」が多く使われるらしい。サイトを作る前の前の段階で参考にしたいですね。
７．青色が与える27の効果
もうひとつ青色が与える効果。青って信頼だとか誠実さだとかそれくらいしか思いつかなかったのですがデザイナー視点で見た効果や印象を２７個もあげられてます。
昔スーツを売っていたこともあったのですが、確かに青色のスーツはビジネスマンによく売れてました。
８．メッセージによる色彩心理
パスワード入力を例にとって解説してあります。強度が弱い＞赤、普通＞オレンジ、強い＞薄緑、超強力＞濃い緑。EFO(エントリーフォーム改善)で取り入れたい部分です。
９．１２色が与える印象
よく目にする１２色を例に、それぞれの色がもつイメージ（象徴）や連想するものを噛み砕いて説明。資料作成の助けにもなりそう。
１０．男性と女性、物の見え方はこんなに違う
このサイトによると、オレンジは男性のほうが赤く見え、緑色の草は女性のほうがより緑色にみえるのだとか。男女によって色の見え方が違うのなら、色のチェックは異性にしてもらうほかない。
配色を学ぶ
１１．配色の基本
３属性から色を簡単に決める方法、選び方など。配色ってついつい適当に決めてしまうことがあるんですけど、教科書を読み返すのはきつい。でもこのスライドは基本的なことを恐ろしいほどわかりやすく解説してあります。
１２．7つの配色技法
色の選び方について詳しく書いてあります。色彩の検定や勉強をしてなかったので初めて知る用語が出てきました。でも一般的によく利用される基本的な配色技法です。
１３．余白と色の使い方
背景や羅線で使われる見えない色、言われてみれば無意識に使ってたな～と思って。このブログを見るだけでも余白の勉強になりそうです。
１４．複数の色を使うときのバランス調整
複数の色を使うのってバランス崩れそうなので避けてました。なんど挫折したことか。でも、ちょっとしたことを意識するだけで綺麗にまとまるもんなんですね。複数の色のバランス調整に。
１５．工程
センスによるところを独自のキーワードで書いてあり、これがとても分かりやすいです。良い物を沢山みて感覚を磨いておくことは一番大切かもしれませんね。
１６．webサイトやスマホアプリなどの色の決め方
Kulerとphotoshopエクステンションを利用したwebサイトやスマホアプリなどの色の決め方について解説してあるスライド。ボタンに関しては、スマホサイト作る時はボタン画像を作っていたけど、アプリ開発時は画像を作ってなかったなぁ。
１７．デザイナーの考え方まとめ
コミュニケーションがとれていれば別ですけど、同じ職場にいるデザイナーさんの考え方って意外とよく聞き出せなかったりします。開発者やディレクターの人にも。
配色とツール
１８．イラストレーターの「カラーガイド」
カラーガイドなんてダラーと感覚で使っていたんですけど、こうやってよく見ると配色の練習にもなるんですね。どういう色が合うのか自分じゃ分からないってときに。
１９．色覚チェック
色分けを検討する場合は色覚を考慮し赤青緑は避け、区別しやすい茶・黄色を取り入れたり。
２０．Chrome拡張 カラーピッカー
サイト上の色を簡単に拾うことができるカラーピッカーの機能拡張「ColorZilla」。chrome拡張とfirefoxのアドオンのブックマークとして載せておきます。
２１．配色系ツール22個まとめ
海外物だけど配色を便利にするツールをまとめています。
２２．カラーチャート
ブラウザで名前が定義されている色の見本表です。
インスピレーション
２３．有名企業のブランドカラー
あの有名企業のブランドカラーをヒントに、イメージを近くしたい。そう思っても思わなくても見るだけで面白いです。カラーコードをコピペできるのが嬉しい心づかい。
２４．国産のWebデザインギャラリー
国内産であれば親近感も湧くし、感性も近いのでインスピレーションが降りてくるかもしれない。
２５．カテゴリ別デザインギャラリー
カテゴリ別にわかれているので、結構参考にしやすい。トップページはあれだけど、実際にクリックしてみるとレベルの高いサイトが多い。
２６．上質なサイトを直観的に探す
おしゃれなHPが紹介されているし、見やすくていい。国内サイト中心で直観的に探せる。
スマートフォンサイトからインスピレーション
２７．iPhoneサイトデザイン集
クオリティが高いiPhoneサイトデザインのまとめ。PC版との比較もしてあるのでインスピレーションどころか、制作の助けにもなる。
２８．iPhone国内＋海外デザインまとめ
まだiPhoneサイトを作ってなくて、今からサイトデザインの雰囲気を掴みたいならこのサイトだと思います。国内＋海外有り。
２９．Androidアプリデザイン集
Androidアプリの美しいUIだけをコレクションしたまとめサイト。１ページでどんどん下へスクロールして見れるのと、iTunes App Store のように横にスクロール出来る。
ただ「かっこいい」だけじゃなくて、色の心理や効果をふまえた上で色を考えると何倍も配色が楽しくなりそうですね。
スポンサード リンク
-
投稿者：commte
株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。
この後によく読まれている記事
Comments
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
Leave a Comment