元サラリーマンブロガーなつのプロフィール

配色パターン3色だけでセンスの良いブログにする方法!気を付けるポイントとは。

こんにちは!ブログ運営半年で月20万超の元サラリーマンブロガーなつです。

優秀な色のパターン一覧サイトや色のイメージが頭でわかっていても合わせる際に迷いませんか?

例えば、「Color Hunt」というパターン一覧サイトのパターン通りに実際に試してみると、あれ・・・なんか違うとなることがあります。

カラーパターン成功例


カラーパターン失敗例

(双方、THE THORというテーマを使っています)

左の色合いはなんとなく統一感があり感じが良いですが、右の方は色味がチグハグでブログを見ていて違和感があります。(好みによりますが・・・)

なつ
左は同系色+グレー、左は同系色+反対色なので少しイメージが変わってきています。

カラーパターンに頼りすぎるとブログそのもののイメージを左右してしまいますので、カラーパターンサイトを使いながら自分でできる超カンタンな方法をお教えします。

ここでは、配色パターン3色を使いこなすコツをお伝えしていきます。

 

配色パターンツールを使う前にまずはイメージを整理する【3色選ぶ前にすること】

配色ツールを最初に見てしまうと、たくさんの色があるので迷ってしまいます。きれいに見えるパターンがあると「あれにしたい、これもいい」とカスタマイズしていくうちに疲れるのです。

ブログでは書きだすまでにいろんなものをダウンロードしたり設定したりするので、配色までいくともう力が残っていません(笑)

なので、初心者の方、色難民になっている方におすすめの方法を伝授します!


おすすめ!
 2~4色でカッコいい配色にするならコチラの記事(初心者でも配色がおしゃれにできる!)も参考になります!

最初に大きなイメージを持つ

特化型ブログを作るとすれば、注目するネタがあります。ブログを読んでくれるターゲットもあるでしょう。

その部分からでもイメージは膨らむと思います。たとえば「コーヒー」のブログならブラウン、「イチゴ」なら赤、「スイーツ」ならピンクなどざっくりと中心になる色を考えます。

 

イメージの例
  • 日本茶・・・緑
  • 紅茶・・・赤茶色
  • チョコレート・・・濃い茶色
  • 育児・・・黄色(パステルカラー)肌色
  • 美容・・・紫
  • スポーツ・・・水色

最初の1色を決める時はざっくりでOK。ブロガーの趣味というよりも読む人がどうイメージできるかなので、「この色が好き!」と決めてしまうと失敗します。

育児ブログに黒と紫とか使っていたら訪問した読者もびっくりしますし居心地悪いですよね。色はすべての印象の元になりますので、一般的なイメージで決めてください。

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

【初心者必見!】THE THOR(ザ・トール)の購入特典!割引についても調査!【WordPressテーマ】


※今なら、8大購入特典をお付けしています!

 

配色パターンを使う前に個別の色のイメージを確認【3色バランス】

色は見ている人の心理に影響するのはご存知でしょうか?私はインテリアコーディネーターの資格を持っているのですが、室内の色合いなんかも実は微妙に調整されています。

古い病院なんかは、白一色で清潔感を出していましたが、最近では淡いピンクとかベージュを用いている病院も多くなりました。

これも色の持つイメージで少しでも患者さんがリラックスできるように調整しているのです。白だけだと冷たい印象があり殺風景なので、最近では少しでも気持ちが楽になるように暖色系のパステルカラーにしてあります。

個別の色のイメージ

  • 赤色・・・活動的・生命・情熱
  • 青色・・・冷静・安静・安全・平和・理性
  • オレンジ色・・・健康的・元気・親しみやすい
  • 黄色・・・幸福・希望・調和・子供っぽさ・お金
  • 緑色・・・自然・平和・健康・安らぎ
  • 茶色・・・落ち着いた・堅実・古い・しきたり
  • ピンク・・・かわいい・若い女性・やわらか・アイドル
  • 紫・・・高級・神秘的・大人・高貴
  • 黒・・・強さ・クール・信頼
  • 白・・・清潔感・真面目・善

 

上記の色でイメージできるブログのジャンル

個別の色からもイメージできない方のためにブログジャンルに合わせてみます。(あくまでも個人のイメージです)

  • 赤・・・ファッション・恋愛・美術・お花
  • 青・・・クラッシック・歴史・投資・資格
  • オレンジ・・・ペット・グルメ・芸能・お笑い
  • 黄・・・育児・雑貨・投資・占い
  • 緑・・・園芸・政治・健康・ダイエット
  • 茶・・・起業・シニア・経済
  • ピンク・・・アイドル・芸能・ポエム・雑貨
  • 紫・・・ホテル・宝石・社交ダンス・香水
  • 黒・・・車・不動産・ガジェット
  • 白・・・メンタルヘルス・企業・結婚

 

「にほんブログ村」のカテゴリーをイメージにあてはめるとこのように分類できます。

 

↓ 芸大出身のなつが作ったTHE THORのオリジナルデザインです。購入特典です。

THE THORなつ特製オリジナルデザインマニュアルプレゼント中!
今大人気のWordpressテーマTHE THORのオリジナルテンプレート6種類ができました!

このブログからTHE THOR(ザ・トール)をご購入くださった方に特典としてマニュアルをプレゼントしています。マネするだけでデザイン変更が簡単にできます。

ガーリー

シンプル
オーガニック


※残りの3種類とブログの全体像は以下の記事で見れますのでよかったらご覧ください。

⇒ 【簡単な使い方】THE THORデザインの事例集6選!初心者でも作れるアレンジを紹介!

//今なら、なつ特製オリジナルデザインマニュアル付き!\\

【初心者必見!】THE THOR(ザ・トール)の購入特典!割引についても調査!【WordPressテーマ】

配色パターンで使うものはひとつのツールのみ!【3色以上でも同じ】

特に初心者さんや、あまりセンスがないと感じる方は、たくさんのツールを使うより基本のものをひとつだけ使うことをおすすめします。

どんなものを基本のツールにすればいいの~?という方は以下の記事を見て選んでください。

Webで簡単に配色が作れるツールはこれだけでOK!色の迷子にならない厳選10選!

 

基本のツール 「原色大辞典」

私が使っているのはこの「原色大辞典」のみです。自動で配色を出すツールなどは使い方によっては違和感を感じるので、色を選びながらできるツールで作成しています。

出典:原色大辞典

原色大辞典は、「原色」「和色」「パステルカラー」「ビビッドカラー」「モノトーン」「メトロカラー」です。

その他、「配色パターン」「配色大辞典」「色検索」もあります。

ビビッドカラーやメトロカラーはあまり使いませんが、その他は使いやすいので便利です。

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

※今なら、8大購入特典をお付けしています!

原色大辞典を使って自分の配色パターンを作っていく【3色の基礎色】

1番初めにブログのイメージで色を選びました。その色を基礎にして自分の配色パターンを作っていきます。

ここでは、例を挙げて作成していきます。

作るブログの内容

  1.  チョコレート専門店の口コミブログ
  2. 育児ブログ

ざっくりとした内容ですが、簡単な配色のパターンを考えていきます。

 

3色の配色パターン作成 STEP 1   「基礎の色を決める」

今回は、カフェの口コミブログと定義しました。ここからは連想ゲームのようにしながら基礎の色はざっくりと決めて大丈夫です。

1.  チョコレート専門店の口コミブログ

チョコレートはやはりカカオの茶色のイメージがあります。その他、色辞典では近い色として「チョコレート(#6c3524)」や「カフェオレ(#946c45)」という色もありますので基礎の色としても良いでしょう。

  • カカオ ⇒ 茶色
基本色: チョコレートchocolate
(#6c3524)

 

チョコの茶色を少しセンスよくしたいなら、深いピンクを入れるとかっこよくなります。茶色ばかりおなじ系統にすると若干ぼや~んとした感じになるので注意。

ピンク以外なら、水色や青系も良い雰囲気になります。しかし黄色とか肌色はNG。

 

2. 育児ブログ

育児ブログの基礎の色はやはり黄色や肌色が思い浮かびます。パステルの色ならなんでも合うと思いますので、好きな色を選んでください。

  • 赤ちゃん ⇒ 肌色・クリーム色

 

基本色:菜の花色 なのはないろ
(#ffec47)

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

※今なら、8大購入特典をお付けしています!

3色の配色パターン作成 STEP 2  「2色目はグラデーション」

基礎の色が決まったら、次の色は同系色のトーンを落とした色を選んでください。同系色とは、同じ系統の色のことです。例えば、赤なら赤紫、朱色など赤味かかった色のトーンを下げると出来上がりますし、原色大辞典のその色から下になぞっていくとたくさんの色があります。

 

1. チョコレート専門店の口コミブログ

基本色のチョコレートから徐々に薄くなると、アーバンローズ、ネールピンクとなります。こういったよく似た色同士は相性が良いので、色合わせが苦手な人ならこの方法がおすすめ。

アンバーローズ amber rose
(#e6bfb2)

ネールピンク nail pink
(#fce4d6)

 

2. 育児ブログ

育児ブログの方は「原色大辞典」のパステルカラーからピックアップしています。淡い色同士はどんな色を合わせてもよく合いますので冒険しても大丈夫。

 

  • #ffffd1
  • #ffd6d6

これらの色を組み合わせるとほんわかしたイメージが出来上がります。もちろんこの中の色の緑や水色を合わせてもOK。

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

※今なら、8大購入特典をお付けしています!

3色の配色パターン作成 STEP 3  「差し色を決める」

本来なら指し色は色合いの良いものであればなんでもOKです。同系色もしくは反対色から差し色を決めていきます。

違う色であってもトーンを落とすと結構なんでも大丈夫なので試しながら色を入れてください。

差し色がないと、見た目にはおさまりが良くても全体的にぼんやりとした印象になり、つまらなく感じることもあります。

そこで、ほんの少しだけでも色味を変えると引き締まります。

 

3色の配色パターン作成 参考 「反対色」

反対色とは補色、対照職とも言います。色相環の反対側にある色のことで、赤⇔緑 黄色⇔紫のような組み合わせ。

 

出典:Wikipedia

 

基本の色の反対色を面積の少ない場所に使うことで目につき印象に残ります。

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

※今なら、8大購入特典をお付けしています!

3色の配色パターン作成  「完成図」

3色その他、メインビジュアルの画像を設定しただけで以下のようなTOPページとなります。1は同系色のみで構成、2は少しだけ差し色を入れています。

 

1. チョコレート専門店の口コミブログ

こちらは、最初の1色の近い色をピックアップして配置していっています。元の色が濃いのと赤味がありますので近い色はかわいい系の色とで微妙にバランスが取れました。

↓ クリックすると拡大します。

 

 

2. 育児ブログ

育児ブログは、上部の注目ワードのボタン部分はパステルのピンクを持ってきています。赤ちゃんのの産着によくある色を集めるとそれらしくなります。

子供の成長に合わせて徐々に色を変えていっても面白いかも。

 

↓ クリックすると拡大します。

 

 

基本さえ決めればおさまりのよい色合いになりますので、試してみてください。

 

↓ このブログから大人気のTHE THOR(ザ・トール)を購入くださった方に特典をプレゼントしています。

【初心者必見!】THE THOR(ザ・トール)の購入特典!割引についても調査!【WordPressテーマ】

初心者だからこそWordpress有料テーマ を使うべき理由

無料テーマを使うことで時間の無駄遣いをしていませんか?

  • 思い通りのデザインにできない
  • なかなか稼げない
  • アクセス数が増えない

こんな悩みを抱えていませんか?

 

稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。

 

Wordpressの有料テーマができる5つのこと

  1. 検索上位を目指せる
  2. 見た目が綺麗でおしゃれになる
  3. 機能が豊富で出来ることが多い
  4. 会員フォームなどのサポート
  5. 有名ブロガーも有料テーマを使っている

これまでにあげた5つの有料テーマの特徴を説明していきます。

1. 検索上位を目指せる

ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO(SearchEngine Optimizationの略)です。

 

  • 情報の信頼性
  • ユーザーへの役立つ情報であるか?
  • スマホ・PCなどでストレスなく使える

 

などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。

 

2. 見た目が無料テーマ以上に綺麗になる

シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。

有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。

出典:THE THOR 着せ替え「01」

↓ クリックで拡大します
出典:特製THE THORオリジナルアレンジ

 

3. 機能が豊富でできることが多い

今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。

4. 会員フォーラムなどのサポート

なにかわからないことがあった場合、相談できる場所があるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。

5. 有名ブロガーも多数使用

稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。

もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。

カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。


当ブログおすすめのWordPressテーマ!

 

WordPressテーマ「THE・THOR」

  • 高機能の最新テーマで有名ブロガーも使用
  • 着せ替え機能でいろんな用途に使える
  • 複数のブログに使える(本人のブログ)
  • 会員フォーラムやマニュアル完備

 

シェアしてね!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です