新しい配色本の内容をどうしようか

もう1冊だけがんばってみます

先日、Facebookでもう1冊だけ本を書こうかということを書きました。

次の本は出ないんですかとちょこちょこ聞かれていたのですが、前の2冊で自分の中では完結してしまっていたため、単著に対するのモチベーションが持てなかったのですが、やや前向きになりましたというところまでが、前回のお話(すいません、前回なんてないです)。

幸いなことに、この投稿を拾っていただけましたので、私さえがんばれば本になりそうな気がします。

もちろん9年も前の本なので、サンプルが古くなっていたり、JIS規格は2010年にはWCAG(ウェブコンテンツアクセシビリティガイドライン)2.0のものに変わっていたりするので、この辺りの情報が古いものについては最新のものにします。

とは言え、色の話そのものは変わっておらず、それ以外のいろんな環境が変わったのですが、毎年デザイントレンドなどもやっていることを踏まえて、長く使えるものにまとめられそうな気がしています。

前の本からちょうど10年にあたる2017年8月31日までに出せればいいなぁとは思っていますが、そう上手くいくかはわかりません(もっと早く出せとも言われそうですし)。

ご意見などがありましたら、お待ちしております

あらためて目次を見直してみました。大きな修正が必要なところには印をつけていますが、新しい内容として追加が必要になりそうなものを思いつく限り並べてみました。

他に「こんな時どうするの?」とか「これいらない」などのご希望があれば、可能な限り反映していきたいと思いますので、何か気づいたことなどがありましたら、ぜひお知らせください。

追加が必要と思われる項目(どこにどう入れるかは別として)

• 大写真時代の配色パレット
• 災害などの緊急時の配色
• 余白を使った情報のコントロール
• スマホ(画面が小さい場合)の配色
• アプリの配色
• 持ち運べる端末での外光の考慮

「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 081
• 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(おまけの配色技法)

---