THE THOR(ザ・トール)色設定をバランス良く行うには?

素人がバランス良く配色するのは至難の業

THE THOR(ザ・トール)では様々なパーツの色設定を行うことができますが、色選びが思い通りにいかないって事ありませんか?

配色の悪いサイトは視覚的に印象が悪く記事内容が良くても離脱されてしまうなんて事も・・・。

 

デザイナーなど普段から色を扱う仕事をしている方は例外として素人が配色を決めるにはよほどのセンスがない限り至難の業なんですよね。

簡単に色に統一感のあるサイトを作るには各パーツの色を全て揃えてしまうのが楽ですが、1色では何の味気もなくどこか寂しいイメージになってしまいます。

 

そこで、失敗しやすい配色方法と当サイトで採用している誰でも簡単に行える配色方法を紹介します。

THE THOR(ザ・トール)だけでなく様々なテーマや色を扱う場面で使える方法なので参考にして頂けたらと思います。

 

ありがちな配色の失敗例

私のような色センスのない素人が感覚任せで配色するとこのような結果に・・・(笑

メインカラーであるカテゴリー欄に対してカテゴリーのナビゲーションカラーが明らかに合っていませんね。

目立たすという意味では良いのですが・・・。

カテゴリーの色設定はナビゲーションカラーという意味ではあまり色を外すと統一感がなくなりトップページが汚くなっちゃいますね。

 


このような失敗のほとんどは「Color Picker」の設定を感覚任せで行ってしまうことです。

画像加工など得意とする「Photoshop」や「GIMP」に比べて「Color Picker」が簡素なので使い辛い。

しかも設定画面ではサイトに設定した他の色と見比べながらできないのも痛いところですね。

配色センスに自信がない人は感覚任せでやらないようにするのが無難です。

また、むやみやたらとカラフルにするのも失敗の元です。

色が多くなると統一感を持たせるのが難しくなるのでよく考えないといけませんね。

  • 感覚任せで色設定を行う。
  • 色を使いすぎる。

 

【超簡単】当サイトが行っている色設定

当サイトをモデルに誰でも簡単にできる配色方法を紹介します。
※文字装飾やボックスなど記事中のものは行っていませんのであしからず。


まずは主となる色(キーカラー)を決めます。

当サイトで言うところのカテゴリー欄や見出しの色になります。

カスタマイズからの設定になりますが、このキーカラーを選ぶときは初めの1色なので「Color Picker」を使っても問題ありません。

 

サイトの方向性などを考慮しながら好きな色を指定しましょう。

ちなみに当サイトは管理人が横着して着せ替えをしてそのままの色【#5ba5ad】を使っています(笑

 


キーカラーが決まったらカラーコード【#5ba5ad】をコピーして超便利サイト『配色の見本帳』へ。

先ほど決めたキーカラーのカラーコードを貼り付けて「色の情報と配色サンプルを見る」へ。

 


するとキーカラーを元に相性の良い色がずらっと出てきます。

「色相(Hue)による配色」はキーカラーの他に11色なので、色を多く使う場合には良いですね。

全てカラーコードが記載されているので、WordPressの設定でコピペするだけですね!

「色相(Hue)による配色」配色の見本帳より

 


当サイトではメリハリを持たせるために「ヘクサード(Hexad)」を採用していますよ。

ちなみに、当サイトのトップページを見ればわかりますが「続きを読む」などのリンクボタンは、あえてこの方法を取らずにワザと浮いた色に設定してあります。

統一感を出していればリンクなどを目立たすのは簡単なので参考までに。

「ヘクサード(Hexad)」配色の見本帳より
【当サイトのカラーコード】
#5BA5AD #645CAD #AD5CA5 #AD645C #A5AD5C #5CAD64

 


このようにキーカラーを決めるだけで簡単に相性の良い色を使うことができます。

「配色の見本帳」の他にも配色サンプルを調べることができるサイトは沢山ありますが、「配色の見本帳」はシンプルで使い易いのでおすすめですよ。

色選びに困ったときは活用してみて下さい!

 

続いてキーカラーを楽に選ぶ方法に少しだけ触れてみたいと思います。

 

キーカラーを簡単に選ぶコツ

「配色の見本帳」で選ぶ

「Color Picker」を使ってWordPress上で選ぶのが難しいって方におすすめなのが「配色の見本帳」のトップページです。

215色もの色が掲載されていますのでとても便利ですよ。

色見本、配色を提案するWEB色見本のホームページ。選んだ色をキーカラーにして色の法則から多彩な配色と出会えます。漫画配色…

 

画像などから吸い取る

気に入った色を使っている画像などから色を吸い取ってしまう方法。

「Photoshop」や「GIMP」など画像加工を行うアプリを使うことになりますが、サイト運営をしていると何かと便利なので使い方を覚えておくのもいいでしょう。

当サイトのアイコン画像からもアプリのスポイトツールを使えば簡単にカラーコードを知ることができますよ。

 

THE THOR(ザ・トール)のカラーコードを使う

これは「配色の見本帳」で選ぶと大差ありません。

THE THOR(ザ・トール)に使われているカラーコードを見ればわかりますが、「配色の見本帳」とかなり似た配色となっています。

 

記事編集する上でTHE THOR(ザ・トール)のカラーコードが知りたい時が度々あり、いい機会なので一覧として書き出しておきました。

また、THE THOR(ザ・トール)の色のショートコードが知りたいときは、サイト「からあげ棒、ありったけ」様が綺麗に掲載されています。

当サイト、カラーコード記載方法にも参考にさせて頂いております。

 

THE THOR(ザ・トール)のカラーコード

ヴィヴィッドトーン
#fff100
#f49801
#e60112
#e5004f
#e4017f
#920883
#1c1e84
#0068b7
#00a0e9
#009e96
#009944
#8ec31f

ブライトトーン
#fff338
#f6ad3a
#ea5532
#e9536b
#e95098
#a54a98
#4c4398
#2b71b8
#00b0ec
#00ada9
#0ba95f
#a9cf52

ディープトーン
#cbbd00
#bf7601
#b60105
#b5003c
#b50165
#740169
#14116e
#005293
#0081ba
#007f78
#007c36
#6f9b12

ライトトーン
#fff89a
#fbce8a
#f39c76
#f29c9f
#f29fc3
#c490bf
#8f82bc
#87abda
#7ecff5
#83ccc9
#88c997
#cce199


ダルトーン
#cac04e
#c39043
#ba5536
#ba5460
#ba5584
#8c4b82
#4e4282
#3970a2
#1894be
#1d928f
#218f59
#8ea953

ベリーペールトーン
#fffded
#fef5e8
#feede3
#fdedec
#fdeff5
#f3eaf4
#e8e6f3
#e9eef9
#eaf6fe
#eaf5f4
#ebf5eb
#f2f7e5

ダークグレイッシュトーン
#675f00
#633c00
#5f0100
#5f0017
#600033
#3e0036
#08003a
#00274f
#004462
#004340
#004215
#395104

モノトーン
#ffffff
#d8d8d8
#b2b2b2
#8c8c8c
#656565
#3f3f3f
#191919



※意図的なものか定かではありませんが、THE THORテーマ「Version:1.4.0」では「style.css」と「style-editor.php」でベリーペールトーン「ライム」の色指定が異なっています。

その影響と思われますが編集中ではベリーペールトーン「グリーン」と「ライム」の文字色・背景色・ボーダー色、全て同じ色(#ebf5eb)になりますね。

 

サイトイメージと統一感

最後に、配色はサイトのイメージを出す上でとても重要だと思いますので、私のような色音痴でも簡単に統一感のある配色ができる方法を取り上げてみましたがいかがでしたか?

配色は奥が深く私もまだまだですが、少しでも色選びが苦手な人の参考になれば幸いです。