こんんちは、なかあです！(@nakablog_)
今回はブログ初心者の方に向けて、Webページの色の決め方について解説しようと思います！
わかりやすくいくよ～！！
Webページの色って？
まず、Webページを作る際に決める色は、
- ベースカラー
- メインカラー
- アクセントカラー
の3種類です。
「ベースカラー」とはデザインの基盤となる部分で、Webページの背景色にあたります。
「メインカラー」とはデザインの中で最も見てほしい色でテーマカラーともいえます。相手に与える印象はここで決まります。
「アクセントカラー」とはデザインを引き締めてメリハリをつけるワンポイントとなる色です。ボタンや見出しなど目立たせたい部分に使います。
比率は70%:25%:5%くらいがオススメです
色を決める際はこちらのサイトを参考にするといいです！
使いたい色があったらカラーコードをコピってもってこれます～。
色の決め方について
次に以上で紹介した3種類の色を決め方を解説します。
ベースカラーの決め方
ベースカラーはWebページの背景となる色なので、特に意図がなければ白または白に近いシンプルな色を選ぶようにしましょう。
この辺のすこし彩度のある色も雰囲気があっていいですね～！
色を決める際の参考サイト↓
メインカラーの決め方
メインカラーはサイトの顔となる色なので時間をかける部分です。
自分の発信するコンテンツや相手に与えたい印象に合わせて色相とトーンを決めていきます。
色相とトーンはそれぞれイメージをもっていて、自分の発信するコンテンツと相手に与えたい印象を考えて色を選定していきます。
下図は一例ですが参考ににしてみてください↓
（例）
- ITの情報を発信するブログなら、信頼と誠実感を与えたい→青、紺
- 女性向けに美容の情報を発信するブログなら、清潔や柔らかさ→白、ピンク
のように選んでいきます。
図はあくまで一例なのでこちらのサイトなどを参考にしてください↓
色相のイメージ
トーンのイメージ
カラーコード
※初心者の方は原色のような鮮やかな色を使うのはおすすめしません。
後半に解説してありますが、原色は調和が取りづらく、眩しいので維持率の低下にも繋がります。
また、メインカラーにブランドカラーを設定するという方法もあります。
ブランドカラーとはその名の通り自分のブランドの色です。
人間の目から入る視覚情報のうち、80％以上が色彩からの情報だと言われて
おり、色を見ただけでコンテンツを判断されるようになるかもしれません。
ちなみにこのnakablogでは「#b77b57」をメインカラー＆ブランドカラーにしています！
茶色といえばnakablogと言われるようになりたい…
アクセントカラーの決め方
アクセントカラーは全体の5％といちばん割合が低いですがいちばん目立つ部分でもあります。
目立たせい部分やメリハリをつける色なのでメインカラーと離れた色にするようにしましょう。
あなたが選んだメインカラーの色相と反対の方向にある色が補色といって離れた色になります。
補色かその付近の色が目立つ、メリハリのある色といえます。
また、ベースカラーと反対の明度の無彩色を使うのもアリです。
ベースカラーに明るい色を使っているなら暗い色、暗い色を使っているなら明るい色ですね。
このnakablogでもアイコンやH3見出しなどに濃いグレーを使っていてアクセントカラーになっています。
気をつけるポイント
可読性・明視性
可読性、明視性とは見つけたあとの理解のしやすさの度合いをいいます。
可読性は文字の読みやすさ、明視性は図形や画像の理解しやすさを指します。
この可読性、明視性に気をつけないとぱっと見たときに、なんて書いてあるか読めない・見えないに繋がります。
これ、ぱっと見たときにどちらのほうが理解しやすいですか？
圧倒的に右ですよね。
可読性、明視性を上げるには明度の差を上げることが重要です。
色を決めたら最後に自分のサイトを見て読みにくいところがないか確認しましょう。
読みにくいところがあれば文字色等を変更するか背景色を変更するようにしてください。
調和しているか
色を設定し終わったら全体の調和が取れているか確認しましょう。
調和とは簡単に言えばその色が馴染んでいるか です。
このあと紹介しますが原色を使っているとその色が目立ちすぎるので調和を取るのが難しいです。
トーンを揃えれば基本、調和がとれるので全体を見ながら浮いているところがないか、色々試してみるのをおすすめします。
原色を使っていないか
原色を使うと調和を取るのが難しいに加えて、眩しいです。
画面がピカピカしてふつうに見づらいので、使わないほうがいいです。ユーザー維持率低下にも繋がります。
まとめ
いかがでしたか？？
今回はブログ初心者の方に向けて色の決め方について書きました！
初めは色決めに苦戦したり調和しなかったり難しいかもしれませんが、いろんな色を設定して試したり、他のブログサイトを参考にしてみたりして時間をかけてゆっくり色を決めていきましょう！
そして、ブログは常にユーザーの利便性を考えてデザインしていきましょう～！！
質問等あればTwitterのDMで受け付けます！
それでは！
Twitterでも発信中です！！
