暇人の寝室

技術系の記事や読書・アニメの感想などを投稿します。

【Webデザイン入門】配色についてまとめてみた【第4回】
投稿者: ylafaro0310
2020.07.06

プログラミング

前回の記事

前回はWebサイトのタイポグラフィについてまとめた。今回はデザインの要とも言える配色についてまとめてみる。

1. 色とは

色は「色相」、「明度」、「彩度」の3要素で決められる。

「色相」は赤、橙、黄…のように色相環で表される様相の違いで、暖色、寒色、中性色に分けることができる。そして「明度」は色の明るさ、「彩度」は色の鮮やかさのことだ。

2. 色の使い分け

暖色は「興奮」や「暖かさ」などを、寒色は「鎮静」や「寒さ」を印象として与える。

そして暖色かつ明るいほど膨張感や進出感を与え、寒色かつ暗いほど収縮感や後退感を与える。

これらを図に表してみたので、感覚を掴んでもらえると嬉しい。

色が与える感覚

また彩度が強いと派手さを、弱いと地味さを表現することができる。

3. 配色バランス

ベースカラー70%、メインカラー25%、アクセントカラー5%という配分にすると良いらしい。

メインカラーはそのページで使いたい色。

ベースカラーはメインカラーの明度を上げた色。

アクセントカラーは色相環においてメインカラーの対極らへんにあるものを選ぶとよい。

4. 配色を増やしたい場合は…

配色を分割することで対応する。

分割する際は「色相が同じでトーンが違う」or「トーンが同じで色相が違う」ものを選択する。

5. まとめ

色はセンスで選ぶものと勝手に思い込み、長年諦めてきたが、実際にはある程度の理論に沿って選択できることが分かった。

もちろん細かな色の使い分けがあってセンスが絡む部分はあるとは思うが、上記の知識があると色の選択で呆然と立ち尽くすことはなくなると思う。

デザインの苦手な人はこの辺を意識して練習してみると良いと思う。

次回以降でロゴの作成や写真の簡単なレタッチをまとめていけたらと思う。

参考サイト

色彩センスのいらない配色講座

色の感じ方【配色】

カテゴリ:Webデザイン,プログラミング

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


プライバシーポリシー/ ©2020 暇人の寝室