第2部 カラーテーマをつくってみよう

カラーテーマをつくってみよう

イメージを決める

ベースカラーをつくる

アソートカラー(メインカラー)をつくる

アクセントカラーをつくる

文字の色をつくる

リンク色をつくる

完成したカラーテーマ

つくった配色をテストしてみる

まとめ

カラーテーマをつくってみよう

それでは、カラールールに従ってカラーテーマをつくってみます。

カラーテーマをつくってみよう

カラールールは初期設定(Analogues)のままでカラーテーマをつくります。

Analogues(アナロジー)というカラールールは、類似色で配色するルールです。
HSVのH(Hue:色相)の値の差が少ない色で統一感を出せます。

あ、ちなみに配色のバランスは まりっぺブログの闇のデザイナーこと まりっぺ様がお作りになられたスライド 色彩センスのいらない配色講座がとても参考になります。

色彩センスのいらない配色講座

色彩センスのいらない配色講座

はてブ数

http://www.slideshare.net/marippe/ss-9003317

色彩センスのいらない配色講座 色は理論的に説明できる

Kulerは5色まで選べるのでウェブらしくベースカラー + メインカラー + アクセントカラー + 文字色 +リンク色の5色をつくりましょう。

イメージを決める

どんな色にするかイメージが大事。今回はクライアントのサイトでもなく自由に作れるのでイメージも適当に決めちゃいましょう。
せっかくなので季節的なものを作ってみましょうか。春といえば。。。サクラですね。彩度が低く、赤みがかった白や紫のイメージ。

ベースカラーをつくる

ベースカラーはほとんどの領域を占める色です。サクラということで彩度が低く明度の高い赤(桜色)を選びます。ベースカラーの赤の彩度(HSVのS)を10くらいまで下げればまぁだいたいそんな感じ。

桜色
#FFE5E5

アソートカラー(メインカラー)をつくる

暖かいイメージを出したいので暖色寄りの色を。一番左の色を選びましょう。
カラールールがあるので色の値を変える必要はありませんね。

#FFE5E5 #E8CAC5

アクセントカラーをつくる

アクセントとなる色をつくります。今回は類似色相配色なので色相の離れた反対色ではなく、類似色でコントラストを変えてアクセントとします。
右から1つ目か2つ目の色の彩度を上げた色がアクセントカラーです。HSVのSを72まで上げます。
アクセントカラーをつくる

#FFE5E5 #E8CAC5 #E84195

文字の色をつくる

文字の色はベースカラーの明度を下げてつくります。ベースカラーの左隣の色の明度(HSVのV)をぐいーんっと20まで下げます。

明度を変えて文字色をつくる

黒も読みやすいですが、下の方が文字が馴染んでませんか?

文字色の比較(上:#000000 / 下:#332E2B)

あいうえおかきくけこ
あいうえおかきくけこ
あいうえおかきくけこ
あいうえおかきくけこ

ちなみにその背景色と文字色で読みやすいかどうかの視認性を確認するのはこのツールがおすすめです。
Contrast-A
Contrast-Aで視認性の確認

リンク色をつくる

リンク色はアクセントカラーでもいいのですが、やっぱりウェブデザインのセオリーだと青っぽい色の方がリンクとして認識されやすいです。
類似色相だと青色が選べないので、ここでだけカラールールを【Custom】に変更します。 カラールールの変更

そして、一番右のカラーを変更します。 他の色と明度とトーンを合わせるため、まずアクセントカラーに合わせます。その後、色相(HSVのH値)を青色に変更します。

アクセントカラーに合わせて、色相を変える

完成したカラーテーマ

こんな感じ。
つくったカラーテーマ

ちなみにドラッグで色の順番を入れ替えることができます。

ドラッグで色の配置換え

つくった配色をテストしてみる

実際にウェブサイトで配色をテストします。 WEB DESIGN COLOR TESTERで試すとこんな感じ。 配色をウェブサイトでテストする

WEB DESIGN COLOR TESTER を使った配色のテストに関してはこちらの記事もご覧ください。
カラーコードを入力するだけでウェブデザインの配色テスト。パズル感覚で配色を試せるサービスつくりました。

まとめ

こんな感じでAdobe Kulerで配色してaseファイルで保存。そしてフォトショやイラレで読み込む。
Adobe IDを登録すればKuler上でカラーテーマを保存することができて大変便利なツールです。
長い間、目新しい更新などがなくこれからがちょっと心配なサービスですが、ぜひ使ってみてください。

またカラールールについての記事も書こうと思います。