あるアルパカの知恵

たのしくて、やくにたつ

【ブログカスタマイズ】ブログの色選びに役立つおすすめサイト

ブログの色選びって迷いますね。

 

注:ブログカスタマイズ作業の一環でやってます↓

www.arupakano.com

 

配色について、有用で無料なサイトが複数あるので、参考にしたものをまとめてました。

さくっとイメージで学ぶ『色彩の心理学』と『配色の基礎知識』 - LITERALLY

Color Hunt - Beautiful Color Palettes

Coolors.co - The super fast color schemes generator

Khroma - The AI color tool for designers

コピペで使えるオシャレな配色パターン見本 25 (全組み合わせWebカラーコード付) - LITERALLY

配色パターン見本40選:ベストな色の組み合わせ確認ツール

ウェブ配色ツール Ver3 | フォルトゥナ

 

 

ブログの色選びのステップ

上記で紹介したサイトを見ながら、私がどのようにブログの色選びを行ったか、書いていきます。こんなふうに考えればいいんだ、という参考になれば幸いです。

 

ステップ1:配色の基礎知識を学ぶ

まずは「色選び」の基礎を学びましょう。

さくっとイメージで学ぶ『色彩の心理学』と『配色の基礎知識』 - LITERALLY

 

以下の3色を決めるのをゴールにします。メインカラーが決まれば残りの色は自ずと決まりますね。

■メイン色
1つテーマ色を決める。たとえば青
■サブ色
メイン色に近い色をもう1色。たとえば水色
■差し色
アクセントとして一部に青の補色周辺をつかう。たとえば橙色。

 

TODO:「メイン色」(ブログのイメージカラー)を決める

色を決める前にまずブログの方向性を見つめ直します。

当ブログ「あるアルパカの知恵」の場合は以下のような方向性で運営しています

  • 個人の視点から趣味を語る = 楽しい
  • 生活に関わる役に立つ情報を共有する = 親近感
  • 批判や攻撃をしないので安心して楽しめる = アットホーム、平和

 

上記の方向性の逆=「やらないこと」は以下のとおりです。

(色とは別に自分の記事を制限するために設定しておくとベターと思ってます)

  • 専門家視点で語らない(学者的、プロ的にならない)
  • 社会・政治・宗教問題は取り扱わない
  • 炎上や議論は避ける。オピニオンは控える

 

ということで、ブログのイメージを表すキーワード「楽しい」「アットホーム」「親近感」「平和」 から、必然的に使えるカラーは以下の3種類。

■緑 平和、ナチュラル、エコなどの印象を与える。リフレッシュ効果がある
■青 最も万人ウケする色。知性、誠実、冷静、寒さを感じさせる
■橙 親近感を感じさせる。「温かみ」「親近感」「喜び」などの印象を与える

 

ブログ開始当初は、アイキャッチ画像のように「緑」(自然、ナチュラル)のイメージが合うかなと思っていました。

 

ブログを50日続けた結果、「楽しい」「喜び」「親近感」 といったキーワードのほうが合っているかなと感じ始めました。

ということで、メインカラーは「オレンジ」にしてみようと思います。

 

ステップ2:配色組み合わせを学ぶ

メインカラーの具体的な色とサブカラーを決める前に、「良質な配色組み合わせ」をインプットしてイメージを沸かせましょう。私のようにセンスがない人間は良いものを見て、感性を磨くしかない(笑)

勉強になるサイトは以下。

 

Color Hunt - Beautiful Color Palettes

ユーザがつけた「いいね」順番に並んでいます。つまり、ここで上位のものを使えば、みんな「良い色使い」と思ってくれます。これ、「ブログ読者受け」を考えると、最強じゃあないか。

 

Coolors.co - The super fast color schemes generator

ランダムにカラーパレットが作られます。スペースキーを押すだけでOK。

 

Khroma - The AI color tool for designers

反則技ですが、AIに選んでもらうという方法もあります。50色選ぶとおすすめの色の組み合わせを出してくれます。これ楽しいです。

 

コピペで使えるオシャレな配色パターン見本 25 (全組み合わせWebカラーコード付) - LITERALLY

LITERALLYさんのセンスがとにかく良すぎるのでこれを使わせてもらうのが一番ラクかも。

 

配色パターン見本40選:ベストな色の組み合わせ確認ツール

これも便利!厳選された40色です。サルワカさんのサイトはクオリティ高いので他の記事も見てみると良いですよ。

 

ウェブ配色ツール Ver3 | フォルトゥナ

こういう配色をやってくれるサイトもあります。面白いけど、いまいち使いこなせなかったです。

 

TODO:「メイン色」「サブ色」「差し色」を決める

当ブログでは、メインで使う色は、この辺にしようと思います。

メイン色候補 メイン色候補 

サブ色候補 サブ色候補

 

あとは、サイト内のデザインに合わせて色々とやります。

 

つづく