こんにちは！おぐらです。
インターン生活も残りわずかとなってきました。
残りの期間で沢山吸収して、インターンで生活を終えたいと思います。
さっそくなんですが、本日はWebデザインにおける配色についてお話しさせていただきます。
カラー選択の基本
デザインをする際に欠かせない要素の一つとして、カラーの配色がありますよね。
カラー設定のとき、しっくりこない、これであってるのかな？
などで悩んでしまいがちです。（個人的にかなり経験あり）
少しでも色味が違うと全体的のイメージがガラッと変わるので難しいんです。
かといって、これが絶対的に正解というのもありません。
味方によれば個性さを出すために「あえてこの色！」というのもありです。
ただ、カラー設定で基準となるものがあるので、それを共有できればと思います。
今回はWebサイトをデザインする際に必要な、
ベースカラー、メインカラー、アクセントカラーの配色や配分についての基本ルールをまとめてみます。
基本となる3つのカラー
基本となるカラーは「ベース」「メイン」「アクセント」この3つです。
各カラーの比率をまとめると、
ベースカラー70％
メインカラー25％
アクセントカラー5％
と、いろいろな情報サイトを見ても基本この数値からぶれていませんでした。
この割合にすると美しい配色に仕上げることができるらしいです。
わかると思いますが各カラーの説明をサクッとすると、
ベースカラー
最も大きな面積を占める基本となる色で、余白や背景などに用いることが多い色です。
メインとアクセントのカラーを引き立てる脇役的な立ち位置。
メインカラー
その名の通りサイトの印象を決定づける主役の色です。
アクセントカラー
全体の5％と少ない使用量ながら一番目立つ色で、
全体を引き締める、ユーザーの目を引く役割があります。
個人的にはアクセントカラーの設定が難しいと思います。
アクセントだからといって目立つ色にすると、
メインカラーとのずれが生じ、変な配色だなと結局思ってしまいます。
なので、各カラーの決定のコツを調べてみました。
カラー決定のコツ
ここで気をつけるのが、ベースより先にメインを決めます。
メインカラーの設定
サイトイメージを大きく左右するメインカラーは一番初めに決めます。
メインカラーの傾向は、文字が読みやすいなどの可読性の問題から、
明度を低くした色が使用しやすいとされています。
よくあるのが、サイトに使うロゴのカラーをメインカラーに使用しているサイトも多いらしいです。
使用する色を決める基準としては、ターゲットイメージに合わせた色を探す必要があるので、
色の印象を把握しながら決めると良いと思います。
ターゲットとなる人のイメージカラーですね。
子供向けのサイトにダークな色だとおかしいですよね。
そのターゲットにあった色を選ぶのがセオリーです。
ベースカラーの設定
そして次に全体の70％を占めるベースの色を決めます。
このカラーは主にサイトの背景色となる色です。
白、黒、グレー
この3つは無彩色カラーと言って
メイン・アクセントカラーの色の妨げになりにくいので、よく使われている色かと思います。
ベースカラーは、文字間、コンテンツ間の余白などにも使われることが多いので、
明度の高い色、淡い色を意識して使ってみるとしっくり収まります。
アクセントカラーの設定
単調なトーンにメリハリをつけたい時などに使う色です。
全体に占める面積の割合は一番小さく、最も目立つ色となることが理想です。
アクセント色はお問い合わせフォームのボタン色に使用すると効果絶大ですね！
色は1色使いでなくてもいいのですが、色が増えるほど扱うのは難しくなります。
「賑やか」「楽しい」といったサイトイメージを表現したい場合には多色使いが有効だとか。
以上が基本的な配色の設定方法です。
中にはメインの他「サブカラー」を設定するサイトもあるみたいです。
レイアウトやカラム数によっても、カラーの設定は変わりますが、
基本的にはどこのサイトも必ず決めていると思うので、
カラーで悩んだときは、とにかくあてはめてみるのも大事だと思います。
同じような色でも色相や明度を変えたりすれば、しっくりくることがあると思います。
最後に私から一つポイントを言わせてもらうと…
Ｓ．Ｐ．Ｈ です！
・設定した色を
・パソコンから
・離れてみる！！
…大事だと思いますよ。（笑）いや、冗談抜きで。
ではでは、この辺で～
ogura takuya