色とデザインとツール

配色・色とデザインとツール

前に配色ツールまとめというのを書きましたが
もっと色について必要な事は沢山あるなと思ってメモ的エントリです。

前に行ったセミナーによると、サイト作成に力を注ぐべき部分は3つあって

・・・50%
フォント・・・25%
レイアウト・・・25%

だそうです。
色は一瞬でわかる、わかりやすい部分、印象がつきやすい大事な部分なんですなー。

●配色についての基礎とか

配色方法は、彩度・明度・色相の基礎知識を抑えた上で

・類似色で構成する
・同じ「色相」で明度や彩度が違う色を選ぶ
・無彩色(白・黒・グレー)を合わせる

他は、補色から配色を考えてみたり(色同士より引き立って[補填しあって]見える配色)
あとは、トーンをそろえたりとか、この辺のパターンで良いかと。

【勉強になる素敵リンク】

・よりよいWebデザインにするための配色のセオリー
http://sweetlovexx.seesaa.net/article/90107619.html

・配色パターンからWebデザインを考える
http://www.webcreatorbox.com/tech/web-design-color-scheme/

・WEB制作者なら最低限知っておくべき色彩心理とWEBセーフカラー
http://d.hatena.ne.jp/kiyo560808/20090326/1238090375

・基礎からわかるホームページの配色
http://www.webcolordesign.com/sitemap

JIS X8341-3:2010における文字コントラストの達成基準ていうのがあるんですね^^;知らなかった。
web勉強してる最中の方は、くまなく読もう。
色彩の基礎の本も読んでおいたほうがいいよ。
目標が無いとできない人は、色彩検定を取ってみるのもいいかもね!

色彩検定過去問題集 2010年度全級(2010)

●カラーツール

・国産限定・カラー選定、配色支援などに役立ちそうなカラーツールいろいろ
http://kachibito.net/web-service/japanese-color-tools.html
まとめリンクを見て、自分に合ったものを見つけて下さい・・って言うと終わりになっちゃうので
他もいくつか。

・まだまだあるカラーツールいろいろ
http://www.designwalker.com/2009/01/color-tool.html
めっちゃ紹介してますがこの中の(アドオンになりますが)
ColorZilla for Firefox
は、サイトの色を数値で見れるので便利です。
良いサイトを見て、これで何色を使ってるか見てもいいですね

Gradient Generator作ってるトコと同じとこっぽいですね。スゴイな~
http://www.colorzilla.com/

オンラインならアクセシビリティ・カラー・ホイールていうのがよさそうです。
色覚異常の方の見え方もシミュレート出来ます。
・アクセシビリティ・カラー・ホイール
http://gmazzocato.altervista.org/colorwheel/wheel.php?lingua=ja

私は、これを配色決める時に使ってました。むちゃくちゃ良いです!おすすめ。
・Color Scheme Designer
http://colorschemedesigner.com/

Adobeのkulerはイラレと連携出来るので便利ですね。
私は適当にcleanとか、単語を入力してイメージカラー検索みたいにして使ってます。
・kuler
http://kuler.adobe.com/

ウェブ配色 コーディネートカタログ

●色から探せるデザインサイト

おまけ!
メインカラーが決まったら、参考サイトを沢山探してみて
色使いとかをパクx・・ゲホごホッ。
色使いとかを参考にデザインしてみましょー!!

◆WEBデザインの見本帳 http://www.web-mihon.com/
…色から探す・職種別他

◆ブックマ!みんなで作るWEBデザイン参考集 http://www.bookma.org/
…色から探す・職種別他・国内外

◆Website ColorIndex http://www.ubusuna.co.jp/
…色から探す・コメント付

◆あんじょうできてはる http://anjo.dekiteharu.jp/
…色から探す・職種別他・国内外

色の見本帳 キーワードからの配色イメージと金銀蛍光色掛け合わせ (design materials collection)