WEBデザイン

【WEBデザインの配色を学ぶ】配色に迷ったらAdobe Color CCを使おう!

どーも!学長です!

今日の授業は・・・

 

 

【WEBデザインの配色を学ぶ】

配色に迷ったらこのサイト!

 

 

WEBデザインをやっていく中で、配色は非常に重要です。

過去に配色の授業をしましたが、やはりすぐには習得できません。

 

 

カラーコーディネーターや色彩検定を受け、習得するのが一番良いかと思いますが、

アフィリエイターでサイトをデザインしたい場合、なかなかそこまで手を出すのも困難でしょう!

 

79e5bc4a03f976ae3d2b97b1391f2801_s
もちろん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

これから配色の勉強したい人、配色が苦手な人はぜひこのサイトを活用してください。

また使い方が不明な場合は、学長まで連絡ください。

 

今日の授業はここまでです。

音声動画は下記から視聴できます。



お名前 (必須)

メールアドレス (必須)

ピックアップ記事

  1. 学園長から挨拶

関連記事

  1. WEBデザイン

    ヘッダー画像の作り方を学ぶ!(個人用ブログ編)

    どーも!学長です!今日はヘッダー制作の授業をします。&…

  2. WEBデザイン

    【ご自由にどうぞ】404エラー ページを面白くしてみた!

    どーも!学長です!今日は404エラーページについて解説…

  3. WEBデザイン

    【WEBデザインを独学で学ぶ】フォントの意味を学ぶ

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

  4. WEBデザイン

    【WEBデザインを独学で学ぶ】3段組レイアウト型とは?

    どーも、学長です。今日の授業は・・・…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

ラジオはじめました!

クライアント様サイト

  1. GIMPの使い方

    GIMP

    【GIMPの使い方】ツール説明その3
  2. GIMP

    【GIMPの使い方】レイヤーについて
  3. WORDPRESS

    超オススメサーバー!Xサーバーの利用方法!
  4. RADIO

    【RGBラジオ第14回】ビートボックス(ボイパ)に挑戦!ヒカキンに学ぶ初心者向け…
  5. 制作実績

    裏YOUTUBER中神様から依頼をいただきました!
PAGE TOP