カラフルでもまとまりのある配色、WebデザインにするためのTips
Webデザインの配色、特にカラフルなWebデザインの配色にお役立ちな Tipsです。 カラフルなデザインのコツは色調（トーン）を合わせる事。 どんな風に配色していくかのサンプルも付けてみました。
過去記事：同色系でまとまりのある配色、WebデザインにするためのTipsに続いて、色々なカラーを使ってもまとまりのある配色にするためのTipsをご紹介します。
実際にWebサイトをデザインする時は、たくさんの色相の違う色を使います。でも配色してみると、何だかまとまりがなくてしっくりこないなーということも…。配色を直感だけでできればWebデザイナーとしては一人前なんでしょうけど、まだまだそんなセンスが身に付いてない私はこんな風にして配色を選定したりしています。
無作為に選んだ配色とルールに従って選んだ配色
あなたはどうやってWebサイトに使う色、配色を決めてますか？色に対してのセンスのいい人は直感でぱぱっと決めてもまとまりのあるカラースキームをつくる事ができます。
でも残念ながら私にはそんなセンスがないので、一定のルールに従ってまとまりのある配色を作成しています。それでは試しに順を追って配色をしてみましょう。
とりあえず秋なので、紅葉をイメージした配色のWebサイトを作ってみたいと思います。秋、紅葉から連想される色をカラーピッカーから適当に6色ピックアップしてみました。
私的に秋っぽいなーと思う色をカラフルになるよう選んでみたのがこんな感じ。紫はなんとなく茄子が浮かんだので w これでちょっとWebサイトを作ってみるとこんな感じになりました。
サンプル
ちょっとというか全然まとまり感に欠けて、どこか素人くさい…orz そこでちょいちょいっとある方法でカラーパレットを見直して次のように変更しました。
新しいカラーパレットで配色し直すと同じWebサイトがこんな感じになります。
サンプル
さっきより全然落ち着きも、まとまりもあって美しくなりました w（30分程で作ったので突っ込まないでくださいね。）どうやったらこんな風にまとまりのある配色ができるのかというと、それは色調（トーン）に秘密があります。
色調（トーン）とは
色調というのは、色の彩度と明度の組み合わせでできる色の調子のこと。（彩度、明度、色相の色の三属性については、過去記事：同色系でまとまりのある配色、WebデザインにするためのTipsに詳しく書いてあるので参考にしてください。）つまり彩度や明度は似ているけれど色相が違う色同士の組み合わせが色調です。
いろんな色調がありますが、代表的な色調には名前もついてたりしますね。代表的な色調を表で表すとこんな感じです。
無彩色、純色、中間色というのはよく聞くので知っている人も多いと思いますが、トーンを分類する言葉で明清色、暗清色なんていう分類の仕方もあります。
純色は各色相の中で最も高彩度の色。明清色は純色に白を混ぜた色、暗清色は純色に黒を混ぜた色。中間色は名前の通りその中間の色です。
ヴィヴィットトーンとかペールトーンとか、グレイッシュトーンとか聞いたことがあると思います。同じトーンの色は、色相が変っても調和してまとまりやすいので配色をする時の指針としてとっても役立ちます。前述のサンプルサイトは、グレイッシュトーンで各色を調整して配色したものです。
同じトーンの色を作るには
色調（トーン）を揃えるとまとまり感のある配色ができるのは分かりましたが、実際にトーンを揃えるにはどうしたらいいでしょう？色々なやり方があると思いますが、色調をもっと理解するために Photoshop のカラーピッカーを使って色調を揃えてみます。
Photoshopのカラーピッカーは、スポイトで色を選択するだけでなく、色相、彩度、明度を自由に調整できる機能がついています。
- H : 色相
- S : 彩度
- B : 明度
色調を揃えるのですから、彩度、明度はそのままで色相（H）の値だけ変更してみます。色相の値は角度なので0° ~ 360° までの値を入れればいいのですが、↑↓キーで1°ずつ、shiftキー + ↑↓キーで10°ずつ変更できるので、その方が便利です。
または隣の縦長のスライダーを調節してもOKです。
丁度いい色が見つからなければ、少しずづ彩度や明度を調整しながらぴったりの色を探しますが、大きく変更するとトーンが合わなくなるので注意が必要です。
彩度の高い色の時の注意事項
彩度の高い色を使う時は隣同士にどの色を持ってくるかを注意する必要があります。例えば下のナビゲーションには5色の彩度の高い色を使っています。
同じトーンで合わせてあるのですが、ちょっとチグハグというか、派手すぎな感じがします。そこで色の順番を変えてみます。
順番を変えただけですが、さっきよりすっきりしてまとまっているように見えます。高彩度の色を並べる時は、色相環の順番で並べるとスッキリして見えるようになる場合があります。
もちろんわざと前者のように派手に並べるのもありですが、色相環の順番で並べるのを覚えておくとちょっといいかも。（色相環についても、過去記事：同色系でまとまりのある配色、WebデザインにするためのTipsを参考にしてください。）
こんな風にただ派手なだけの画像（上）も、キチンと整頓（下）してあげればまとまって見えますね。レインボーカラーの順番です。やっぱり天然、自然の配色が一番しっくりくるんですねー。
参考にしたいカラフルなWebサイト
カラフルなデザインに挑戦する時に参考にしたいWebサイトです。
Webサイトの雰囲気と、色調、トーンを観察しながら見ると勉強になりますね。
まだまだたくさん見たい人は以下のリンクをどうぞ：
お役に立てれば嬉しいです！