Webデザイン応用 第3回「配色計画の基本」
(1)配色計画とは？
表現における色彩の効果は極めて重要である。それだけに配色はしっかりとした計画に基づき、進めたい。配色の手順は、イメージの組み立てから、色をセレクトする段階までが特に重要だ。デザインは単なる思いつきや好みで決まることはなく、そこに裏付けが必要となるためである。
1-1.配色の手順
[STEP.1]イメージを決める
Webサイトを作成する際に基本的にしておかなければならいないのは、サイトを通してどのようなメッセージを発信するのかということになる。これは掲載するコンテンツに関わってくるので、内容が明確に決まっていれば問題はない。
次にどのようなイメージに統一するか、コンセプトを立てなければならない。このイメージコンセプトは、Webサイト全体に影響するものだ。これによって配色、レイアウト、ビジュアルを制作することになる。イメージコンセプトという言葉が分かりづらいということであれば、“サイトの雰囲気”と言い換えても良い。
[STEP.2]イメージを言葉で表現する
自分が作りたいWebサイトのイメージは、最初は漠然としている。配色では具体的なイメージでなくてもいいのだが、大切なのは「イメージがある」ということだ。このイメージがないと、デザインの途中でつまずくことが多い。
次にそのイメージを単純な言葉で表現するとどうかを考える。例えば、「ナチュラルな感じ」とか「シックな感じ」いった具合だ。
[STEP.3]配色方法
色にはその背景にイメージがあり、これはこれまでの社会での経験に基づくものだ。例えば黄色と黒色は注意といった具合だ。
このように色にはイメージが付いており、これを一般的な平均値としてとったものがカラーチャートである。
【参考サイト】
技術評論社Website Design「Webセーフカラー配色辞典」
(2)色の組み合わせ
カラーは「色相、彩度、明度」によって表現される。配色はこの組み合わせだが、その組み合わせパターンを知っておくと、デザインの幅が広がる。
2-1.色相の同系(明度・彩度の変化)
異なるトーンでも色相が同じ色は、協調性が高いので配色しやすい。特に背景色と文字はこの色の関係を利用すると自然に収まる。
2-2.トーンの類似(色相の変化)
色相が異なる色でも、トーンをそろえてカラーバリエーションを考えると、まとまりやすい。
2-3.色相の類似(色相・明度・彩度の変化)
色相環の中で隣り合った関係にある色は、親和性がある。ただし、背景とタイトルの関係では可読性を妨げる。
2-4.色相の対比(色相の変化)
いわゆる補色の関係。色相環で反対に位置する色を合わせると、インパクトの強い表現になる。ただし、うるさい印象になるので使いどころには注意が必要になる。
補色の組み合わせはRBGの場合、色同士が隣接するエリアでハレーション(ギラついた感じ)を発生させることが多いので、もし使うのであれば白などのセパレータを挟むのも手。
2-5.有彩色と無彩色
無彩色はいかなる有彩色とも調和しやすい。失敗しない配色。
ただし無彩色の面積が増えてくると、画面全体がくすんだ感じになりやすいので使用量には注意が必要。
コメント＆トラックバック