今回のライブ授業は？
7月18日に、ライブ授業「カラーイメージ基本講座」を開催いたしました！
今回のライブ授業は、Web制作をしていく上でセンスを問われる「色」にまつわる講座です。色の基本知識から配色を手助けするツールについてなど、配色のセンスを磨くための土台作りをSTUDIO山口前田トレーナーに教えて頂きました！
目を引くデザインセンスを磨きたい方必見です！
ちょっと難しい色の基礎！？
まず色というものは、「色の三属性」と呼ばれる色相、明度、彩度の三つが組み合わさってできています。
色相は赤・黄・青といったような色を特徴付ける色味のこと、明度は明るさの度合い、彩度は色味の強さや鮮やかさの度合いのことです。
また、色は「光の三原色」と呼ばれる赤、緑、青を混合して構成されたRGB、「色料の三原色」と呼ばれるシアン、マゼンタ、イエローの三つに黒を足したCMYKに分類されます。
▪️ RGB・・・テレビやパソコンのディスプレイといった画面上で使う発色方式
▪️ CMYK・・・紙などの印刷物に使う発色方式
よく作業をしていて画面で見た色が印刷して見たらなんか違う…ということはよくありますよね！？そんな時はこのRGB、CMYKをうまくコントロールすることで解決ができるんだそうです。
また、一般に、暖色は彩度や明度の組み合わせで力強さや優しさを印象付けることができ、寒色は清潔感やクールさを印象付けることができます。また、長波長の暖色系は近くに見え、短波長の寒色系は遠くにあるように感じるという性質があります。こうした色の特性を理解してうまく組み合わせ見る人の心理をコントロールしていくことが、腕の見せ所となりそうです。
ちょっと難しいですが、色をうまく操るためにはこれらの基礎知識が大事なんですね。
Webデザインの配色バランスとは？
ここからはいよいよWebデザインの配色についてです！
先ほどの基礎知識をもとに、Webデザインを制作する際はどのような配色にすると良いのでしょうか？
配色比率には「70:25:5の法則」というものがあります。
これはベースカラーと呼ばれる余白や背景の色、メインカラーと呼ばれるサイトの印象を決定づける主役色、アクセントカラーと呼ばれる引き締め色の割合です。
いろいろなサイトを見てみても、確かに多くのサイトでこの法則の配色が行われています。
見やすいサイトや心地よいバランスを作るには、この法則にある程度則る必要があります。
でたらめに多くの色を使うのではなく、全体のバランスを見ながら調整していくといいですね。
配色に困ったら？
ここまで、配色についての様々なルールやバランスについて知ることができました。それでも配色は正解が１つではなく様々な組み合わせがあり、やっぱり迷ってしまいます。
そんな時は、配色を手助けしてくれるいろいろなツールがあるので、それらをぜひ活用してみましょう。
その一部をご紹介します。
- Adobe Color CC
Adobe Color CCは類似色や補色など、カラールールを決めるだけで様々な組み合わせのカラーパレットを作成してくれます。キーワードを入力すればそのキーワードに沿った組み合わせも検索することができます。
- Adobe Capture
こちらはスマートフォンアプリです。写真や画像をアップロードするだけで、それらの配色を知ることができ、また画像からブラシやパターンを作成することもできます。その他にもいろいろな機能があり、触るだけでも楽しそうです。
デザイン制作をする中で、「イメージ通りにうまく表現できない…」「全体的にまとまりがない…」という課題にぶつかったことがある人は多いのではないでしょうか？見ているだけでも楽しめる配色ツールでぜひ色を楽しんでみてください。
まとめ
今回のライブ授業では、「色」にまつわるテクニックをたくさん紹介して頂きました。
前田トレーナー曰く、困ったら得意な配色を使うというのも一つの手ではありますが、この手法を多様してしまうと「前田らしいね」と言われてしまうこともあるそう。
デザインの引き出しを増やすためにも、今回ご紹介したツールやカラーの法則を利用してデザインをぜひ楽しんでくださいね！