calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

color

ある国で純白の白色は「死」、米国での緑色は「お金」をあらわす。経理財務に関係するサイトで「赤」を無意味に使用してはならない。

世界のさまざまな地域の人たちを対象にデザインする場合は、文化や色の意味にも配慮しなければならない。

世界を相手にすることなんてないけど、売上アップさせる為の色使い、自然な配色の選び方・適切な余白の使い方・バランスのとり方・・・専門家じゃないのでパッと分からないです。そして長時間悩む。

あまり時間を取られないように、「わかりやすくて５分程度で読める良記事」をまとめました。配色がわからなくなったり、売上に困ったらこれらの良記事読んどきゃ大丈夫。

デザイナー、ウェブ系じゃない人もきっと参考になると思います！

エンジニア速報は Twitter の@commteで 1 日 5 回配信しています。

Sponsored Link

もくじ

色とマーケティング
１．青「#0044CC」でクリック率をあげる
２．赤色で購買率をあげる
３．販売色カラーで売上をあげる
４．配色による視線誘導

色と心理を学ぶ
５．デザインでは黒を使うな
６．サイト別で多く使われる色を分析
７．青色が与える27の効果を知る
８．メッセージによる色彩心理
９．１２色が与える印象
１０．男性と女性、物の見え方

配色の基礎を学ぶ
１１．配色の基本
１２．7つの配色技法
１３．余白の使い方を知る
１４．複数の色を使うときのバランス
１５．例：工程とデザイン手法
１６．スマホアプリなどの色の決め方
１７．デザイナーの考え方まとめ

配色ツールを使う
１８．イラストレーターの「カラーガイド」
１９．色覚チェック
２０．Chrome拡張 カラーピッカー
２１．配色系ツール22個まとめ
２２．カラーチャートまとめ

PCサイトから配色インスピレーションを得る
２３．有名企業のブランドカラー
２４．国産のWebデザインギャラリー
２５．カテゴリ別デザインギャラリー
２６．上質なサイトを直観的に探す

スマートフォンサイト制作前にインスピレーション
２７．iPhoneサイトデザイン集 / PC比較
２８．iPhone国内＋海外デザインまとめ
２９．Androidアプリデザイン集

色とマーケティング

１．青「#0044CC」でクリック率をあげる

0044cc

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

２．赤色で購買率をあげる

AmazonKindle

「唯一の違いは画面の背景の色（赤または青）のみだった。その結果、赤色の背景を見せられた入札者のほうが、入札価格の上昇幅が大きく、よりアグレッシヴな傾向を示した。 」

これ実際に４年前ヤフオクで試したことあります。赤い机の上に中古ゲームソフトを置いた画像を載せておいたら、新品×90%くらいの値段で売れたことがありました。

３．販売色カラーで売上をあげる

3186643153_7722c83c93
Flickr: antwerpenR's Photostream

「赤は色彩心理学やカラーマーケッティングでは、販売色カラーといわれ、この色を入れることによって、売り上げが２０％伸びるというデータもあるほどです。」色の不思議と心理

余談ですが、アメリカでは回転率を早める為にファーストフード店ではオレンジを使用することが多いとか。オレンジは落ち着かない色だからです。
逆に長居をさせたいバーなんかでは青色を使用します。これらの心理ってサイトにも十分に応用出来ます。

４．配色による視線誘導

07design

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

色と心理を学ぶ

５．デザインでは黒を使うな、という話

202020

「TwitterやSublime Text 2などのアプリケーションでは、サイドバーは黒に見えるものの、純粋な黒（#000000）にはなっていない」

純粋な黒と見比べてみるとよくわかります。Facebookアプリのグレーの部分にはテーマカラーの青色が少しだけ入っているんですね。

６．サイト別で多く使われる色って？

sitebetu

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

７．青色が与える27の効果

blue

もうひとつ青色が与える効果。青って信頼だとか誠実さだとかそれくらいしか思いつかなかったのですがデザイナー視点で見た効果や印象を２７個もあげられてます。

昔スーツを売っていたこともあったのですが、確かに青色のスーツはビジネスマンによく売れてました。

８．メッセージによる色彩心理

pass

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

９．１２色が与える印象

12

よく目にする１２色を例に、それぞれの色がもつイメージ（象徴）や連想するものを噛み砕いて説明。資料作成の助けにもなりそう。

１０．男性と女性、物の見え方はこんなに違う

このサイトによると、オレンジは男性のほうが赤く見え、緑色の草は女性のほうがより緑色にみえるのだとか。男女によって色の見え方が違うのなら、色のチェックは異性にしてもらうほかない。

配色を学ぶ

１１．配色の基本

iro
３属性から色を簡単に決める方法、選び方など。配色ってついつい適当に決めてしまうことがあるんですけど、教科書を読み返すのはきつい。でもこのスライドは基本的なことを恐ろしいほどわかりやすく解説してあります。

１２．7つの配色技法

7

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

１３．余白と色の使い方

bani

背景や羅線で使われる見えない色、言われてみれば無意識に使ってたな～と思って。このブログを見るだけでも余白の勉強になりそうです。

１４．複数の色を使うときのバランス調整

fukusu

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

１５．工程

maka

センスによるところを独自のキーワードで書いてあり、これがとても分かりやすいです。良い物を沢山みて感覚を磨いておくことは一番大切かもしれませんね。

１６．webサイトやスマホアプリなどの色の決め方

sphone

Kulerとphotoshopエクステンションを利用したwebサイトやスマホアプリなどの色の決め方について解説してあるスライド。ボタンに関しては、スマホサイト作る時はボタン画像を作っていたけど、アプリ開発時は画像を作ってなかったなぁ。


１７．デザイナーの考え方まとめ

コミュニケーションがとれていれば別ですけど、同じ職場にいるデザイナーさんの考え方って意外とよく聞き出せなかったりします。開発者やディレクターの人にも。

配色とツール

１８．イラストレーターの「カラーガイド」

illust

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

１９．色覚チェック

online

色分けを検討する場合は色覚を考慮し赤青緑は避け、区別しやすい茶・黄色を取り入れたり。

２０．Chrome拡張 カラーピッカー

chrome

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

２１．配色系ツール22個まとめ

Check-My-Colours-Analyse-the-color-contrast-of-your-web-pages_thumb

海外物だけど配色を便利にするツールをまとめています。

２２．カラーチャート

WEB色見本 原色大辞典 HTML Color Names

ブラウザで名前が定義されている色の見本表です。

インスピレーション

２３．有名企業のブランドカラー

brand

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

２４．国産のWebデザインギャラリー

S5Style

国内産であれば親近感も湧くし、感性も近いのでインスピレーションが降りてくるかもしれない。

２５．カテゴリ別デザインギャラリー

cate

カテゴリ別にわかれているので、結構参考にしやすい。トップページはあれだけど、実際にクリックしてみるとレベルの高いサイトが多い。

２６．上質なサイトを直観的に探す

bookma
おしゃれなHPが紹介されているし、見やすくていい。国内サイト中心で直観的に探せる。

スマートフォンサイトからインスピレーション

２７．iPhoneサイトデザイン集

iPhonebox

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

２８．iPhone国内＋海外デザインまとめ

iphonedesignarchive

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

２９．Androidアプリデザイン集

android

Androidアプリの美しいUIだけをコレクションしたまとめサイト。１ページでどんどん下へスクロールして見れるのと、iTunes App Store のように横にスクロール出来る。

ただ「かっこいい」だけじゃなくて、色の心理や効果をふまえた上で色を考えると何倍も配色が楽しくなりそうですね。

スポンサード リンク

関連記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。