Webプロフェッショナルのための黄金則 Web配色デザインのセオリー

【目次】

Chapter 1　ウェブ配色の基礎
Category_1.　色彩の基礎知識
　　　Theme 1-1　色の三属性
　　　Theme 1-2　トーンとそのイメージ
　　　Theme 1-3　色と面積
　　　Theme 1-4　アクセントカラーとセパレーションカラー
　　　Theme 1-5　同化現象と対比現象
　　　Theme 1-6　色の誘目性
　　　Theme 1-7　視認性と可読性
　　　Theme 1-8　色の識別性
　　　Theme 1-9　モニタと印刷との色域の違い
　　　Check List
Category_2.　印象を左右する色彩の心理的効果
　　　Theme 2-1　色の寒暖
　　　Theme 2-2　派手な色と地味な色/興奮色と沈静色
　　　Theme 2-3　重い色と軽い色/固い色と柔らかい色
　　　Theme 2-4　色の遠近感
　　　Check List
Category_3.　ウェブサイトの配色
　　　Theme 3-1　HTML/CSSでの色指定
　　　Theme 3-2　Webセーフカラー
　　　Theme 3-3　HSBを利用して色を作る
　　　Theme 3-4　色のユーザビリティ
　　　Theme 3-5　色のアクセシビリティ
　　　Theme 3-6　可読性のチェックとソフトウェア
　　　Theme 3-7　テキストリンクの色
　　　Check List

Chapter 2　配色を整えるテクニック
Category_1.　テーマカラーを決める
　　　Theme 1-1　基本テーマカラーを1色設定する
　　　Theme 1-2　テーマカラーの彩度と面積
　　　Check List
Category_2.　色相・トーンを手がかりにした配色
　　　Theme 2-1　色相を限定した配色
　　　Theme 2-2　多色配色
　　　Theme 2-3　トーンによる配色
　　　Theme 2-4　自然の色を使った配色
　　　Check List
Category_3.　背景色
　　　Theme 3-1　背景と文字のコントラストの調整
　　　Theme 3-2　背景画像の上のテキスト
　　　Theme 3-3　背景色とリンクの色
　　　Check List
Category_4.　色の配置
　　　Theme 4-1　情報の優先順位を決めて配色する
　　　Theme 4-2　視線移動の基礎
　　　Theme 4-3　全体のレイアウトと視線の移動
　　　Theme 4-4　グラデーションで視線を誘う
　　　Check List

Chapter 3　デザインの目的別テクニック
Category_1.　テキストの扱い
　　　Theme 1-1　テキストを読ませる
　　　Theme 1-2　メニューを読みやすくする
　　　Theme 1-3　テキストリンクの下線を外す
　　　Theme 1-4　テキストの強調
　　　Check List
Category_2.　レイアウトを構成する色
　　　Theme 2-1　ロゴやサイト名を見せる
　　　Theme 2-2　ロゴの下のナビゲーションの色
　　　Theme 2-3　サイドバーの色
　　　Theme 2-4　コンテンツを整理して見せる
　　　Theme 2-5　印刷できる色にする
　　　Theme 2-6　ボタンをクリックさせる
　　　Check List
Category_3.　画像の扱い
　　　Theme 3-1　画像の色を重視する
　　　Theme 3-2　多数の画像を並べる
　　　Theme 3-3　商品を紹介する画像
　　　Check List
Category_4.　配色の調整
　　　Theme 4-1　離れて配色を見る
　　　Theme 4-2　項目ごとにチェックする
　　　Check List

Chapter 4　ビジネスゴールごとの目的別テクニック
Category_1.　ユーザビリティ、アクセシビリティを重視するサイト
　　　Theme 1-1　政府・自治体や公共交通機関などのサイト
Category_2.　CIを重視するサイト
　　　Theme 2-1　ロゴの色の彩度を考えた配色
　　　Theme 2-2　色の繰り返しによるイメージ定着
　　　Check List
Category_3.　色彩によるブランディング
　　　Theme 3-1　競合サイトと似ていないか?
　　　Theme 3-2　用いる色相を絞り込む
　　　Theme 3-3　独自のサービスを持つサイト
Category_4.　印象を重視するサイト
　　　Theme 4-1　信頼感の表現方法
　　　Theme 4-2　親しみやすさを表現
　　　Check List
Category_5.　高齢者をターゲットとするサイト
　　　Theme 5-1　加齢に伴う見え方の変化
　　　Theme 5-2　高齢者の嗜好と視覚特性を考慮した配色
Category_6.　SNSやWiki、ニュースなど情報を扱うサイト
　　　Theme 6-1　繰り返し訪れられるサイトの色
　　　Check List
Category_7.　人物の写真があるサイト
　　　Theme 7-1　写真と文字の両方を見せる配色
Category_8.　飲食物を扱うサイト
　　　Theme 8-1　美味しそうに見せる色
　　　Check List
Category_9.　広告で収益を得るサイト
　　　Theme 9-1　画像広告を挿入する場合
　　　Theme 9-2　文字広告の挿入
Category_10.　地域限定サービスのサイト
　　　Theme 10-1　地域で親しまれている色を探す
　　　Theme 10-2　地域の競合サイトを調査して配色を考える
　　　Check List

Appendix　配色技法


▼ Webサイトの配色（カラー）ガイドブック
　Ｌ Webデザインのためのデジタル色見本帖
　Ｌ Webプロフェッショナルのための黄金則 Web配色デザインのセオリー

● HTMLリファレンス - カラー編（RGBカラーチャ−ト）
　Ｌ 文字色と背景色の組み合わせサンプル

● RGB値とは（色の指定方法）

タグ ： Webデザイン 配色