【配色】あなたのサイトは大丈夫?良い配色はカラーコードが教えてくれる

どうも、サイトの再設計が延々と終わらない やおです。

この記事では主に初心者ブロガーさんに向けて、

(サイトの)配色は論理的に決めよう

ということを全力で解説していきます。

はじめに

まず簡単に”色”がとっっっても大事な要素であることを知ってください。”色”は私たちの直感に強く訴える効果があります。

黄色は危険、は信頼、は安心感

などはよく言われますよね。

これらの感情は思考の末に生まれるものではなく、直感的に感じるものなので人を錯覚させることも容易なほどです。

こんなトイレ誘導があったら事件が多発するでしょう笑

メインカラーは基本自由

サイトのメインカラーは今後のサイトのイメージに直結するため多くの初心者ブロガーが慎重に選ぶと思いますが、基本的には自由です。

もちろんサイトのデザインにもよりますが、たとえブログのテーマカラーが”真っ赤”だとしてもそれほどの違和感は無いのではないでしょうか。

とはいえ迷ったら比較的落ち着いた薄い色が無難です。

良い配色の見つけ方

2色目(サブカラーと呼びます)はサイト全体のアクセントにもなりうる大事な要素です。

それは言い換えるとサイトデザインを崩壊させる要素にもなりえます

この記事で私が全ての色に対して配色が “良い” か “悪い” かを紹介するのは限界があります。

そこでぜひ参照していただきたいのがこの「配色の見本帳」というツールです。

配色の見本帳

使い方は超カンタン!

調べたい色のコードを入力するか、色相環から色を選ぶだけです。

検索結果に類似色もサジェストされるので、そこまで厳密でなくても大丈夫です。

ここでは参考として私のサイトのテーマカラー(#709ec2)を使っていきます。

カラーコードを入力した結果がこちら。

このように2色〜6色までの最適な配色を提案してくれます。

コントラストで映えさせたいのか、はたまたグラデーションで魅せるのか、といった選択は皆さん次第。

やおログの場合

当ブログでは各それぞれの見出し・副見出しにアクセントカラーとしてこの→青緑色を採用しています。

“アナロジー”という色相環の隣り合わせの色から選びました。(画像1枚目)

まとめ

いかがでしたか。

「関係ねぇ!我流で行くんだ!」という意見を否定するわけではありませんが、見やすいサイトを作る上で、“良い配色”というのは存在します

今日紹介した配色の見本帳で簡単に知ることが出来るので、サイトのみならずあらゆる創作過程で参考にしてみてはいかがでしょうか。

それではまた〜

配色の見本帳:https://ironodata.info/search/