ブログの配色をカンタンに選べるツール。素人でもできた!

広告
広告
ピグ
ピグ

デザイン素人、

ピグです!

当ブログはcocoonというテーマを使っています。

cocoonには色んな「スキン」があり、ブログの模様替えをすることができます。

 

たまに、「ココの色、どうしよう?」って時があります。

例えば、こんなとき👇

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

新たに通知エリアを設けるとき、

ピグ
ピグ

ぶひっ!

どんな色がイイのかなー?

 

色はココから設定します👇

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。
ピグ
ピグ

う~ん、

センスも知識もない自分には

ムズカシイ!

 

でもネットで調べるうちに、このツールでなんとかなりそう!

っていう気がしてきました。

ので、誰かの役に立てばと思い、まとめてみました。

 

広告
広告

超素人!「配色」について自分が分かったこと。

ブログ運営を通して、以下のことを初めて知りました。

「カラーコード」の存在を知りました。

カラーコードとは、 👆の色設定画面でいうと、「#ecf59f」ってやつです。

どこのツールでも、このカラーコードを入力すれば同じ色が表示されます。

 

ツール(無料)を使えば、おすすめの色を教えてもらえる。

配色に関するツール、サイトはたくさんあります!

しかも無料!

色を一つ指定すると、その色に合う組み合わせを教えてくれます。

ピグ
ピグ

自分で適当に

色を選ぶより、

これを使った方が良さげ!

以上のことを踏まえ、自分なりの色の選び方を考えました。

 

自分流、配色の決め方

以下の2つのツールを使います。

ColorZilla

GoogleChromeの拡張機能。Edgeにもあります。指定した場所のカラーコードを教えてくれる。

 

PALETTABLE

カラーコードを入力すると、その色に合ったものを教えてくれる。

使い方を、順を追って紹介します。

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

このエリアの色を決める、を例にして紹介します。

 

今使っている色のカラーコードを取得する。

👆拡張機能を取得します。

「Chromeに追加」をクリックます。

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

自分のブログを表示します。

自分の使っているスキンの色は、この緑です。

今回はこの色に合う色を探します。

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

ブラウザの右上に拡張機能が表示されています。

「ColorZilla」をクリックして起動します。

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

ブログのヘッダー、緑の部分にカーソルをもってくると、

上にも同じ色が表示されます。

そして右にはその色の「カラーコード」が表示されます。

この状態でクリックすると、カラーコードがコピーされます!

ピグ
ピグ

カンタン!

 

配色のオススメを選ぶ

「PALETTABLE」というサイトを開きます。

英語だけどカンタンに使えます。

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

真ん中にカラーコードがあります。

これを先ほどコピーしたカラーコードに置き換えます。

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

緑色が表示されました。

隣にそれに合った色が「提案」されます。

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

提案された色の下に、

・ Dislike(嫌い)

・ Like(好き)

ボタンが表示されます。

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

「Dislike」をクリックすると、他の色を提案してくれます。

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

「Like」をクリックすると、

すると前の2色に合う色をさらに提案してくれます!

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

自分が気に入った色のカラーコードをコピーして完了です。

 

ワードプレスの設定画面でカラーコードを入力

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

あとは設定画面でカラーコードを貼り付ければ、その色が適用されます!

 

以上です!

この記事は役にたちましたか?

タイトルとURLをコピーしました