こんにちは！ブログ運営半年で月20万超の元サラリーマンブロガーなつです。
Webでは工夫をこらした配色ツールがあります。とても使いやすくおすすめな反面、うまく使えなければ居心地が悪かったり目がチカチカするサイトになってしまいます。
洋服でもそうですが、きれいな色同士を合わせてもあまりよく見えないこともありますよね。それと同じでブログを配色のツールでそのまま配置しても、そのブログに合っているのかが大事です。
そこで、配色ツールを使ってブログデザインを調整する方法などをお伝えしていきます。
ブログの配色組み合わせのツールとは？
ブログの配色ツールは外国のものも日本で作られたものもあります。それぞれ奇抜なものもシンプルな色合いもありますが、何に適用するのかでイメージがかわります。
ツールが使いやすいのは、登録を必要とせずすぐに使えること、Wordpressテーマなどは色番号がわかればすぐに変更できることなど便利な部分が多いです。
おすすめ配色ツールについては以下の記事で書いていますので、いちどチェックしてみてください。
この記事では、配色ツールを使ってどのようなブログになるのか実際に見ていこうと思います。最後の章では、全部の色の違いを比較します。
ツールを使った配色組み合わせ 1. 「暖色系」
「Color Hunt」という配色ツールを使ってブログに色を配置していきます。色合いのカラーパレットには、そのまま使えるものとブログにはあまり向いていない色があります。
4色並べるととても良い雰囲気になっても、ブログのどの部分にどの色を配置するのかで雰囲気がガラッと変わります。
同系色だけ使う良い点としては、「まとまりが出る」のですが、若干つまらない印象もあります。そこで、タブの部分だけ反対色を配置するなと工夫するとちょっと目を引くのでおすすめです。
ここからは、配色ツールの色を配置し試しながら作っていきましょう。
出典：Color Hunt
- ＃FF6464
- ＃FF8264 ⇒ #FFD7CE
- ＃FFAA64
- ＃FFF5A5
暖色系の配色TOPページ組み合わせ完成図
前章のColor Huntのカラーパターンを実際のWordpressテーマに合わせてみましょう。THE THORの着せ替え「02」というデザインなのですが、大きく色を配置するのは背景くらいなので、背景部分を落ち着いた色に変化させればほぼ雰囲気良く出来上がります。
使用のテーマ：THE THOR「02」
このヘッダー画像にも同系色の色を重ねています。THE THORの場合には、カラーを重ねたり、ブラックのメッシュを重ねたりできるのでとても印象的なヘッダーが作れます。
全体の黄色っぽい色を削除して白にするともっと印象的になると思います。
このブログからTHE THORをご購入くださった方にマニュアルをプレゼントしています。
※他のデザインは以下の記事で見れますので覧ください。
⇒【簡単】THE THORデザインの事例集6選！初心者でも作れるアレンジを紹介！
※ヘッダーの画像は、写真ACとイラストACのイラストレーターさん方の作品です。特典内でURLをお伝えしています。
ツールを使った配色組み合わせ 2. 「寒色系」
「Color Hunt」のサイトで一番人気の色合いです。2万人以上が「いいね」と同じ意味の「HOT」に投票したカラーパターンをブログに使用してみました。
これは、明るめの色を広い範囲に使い、暗めの色を小さい面積の部分に使う方が良いです。逆にすると「ギョッ」とするブログになったりします。
例えば、初めて訪問したブログの背景が黒でテキストが白だったら印象には残るもののかなり見づらくなるので、ユーザーにストレスを与えてしまいます。
出典：Color Hunt
- ＃222831
- ＃393E46
- ＃00ADB5
- ＃EEEEEE
寒色系の配色TOPページ組み合わせ完成図
上記の人気配色でブログを作るとこの画像のようなイメージとなります。テンプレートは、THE THORの着せ替え「02」を使って主要部分の色を変えてメインビジュアルの写真にブラックメッシュを重ねてあります。
使用のテーマ：THE THOR「02」
背景に白っぽい色、お知らせに黒っぽい色を使うと引き締まりますね。
THE THORのメインの画像にブラックメッシュを重ねるのが好きなので多用していますが、寒色系にもよく合います。（実は、ブラックメッシュは甘くなりすぎる場合にも調整役としてすごく良い仕事をしれくれます）
黒っぽい色は合わせにくいと思われがちなんですが、意外にも引き締め効果があり、ライン（今回はお知らせの部分）に使っています。
こういったサイトのカラーパターンは、寒色系の方がしっくりいくような気がします。
ツールを使った配色組み合わせ 3. 「パステル系」
もし色合わせに自信のない方はパステル系から始めてみてください。色の印象が弱いもの同士はとても配色しやすいです。
原色ならちょっと合わないような組み合わせもパステルならなんとかなります。パステルもしくはセピアくらいならほぼなんでも合わせられる初心者向きの配色です。
出典：CANVA
- ＃C1E1DC
- ＃FFCCAC
- ＃FFEB94
- ＃FDD475 ⇒ #FCEFD1
パステル系の配色TOPページ組み合わせ完成図
全部の色を使ってみましたが、背景については濃い色にしてしまうと目がチカチカするので、彩度を徐々に低くしていくとこんな感じになります。
もう少し色を落としても良いですし、パステルの場合には白でもかわいいと思います。
使用のテーマ：THE THOR「02」
パステルのピンクと水色って鉄板ですよね。この色合いは若い女性ターゲットなどで使えそうです。
ツールを使った配色組み合わせ 4. 「グリーン系」
センスの良いグラデーションが出てくる「Colorcode」。画面のカーソルで色を作っていくとこんな感じになります。
出典：Colorcode
- ＃80A93C
- ＃9AC353
- ＃B0D278
- ＃C7DF9E
- ＃DDECC4
グリーン系の配色TOPページ組み合わせ完成図
グリーン系のグラデーションだけで作ると以下のようになります。見た目には抹茶感が満載です（笑）日本茶のブログはこれで大丈夫ですが、1部に赤もしくはオレンジの色を指し色で入れてもいいかも。
使用のテーマ：THE THOR「02」
色見本のツールを使うとこういった同系色だけの単調パターンになります。こういった場合には、差し色でくすんだ赤とか、卵色っぽい色、オレンジ系などいれると良いです。
ツールを使った配色組み合わせ 5. 「果物系」
画像のイチゴがかわいいので作ってみました。ブログに使うと若干イメージが違ってきます。
出典：CANVA
- ＃50312F
- ＃CB0000
- ＃E4EA8C
- ＃3F6C45
果物系の配色TOPページ組み合わせ完成図
画像の色をブログにして、少し違和感の出る色合いですね。赤を中心に見るとすごくかわいい自然の画像であっても、ブログの場合きつすぎる赤は大きく使えませんので刺し色として使用しています。
使用のテーマ：THE THOR「02」
これはちょっと微妙な感じになりました。思い切って、グリーンの色味を落とし背景にすると良いかもしれません。
ツールを使った配色組み合わせ 6. 「アース系」
「CANVA」のカラーパレットのうち茶色系の色をピックアップしてみます。CANVAの4色だけの場合はブログには使いづらいので、これに1色加えて作ってみます。
出典：CANVA
- ＃46211A
- ＃693D3D
- ＃BA5536
- ＃A43820
プラス
- #fde8d0
アース系の配色TOPページ組み合わせ完成図
CANVAの色合いは見た目にはきれいなんですが、全部使うとごちゃごちゃします。そこで、1色プラスして作っています。
使用のテーマ：THE THOR「02」
ツールを使った配色組み合わせ 7. 「カラフル」
たくさんの色がある場合、ブログに合わせるにはちょっとテクニックが必要です。「CANVA」には100パターンの画像より色を拾ってありますが、少し使いづらいのはきれいな色だけピックアップしているから。
その他、中間色がないので、2色であろうが3色であろうがブログに合わせるのが若干難しいです。
出典：CANVA
- ＃F52549 ⇒ #F45D76
- ＃FA6775 ⇒ #F99DA6F
- ＃FFD64D ⇒ #FFD64D
- ＃9BC01C
カラフル系の配色TOPページ組み合わせ完成図
配色のツールは、きれいな色を合わせたものがたくさん出てきます。しかし、きれいな色＝ブログに合う色とは限らないために、その色を使うためには少し工夫が必要です。
使用のテーマ：THE THOR「02」
ツールを使った配色組み合わせ 8. 「モノクロ系」
モノクロはカッコいいですが、効かせ色がないとすごく暗い印象になります。ネタによってはそれもいいですしビジネスなど派手に作れない時には良いと思います。
ただ、単調になるので、少しだけ色を入れてみてください。
出典：CANVA
- ＃756867
- ＃D5D6D2
- ＃353C3F
- ＃FF8D3F
モノクロ系の配色TOPページ組み合わせ完成図
黒の色はきついので、グレーっぽい色を合わせています。小さい範囲で黒とオレンジならアマゾンのロゴの色に近いです。
ただ、大きな範囲に黒をもってくると重くなるので調整しながら配置してください。
使用のテーマ：THE THOR「02」
なので、もしデザインに自信のない人ならブラックメッシュの使えるテーマにしてみると良いですよ。
ツールを使った配色組み合わせ 完成図を比較
ここまで、配色ツールを使って同じ構成のページの色変更を見ていただきました。それぞれ見るとなんとなく雰囲気がありますが全体的にどんな変化があるのか全体を比較してみます。
- 暖色系
- 寒色系
- パステル系
- グリーン系
- 果物系
- アース系
- カラフル
- モノクロ系
多少画像の部分には、メッシュをかけたりしていますが、基本的には色を重ねて作ってあります。
まとめ ｜ 配色ツールの組み合わせをブログに使用する時の注意点
配色ツールを使うにあたってコツがあります。この記事の中でも少しお伝えしましたが、カラーパレットのまんまで使うと、落ち着かなくなることがあります。
ですので、緩衝になる同系色や効かせ色を用意して配置してみてください。
- 色合わせに自信がないなら同系色
- ちょっと上級者のようにしたいなら効かせ色
- 好きな色がないなら近い色のトーンを落とす
- 冒険したいなら反対色も入れても可
- >出来上がったら大きく見てバランスが悪くないか確認
- カラーパレットの配色だけになるとちょっと難しい
↓ 当ブログからWordpressテーマTHE THORを購入くださった方に特典をプレゼントしています。
初心者だからこそWordpress有料テーマ を使うべき理由
無料テーマを使うことで時間の無駄遣いをしていませんか？
- 思い通りのデザインにできない・・・
- なかなか稼げない・・・
- アクセス数が増えない・・・
こんな悩みを抱えていませんか？
稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。
Wordpressの有料テーマができる５つのこと
- 検索上位を目指せる
- 見た目が綺麗でおしゃれになる
- 機能が豊富で出来ることが多い
- 会員フォームなどのサポート
- 有名ブロガーも有料テーマを使っている
これまでにあげた5つの有料テーマの特徴を説明していきます。
1. 検索上位を目指せる
ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO（SearchEngine Optimizationの略）です。
- 情報の信頼性
- ユーザーへの役立つ情報であるか？
- スマホ・PCなどでストレスなく使える
などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。
2. 見た目が無料テーマ以上に綺麗になる
シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。
有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。
出典：THE THOR 着せ替え「01」
↓ クリックで拡大します
出典：特製THE THORオリジナルアレンジ
3. 機能が豊富でできることが多い
今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。
4. 会員フォーラムなどのサポート
なにかわからないことがあった場合、相談できる場所があるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。
5. 有名ブロガーも多数使用
稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。
もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。
カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。
⇒ THE・THORの公式ページを確認する。
※ 今なら、8大購入特典をプレゼント！