ブログ
勉強して学びを得たときの疑問や改善点などを日々記録しています。
是非ご参考までに覗いてみてください。
-
kimi -
前職はＳＥ。今は講師のお仕事をしています！分かりやすい授業を目指して日々勉強中です。クールに見えるといわれますがしゃべるとボロがでるので、普段は黙ってます(-×-)
センスがない？それは「経験がないだけ」！
「センスがないからデザインは苦手…自分にはムリかも」
そんなふうに思ったことはありませんか？ 私もその一人です。
Webデザインを学び始めたころ、「アートとデザインは違う」という言葉を聞いて、ハッ！としたのを今でも覚えています。
| アート | 自分の内側を自由に表現するもの |
| デザイン | 目的を達成するための手段 |
Webサイトを作るとき、「おしゃれなサイトをつくること」が目的になっていませんか？
Webサイトは、
・誰に（ターゲット）
・何を伝えたいか
・何をしてほしいのか
これらを明確にした上で、目的を達成するための設計を行います。
つまり、ターゲットに伝わる構成や配色を考えることこそがWebデザインであり、このときに「自分の内面的なセンス」は必要ないのです。
「なんかオシャレにならない…」という悩みも、知識や引き出しがまだ少ないだけかもしれません。
「見る目」を育てる！
「なんとなくオシャレ」ではなく、「どんな配色で、どんなターゲットに向けているのか？」と意識して観察することで、自然と引き出しが増えていきます。
デザインセンスは、知識と経験で育てるスキルです。
色や構成の知識、経験があれば、デザインの意図を言葉にできるようになり、より説得力のある提案ができるようになります。
そこで今回は、「配色」について、色彩心理学とカラーハーモニーの観点から考えてみました。
色選びで迷わないために、基本をおさえる！
まず、Webサイトの配色は3色に絞るのが基本です。
あれもこれも！とこだわりたくなりますが、3色に絞ることで、見やすくまとまりのあるデザインになります。
まずは基本の3色配色をおさえましょう！
| ベースカラー | サイト内で最も大きな面積を占める色 |
| メインカラー | ブランドのイメージカラーなどデザインの中心になる色 |
| アクセントカラー | ボタンなど目立たせたいところに使う色 |
この中で、特に重要なのは、メインカラーです。
Webサイトの雰囲気や印象を左右する色だからです。
ではそのメインカラーをどのようにして選べばよいでしょうか？
色彩心理学を活用しよう
色彩心理学とは、色が人に与える印象や感情を研究する分野のことです。
色の意味を知っておくと、「どう見せたいか？」に対して、ブレずに判断することができます。
| 色 | 印象 | よく使われるジャンル |
| 青 | 信頼・誠実・安心感 | IT、ビジネス、病院など |
| 赤 | 情熱・行動力・注目を集める | 飲食、セール、アパレルなど |
| 緑 | 自然・リラックス・安心 | 環境、オーガニック、健康関連 |
| 黄 | 明るい・楽しい・注意を引く | 子供向け、POP系、教育 |
| 黒 | 高級感・力強さ・モダンさ | ファッション、ラグジュアリーブランド |
カラーハーモニーで配色に迷わない
カラーハーモニーとは、色の調和・バランスのいい組み合わせのことです。
これを使って、メインカラーをもとに、ベースカラーとアクセントカラーを考えます。
カラーハーモニーには以下のような種類があります。
■類似色配色（同じ色味でまとめる）
類似色とは、色相環の角度で30~60度の色相差がある色をさします。
HSBカラーで、メインカラーのH(色相)に30度または、60度足す(引く)ことで作成できます。
色に変化を持たせつつ、全体にまとまりが出るため、扱いやすい配色です。
一方で、色相を変えただけだと、色の差が小さいためぼやけた印象になってしまいます。
アクセントカラー、ベースカラーを選ぶときは、明度や彩度を工夫することが大切です。
■補色配色（反対の色を使ってコントラストを出す）
補色とは、色相環の正反対に位置する色をさします。
HSBカラーで、メインカラーのH(色相)を180度ずらすことで作成することができます。
色の差が大きいため、ダイナミックな印象を与えることが可能になるので、アクセントカラーに用いるのが効果的です。
さらに、ベースカラーは無彩色、または、アクセントカラーもしくはメインカラーの明度や彩度を調整した色で調和を取ると配色しやすくなります。
この他にも「トライアド配色（三角形状に色相を配置する手法）」や、「モノトーン配色（同じ色で明度や彩度を変える）」などがあります。
色選びやデザインは、いきなり上手にできるものではありません。
ですが、色彩心理学やカラーハーモニーなどの基本的な知識があるだけで、デザインの幅は大きく広がります。
「センスがないから……」とあきらめる前に、まずは知識を増やしてみましょう。
私自身も、日々試行錯誤の連続ですが、「誰に、何を伝えたいのか」という視点を忘れずに、学びを重ね、少しずつ引き出しを増やしていきたい——
そんなふうに感じる今日この頃です。