色は人の行動を左右する重要な要素です。
しかし、1から勉強するのは大変。
初期のブログ運営で大切なのは記事を更新し続けること。配色の勉強をしてたら時間がいくらあっても足りません。
時間が無いなら人やモノに頼ればいい。ということで今回は、無料配色ツールのご紹介です。
AIを使った配色ツール「Colormind」
Colormindは、クリックひとつでおしゃれな配色カラーパレットを自動生成できるツールです。
人工知能を利用していて、無料で無限に配色パターンを提示してくれます。
ブログの配色を選ぶときは、「Website Colors」ページを使いましょう。
Website Colors ページでは、Webサイト向けの配色を提案してくれます。
「Generate」ボタンを押せば、何度でも色を選んでくれますよ。
Colormindのいちばんのポイントは、実際にブログで使いやすい色を選んでくれること。
派手な色同士の配色ではなく、グレー系やベージュ系など、合わせやすくて万人受けする色をうまく使ってくれるんです。
AIが選ぶ色について
人工知能が提案してくれる色は、左から順番に以下となってます。
- 明るいベーシックカラー
- 明るいアクセントカラー
- メインカラー
- 暗いアクセントカラー
- 暗いベーシックカラー
メインカラー
ロゴやヘッダー、見出しなどブログでよく使う色で、ブログの顔になる色です。
自分のブログを読む人が好みそうな色にするといいですね。
ベーシックカラー
ベーシックカラーは他の色と合わせやすい、落ち着いた色です。明るい色と暗い色の2つを生成してくれます。
明るい色は白に近い色で、ブログ背景色におすすめです。
暗い色は、ヘッダーの背景色や文字の色にするといいですね。
アクセントカラー
メインカラーを引き立てたり、ブログにメリハリをつけたりするための色です。
リンクやボタンの色に使うのがおすすめ。
アクセントカラーは2色生成されますが、ブログに使うのはどちらか1つでもいいですね。
好きな色に合わせて配色できる
使いたい色があったら、その色に合わせて配色してくれるんです。
以下手順を参考に配色してみてくださいね。
固定したいカラーのカーソルマークをクリックします。
好きな色を選んで、鍵マークをクリックします。
鍵マークが有効になった状態で「Generate」を押すと、ロックした色以外が新たに生成されます。
画像ではメインカラーに青系を選んだので、生成された色も青系でした。誠実な印象を与えられる配色なので、企業サイトやビジネス系のサイトで使えそうです。
配色例もチェック
提案した配色でwebサイトを作ったらどうなるか、画面をスクロールして見本も確認してみましょう。
ヘッダー画像に、提案したカラーのボタンを配置した見本です。
アイコン・見出し・本文の見本です。コーポレートサイトなどで使うデザインなので、参考程度に見てくださいね。
背景を暗い色にしたとき・背景を明るい色にしたときの見本です。
メインカラーとアクセントカラーの使い方が参考になります。
最後はメニューバー・ボタン・タブなどの配色見本。参考にしてくださいね。
Colormindで簡単に配色しよう
今回は、無料配色ツール「Colormind」についてお伝えしました。
- Colormindはおしゃれな配色を自動生成できるツール。
- 自分の好きな色に合わせて配色を生成してくれる。
- メインカラー・ベーシックカラー・アクセントカラーを選んでくれる。
- 配色見本も提示してくれる。
「ブログの色どうしようかな」と思ってたあなた、ぜひColormindをいじってみてくださいね。簡単に使えますよ。
ブログカラーの選び方については、「イメージ重視!ブログカラーの3つの選び方」という記事でも紹介してるので、よかったら読んでみてくださいね。
ではでは。