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