 | Webプロフェッショナルのための黄金則 Web配色デザインのセオリー (Web Designing BOOKS) (2007/08/31) 坂本 邦夫 価格：￥ 2,310 （税込） 1500 円以上国内配送料無料 商品詳細を見る 「色」はWebサイトにおいて、ビジュアルイメージの方向性や、情報伝達に重要な意味を持ちます。より高いビジネスゴールを実現するために知っておきたい、Webプロフェッショナルのための"黄金則"です。 |
【商品の説明】
Webサイトの「色づかい」は、「その色がきれいだから」などと恣意的に決まるものではありません。場合に応じて、目的によって、適切に色を使っていく「セオリー」があります。
本書は、Webプロフェッショナル、またはWebクリエイターを目指す方であれば必ず知っておきたい、Webサイトにおける配色のセオリーをまとめたものです。
1項目を基本的に見開きで構成し、図解を多用した誌面になっており、また適宜「チェックリスト」を設けることで、「見てわかりやすく、調べて使いやすい」内容となっています。
Chapter1「ウェブ配色の基礎」では、色彩および配色の基本を簡潔にまとめます。色彩の基本を知り、色の持つ性質を覚えておけば、より効果的な色の使用ができるでしょう。
Chapter2「配色を整えるテクニック」では、テーマカラーの決め方から、前景色、背景色の決定方法、さらに決めた色をどう配置すればよいか、といった「整え」のテクニックをまとめています。
Chapter3「デザインの目的別テクニック」では、「テキスト」「レイアウト」「画像」といった要素ごとに、その要素の目的を達するためのテクニックやノウハウを解説します。また、配色の調整方法なども説明しています。
Chapter4 「ビジネスゴールごとの目的別テクニック」では、ユーザビリティ、アクセシビリティ、CI、ブランディングといったサイトのビジネスゴールや、ニュースサイト、広告サイト、公共系サイトなどのサイトの目的という視点から、その目的を達するためにはどのように配色を考え、決めていけばよいかを解説していきます。サイトの目的に最適の色づかいをするのに、きっと役立つでしょう。
「色」は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値とは（色の指定方法）
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値とは（色の指定方法）
