ブログ   ※当サイトのコンテンツには広告が含まれる場合があります。

ブログサイトの配色を決める3つの方法【カラーコードの調べ方まで】

2021-08-08 yume-tada

how-to-decide-color-of-blogsite

Warning: Undefined variable $sc_Linkcard in /home/xs533301/biz-sel.com/public_html/wp-content/themes/affinger-jet-child/functions.php on line 145

Warning: Constant __THEME_DIR__ already defined in /home/xs533301/biz-sel.com/public_html/wp-content/themes/affinger-jet-child/functions.php on line 104

Warning: Undefined variable $sc_Linkcard in /home/xs533301/biz-sel.com/public_html/wp-content/themes/affinger-jet-child/functions.php on line 145

Webサイトの配色はどうやって決めればいいの?

Worried
お悩みさん

サイトの色は、アクセスに関係あるの?

findout
お調べさん

こんな悩みを解決します。

ゆめただのり
ゆめただ

ゆめただはブログを始めたとき、

色の決め方が解らなかったため、決められませんでした。

本記事で、色を決めてサイトを開設しましょう

カラーコードの調べ方まで解説していきます。

本記事を読んでわかるコト

  1. 配色を初めに決めておく理由
  2. 色でユーザーの受ける印象は変わる
  3. サイトの色を決める3つの方法
  4. 他サイトのカラーコードの調べ方

この記事を書いた人【ゆめただ】

この記事を書いた人
track?id=8172&type=classic&u=522fdcde 6378 41ee b1b5 62d6c42966e3

配色を初めに決めておく理由

ゆめただのり
ゆめただ

途中で変更もできますが、色の設定箇所は複数あり、

再設定に時間がかかります

配色によって、サイト全体の出来上がりイメージが変わってきます

初めにしっかり決めてしまいましょう!

Design Color

ブログサイトの配色を決めるポイント

ポイント

 初めに、ベースとなる配色を決めてから、サイトを作成しましょう。

 基本の3色をきめましょう!

 この3色が決まれば、ブログサイトのイメージが固まります

 

この色を決めよう!

  1. ベースカラー:背景色
  2. メインカラー:基調色
  3. アクセントカラー:注目色

ゆめただが試行した配色デザイン例

biz-sel.com-base-color

色(カラーコード)の定義について

ゆめただのり
ゆめただ

色(カラーコード)の定義について、説明しておきます。

カラーコードは、RGB(赤(Red)・緑(Green)・青(Blue))

それぞれの濃さで表現します。

「#000」や、「#f0f0f0」などがこれに該当します。

カラーコード指定方法

色から受ける印象は変わる

ゆめただのり
ゆめただ

サイト全体から受けるイメージは、配色によって違ってきます。

各色から受けるイメージをまとめておきます。

色から受けるイメージ例

赤(レッド)   情熱的・活動的・熱い・怒り

桃(ピンク)  女性らしさ・甘い・若い・かわいい

橙(オレンジ) 明るい・健康的・暖かさ・楽しさ

青(ブルー)  クール・爽やか・冷たさ・静かさ

黒(ブラック) クール・強さ・高級・真面目

灰色(グレー) 控えめ・落ち着き・シック

Design team

サイトの色を決める3つの方法

方法1:テーマのデザイン例を参考に決める

 選んだテーマのデザイン例をもとに、配色を決めていくのもいいでしょう。

 テーマのサンプルサイトもどれも完成度が高く、配色は考えてデザインされています。

 イメージに合うものがあれば、選んでも間違いはないと思います。

 この記事に、ゆめただが調査したテーマのデモサイトの一覧をまとめていますので参考に。

関連記事
reason-why-I-recommended-affinger_new2
AFFINGER6(アフィンガー6)を初心者におすすめする5つの理由【後悔しないテーマ選び】

続きを見る

 こちらも参考にしました。AFFINGERテーマで作成されたブログサイトが紹介されたページです。

 NOJIBLOGさん、TsuzukiBlogさん、LIABLIFEさん、monogrowさん、WAROCOMさん、HAYAMIZ BLOGさん

 などなど、ゆめただも目指したいサイトが満載です。AFFINGER検討中の方はチェック!

\自由度の高いAFFINGERで作成されているサイトの紹介【公式ページ】/

AFFINGERで作成されているサイト紹介

方法2:Web配色デザイン例を見て決める

ゆめただのり
ゆめただ

ゆめただは、Webデザイン用の本を購入し、

デザイン例を見ながら検討しました。

中でも、「配色アイデア手帖」が非常に参考になりました。

 ゆめただが実際に購入した「配色アイデア手帖」の情報を掲載した書籍紹介ページです。

 具体的なサイトのイメージと、使用されている色の名前色コード(#×××)が掲載されています。

 色の種類を知るだけでも、価値のある書籍です。

方法3:ユーザー目線で色を決める

 ユーザー目線(誰向けのサイトなのか)で、色を決める方法です。

 「色カラー」の情報サイトから、性別と年齢の嗜好を調べて基本色を選ぶ方法もアリでしょう。

 ゆめただは、このサイトを参考にしました。有益な情報が多いサイトです。

 実際にアンケートを取った結果が掲載されています。

 性別、年齢とわず人気の色は、「ブルー」「ピンク」のようです。

Mobile user

カラーコードの調べ方

ゆめただのり
ゆめただ

サイトに設定したい色がわかっても、カラーコードがわからないと

設定することができません。

他サイトで使用されているカラーコードの調べ方について説明します。

 「ColorPick Eyedropper」というGoogle Chromeの拡張機能を使います。

Google Chromeの拡張機能を追加する

 次のリンクから、ColorPick Eyedropperの拡張機能のサイトに移動します。

ColorPick Eyedropper

機能拡張ページに移動したら、「Chromeに追加」をクリックします。

ColorPick Eyeddropper-install

 確認画面が表示されたら、「拡張機能を追加」をクリックします。

ColorPick Eyeddropper-yorn

右上の機能拡張ボタン(パズルマーク)をクリックし、ピンを立ててツールバーにアイコンを表示させます。

Chrome-setting

 このようなアイコンがツールバーに表示されます。

Colorpick Icon

ColorPick Eyedropperの使い方

 調べたいサイトに移動して、先ほどのアイコンをクリックします。

 カーソルが出てきたら、調べたい色のところにカーソルを重ねます

 すると、#の後にカラーコードが表示されます。

 カーソルは、「ESCキー」で消えます。

Colorpick useway

 

ポイント

調べて決めたベースのカラーコードは、記録しておきましょう。

サイト作成時に、カラーコードを設定する場面が出てきます。

 以下も参考にしてください。

ゆめただのり
ゆめただ

 ブログサイトの配色は、サイトのイメージを左右するため非常に大切です。

 初めにしっかりベース色を決めておくことをおすすめします。

 本記事で配色を決めて、ブログサイトの制作が進めば幸いです。

 

-ブログ