緑と茶色がイメージカラー 冒険者Lv.1（@boukenshaLv1)です
先日ブログデザインを丸ごと模様替えしました。
ブログデザインを変更しました！注力した箇所・ブランディング紹介
色んな方に「良くなったねー」「カラーセンスあるねー」とコメントをいただきました。ありがとうございます。
私はセンスないからなぁ～
カスタマイズ初心者だから難しいことわからない
と、悩んでいる方でも大丈夫！私がこの記事でサポートします。
この記事では
・ブログカラーを統一させるために必要なもの
・カラーの選び方
・カラーバランスのとり方
など、を分かりやすく解説していくので一緒に「自分のカラー」を見つけましょう。
実は私もセンスはなかった
私の前のブログデザインはこんな感じでした。
味気ないというか、ブログカラーっぽいものが存在せず、面白味に欠けていました。
唯一、目立った色が付いているものというと「見出し」だけでした。（資料写真なくてすみません）
当初は、当ブログ名『人生RPG』から
ロールプレイングゲームって冒険するよね。冒険って森の中とか歩くよね。
と考えて、「森の木」をイメージした緑（葉っぱ）と幹（茶色）の色を使っていました。
しかし、カラーコードはというと、特にこだわりもなく直感イメージのカラーを適当に選んだものでした。
カラーコードというのは、各色に付けられた番号みたいなものです。
よくカスタマイズなどで使われるカラーコードは「#〇〇〇〇〇〇」の様に、#（半角シャープ）＋６桁のアルファベットと数字が混合して構成されたコードです。
ネットでも色々カラーコード表を見ることが出来るので参考に見てみてください。
当初は自分だけが、「ブログのイメージに合っていてコンセプトも統一されてるわぁ～」っと思っていて、読者の方は一人も「森の木」のイメージだな！なんて考えもしなかったでしょう。
思い込みほど怖いものはないですね。
こんな感じでセンス０の私ですが、今回のブログ模様替えでカラーに対して意識し、本当のブログカラー統一が出来たと思います。
その方法をこれから紹介していきます。
ブログカラーを統一するのに必要なもの
「このブログはこの色！」と読者に認識してもらうためには、単に全体を同じ色にするのでは効果が薄いです。
ブログカラーを際立たせたいのなら「タイトルヘッダー画像」もしくは「プロフィールアイコン画像」が必要です。
ここで注意してもらいたいのは、
・オリジナルの画像を使う（作る）こと
・プロフィール画像は人物写真・キャラクターイラストなどに設定し、景色とかの対象物が存在しないものを避ける
悪いとは言いませんが、たまにプロフィールアイコンにフリー素材や綺麗な海みたいな画像を使われている方がいますが、オリジナリティを出したかったらなかなか難しいと思うので変更を勧めます。
用意できましたか？
では次の段階へ進みましょう。
カラー選びのコツ
カラーを統一させるのに一番やってはいけないことが、こんな色にしたいと考えていて「大体この色が近い」と最後に手抜きをしてしまうこと。
もったいないです！
せっかくイメージカラーを持っているのならピンポイントでその色のカラーコードを探しましょう。
「え？あんなにたくさんあるカラーコードからピンポイントで見つけ出すの無理ゲーじゃね？」
そう思った方もいると思います。
大丈夫！カラー選びにはコツがあって、誰でもできます。
先程ヘッダー画像とプロフィール画像が必要といいました。
あなたのブログカラーはこの時点で決まっています！
どちらかの画像から色を抜き取ります。
抜き取る色は２～３色、多くても４色までにしましょう。
また、抜き取る色は「使われている範囲が大きいもの」から優先に抜き取り、上位の色を使ってブログ内のカラーデザインを変更していきます。
こうすることで自分だけの色の組み合わせができ、オリジナリティがグッと上がります。
では、具体的に色を抜き取る方法を紹介していきます。
色を抜き取る方法
ブログカラーを決める方法は色々ありますがまずは、自分だけの組み合わせを見つける方法を紹介します。
この方法は実際に私が当ブログで行った方法になります。
①拡張機能を追加
まずはPCでCHROME（クローム）を開きます。
CHROMEの拡張機能の『ColorPick Eyedropper』という機能を追加してください。
『ColorPick Eyedropper』はもちろん無料で使うことができます。
②ColorPick Eyedropperの使い方
追加できたら画面右上にこんなアイコンが表示されます。
確認できたら、自分のブログ（サイト）を開きましょう。
先程言った様にヘッダーもしくはプロフィール画像から色を抜き取るので画面上にどちらか表示させてください。
私はアイコンに設定している画像から色を抜き取ったので、aboutoページにてアイコン画像を大きく表示させました。
ヘッダーからの場合は、ヘッダー自体大きいのでブログトップページのままで大丈夫です。
画面右上に追加されたColorPick Eyedropperのアイコンをクリックします。
するとこんな感じになります。
1. 色を抜き取りたい所にマウスを移動させてください（上の画像：黒矢印）
2. 青枠部分にマウスの位置とその周辺が拡大されて表示されるので、細かい部分だったり、複雑な部分はこの拡大画面をみて、希望の位置に移動します。
青枠内にはマス状になっていますが、太い縦と横のマスラインがあると思います。その重なっているマス（青枠の中心部）がマウスが選択している色になります。
3. コードを見たい色の上で左クリックしても、カラーコードを表示させることもできます。
③カラーコードの見方
ColorPick Eyedropperのアイコンをクリックして表示された画面内には
・#（〇〇〇〇〇〇）
・ｒｇｂ（〇、〇、〇）
・ｈｓｌ（〇、〇％、〇％）
と３種類あります。
簡単に何の意味を表しているかというと
「#（〇〇〇〇〇〇）」は
Web上で色情報を文字列で表したもの。
これが一般的にいう「カラーコード」で、今回の記事で探しているコードになります。
「ｒｇｂ」は
赤（red）、青（blue）、緑（green）の３原色の数値を変えることでいろんな色を作ります。
「ｈｓｌ」は
色相（hue）、彩度（saturation）、輝度（lightness）を意味し、数値を変えることで度合を変更できます。
どれもカスタマイズで使われることがあるので覚えておくとコードを見たときに「ここはこの色で、こんな度合で設定しているのか」とある程度読むことができます。
少し話が反れましたが、今回は#から始まる６つの英数字のコードを使ってください。
「抜き取る」と言っていますが、実際は画像に使われているカラーコードと同じ色にするために、全く同じ数値のコードを見つける。という意味です。
私の場合、上の画面では「#71E073」という英数字がカラーコードになります。
またこの英数字のアルファベットは、大文字・小文字どちらでも同じ色が対応しています。
私のアイコン画像では
緑（着ぐるみの服）→肌色（肌）→茶色（髪）→赤（着ぐるみのトサカ）の順が使用割合の大きな順番になります。
２番目の肌色は白に近く、ブログの背景と同化しそうでしたので無いものと考え「緑」と「茶色」の２色を使うことにしました。
もしかすると、今後「赤」も取り入れていくかもしれませんが、今は２色でブログデザインを整えてます。
ブログのカラーバランス
無事あなただけのカラーコードの組み合わせができました。
おめでとうございます。
早速ブログに取り入れていきたいですね。
ここで注意して欲しいのは、「対応させる範囲の割合」です。
せっかく色を絞っても使い方によっては、台無しにしてしまうことがあります。
頭に入れておいてほしいのは、
メインカラー・サブカラーを決めること。
色を取り出した際に優先順位を付けましてね。
その順番通りに使用する割合を決めていきます。
２色に絞った方
8：2 もしくは 7：3 の割合で設定しましょう。
3色に絞った方
7：2：1 もしくは 6：3：1 の割合で設定しましょう。
割合を5：5にしてしまうと「このブログはこの色がベースかぁ」で感想終わりです。
メリハリが無く整ったという感じが弱くなり効果が出にくいです。
割合 に差をつけることで、「このブログはこの色とこの色がベースかぁ」に続き「おっ！こんなところにちょっとした刺し色が入ってる。全体的にアイコン（ヘッダー）画像に使われている色で統一されて細部まで良い感じ」という印象を持ってもらえます。
設定する場所で言うと
【メインカラー】
・ヘッダー
・グローバルメニュ
・サイドバータイトル
・大見出し
・フッターorコピーライト
などの背景色がある部分が目立つのでオススメです。
【サブカラー】
・グローバルメニュー
・続きを読むボタン
・次のページボタン
・中見出し・小見出し
・フッターorコピーライト
などボタンやアイコンマークなど範囲が大きすぎない箇所にオススメです。
サブカラーの３つ目・４つ目はさらに使用箇所を減らしてちょい見せ程度と考えてください。
ブログカラーは自分の好きな色とは限らない
人間誰しも好きな色があると思います。
しかしブログデザインを統一するにあたり
『好きな色＝ブログカラー』には必ずしもなりません！！
これまでの説明で理解していただけたと思いますが、ブログデザインを整えるなら自分の好みに合わせるのではなく、画像に合わす必要があります。
「ピンクが好き」でもアイコンやヘッダー画像は青色。
この場合色が喧嘩してしまうのは想像できます。
こういった場合どうすればいいか、色々選択枠はあります。
・画像に合わせて青系統の配色にする
・画像を変更してピンク系に合わす
・どちらも外せないので思ったように配色する
最後の選択に関しては、もうデザインのこと諦めていますね。
プロフィール画像は今までずっと使っていて変えれないというかともいると思います。
その場合、「画像の背景色だけでもピンクにする「画像にピンクの枠を付ける」など
してピンク要素を取り入れる様にすると何とかバランスがとれるかな？という感じです。
一言アドバイスを言うとすれば、
ブログデザインが整ったら意外と自分の好きな色でなくても好きになるよ！
ということ。
部屋の模様替えと一緒で心機一転できてモチベーションアップに確実に繋がるので、１度テスト用ブログ等で試に変更確認してみてください。
まとめ
今回、初心者の方でも簡単に自分だけのカラーデザインを見つける方法を紹介しました。
簡単にまとめておきましょう
・ブログのカラーはヘッダーやプロフィールアイコンで決まる
・『ColorPick Eyedropper』という拡張機能を使えば簡単にカラーコードを知ることができる。
・カラーデザインは割合に差をつけるとメリハリがでる
・自分の好きな色＝ブログカラー ではない
私が実際に使っているということもありますが
『ZENO-TEAL』というテーマなら、ブログ全体のカラー設定が出来るコードを発表しているので、簡単に・一気に変更できます。
今のデザインに満足してないのなら思い切ってテーマごと変更してみるのも清々しいですよ。
デザインについては、今後も色々記事を書いていこうと思います。
