読むだけで配色センスがレベルアップ!5分程度で読める良記事まとめ

ある国で純白の白色は「死」、米国での緑色は「お金」をあらわす。経理財務に関係するサイトで「赤」を無意味に使用してはならない。
世界のさまざまな地域の人たちを対象にデザインする場合は、文化や色の意味にも配慮しなければならない。
世界を相手にすることなんてないけど、売上アップさせる為の色使い、自然な配色の選び方・適切な余白の使い方・バランスのとり方・・・専門家じゃないのでパッと分からないです。そして長時間悩む。
あまり時間を取られないように、「わかりやすくて5分程度で読める良記事」をまとめました。配色がわからなくなったり、売上に困ったらこれらの良記事読んどきゃ大丈夫。
デザイナー、ウェブ系じゃない人もきっと参考になると思います!
エンジニア速報は Twitter の@commteで配信しています。
もくじ
色とマーケティング
1.青「#0044CC」でクリック率をあげる
2.赤色で購買率をあげる
3.販売色カラーで売上をあげる
4.配色による視線誘導
色と心理を学ぶ
5.デザインでは黒を使うな
6.サイト別で多く使われる色を分析
7.青色が与える27の効果を知る
8.メッセージによる色彩心理
9.12色が与える印象
10.男性と女性、物の見え方
配色の基礎を学ぶ
11.配色の基本
12.7つの配色技法
13.余白の使い方を知る
14.複数の色を使うときのバランス
15.例:工程とデザイン手法
16.スマホアプリなどの色の決め方
17.デザイナーの考え方まとめ
配色ツールを使う
18.イラストレーターの「カラーガイド」
19.色覚チェック
20.Chrome拡張 カラーピッカー
21.配色系ツール22個まとめ
22.カラーチャートまとめ
PCサイトから配色インスピレーションを得る
23.有名企業のブランドカラー
24.国産のWebデザインギャラリー
25.カテゴリ別デザインギャラリー
26.上質なサイトを直観的に探す
スマートフォンサイト制作前にインスピレーション
27.iPhoneサイトデザイン集 / PC比較
28.iPhone国内+海外デザインまとめ
29.Androidアプリデザイン集
色とマーケティング
1.青「#0044CC」でクリック率をあげる

テキストリンクの場合、青「#0044CC」を使って年間売上高が8000万ドル増加したという面白い記事。こういう情報を知ってしまうとつい試したくなっちゃいますよね。CTRアップの提案に。
2.赤色で購買率をあげる

「唯一の違いは画面の背景の色(赤または青)のみだった。その結果、赤色の背景を見せられた入札者のほうが、入札価格の上昇幅が大きく、よりアグレッシヴな傾向を示した。 」
これ実際に4年前ヤフオクで試したことあります。赤い机の上に中古ゲームソフトを置いた画像を載せておいたら、新品×90%くらいの値段で売れたことがありました。
3.販売色カラーで売上をあげる
Flickr: antwerpenR's Photostream
「赤は色彩心理学やカラーマーケッティングでは、販売色カラーといわれ、この色を入れることによって、売り上げが20%伸びるというデータもあるほどです。」色の不思議と心理
余談ですが、アメリカでは回転率を早める為にファーストフード店ではオレンジを使用することが多いとか。オレンジは落ち着かない色だからです。
逆に長居をさせたいバーなんかでは青色を使用します。これらの心理ってサイトにも十分に応用出来ます。
4.配色による視線誘導

視線の流れを意識してサイトを作るわけですが、ヒートマップを見ているとFやZの重要さを再認識させられます。このサイトはパターンごとに解説してあるので分かりやすいですね。配色や彩度による視線誘導の部分がおすすめ。
色と心理を学ぶ
5.デザインでは黒を使うな、という話

「TwitterやSublime Text 2などのアプリケーションでは、サイドバーは黒に見えるものの、純粋な黒(#000000)にはなっていない」
純粋な黒と見比べてみるとよくわかります。Facebookアプリのグレーの部分にはテーマカラーの青色が少しだけ入っているんですね。
6.サイト別で多く使われる色って?

「ブログでは赤、グローバルサイトでは青、デザイン系サイトではグレーや黒、ゲーム関連サイトでは緑」が多く使われるらしい。サイトを作る前の前の段階で参考にしたいですね。
7.青色が与える27の効果

もうひとつ青色が与える効果。青って信頼だとか誠実さだとかそれくらいしか思いつかなかったのですがデザイナー視点で見た効果や印象を27個もあげられてます。
昔スーツを売っていたこともあったのですが、確かに青色のスーツはビジネスマンによく売れてました。
8.メッセージによる色彩心理

パスワード入力を例にとって解説してあります。強度が弱い>赤、普通>オレンジ、強い>薄緑、超強力>濃い緑。EFO(エントリーフォーム改善)で取り入れたい部分です。
9.12色が与える印象

よく目にする12色を例に、それぞれの色がもつイメージ(象徴)や連想するものを噛み砕いて説明。資料作成の助けにもなりそう。
10.男性と女性、物の見え方はこんなに違う
このサイトによると、オレンジは男性のほうが赤く見え、緑色の草は女性のほうがより緑色にみえるのだとか。男女によって色の見え方が違うのなら、色のチェックは異性にしてもらうほかない。
配色を学ぶ
11.配色の基本
3属性から色を簡単に決める方法、選び方など。配色ってついつい適当に決めてしまうことがあるんですけど、教科書を読み返すのはきつい。でもこのスライドは基本的なことを恐ろしいほどわかりやすく解説してあります。
12.7つの配色技法

色の選び方について詳しく書いてあります。色彩の検定や勉強をしてなかったので初めて知る用語が出てきました。でも一般的によく利用される基本的な配色技法です。
13.余白と色の使い方

背景や羅線で使われる見えない色、言われてみれば無意識に使ってたな~と思って。このブログを見るだけでも余白の勉強になりそうです。
14.複数の色を使うときのバランス調整

複数の色を使うのってバランス崩れそうなので避けてました。なんど挫折したことか。でも、ちょっとしたことを意識するだけで綺麗にまとまるもんなんですね。複数の色のバランス調整に。
15.工程

センスによるところを独自のキーワードで書いてあり、これがとても分かりやすいです。良い物を沢山みて感覚を磨いておくことは一番大切かもしれませんね。
16.webサイトやスマホアプリなどの色の決め方

Kulerとphotoshopエクステンションを利用したwebサイトやスマホアプリなどの色の決め方について解説してあるスライド。ボタンに関しては、スマホサイト作る時はボタン画像を作っていたけど、アプリ開発時は画像を作ってなかったなぁ。
17.デザイナーの考え方まとめ
コミュニケーションがとれていれば別ですけど、同じ職場にいるデザイナーさんの考え方って意外とよく聞き出せなかったりします。開発者やディレクターの人にも。
配色とツール
18.イラストレーターの「カラーガイド」

カラーガイドなんてダラーと感覚で使っていたんですけど、こうやってよく見ると配色の練習にもなるんですね。どういう色が合うのか自分じゃ分からないってときに。
19.色覚チェック

色分けを検討する場合は色覚を考慮し赤青緑は避け、区別しやすい茶・黄色を取り入れたり。
20.Chrome拡張 カラーピッカー

サイト上の色を簡単に拾うことができるカラーピッカーの機能拡張「ColorZilla」。chrome拡張とfirefoxのアドオンのブックマークとして載せておきます。
21.配色系ツール22個まとめ

海外物だけど配色を便利にするツールをまとめています。
22.カラーチャート

ブラウザで名前が定義されている色の見本表です。
インスピレーション
23.有名企業のブランドカラー

あの有名企業のブランドカラーをヒントに、イメージを近くしたい。そう思っても思わなくても見るだけで面白いです。カラーコードをコピペできるのが嬉しい心づかい。
24.国産のWebデザインギャラリー

国内産であれば親近感も湧くし、感性も近いのでインスピレーションが降りてくるかもしれない。
25.カテゴリ別デザインギャラリー

カテゴリ別にわかれているので、結構参考にしやすい。トップページはあれだけど、実際にクリックしてみるとレベルの高いサイトが多い。
26.上質なサイトを直観的に探す
おしゃれなHPが紹介されているし、見やすくていい。国内サイト中心で直観的に探せる。
スマートフォンサイトからインスピレーション
27.iPhoneサイトデザイン集

クオリティが高いiPhoneサイトデザインのまとめ。PC版との比較もしてあるのでインスピレーションどころか、制作の助けにもなる。
28.iPhone国内+海外デザインまとめ

まだiPhoneサイトを作ってなくて、今からサイトデザインの雰囲気を掴みたいならこのサイトだと思います。国内+海外有り。
29.Androidアプリデザイン集

Androidアプリの美しいUIだけをコレクションしたまとめサイト。1ページでどんどん下へスクロールして見れるのと、iTunes App Store のように横にスクロール出来る。
ただ「かっこいい」だけじゃなくて、色の心理や効果をふまえた上で色を考えると何倍も配色が楽しくなりそうですね。
スポンサード リンク
関連記事
- キャラクター作成に使えた!人物やストーリーなども生成できるツールや素材集
- 右脳派必見!論理的に作れるWebデザインの法則
- Webデザインの参考にしたい、ファーストビューのアイデアその2
- さりげなく目立つフッターデザイン
- 2018年に使いたいWebデザイントレンド !ファーストビューのアイデア集
- Photoshopで簡単にできる不規則な円の作り方
- Photoshopで波を作る最も簡単な方法
- 45秒くらいでできる、Photoshopによるアナグリフ風な3Dエフェクトの作り方
- 404エラーページをデザインする時に取り入れたい洗練されたエフェクトとギャラリー集
- PhotoshopやCSSを使い、背景だけを薄くしてデュオトーン加工する方法
Leave a Comment