ブログの配色とSD法

ブログが作りたい!色の世界 > ブログの配色とSD法

ブログの配色とSD法

ブログの配色

ブログの色を決める

私は、配色が、ヒジョーーーに苦手です。

当ブログの配色を考えるときも、けっこう悩みました。とてもじゃないけれど、何か指標となるものがないと、決めかねます。

今回は、そんな人のためのお話です。

▲ページの先頭に戻る

配色の重要性

1:ブログのイメージ

みなさんがテンプレートを選ぶときに、最初に選択するのは、漠然としたイメージではないかしら。

「落ち着いた感じ」とか、「ダークな感じ」とか、「楽しい感じ」、「爽やかな感じ」など、おそらく無意識に選んでいることが多いと思います。

この漠然としたイメージというのは、とても「色」と強く係っています。

あなたが何気(なにげ)なく選んだブログのイメージカラーは、実はとても重要な意味をもっているのです。

▲ページの先頭に戻る

2:好きな色で決めていませんか?

そして問題なのは、あなたの選んだ色が、必ずしも読み手のフィーリングとかみ合うとは限らないことです。

ちょっと極端な例を書きます。例えば、あなたがウェディングをテーマにしたブログを書くとします。

そこで、仮にあなたは黒色がとても好きだとしても、背景を真っ黒にしたりするでしょうか?

あまりにもテーマと、ブログのイメージカラーが真逆です。

「ちょっと、これどうしちゃったの?」「あなたの人生に何があったの?」などと思われてしまうかもしれません。

▲ページの先頭に戻る

3:ブログの配色の重要性

ブログの配色は重要です。

もしあなたが、より多くの人にブログを読んでもらいたいと思っているのなら、とても重要なことなのです。

ブログのイメージカラー(配色)を、「自分が、好きだから!」というだけで、ひとりよがりに選んではいけません。

読む人の立場にたって、居心地の良い色を選ぶ必要があるのです。

▲ページの先頭に戻る

色の印象

それでは、まずはじめに、あなたのブログの主要な配色が、一般的に世の中の人たちにどのような印象を持たれているのかチェックしてみましょう。

*:もちろん、その人の生活環境や時代によっても印象は違ってくるものなので、参考程度にどうぞ。

色名

抽象的な印象

具体的な連想

灰色

陰鬱、地味、迷い、沈静、平凡

曇り空、煙、灰、ねずみ

高級、厳粛、死、ダーク、不吉、陰気、男性的

炭、夜、海苔(のり)

葡萄色

高貴、悲哀

ブドウ、茄子(なす)、ラベンダー

高貴、優雅、嫉妬、神秘、セクシー、情緒不安定

すみれ

青紫

高貴、気品

紫陽花(あじさい)

桔梗色

高貴、優雅

キキョウの花の色

藍色

深遠、沈静、希望

海、藍(あい)

藤色

明快、温情、女性的

フジの花の色

静寂、知性、希望、悠久、誠実、孤独、男性的

海、空、地球

空色

希望、清浄、平和、理想、清涼

空、水

水色

沈静、爽快、清涼、淡泊、清浄

空、澄んだ水、ガラス

青緑

沈静、深遠、厳粛

深海

薄緑

青春、希望、平和

若葉、若草

白緑

希望、明快、清涼

緑青(ろくしょう)

平和、公平、希望、安全、新鮮、癒し、中世的

植物、葉、草原、キャベツ

深緑

深遠、陰気

森林

草色

陰鬱、陰気

草の葉の色

鶯色

素朴、陰鬱、猜疑

うぐいす

オリーブ

沈静、寂寞(じゃくまく)、汚濁

オリーブ

黄緑

希望、平和、青春、明快

若葉、若草

平和、光明、軽快、明快、活発、警告、軽率、幼稚

バナナ、レモン、向日葵(ひまわり)、月、ひよこ

山吹色

快活、光明、明快

山吹の花

温情、懐古、陽気、快活、家庭的

蜜柑(ミカン)、夕焼け、紅葉、柿

情熱、勇気、革命、危険、激しい愛、怒り、争い、興奮

火、薔薇(バラ)、血、太陽、消防車、リンゴ、苺

赤紫

熱烈、優美

牡丹

桃色

女性的、可愛い、温情、幸福、やさしい愛、素直、派手

桃、口紅、チーク(頬紅)

臙脂

平凡、素朴、沈着

小豆、臙脂(えんじ)

赤茶

剛健、堅実

土、チョコレート

樺色

堅実

れんが、樺(かば)の樹皮

褐色

剛健、硬さ、正統派、素朴、安心、古風

ライフセーバー

こげ茶

渋い、苦み、古典

駱駝色

平凡、中性、素朴

らくだ、ばばシャツ

クリーム

未熟、明快、平和

カスタードクリーム

ベージュ

平凡、中性

天然の羊毛

はだ色

明快、平和、温和、甘味

桜色

優美、喜悦、甘美、女性的

桜、コスモス

清潔、純粋、潔白、清楚、衛生、誠実、空虚

雪、砂糖、塩、うさぎ、牛乳、白衣

▲ページの先頭に戻る

SD法で色をしぼりこむ

ちょっと色に対して興味がわいてきたかしら?それでは、もう少し話を実践的に進めてみましょう。

1:SD法とは?

SD法(Semantic Differential method)は、ご存知かしら?

「セマンティック(意味)を、ディファレンシャル(判別)する方法」(意味差判別法)です・・・訳分かんないですね。

簡単に言うと、人間がその対象にもつ印象を、数値化する技法です。(定量的測定法)

例えば、「好き / 嫌い」、「強い / 弱い」、「かっこいい / ださい」などの相反(あいはん)する形容詞対の質問をして、その対象についての印象を5段階評価してもらって、数値化するわけです。(7段階評価の場合もあります)

SD法の提唱者は、米国の心理学者C.E.オスグッドさん(C.E.Osgood)です。

▲ページの先頭に戻る

2:SD法の例

話がややこしいので、少し具体的にしてみましょう。

例えば、みなさん一度は、次のようなアンケートを書いた経験があるのではないかしら。

アンケート

年齢( ) 性別( )

Q1:ブログを読むのは好きですか?

  • 大嫌い
  • 嫌い
  • 普通
  • 好き
  • 大好き

Q2:ブログについての印象は?

  • 超ださい
  • ださい
  • 普通
  • かっこいい
  • 超かっこいい

例えば、このような質問を並べたアンケートを集計すると、性別、年代別にブログへの印象の度合いが分かるわけです。

質問の内容が良いほど、どのようなユーザをターゲットにするべきか?どのようにアプローチすれば良いのか?などが見えてきます。

▲ページの先頭に戻る

3:SD法をブログ作成にどのように使うのか?

さて、このSD法を、どのように活用すれば良いのかと言うと、あなたがターゲットと想定しているユーザタイプに合わせたブログを作成していけば良いわけです。

例えば、アンケートの結果、次のような傾向があるとします。

  • 女性の方が、関心度が高い。
  • 最も10代が、興味を示している。
  • 刺激を、求めている。

などなど。

今回は、配色のお話なので、色について考えてみると、「桃色(ピンク)」をベースにして、相性の良い「白色」を合わせて、ポイントカラー(アクセント)として、「赤色」を用いてみてはどうかしら?だとか。

「桃色(ピンク)」は派手過ぎやしないかな?もう少し、「桜色」に近い方が良いのではないか?などと決めていくわけです。

ちなみに、当ブログ(「ブログが作りたい!」)が、橙(オレンジ)と白色を基調としているのは、「明るさ」、「清潔感」、「のんびり」、「温かさ」などを意識してのことです。

何も考えていないように見えるかもしれませんが、実はブログの方向性にそった色にしてあります。

▲ページの先頭に戻る

4:SD法の問題点

しかし、SD法にもいくつか問題点があります。

  • アンケートの結果が多ければ多いほど精度が増すけれど、少ない場合には参考にならないかもしれない。
  • 質問の仕方によって、結果は大きく左右される。(質問を考える人は、ある程度の熟練度が必要です)
  • 選択肢の順番によっても、結果は大きく異なる。
  • 考え方が多様化してきているので、平均的な数値が意味をもたない場合もある。

などなど。

問題点を理解し、配慮した上で行う必要があると思います。

また、「アンケートって、誰にやればいいってのよ?個人でブログをやっているのにさぁ」という人もいらっしゃるのではないかしら。

そのような場合は、質問ができるサイトを利用するのもひとつの方法かと思います。

あまり精度が上がらないかもしれませんから、あとは、友人、知人などに頼んで、アンケート用紙ではなく、実際に話して聞いてみると、うまくデータのバランスが取れるかもしれません。

▲ページの先頭に戻る

あとがき

みなさんのブログを拝見させていただくときに、最も困るのが、私の場合は「色」なんです。ローブローのように、じわじわ効いてきます。

例えば、黒系の背景に、黒系の文字を使っていたりすると、「読ませないようにしているのかしら?」と思って、早々に退散します。

いくら斬新でかっこいいデザインだとしても、読みにくかったら意味がないのです。また、リンクにしてもリンクだと分からないような色にしていたら、誰もクリックしないのです。

世界の平和のためにも、ちょっと、考えてみて欲しいんだなぁ。

▲ページの先頭に戻る

追記

配色について、次のサイト・記事が参考になりそうです。

▲ページの先頭に戻る

次回予告

次回は、色見本(HTMLカラーチャート)について書いています。

▲ページの先頭に戻る

関連記事

配色に関連する記事を、ご紹介します。

▲ページの先頭に戻る

作成日:2008/02/21 更新日:2009/03/30

|「色見本(HTMLカラーチャート)」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

お初です!

今日FC2ブログを保はじめました!色の重要性について楽しく分かりました。これからも読ませていただこうと思います。

はじめまして!

†ダレン・シャン†さん、こんばんは!(・∀・)/
コメントありがとうございます。


色って難しいですよねー。(´Д`;)
なかなか正解って、みつからない感じがします。

青空日記・・・おされですね。

今後もよろちくび、お願いします。ヾ(*´∀`*)ノ

ここまで考えてなかったワ・・・^^;

うーーーん、奥が深いですねえ@@;
テンプレートとか作るのなんて考えられなくて、気にいったの選んでましたヨ^^;お空が好きでさっぱりすっきりしていいかな♪みたいなw
記事内は白だから文字の色を何色に変えても大丈夫なように、くらいしか考えてなかったです^^;

実際、文字がほとんどの記事を作成しているので、アクセントをつけるのに色を文字につけるのですが・・・

ハイ!質問です^^;w
数回記事を書いて、なんとなーくわかったのですが、色つけするのにツールバーで、パレットみたいのあるんです。最初、それで文字に色をつけてたのですが・・・なんだかうまくできない・・・
いろいろやってみて、T(テキスト?)のボタンで出来るのだとようやく気付きました(T▽T)
バケツ?みたいので塗りつぶし♪(wordのツールバーに似た感じ?)

で、最初に使ってうまくできなかったパレットみたいのは、どうゆー場合に使うものなんでしょう?
多分、テキストのツールバーなので普通はこれで色つけするのかな?
高機能ではT、バケツ?でやるのかな?
それとも、パレットでは、何か・・・例えば背景色とか塗れるのかな?
よろしければ、また教えてくださいませ^^;

文字の色付け

ありんこさん、こんにちは!(・∀・)/ぐもに
コメントありがとうございます。

【1】色選択

「色」って、人の感情にうったえかけてくるものなので、
大切なんですよね。(*'‐'*)

ブログのテーマに一致したものを選ぶと、
やはり効果が違うようです。

文字色にしても、警告的に強調したい場合は、
自然と赤色系を使ったりしますものね。


【2】高機能テキストエディタでの色付け

標準モード用のパレットのようなボタンと、
高機能モード用のT・バケツボタンは、

基本的に、それぞれのモードで使うものです。

ただ、高機能モードの場合は、
標準モード用ボタンも使える状態にあるので、

どちらのボタンでも使うことができます。


・・・で、問題が起こるのは、
おっしゃっている通り、混在して使ってしまった場合です。

ソースコードを見ると、指定の仕方が違うため、
重なってコードが挿入されてしまうようです。

ですので、トラブルを避けるためにも、
どちらか片方のボタンだけを使ってください。(´▽`)♪

また、バケツボタンは、文字の背景色になりますが、
これって、ちょっと見にくくなりますよね。

あまり使用にたえる感じではないかもしれません。


> 最初に使ってうまくできなかったパレットみたいのは、
> どうゆー場合に使うものなんでしょう?
> 多分、テキストのツールバーなので普通はこれで色つけするのかな?
>
標準モード用です。


> 高機能ではT、バケツ?でやるのかな?
>
そうなります。
パレットのようなボタンより優秀です。


> それとも、パレットでは、
> 何か・・・例えば背景色とか塗れるのかな?
>
パレットのようなボタンで背景色は、塗れません。
文字の背景色は、バケツボタンになります。

文字の背景色を使う場合は、
パレットのようなボタンを使わない方が、失敗しません。

にゃるほど!

やはり標準と高機能でダブってるんですねw
Tとバケツwにします♪
試しにバケツで塗りつぶしてみましたが、薄めの色を使わないと見ずらいですね^^;

実験してみないとわからないとこでしたがw
うん♪パレット封印しますw
ありがとうございましたあ^0^

T&バケツ

ありんこさん、こんばんは!(・∀・)/ぐいぶに
コメントありがとうございます。

そうですね。
「T&バケツ」だけにした方が良いと思います。

バケツは、もう少し内側に余白があるといいんでしょうけどねー。

標準モードに付け足しで、高機能モードを加えたから、
何かこうチグハグした状態になっているんでしょうね。

まぎらわしい。(´Д`;)

勉強になりました。

こんにちは。
配色のことで何がいいのかわからず、コチラにお邪魔しました~。勉強になります!

会社のホームページを一新したく色々試行錯誤してます。

なんだか強調したいバナーなどを派手な色で作ったりすると、周りとのバランスが悪くなったり、サイトの印象が散らかったような感じになったりします。。

見やすいな~と思うサイトは薄~~い緑っぽい色や、薄~~いグレーを上手く使っていて非常に見てる側も安心してみれます。難しいだす。。

見て欲しいイメージを加工しすぎると気忙しい感じになるし、シンプルにいこうとするとテキストまみれで見難いし。。
SD法でもう一度、やってみます!

Hey Shock!

BILLS nagaoさん、こんばんは!( ・∀・)ノぐいぶに
コメントありがとうございます。

配色・・・難しいですよね。

そこで、参考になりそうな配色に関する記事を、
メールで送りましたー。

良かったら、ご覧くださいませー。(´▽`)♪

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/190-4d34525e
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて