どーも!学長です!
今日の授業は・・・

 

【WEBデザインの配色を学ぶ】
配色に迷ったらこのサイト!

 

WEBデザインをやっていく中で、配色は非常に重要です。
過去に配色の授業をしましたが、やはりすぐには習得できません。

 

カラーコーディネーターや色彩検定を受け、習得するのが一番良いかと思いますが、
アフィリエイターでサイトをデザインしたい場合、なかなかそこまで手を出すのも困難でしょう!

もちろんWEBデザイナーを目指している人は、習得しなくても良いですが、
アフィリエイターを主にやっている人はそこまで習得する必要は無いかと思います。

 

しかし、見難いサイトやブログでは訪問者が中々来ない。
そんなアフィリエイターの人のために私からオススメのツールを紹介します。
このツールを使えば、配色を極めたのも同然ですw

 

それでは授業を始めます。

 

配色が面白くなるサイト!Adobe Color CC

配色が苦手な人でも簡単に配色できるツール、それは・・・

Adobe Color CC

 

52909.en.icon-color.256

 

Adobe Colorを簡単に説明すると配色パターン作成サービスですね。
このツールを使えば簡単に配色できます。
こんな優良なツールを無料で使えるって事が嬉しいですよね。

 

 

ツールを起動しよう!

ツールを起動するとこのような画面になります。

スクリーンショット 2014-11-29 23.10.07

 

 

中央にあるカラーホイール(色相と、彩度)、明度スライダーで色を選択できます。
カラーホイールは角度で色相が変わっていきます。
円の中心ほど彩度が低く外側ほど高くなっていきます。

色相

 

 

下のバーが明度スライダーになっています。
明度スライダーは左にいくほど暗く、右に行くほど明るくなっていきます。

スクリーンショット 2014-11-29 23.10.07のコピー

色彩と明度の意味がわからなかったらコチラを先に読んでください。

 

 

カラーを変えてみよう!

スクリーンショット 2014-11-29 23.33.37

上の画像を見てください。
カラーホイールに5本のセレクターが表示されています。
太い白い線で囲まれているのがベースカラーで、他のセレクターがサブカラーです。

 

 

ベースカラーとは?

ベースカラーは全体的なイメージの色です。
もっとも多くの領域を占めるカラーになっています。
ベースカラーの色を変更すると、それに合わせて他の色も変化します。

 

WEBデザインではベースカラーが背景になることがほとんどです。
すなわち背景に使うので、彩度が高すぎる色を使うと目がチカチカして、
大変見難いサイトになってしまいます。

 

サブカラーとは?

サブカラーは彩度と明度は個別に変えられますが、
色相を変えるとサブカラーも同時に変化します。

 

カラーテーマを作ろう!

それではカラールールに従ってカラーテーマを作っていきましょう!
今回は「類似色」で作ります。
類似色は色相の値の差が少ない色なので統一感が出ます!

 

Adobe Colorは5色まで選べるので、
ベースカラー・メインカラー・アクセントカラー・文字カラー・リンクカラーの5色を作りましょう。

 

イメージを決めよう!

まずはどんな色にするか、イメージしましょう。
WEBデザイナーであれば、クライアントさんからイメージの指定があります。
アフィリエイターであれば、そのサイトのイメージがあると思います。

 

今回は季節の色「冬」でやっていきたいと思います。

スクリーンショット 2014-11-30 12.36.52

 

ベースカラーを作ろう!

ベースカラーは、ほとんどの面積を占める色です。
彩度が低く明度の高い色を選びます。
上の画像だと一番左ですね。

01

 

メインカラーを作ろう!

寒いイメージを出したいので、もっとも寒色系よりの色を選びましょう。
左から2番目の画像を選びましょう。

02

 

アクセントカラーを作ろう!

アクセントとなる色を作っていきましょう!
今回は類似色で作成をしているので、類似色でコントラストを加えて色を作ります。
右から3番目で作ります。

 

このままではアクセントとしては物足りないので、彩度を上げていきます。

名称未設定-1

 

文字カラーを作ろう!

文字の色はベースカラーを下げて作ります。
右から2番目の画像の明度を下げてください。
黒にしてもいいのですが、私の場合少し青みがかった黒にしたいので、左端までにはしません。

文字

 

リンクカラーを作ろう!

リンクカラーはアクセントカラーでも良いですが、
WEBデザインのセオリーとしてはやはり「青」が良いでしょう。

 

ここだけカラールールを「カスタム」に設定しましょう。
そして、一番右のカラーで彩度と明度の設定で青にします。

リンク

 

作った配色でテストしてみよう!

カラーテーマが完成しました。

スクリーンショット 2014-11-30 13.12.25

 

冬っぽいイメージになりました。
しかし、いざサイトを作ってみたらイメージと合わない可能性がでてきます。
その為に、便利なサイトを紹介します!

 

 つくった配色をテストしてみよう!

作ったカラールールWEB DESIGN COLOR TESTERで試すことができます。

スクリーンショット 2014-11-30 16.30.47

 

サイトに行ったら、上の部分に「カラー設定」が表示されますので、
先ほどの作ったカラールールの「HEX」の番号を入れます。

スクリーンショット 2014-11-30 16.56.45

 

 

するとこうなります。

sample

冬の配色のサイト完成しました。
あくまでもサンプルですが、大体の雰囲気はここで掴めるかと思います。

 

 

まとめ

このような感じで簡単に配色をしてくれるAdobe Color
これから配色の勉強したい人、配色が苦手な人はぜひこのサイトを活用してください。

 

このサイトを何回も使っていけば、
感覚的に配色が上手になっていきます!
ぜひ活用してみてくださいね^^

 

今日の授業はここまで!
それではまたお会いしましょう♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

1979年生まれ群馬県在住のグラフィックデザイナー兼ウェブデザイナー。 2014年からデザイン情報発信サイト『デザガク』を開設。 主にクチコミとウェブからの集客で受注し、一切営業しないスタイルを貫いている。 制作実績では3,000万円以上稼ぐアフィリエイターのLP、数千万の売り上げを達成した教材LP、さらに、メジャー格闘技団体「RIZIN」のスポンサーポスターや、ブランディングデザインにおいても好評を得ている。 公益社団法人日本グラフィックデザイナー協会(JAGDA)正会員。