DTPデザイナー、知識ゼロでWebデザイナーを目指す

Webの知識ゼロのDTPデザイナーがWebデザイナーを目指すブログです。

2日目:Webデザインの本を読む

Chapter3 配色  (90分)

RGBや、明度、彩度、色相など色の基本的な事から
WEBデザイン特有の配色時気をつけることとなど。
リンクの色、色の見え方が違う人への配慮、等。


トーン
明度と彩度を使った色のグループ
トーンを意識する事で効果的な配色を簡単に作れますよという話
>「このwebページはドミナントカラーにしよう!」とか考えている人いるのかね?
実践には使えなさそう・・

 

補色・類似色 配色
・補色を使う事で強い印象を与える
・類似色を使う事で統一感を出す
>これは割と自然にやりますね。

 

12色相環を利用した配色
・一定の法則で規則的に選ばれた色は調和するという原理がある。
>これは使えそう。配色苦手だからいつも本当に悩むんだけど、
法則に当てはめて自分で考えない方が上手く行きそうな気がする。
何かいいサービスで簡単に配色できないかね。

 

色の印象
・色の与えるイメージを使って上手くデザインしましょという話。
暖色寒色、後退色進出色とか。
>美術の授業でやるよね。

 

カラーモード

RGBだと色相を保ちながらの微調整
がむずかしいので、カラーモードはRGBにして「HSB」のカラーピッカーを使用する。

・RGBの場合はディスプレイごとの見え方の差異、
屋外で見たときを考慮する必要がある。

・RBGは16進数という、アルファベットと数字でRGBを置き換えることが出来る。
>はて、いつつかうんや。


利用者の視点に立った配色

・たくさんの人に伝えたい情報は、利用者の視点に立ってデザインする。
例えば、白内障色弱の人を考慮する必要あり。

サイトのコントラストをチェックするツールがあるから、
公的なサイトや、高齢者を対象としたサイトの場合には積極的に使うべし!
WCAG Contrast Checker

 

Webサイトで使う色数は3〜4色が望ましい

Photoshop illustratorでは 色の見え方が異なる人の視覚を擬似的に再現もできるので必要があればしようしてもよい


Webサイトの目的にあった配色・比率

 

・配色のセオリーは大きくわけて2つある
1 メインカラーをひとつ決めて、それを中心に配色をきめる
サイトに合う写真を元に配色を選ぶ

・よく使われる配色
「70:25:5」
ベースカラー70・・・・・背景、白とか
メインカラー25・・・・・コーポレートカラーとか
アクセンカラー5・・・・・注目パーツに使う。激しい色でも割合少ないからなじむ!

Adobe Color CCいいよ
画像からカラーを自動生成してくれるからよいよ。
Dreamweaverにも使える。

 


リンクの色の扱い
さあ、ウェブっぽくなってきたやっっと。

リンクの基本=青
すでに踏んだリンク=紫
検索エンジンはみんなこれやね。
A/Bテストの結果これがリンク踏まれる率がたかかったそうな

リンク=青にすると踏まれやすいと言える。
サイトのトンマナに合わない場合は?・・・・メインカラー=リンクの色にすると
ユーザーが認識しやすい。

 

また、カーソルを合わせたときに「画像が明るくなる」「暗くなる」とかは
すべて統一すべし!バラバラだとユーザーのストレスになるよ。

あと、カーソル合わせたら「画像を暗くする」は実装が複雑らしいよ。


サイト全体の配色はひたすら実例集をみてかくにんすべし!

今日は色についてで比較的流し読みしたかなあ。
プレゼン時説得力持たせるためにもう少し色のこと勉強しなくては。。
今まで感覚でどうにかしていた部分が多かったのだけど
絶対にタイムロスになっているので、明日から紙でれんしゅうしよーっと。