伝えたいイメージが伝わるための配色ポイントを学ぶ！

配色の基礎とは何かを学んだ...

配色において重要と思われることは、「統一と変化」といわれているそうです。

統一感のある配色をし、そのうえで動きのある色を追加していくという意味です。

その統一感を作るための配色は『色の3属性』が基本となります。

色の3属性：

色相とは色味、明度は色の持つ明るさ、彩度は鮮やかさを表しています。

デザインするうえで、2色以上組み合わせるときは、

まず1色を選んで、その1色と色の3属性のうち、

ひとつかふたつ似ている色を選べば配色は調和しやすく、

統一感も生まれるということでした。

例えば、「色相が似た色」「明度と彩度が似た色」などを

Webカラーチャートを使ってセレクトすれば、意外と間違わずに済みますね。

カラーガイド、配色辞典のような本を1冊買っておくと便利ですよ。

見やすい色と見にくい色を考える

背景にいろいろデザインが施されているサイトもありますよね。

模様などが見えなくても、書いてある文字や画像による情報が

読みにくいとなると、それはつまり...

サイトそのものの価値も下がってしまうということです。

情報をスムーズに伝えなければならないという点からも、

見やすさと読みやすさはとても大事な問題となってきますね。

背景と画像やデザインしたイラストなどの見やすさを「視認性」と呼び、

背景色と明度差を上げる必要があります。

少ない色で視認性を上げているのが『交通標識』で、走っている車の中からでも、

形と内容が認識できるように作られています。

Webサイトでも、少ないカラーで視認性を上げることを意識して、

きちんと見せるように作っていかなければ意味がないんですね。

そして、文字に関する認識のしやすさのことを「可読性」と呼んでいます。

いくら視認性が高いといっても、白と赤、黒と黄色などの組み合わせは、

長い文章を読むには目が疲れてしまいます。

やはり、白地に黒の文字が文章には適しているんですね。

色の配置と面積について

全体の印象を左右する色をベースカラー(70％)

それを補う色をサブカラー(25％)

アクセントカラー(5％)

を目安にすると配色がしやすく、イメージコントロールも楽になります。

ベースカラーが高彩度色の場合は、画面全体で使うと配色がうるさい感じに

なるので、彩度を下げて使うか、面積を減らして使うのがいいようです。

つまり、ベースカラーの面積を減らした分、サブカラーもアクセントカラーも

減らせば、全体の配色バランスは保たれて見えるのです。これがコツですね。

ちょっとしたことのようですが、

クリックされるようにサイトを作るというのは、

案外こんなところにもヒントがあるように思えますから...

今日出来ることは明日に延ばさない！

昨日とは違う今日を存分に活かし、

今出来ることは自分にとって満足できるものか、

常に自らに問いかけながら、

一歩先を目指して進んでいきたいな！

夢の途中であきらめては、勿体ない！

地に足を付けて今年こそ、頑張りましょう！！