効果的に伝えるWeb配色標準デザインガイド―ユーザビリティ/アクセシビリティ/マーケティングを考慮したサイトの色彩設計からの配色の実際まで

「センス」だけに頼らない色彩設計を行うために。伝えたいことが伝わり、説得力のあるサイトをデザインするために。ユーザビリティ、アクセシビリティ、マーケティングなどを考慮して効果的なWeb配色を行っていくための、実践的なルールブックです。

効果的に伝えるWeb配色標準デザインガイド―ユーザビリティ/アクセシビリティ/マーケティングを考慮したサイトの色彩設計からの配色の実際まで

どんなに色の美しいホームページも、伝えるべき情報が閲覧者に伝わらなければ、まったく役に立ちません。見栄えだけではなく、使いやすく読みやすいサイトをデザインするには、どのように色彩設計を行い、配色を行っていけばいいのでしょうか? 本書では、ユーザビリティ、アクセシビリティ、カラーマーケティング等を考慮しながらWebサイトの配色を行っていくための「プロセス」と「ルール」をまとめています。色彩や配色の考え方から、イメージの作り方、色彩設計の行い方、そして実際に配色を行う際に気を付けなければならないことまでを解説しています。後半には 5つのケーススタディを掲載し、実際にシステム開発会社やネットショップ等の配色を決定していく過程を見ることで、実践的な活用法を習得することができます。センスだけに頼らないサイトの配色を行うために、また伝えたいことが効果的に伝わり、説得力のあるサイトをデザインするために、WebデザイナーおよびWeb制作者必読の配色ルールブックです。

書籍「効果的に伝えるWeb配色標準デザインガイド」のコンテンツ

ウェブサイトのデザインと配色
- ウェブデザインに求められる色とは？
  - 美しい色とは
  - 機能的な色とは
- ウェブ・ユーザビリティと色
  - 情報を伝えるための色
- ウェブ・アクセシビリティと色
  - 誰にでも見ることが出来る色を目指して
- ビジネスとウェブサイトの配色
  - 立ち去られない配色
- COLUMN　バランスの取れた配色とは
ウェブサイト配色のための基礎知識
- RGBによる色表示
  - RGBの仕組みと色の表示
  - Webセーフカラーについて
- HSBによる色表示
  - HSBによる色表示
  - HSBを扱える環境について
- 環境による見え方の違い
  - 環境によって見え方は違う
- 色彩の基礎知識
  - 色相と色相環について
  - 明度と彩度について
  - トーンとは
  - ジャッドの色彩調和論とは
- 配色の方法
  - 色相に基づく配色
  - 明度・彩度に基づく配色
  - その他の配色
- 色彩の心理的効果
  - 色が与える影響
  - 読みやすさ・見えやすさ
  - 対比現象による見え方の違い
  - 色相と食欲
  - 言葉からの色彩イメージ
色彩の設計
- 色彩設計の前に
  - デザインの前に色彩決定を行う意義
  - 配色の目的を定める
  - 使う色と使わない色
- カラーマーケティングの基礎
  - カラーマーケティングが必要な理由
  - コーポレートカラー・ロゴマークの検討
  - コーポレートカラーの扱い方
  - 競合サイトの分析
  - 競合サイトの色相の分析
  - 競合サイトの明度と彩度の分析
  - 「売れる色」は存在しない
- 色彩設計の実践
  - 色彩イメージを面積比で考える
  - 配色の基本となるベースカラーを決める
  - 色相を変えたサブカラー
  - 明度と彩度を変えたサブカラー
  - 3属性のうち2つを変えたサブカラー
  - アクセントカラーを決定する
  - 4色以上の色を使うには
  - 補助カラーを利用する
  - 配色の調整
- COLUMN　カラーイメージで競合チェック
配色の実際
- 配色の基本
  - レイアウトは先に済ませておく
  - 色の誘目性を利用する
  - 自然な視線の流れに従った配色
- 伝えたい情報の重要度を考えた配色
  - 情報に優先順位をつける
  - 企業の名前やサービス名を覚えてもらう
  - 写真やバナーに注目をさせる
  - 文章に注目をさせる
- 読みやすい背景色
  - あらゆる文字の背景を考慮する
  - 背景色とリンク色
  - 印象を壊さない背景色の選び方
- アクセシビリティを確保する
  - 色覚異常に対する配慮
  - 高齢者に対する配慮
  - 客観的なコントラストの判定
  - 色だけで情報の区別を行わない
  - 点滅や同じパターンの繰り返しを避ける
  - その他の文字に関する注意
- 配色に困ったとき
  - 多色でまとまらない場合
  - 色の面積を減らす
- COLUMN　「当たり前」の配色
ケーススタディ
- case1 歯科医院
  - 案件概要
  - 分析
  - 設計
  - 色の配置
- case2　システム開発会社
  - 案件概要
  - 分析
  - 設計
  - 色の配置
- case3　食品卸
  - 案件概要
  - 分析
  - 設計
  - 色の配置
- case4　書道教室
  - 案件概要
  - 分析
  - 設計
  - 色の配置
- case5　ブランド品のセレクトショップ
  - 案件概要
  - 分析
  - 設計
  - 色の配置
- COLUMN　クライアント更新用のカラー指定
Appendix
- 参考書籍
- ウェブリソース
- 言葉のイメージと色