こんにちは！ブログ運営半年で月20万超の元サラリーマンブロガーなつです。
webでは工夫をこらした配色ツールがあります。とても使いやすくおすすめな反面、うまく使えなければちょっと居心地が悪かったり目がチカチカするサイトになってしまいます。
洋服でもそうですが、きれいな色同士を合わせてもあまりよく見えないこともありますよね。それと同じでブログを配色のツールでそのまま配置しても、ブログに合っているのかが大事です。
そこで、配色ツールを使ってブログデザインを調整する方法などをお伝えしていきます。
ブログの配色組み合わせのツールとは？
ブログの配色ツールは外国のものも日本で作られたものもあります。イラストなどと違うのは、色は共通だからか登録などを必要とせず感覚的に使えるので重宝します。
おすすめ配色ツールについては以下の記事で書いていますので、いちどチェックしてみてください。
この記事では、配色ツールを使ってどのようなブログになるのか実際に見ていこうと思います。最後の章では、全部の色の違いを比較します。
ツールを使った配色組み合わせ 1. 「暖色系」
「Color Hunt」という配色ツールを使ってブログに色を配置していきます。色合いのカラーパレットには、そのまま使えるものとブログにはあまりあわない色があります。
そのあたりを試しながら作っていきましょう。
出典：Color Hunt
- ＃FF6464
- ＃FF8264 ⇒ #FFD7CE
- ＃FFAA64
- ＃FFF5A5
暖色系の配色TOPページ完成図
配色に使っているのがTHE THORの着せ替え「02」なのですが、大きく色を配置するのは背景くらいなので、背景部分を落ち着いた色に変化させればほぼ雰囲気良く出来上がります。
使用のテーマ：THE THOR「02」
4色がほぼ明るいトーンなので、つかいづらい部分もありましたが、画像に重ねてある色のトーンを落としました。
↓ 芸大出身のなつが作ったTHE THORのオリジナルデザインです。購入特典です。
このブログからTHE THOR（ザ・トール）をご購入くださった方に特典としてマニュアルをプレゼントしています。マネするだけでデザイン変更が簡単にできます。
※残りの3種類とブログの全体像は以下の記事で見れますのでよかったらご覧ください。
⇒ 【簡単な使い方】THE THORデザインの事例集6選！初心者でも作れるアレンジを紹介！
ツールを使った配色組み合わせ 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」
名づけるなら「THE・抹茶！メインビジュアルにメインの色を重ねています。バックの画像になにかひねったものを追加するとインパクトがあります。
ツールを使った配色組み合わせ 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」
プラスした1色にも少し工夫をしていて、ただの茶色系が良いわけではなく「赤」を多く含む薄い茶色をもってきています。（元の画像は赤土なので）
黄色を含むベージュはあいません。
ツールを使った配色組み合わせ 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」
こちらもメインビジュアルにブラックメッシュを重ねています。画像がきれいなものでもこのメッシュを使うと甘すぎる画像もそれなりにかっこよくなるし、上級者っぽくなるんですよね。
なので、もしデザインに自信のない人ならブラックメッシュの使えるテーマにしてみると良いですよ。
ツールを使った配色組み合わせ 完成図を比較
ここまで、配色ツールを使って同じ構成のページの色変更を見ていただきました。それぞれ見るとなんとなく雰囲気がありますが全体的にどんな変化があるのか全体を比較してみます。
- 暖色系
- 寒色系
- パステル系
- グリーン系
- 果物系
- アース系
- カラフル
- モノクロ系
多少画像の部分には、メッシュをかけたりしていますが、基本的には色を重ねて作ってあります。
まとめ ｜ 配色ツールの組み合わせをブログに使用する時の注意点
配色ツールを使うにあたってコツがあります。この記事の中でも少しお伝えしましたが、カラーパレットのまんまで使うと、落ち着かなくなることがあります。
ですので、緩衝になる同系色や効かせ色を用意して配置してみてください。
- 色合わせに自信がないなら同系色
- ちょっと上級者のようにしたいなら効かせ色
- 好きな色がないなら近い色のトーンを落とす
- 冒険したいなら反対色も入れても可
- 出来上がったら大きく見てバランスが悪くないか確認
- カラーパレットの配色だけになるとちょっと難しい
各テーマのカスタマイズでは色を見ながら配置できるので、自分の感性にあった色合いにチャレンジしてみてください。
↓ このブログから大人気のTHE THORを購入くださった方に特典をプレゼントしています。
初心者だからこそWordpress有料テーマ を使うべき理由
無料テーマを使うことで時間の無駄遣いをしていませんか？
|
こんな悩みを抱えていませんか？
稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。
Wordpressの有料テーマができる５つのこと
- 検索上位を目指せる
- 見た目が綺麗でおしゃれになる
- 機能が豊富で出来ることが多い
- 会員フォームなどのサポート
- 有名ブロガーも有料テーマを使っている
これまでにあげた5つの有料テーマの特徴を説明していきます。
1. 検索上位を目指せる
ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO（SearchEngine Optimizationの略）です。
- 情報の信頼性
- ユーザーへの役立つ情報であるか？
- スマホ・PCなどでストレスなく使える
などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。
2. 見た目が無料テーマ以上に綺麗になる
シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。
有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。
出典：THE THOR 着せ替え「01」
↓ クリックで拡大します
出典：特製THE THORオリジナルアレンジ
3. 機能が豊富でできることが多い
今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。
4. 会員フォーラムなどのサポート
なにかわからないことがあった場合、相談できる場所があるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。
5. 有名ブロガーも多数使用
稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。
もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。
カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。
当ブログおすすめのWordPressテーマ！
- 高機能の最新テーマで有名ブロガーも使用
- 着せ替え機能でいろんな用途に使える
- 複数のブログに使える（本人のブログ）
- 会員フォーラムやマニュアル完備
ご購入を検討しているなら今がチャンスです！！