著書「Webプロフェッショナルのための黄金則 Web配色デザインのセオリー」　－　カラープランニングオフィス・フォルトゥナ大阪

フォルトゥナのカラリスト坂本邦夫の2冊目の著書「Webプロフェッショナルのための黄金則 Web配色デザインのセオリー」のご紹介です。

内容

ウェブサイトの「色づかい」は、「その色がきれいだから」などと恣意的に決まるものではありません。場合に応じて、目的によって、適切に色を使っていく「セオリー」があります。

本書は、Webプロフェッショナル、またはWebクリエイターを目指す方であれば必ず知っておきたい、ウェブサイトにおける配色のセオリーをまとめたものです。 1項目を基本的に見開きで構成し、図解を多用した誌面になっており、また適宜「チェックリスト」を設けることで、「見てわかりやすく、調べて使いやすい」内容となっています。

Chapter1「ウェブ配色の基礎」では、色彩および配色の基本を簡潔にまとめます。色彩の基本を知り、色の持つ性質を覚えておけば、より効果的な色の使用ができるでしょう。

Chapter2「配色を整えるテクニック」では、テーマカラーの決め方から、前景色、背景色の決定方法、さらに決めた色をどう配置すればよいか、といった「整え」のテクニックをまとめています。

Chapter3「デザインの目的別テクニック」では、「テキスト」「レイアウト」「画像」といった要素ごとに、その要素の目的を達するためのテクニックやノウハウを解説します。また、配色の調整方法なども説明しています。

Chapter4 「ビジネスゴールごとの目的別テクニック」では、ユーザビリティ、アクセシビリティ、CI、ブランディングといったサイトのビジネスゴールや、ニュースサイト、広告サイト、公共系サイトなどのサイトの目的という視点から、その目的を達するためにはどのように配色を考え、決めていけばよいかを解説していきます。サイトの目的に最適の色づかいをするのに、きっと役立つでしょう。

「色」はウェブサイトにおいて、ビジュアルイメージの方向性や、情報伝達に重要な意味を持ちます。より高いビジネスゴールを実現するために知っておきたい、Webプロフェッショナルのための"黄金則"です。

毎日コミュニケーションズのサイトで本の一部を立ち読みすることが出来ます。購入を検討している方はご参考にどうぞ。

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

このページをはてなブックマークに追加｜このページのトップへ▲

内容

目次

フォルトゥナについて