どーも！学長です！
今日の授業は・・・
【WEBデザインの配色を学ぶ】配色に迷ったらこのサイト！
WEBデザインをやっていく中で、配色は非常に重要です。
過去に配色の授業をしましたが、やはりすぐには習得できません。
カラーコーディネーターや色彩検定を受け、習得するのが一番良いかと思いますが、なかなかそこまでスキルを身に付けるのも困難でしょう！
もちろんWEBデザイナーを目指している人は習得しないといけないスキルですが、趣味でブログを作っている程度であれば学ぼうなんて思いませんよね？
そんな方の人のために私からオススメのツールを紹介します。
このツールを使えば、配色を極めたのも同然です笑
それでは授業を始めます。
配色が面白くなるサイト！Adobe Color CC
配色が苦手な人でも簡単に配色できるツール、それは・・・
Adobe Colorを簡単に説明すると配色パターン作成サービスですね。
このツールを使えば簡単に配色できます。
こんな優良なツールを無料で使えるって事が嬉しいですよね。
ツールを起動しよう！
ツールを起動するとこのような画面になります。
中央にあるカラーホイール（色相と、彩度）、明度スライダーで色を選択できます。
カラーホイールは角度で色相が変わっていきます。
円の中心ほど彩度が低く外側ほど高くなっていきます。
下のバーが明度スライダーになっています。
明度スライダーは左にいくほど暗く、右に行くほど明るくなっていきます。
色彩と明度の意味がわからなかったらコチラを先に読んでください。
カラーを変えてみよう！
上の画像を見てください。
カラーホイールに5本のセレクターが表示されています。
太い白い線で囲まれているのがベースカラーで、他のセレクターがサブカラーです。
ベースカラーとは？
ベースカラーは全体的なイメージの色です。
もっとも多くの領域を占めるカラーになっています。
ベースカラーの色を変更すると、それに合わせて他の色も変化します。
WEBデザインではベースカラーが背景になることがほとんどです。
すなわち背景に使うので、彩度が高すぎる色を使うと目がチカチカして、
大変見難いサイトになってしまいます。
サブカラーとは？
サブカラーは彩度と明度は個別に変えられますが、
色相を変えるとサブカラーも同時に変化します。
カラーテーマを作ろう！
それではカラールールに従ってカラーテーマを作っていきましょう！
今回は「類似色」で作ります。
類似色は色相の値の差が少ない色なので統一感が出ます！
Adobe Colorは5色まで選べるので、
ベースカラー・メインカラー・アクセントカラー・文字カラー・リンクカラーの5色を作りましょう。
イメージを決めよう！
まずはどんな色にするか、イメージしましょう。
WEBデザイナーであれば、クライアントさんからイメージの指定があります。
アフィリエイターであれば、そのサイトのイメージがあると思います。
今回は季節の色「冬」でやっていきたいと思います。
ベースカラーを作ろう！
ベースカラーは、ほとんどの面積を占める色です。
彩度が低く明度の高い色を選びます。
上の画像だと一番左ですね。
メインカラーを作ろう！
寒いイメージを出したいので、もっとも寒色系よりの色を選びましょう。
左から2番目の画像を選びましょう。
アクセントカラーを作ろう！
アクセントとなる色を作っていきましょう！
今回は類似色で作成をしているので、類似色でコントラストを加えて色を作ります。
右から3番目で作ります。
このままではアクセントとしては物足りないので、彩度を上げていきます。
文字カラーを作ろう！
文字の色はベースカラーを下げて作ります。
右から2番目の画像の明度を下げてください。
黒にしてもいいのですが、私の場合少し青みがかった黒にしたいので、左端までにはしません。
リンクカラーを作ろう！
リンクカラーはアクセントカラーでも良いですが、
WEBデザインのセオリーとしてはやはり「青」が良いでしょう。
ここだけカラールールを「カスタム」に設定しましょう。
そして、一番右のカラーで彩度と明度の設定で青にします。
作った配色でテストしてみよう！
カラーテーマが完成しました。
冬っぽいイメージになりました。
しかし、いざサイトを作ってみたらイメージと合わない可能性がでてきます。
その為に、便利なサイトを紹介します！
つくった配色をテストしてみよう！
作ったカラールールWEB DESIGN COLOR TESTERで試すことができます。
サイトに行ったら、上の部分に「カラー設定」が表示されますので、
先ほどの作ったカラールールの「HEX」の番号を入れます。
するとこうなります。
冬の配色のサイト完成しました。
あくまでもサンプルですが、大体の雰囲気はここで掴めるかと思います。
まとめ
このような感じで簡単に配色をしてくれるAdobe Color。
これから配色の勉強したい人、配色が苦手な人はぜひこのサイトを活用してください。
このサイトを何回も使っていけば、
感覚的に配色が上手になっていきます！
ぜひ活用してみてくださいね＾＾
今日の授業はここまで！
それではまたお会いしましょう♪
