『ウェブ配色 決める! チカラ - 問題を解決する色彩とコミュニケーション』を読んで
Webページ作成をWeb制作会社に依頼した時、様々な立場、考えの人が関わりWebページが作られます。 そこで発生しやすい問題はコミュニケーション不足によるイメージのすれ違い。 特に色は、好みに左右されやすくトラブルも頻繁に起こるそうです。この本は、そんな色をめぐるトラブルの予防策、解決策がまとめられています。今回は、本の中で勉強になったと感じたことを中心に感想を書いていこうと思います。
〜本文抜粋〜
“知識とスムーズなコミュニケーションによって、クライアントと制作会社あるいは社内のディレクターやデザイナーとのイメージのズレをなくし、不要な作業や手戻りを防ぐことを目標にしました。”
今回読んだ本：
『ウェブ配色 決める! チカラ - 問題を解決する色彩とコミュニケーショ』
坂本邦夫 (著)
本の内容は大きく3部（知識編 ・実践編 ・応用編）に別れていました。
感想も各Chapterに分けて書いていこうと思います。 ただし、応用編は知識編と実践編を踏まえたうえでの、具体的な場面を想定した対処法が記載されているため、今回のブログでは割愛します。
知識編
ここでは私が新たに色について学んだことや特に覚えておきたいことを記述していきます。
色の三属性
色は「色相」「明度」「彩度」の３要素で表される。
- 色相：赤、青、黄などの色みを表す。
- 明度：色の明るさを表す。明るいほど明度が高くなる。
- 彩度：色の鮮やかさを表す。鮮やかなほど彩度が高くなる。
トーン
トーンを使えば具体的な色のイメージを伝えることができる。
トーンとは、明度と彩度が近い色をグループ化したもの。
同じトーンで色相だけ変えた色を組み合わせて、「やわらかい」「つよい」などの色のイメージが定義されている。打ち合わせ時にトーン表などを使用することで色の話がしやすくなる。
トーンの定義例
- PCCS（Practical Color Co-ordinate System：日本色研配色体系）
- CCIC（The Chamber of Commerce & Industry Color Coordination Chart：商工会議所カラーコーディネーションチャート）
- JIS系統色名（Japanese Industrial Standards：日本工業規格）
配色バランス
色の組み合わせの比率は、
ベースカラー 70% ：アクセントカラー 5% ：サブカラー 25%
でバランスがいいとされている。
この３色を決める前に「キーカラー」を決めるべき。
キーカラーは、配色の鍵を握る色となる。だが、必ずもっとも多く使わなければいけない色というわけではなく、ワンポイントに使用して、キーカラーを活かすために他の色をどう組みあ合わせるのかを考える場合もある。
配色テクニック
強調したい時は「補色」をチョイス 補色 : 色相環で正反対に位置する色。
統一感を出したいなら「トーンオントーン配色」 トーンオントーン配色 : 同系色で明るい色から暗い色まで明度差を大きく取った配色。
配色に不慣れな場合は、トーンオントーン配色に一部アクセントを加える方法をとると色の安定がしやすい。自然の陰影を取り入れる「ナチュラルハーモニー」 ナチュラルハーモニー : 例えば、自然に生えている木の葉っぱは、日光の光により陰影ができることで黄緑から深緑まで様々な色に見える。
こうした自然のなかにある色の見え方。 見慣れている景色や風景を配色に活かすことで、自然な見え方を作れる。規則的に色を選ぶと調和しやすい「イッテンの色相分割」 : スイスの芸術家で教育者のヨハネス・イッテンが提唱。
色相環を規則的に分割して配色することで色が調和する。
参考にしたURL：ヨハネス・イッテンの色相分割法とは？「ジャッドの4つの色彩調和」に当てはめて考えてみよう シャッドの4つの色彩調和 : アメリカの色彩学者 D.B.ジャッドが様々な色彩理論を４つの原理に分類したもの。
４つの原理 :「秩序の原理」「馴染みの原理」「類似の原理」「非不明瞭性の原理」
参考にしたURL：「色相環」とか「トーン」ってどう使うの？配色のコツは「ジャッドの色彩調和論」
配色に悩んだり、迷ったりしたら、4つの原理のいずれか、あるいは複数に合致するかどうか確認することで大きく配色を外すことを防ぐことができる。
配色のコツ
- 最初に統一感のある配色をする。
- アクセント（1～2箇所）を入れて変化を持たせる。
- モニタから離れて目を細めて眺めて、全体の配色をまとめる。
- 個々のパーツを作り込んで、また 3. に戻ってみる。
- 同色系統でまとめる部分とメリハリをつける部分のバランスを考える。
実践編
ここでは、クライアントとWeb制作者側とのコミュニケーションをどう行えばやりとりがスムーズに進むのかが中心に書かれていました。 なので、私が特に役に立ちそうだ、勉強になったと感じた箇所をピックアップしていきます。
色彩でできることを整理し、クライアントにも伝える
細部の色などはWebサイトの本質にあまり関係ない、とあらかじめクライアントに伝えておくと無用な修正を減らせるようになる。
色の感じ方の個人差を説明する
色が人に与えるイメージは7割程度は共通していると言われるが、逆に3割は人によって異なる。色に対する感覚を共有するのは難しい前提で対策を立てたい。
色を具体的な言葉で表現する
赤を使うというだけでは具体的なイメージには繋がらない。色の名前だけではなく、何を表したい赤なのかを表現してもらう。
目指すイメージを共有する
クライアントから参考にしたいWebページを見せれられただけでは、クライアントがその参考Webページに対してどんなイメージを持っているのか分からない。
もし制作者側と依頼者側にイメージのズレがあった場合、制作が進めば進むほどその差も大きくなっていく。
対策：
何かの素材を提供された場合には、その素材に対してクライアントがどのようなイメージを持っていているかに加え、使いたい色や気に入っている色を聞いておくと作業が進めやすい。参考資料はあくまで参考である。 さらに、使いたい色だけでなく、使わない色や、使えない色についても話すことで色の絞り込みがしやすくなる。
デザインカンプ前に色の承認を得るステップを作る
色の承認を得るための簡単な書類を作成すれば、その後に色の変更がされにくくなり、工数削減にもつながる。 色の選定には、「競合他社のサイトに多い色をさけた」「ロゴの色がイメージと会うのでそのまま使用」など、根拠も必要。
※デザインカンプトは： techacademy 作成方法も紹介！デザインカンプとは【初心者向け】
感想
私に色やデザインに関する知識が圧倒的に足りなかったため、今回は「知識」に関することを中心にまとめました。 この本は実業務で必ずぶち当たるであろう壁に対する解決法や対策法が書かれていたため、指南書のように使える本なのではないかと思います。 この本を読んで、デザインは設計書だ！と言われる意味が理解できました。 Webデザイナーはシステムエンジニアに近い仕事ではないかなと、イメージが変わりました。
