デザイン

ブログの色使いで迷ったらAIに選んでもらおう

ブログの色使いで迷ったらAIに選んでもらおう
こんにちは! Webデザイナーのアズサ(@azusascom)です。

色は人の行動を左右する重要な要素です。

しかし、1から勉強するのは大変。

初期のブログ運営で大切なのは記事を更新し続けること。配色の勉強をしてたら時間がいくらあっても足りません。

時間が無いなら人やモノに頼ればいい。ということで今回は、無料配色ツールのご紹介です。

AIを使った配色ツール「Colormind」

Colormindは、クリックひとつでおしゃれな配色カラーパレットを自動生成できるツールです。

人工知能を利用していて、無料で無限に配色パターンを提示してくれます。

Colormindトップページ

ブログの配色を選ぶときは、「Website Colors」ページを使いましょう。

Colormind Website Colorsページ

Website Colors ページでは、Webサイト向けの配色を提案してくれます。

「Generate」ボタンを押せば、何度でも色を選んでくれますよ。

Colormindのいちばんのポイントは、実際にブログで使いやすい色を選んでくれること

派手な色同士の配色ではなく、グレー系やベージュ系など、合わせやすくて万人受けする色をうまく使ってくれるんです。

AIが選ぶ色について

Colormind Website Colorsページ

人工知能が提案してくれる色は、左から順番に以下となってます。

  • 明るいベーシックカラー
  • 明るいアクセントカラー
  • メインカラー
  • 暗いアクセントカラー
  • 暗いベーシックカラー

メインカラー

ロゴやヘッダー、見出しなどブログでよく使う色で、ブログの顔になる色です。

自分のブログを読む人が好みそうな色にするといいですね。

ベーシックカラー

ベーシックカラーは他の色と合わせやすい、落ち着いた色です。明るい色と暗い色の2つを生成してくれます。

明るい色は白に近い色で、ブログ背景色におすすめです。

暗い色は、ヘッダーの背景色や文字の色にするといいですね。

アクセントカラー

メインカラーを引き立てたり、ブログにメリハリをつけたりするための色です。

リンクやボタンの色に使うのがおすすめ。

アクセントカラーは2色生成されますが、ブログに使うのはどちらか1つでもいいですね。

好きな色に合わせて配色できる

使いたい色があったら、その色に合わせて配色してくれるんです。

以下手順を参考に配色してみてくださいね。

Colormind カラー調整

固定したいカラーのカーソルマークをクリックします。

Colormind カラーを固定

好きな色を選んで、鍵マークをクリックします。

Colormind カラー固定して生成

鍵マークが有効になった状態で「Generate」を押すと、ロックした色以外が新たに生成されます。

Colormind 新たなカラーが生成された

画像ではメインカラーに青系を選んだので、生成された色も青系でした。誠実な印象を与えられる配色なので、企業サイトやビジネス系のサイトで使えそうです。

配色例もチェック

提案した配色でwebサイトを作ったらどうなるか、画面をスクロールして見本も確認してみましょう。

Colormind ヘッダー見本

ヘッダー画像に、提案したカラーのボタンを配置した見本です。

Colormind アイコン・見出し・本文の見本

アイコン・見出し・本文の見本です。コーポレートサイトなどで使うデザインなので、参考程度に見てくださいね。

Colormind 背景を暗い色にした見本
Colormind 背景を明るい色にした見本

背景を暗い色にしたとき・背景を明るい色にしたときの見本です。

メインカラーとアクセントカラーの使い方が参考になります。

Colormind メニューバー・ボタン・タブなどの配色見本

最後はメニューバー・ボタン・タブなどの配色見本。参考にしてくださいね。

Colormindで簡単に配色しよう

今回は、無料配色ツール「Colormind」についてお伝えしました。

  • Colormindはおしゃれな配色を自動生成できるツール。
  • 自分の好きな色に合わせて配色を生成してくれる。
  • メインカラー・ベーシックカラー・アクセントカラーを選んでくれる。
  • 配色見本も提示してくれる。

「ブログの色どうしようかな」と思ってたあなた、ぜひColormindをいじってみてくださいね。簡単に使えますよ。

Colormind

ブログカラーの選び方については、「イメージ重視!ブログカラーの3つの選び方」という記事でも紹介してるので、よかったら読んでみてくださいね。

ではでは。

稼ぐ力を身につけて運命を変えよう!
ビジネスの勉強、試してみる価値あるかも。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です