COLUMN
コラム

2022.04.28COLUMNホームページの配色

ホームページの配色の投稿画像01

ONE to ONEのホームページをご覧いただきありがとうございます。

サポートチームが担当させていただきます。

 

ホームページやチラシなど何かを制作する時必ず悩むもの…

使用する色や組み合わせです。

 

同じ色ばかり使ったり、たくさんの色を詰め込んだり何も考えずに制作してしまうと

目を引かなかったり…

見づらかったり…

イメージとかけ離れたり…

 

今回は基本的なルールを紹介して皆さんに役立てていただければと思います。

基本的には何色使うのがいい??

例外もありますが基本的には3色以下に抑えることで、まとまり感を保つことができます。

難しい方は2色で始めるのもいいでしょう。

3色のであれば「ベースカラー」「メインカラー」「アクセントカラー」と、

それぞれ役割を持たせられるので程よくメリハリをつけることができます。

3色使用する際の割合は??

全部均等に使えばいいと考える方もいらっしゃると思いますが、

上記の通りそれぞれに役割を持たせて適した配分で使用すると効果的と言われています。

基本的には『70:25:5の法則』に乗っ取ることで、違和感のない配色が出来上がります。

 

〇ベースカラー(70%)

背景や余白部分などに使用。

文字に重なることも多いため明度の高い色や適度に淡い色がおすすめです。

 

〇メインカラー(25%)

1番主張させたい色を使用することが多いです。

サイトのイメージを決めるので企業ロゴなどで使用している色があれば採用してもよいでしょう。

 

〇アクセントカラー(5%)

注目させたい部分や目立たせたい部分に使います。

メインの色を引き立てたり、空間や全体のなかで変化をつけたりする効果があります。

3色の組み合わせのテクニックやパターンは??

適当な色を3つ選ぶのではなく、意図して組み合わせを考えることで全体の雰囲気を決めることができます。

カラーウィールを使用すると下記のパターンで組み合わせる色を迷わず選定できます。

 

〇コンプリメンタリ―

カラーウィール上で対局にある色の組み合わせ。

メインカラーの対局の色を使用することで、メリハリのある視覚デザインになります。

 

〇アナロガス

近い色を組み合わせて使うことでまとまり感のあるデザインになります。

視覚的に柔らかい雰囲気をつくることができます。

 

〇トリアディック

カラーウィール上で色を選んだ際に、線でつなぐと正三角形になるような配色です。

最も基本的な配色なので、悩んだ際は1度採用してみるのもいいでしょう。

まとめ

ホームページの配色の投稿画像09

今回は配色に関して基本的なポイントをお話ししました。

この他にも色そのもののイメージを利用したりと奥が深い世界です。

 

深い話はまたデザイナーが素敵なコラムを書いてくれると思います。

皆さん楽しみにお待ちください☆