読者です 読者をやめる 読者になる 読者になる

非アクティビズム。

面白いことへの探求メディア

「ウェブ配色ツール」で統一感を!あなたのブログカラーは何色ですか?

ガジェット関連 スマホ・アプリ
広告

こんにちは、ツチヤです。

大分前から気付いてたんですけど…。記事書いても書かなくてもアクセス数ってあんまり変わらないんですよね。

当初、スタートの頃は「一日三記事」という謎の使命感と情弱丸出しの、「とりあえずやってみたらいいんじゃん?」でブログ続けてきたんですけど、良くも悪くもブログにどっぷりつかってきたことにより、これまでほとんど触ることのなかったインターネッツの世界に入っていきました。

そんなこんなで否応なくインプットも増えていき、諸先輩方の記事をみたり、自分で色々やってみた結果、「多更新無意味じゃね?」という結論に行きつきました。厳密にいうと多更新も決して無意味ではないと思います。ただそこには内容が必要で、コンテンツが重視されるわけです。これに関しては今更なので、ご自身で検索するなりしてもらえばいいと思いますggrks

それはそうと、かつてのスタンスの通り、「とりあえずやってみたらいいんじゃん?」という姿勢は相変わらずなので、お気づきの方もいるかもしれませんが少しデザインやらカラーをいじりました。本日はブログの色の話。

 

 

仮説は正しいかもしれない

完全にドブ沼にズブズブ沈みながらも独自の路線で突き進んでいる Toma_G (id:tomag)氏がこんな記事を書きました。
「ブログの色」と「広告クリック率」の関係。 - とまじぃさんち 「ブログの色」と「広告クリック率」の関係。 - とまじぃさんち

デザインの差でどの程度クリック率に差がでたのかなどを検証しています。僕はこの記事にこんなコメントを残しました。

「ブログの色」と「広告クリック率」の関係。 - とまじぃさんち

色との因果関係はあると思う(とまじぃさんが何色かは知らない。そして根拠はない。)

2016/04/19 08:51

 

色の影響力が大きいのは明白

ぺんてる クレヨン  PTCR-16  16色

実際色ってすごく大事ですよね。ファッション業界はじめ、広告、空間デザイン、ウェブデザイン、その他諸々、色を生業とする業種も多岐にわたります。記事内まとめに書いているように、

「クリック率の高い広告の配色」とかの話題を扱ってるサイトは多々あるけれど、「クリック率の高いサイトデザイン」となるとあまり見当たらない。

「ブログの色」と「広告クリック率」の関係。 - とまじぃさんち

実はこれ、僕も少し感じていたことで、これがわかれば丸パクリしたのにあまり言われることってないような気がします(言われてないからこそどうでもいいことなのかもしれませんが)。ただ、アイコンやアイキャッチと同様、カラーは大事なんじゃないかと思うんです(根拠はない)。

 

 

イメージカラーを少し学ぶ

あなたのブログは何色?

ここからは自身がやったことも含めて記述していきます。下記サイトを参考にしてみました。

Webデザイン 配色をイメージで学ぶ【基本11色】 : アシアルブログ Webデザイン 配色をイメージで学ぶ【基本11色】 : アシアルブログ

あまり新しい内容ではないですし、どこかで見たことがある内容といえばそれまでですが、カラーによって与えるイメージをまとめています。記事内の内容を大きく分けると下記の通り。

  • 赤(Red)情熱的な色
  • 緑(Green)エコな色
  • 青(Blue)知的、クールな色
  • 黃(Yellow)元気で活発な色
  • 橙(Orange)陽気な色
  • ピンク(Pink)可愛い色
  • 茶(Brown)うんこぬくもりの色
  • 紫(Purple)魅惑の色
  • 白(White)平和の色←反転すると白
  • 黒(Black)恐怖、不安の色
  • 灰(Gray)無機質な色

それぞれの色について与える印象やチョットした考察をまとめています。僕は素人なのであまり詳しいことは言えませんが、色彩心理学を少しかじったことがあり、何となくですが、比較的同じような内容だったのを覚えています。

 

便利なジェネレーター

幸い、オシャレなテーマを惜しげもなく公開してくださる人がたくさんいるので、素人でも見栄えのいいデザインにすることができます。

広告に対してのクリック率は計ることが出来るかもしれませんが、とかくサイトデザインやカラーに関しては、実際どの程度クリック率が増減するのかわかりません。もっと言えば、自己満でしかないかもしれません。ですが僕は「人と同じがイヤ!」な性分なので素人ながらいじることにしました(前からちょこちょこいじってましたが)。

上記記事内でも紹介されてますしウェブ制作では周知かもしれませんが、何これ、めちゃくちゃ便利ということで紹介しておきます。

ウェブ配色ツール Ver2.0 ウェブ配色ツール Ver2.0

ホームページ制作会社のフォルトゥナ製作の便利ツールです。

f:id:Daisuke-Tsuchiya:20160419152458p:plain
photo by http://www.color-fortuna.com/color_scheme_genelator2/

一色テーマカラーを決めれば、メニュー、見出しなど他のところまで全て決めてくれます。使い方から説明まで細かく書いてくれているので、触ってみれば一瞬でわかると思います。

www.color-fortuna.com

 

やったこと

見ればわかるんですが、カラーを変えたところを備忘録も兼ねて説明していきます。※ビフォアのスクショ撮り忘れました。もう少し淡い色で全て同色にしてました。 

f:id:Daisuke-Tsuchiya:20160419154639p:plain

①ヘッダー&フッター
②グローバルメニュー
③ドロップダウンメニュー
④サイドバーモジュール※サイドバーモジュールは気に入らなかったので既に変えてます。

上記箇所の色を変えてみました。因みにスマホ版だとこんな感じです。

f:id:Daisuke-Tsuchiya:20160419155147j:plain

統一感出たと個人的には思うんですけどどうでしょう。さらに迷走してしまった感が否めないのは内緒の話。

 

 

まとめ

というわけで当ブログのイメージカラーはの中間色です。つまり知性のある誠実さとエコなどの自然を配慮した色使いになっています。ピンクはまぁアレがアレです。そんなこと一切考えずに思い付きで決めましたが、当ブログのコンテンツにぴったりな色になった思います。

どちらにしても凄く便利なジェネレーターだったので、今後も飽きたらバンバン変えていきます。統一感出したいならお勧めですよ。

以上。

ウェブ配色ツール使ってみたけどなにか?

Copyright© In-Activism All Rights Reserved.