この本を一言で言うと
Webデザイン特化の配色見本帳。セオリーから実例まで「なぜその色を選ぶか」が体系的に学べる。
この本の概要
Webサイトのデザインに特化した配色の解説書。単なる見本集ではなく「なぜその色を選ぶのか」という配色の考え方を事例とともに学べる構成が特徴。Webデザイン固有の特性と配色の基本セオリーをCHAPTER1〜2で解説したのち、イメージ別・サイト形態別の実例をCHAPTER3〜4で展開。ベースカラー・キーカラー・サブカラーなど色の役割ごとに16進数コードを記載。コーポレートサイト・メディアサイト・ECサイトなど実務で頻出するサイト種別ごとの配色傾向が把握できる。
「この色にした理由」を説明できるようになった
スクールでWebデザインを学んでいた頃、配色だけがずっと苦手だった。Adobeのカラーとかで色を作ることはできるんだけど、なぜその色にしたのかを言葉にできなかった。
この本はその「なぜ」に答えてくれる。ベースカラーとキーカラーとサブカラーの役割の説明が特にわかりやすくて、「あ、今まで何となく選んでた色には役割があるんだ」という感覚になった。
CHAPTER4のサイト形態別の事例が実務で一番使った。コーポレートサイトのリニューアル案件を担当したとき、「コーポレートサイトはこういう理由でこういう色になりがち」という傾向を理解してから提案書を作ったら、クライアントとの合意形成が思ったよりスムーズだった。
Webデザインに特化してる配色本ってそんなに多くないので、この本はかなり貴重。転職してから1年経っても定期的に引っ張り出して使ってる。
— 未経験からWebデザイナーに転職した人（20代後半）
この本で学べること
✓
印刷物と異なるWeb固有のカラー表示特性（RGBモード・画面輝度・デバイス差）を踏まえた配色の考え方を学べる。
✓
色の役割ごとに整理された解説で「どの色が何のために使われているか」が明確に理解できる。
✓
ポップ・スタイリッシュなどのイメージ別と、コーポレートサイト・メディアサイト等の形態別の2軸で実例を掲載。
✓
配色結果だけでなく選択の根拠・理由まで解説しており、応用できる知識として身につけられる。
本の目次
- 1CHAPTER1 Webでの配色の基本（RGB・画面特性・カラーモード）
- 2CHAPTER2 配色の基本的な手法（色相・トーン・補色・アクセントカラー）
- 3CHAPTER3 イメージ別の配色例（ポップ・スタイリッシュ・ナチュラル等）
- 4CHAPTER4 サイト形態別の配色例（コーポレート・メディア・EC・サービス）
良い点・気になる点
良い点
- ○Webデザイン専門の配色解説書として希少性が高い
- ○理論と実例の両方がバランスよく掲載されている
- ○16進数コードで記載されWebに即使える
- ○「なぜその色か」の根拠まで学べる
気になる点
- △紙媒体・印刷物向けの配色情報は少ない
- △掲載サイト事例は情報が古くなる可能性がある
- △配色の応用範囲がWebサイトに限定されている
著者について
こんな人におすすめ
✓
✓
✓
よくある質問
Q. デザインツールのカラーコードとして使えますか？▼
A. 16進数（HEX）コードで掲載されているため、FigmaやXD・CSSに直接入力して使用できます。
Q. Webデザイン未経験でも読めますか？▼
A. CHAPTER1でWebと印刷の違いを含む基礎から解説しているため、Web配色の入門書として読めます。
Q. スマートフォン向けのデザインにも対応していますか？▼
A. Webデザイン全般の配色セオリーを扱っており、レスポンシブデザインを含む現代のWeb制作環境に適用できます。
UIデザインガイドライン集
実務で使えるUIデザインのガイドラインを無料でダウンロード
※ 登録いただいたメールアドレスは資料送付にのみ使用します