WEBデザイン配色の勉強や実務で活用している参考書籍・参考サイト
WEBデザインのなかでも「配色」について、自分が独学で勉強してきた際に良かった書籍や、WEBデザインの実務で活用している配色関連の本を紹介します。
WEB配色を基礎から勉強したい、あるいは基礎は学んだけど実務に活かすために深めたい、というWEBデザイナー向けの記事になるかなと思います。
色彩検定対策書籍で配色の基礎を学ぶ
基礎知識としては、色彩検定の2級を取った時の勉強がけっこう役立っているのでおすすめしておきます。
というか配色の基礎を学べる系の書籍は、目次を見ると、だいたい色彩検定2級の学習範囲に含まれているように感じます。基礎を一通り網羅しようとすると似たような構成になるんでしょうか。そんなわけで、色彩検定はWEBデザインに特化しているわけではないですが配色の基礎を学びたい人にとって必須になる知識がまとまっていると思います。
受験するかどうかはおいといて、問題集とかも整っている（←勉強する上でとても助かる）し、教材としては非常に良いと思います。
色彩検定2級 本試験対策
解説→練習問題のスタイルで学んでいく対策教材。僕が受験した時に使ったやつで、割と自分の勉強スタイルに合っていて良かった。公式テキスト＋この本で勉強したら合格しました。
僕が使ったやつは2015年版で、紹介しているのは本記事執筆時の最新版。
A・F・T 色彩検定公式テキスト2級編
公式テキスト。受けるなら問題集とあわせてやっておくと良いです。
色の事典―色彩の基礎・配色・使い方
色彩検定対応を謳っているわけではないけど、おおむね色彩検定の範囲を押さえて解説しています。サンプルで出てくる配色の例とかが分かりやすくて良いです。時々見返す本。
実務の配色フローを学ぶ
以下は実務の流れに即したWEBデザインの配色のフローを学べる書籍です。
ウェブ配色 決める! チカラ – 問題を解決する色彩とコミュニケーション
配色技法もさることながら、実務でありそうなコミュニケーションの対応とかが面白くて参考になります。以下は一例。
- 寂しいから色を増やしたいと言われた場合
- 矛盾したリクエストにはどう対応する？
- 一度承認された色を変更したいと言われた
効果的に伝えるWeb配色標準デザインガイド
WEBデザインに特化した配色本です。基礎的な配色技法以外にも競合サイトの配色分析など、実務的なカラーマーケティングにも言及されています。初めて手に取ったWEB配色本なのでちょっと思い入れがあります。
WEB配色でいつも参照してる本
日本カラーデザイン研究所によるイメージスケールを活用するための書籍です。ロジックで配色を考えていくのに役立ちます。僕が普段実務で使ってる本で、読んで勉強というより、辞書のように都度めくって検討しています。
イメージスケールを使った配色のフローは以下の記事が分かりやすくて、とても勉強になります。
デザイン事例まとめ書籍でアイデアを参考に
実際に配色やデザインを検討する時には、サイト集やらの他に以下のようなアイデア参考本をめくって参考にします。それぞれ、いろんな切り口でデザイン事例がまとめられていてインスピレーションを得るのに役立ちます。
WEBサイト
普段使ってるブックマークからご紹介。
ツール系
デザイン制作の時に活用する配色関連のツールたち。
- カラーピッカー – 原色大辞典 Photoshopとかを開くまでもないような、カラーコードのちょっとした確認とか調整の時に便利。
- Ultimate CSS Gradient Generator – ColorZilla.com CSSのグラデーションをGUIでサクッと作れるジェネレーター。便利。
- Sass Color Generator Sassでlighten、darkenのような関数を使って配色を調整する時に参照するとパッと見て直感的に色味が分かるので便利。
- Color 配色パターンを提案してくれて便利。とりあえずいい感じの組み合わせがほしい時とか、悩んだときに参考にしたりとか。
デザイン参考サイト
- イケサイ ウェブデザイナーのWEBデザインデータベース
- SANKOU! | Webデザインの参考サイト集
- 縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU.ORG
- Webサイトランキング | Gomez
いくつか挙げましたが、ふつうに「テイスト」＋「参考サイト」とかでググったりすることも多いです。そのほうが欲しい切り口でまとめている参考サイト集が出てきたり。
あと普通にGoogle画像検索も使います。配色のキーワード＋「建築」とか「ファッション」とかでWEB以外のデザインを探すと、意外と参考になったりします。
おわりに
以上、WEBデザイン配色の勉強や実務で活用している参考書籍・参考サイトを紹介しました。
配色をもっと理詰めでロジカルにデザインしたいな、という欲求のもと日々勉強です。未だ「配色はセンスではない」的な高説を垂れる域には至りませんが、ここらで一度自分の学習リソースを整理しようと思ってまとめました。これからWEB配色を学びたい方の参考になれば幸いです。
また、オススメの書籍やサイトなどがあればぜひ教えてください！では。
お問合わせ
@sho_taiko
