TCDテーマ「MASSIVE（マッシヴ）」では、サイト内のメインカラー・サブカラーの設定がマイナーチェンジしています。よりスムーズかつ大胆にサイト内のイメージカラーを変更できる仕様になりました。

デモサイトでは力強いリクルートサイトをコンセプトにしているので、情熱的な赤色をメインカラーに設定していますが、企業のイメージカラーによってワンタッチで変更いただけます。MASSIVE（TCD084）以降のテーマに実装予定の使いやすくなった色設定について、当記事でご紹介いたします。

「色」をワンタッチで一括 and 個別に変更できる

従来のTCDテーマでもメイン・サブカラーの一括変更機能はありましたが、自由度を優先するあまり、設定箇所が若干増えていたことが課題でした。それを解決したのがMASSIVEです。地味で目立たないアップデートですが、とても便利な機能だと思います。

メイン・サブカラーを設定するだけでサイトの「色」が完成します。でも、個別に変更したい時もありますよね？そのどちらにも対応したわけです。

どこまで一括で変わるのか？

メインカラーであるMASSIVEの赤色（#de0000）の部分には、一括で変更が反映される仕様になっています。例えば、こんな感じですね。

ヘッダーのボタンに加えて、キャッチコピーの背景色やドットナビゲーション（上のスライダーでは右下の部分）、トップページの各所に表示されているボタンのカラーやフッターの背景色などです。一発で広い範囲の色を変更できるので、サイトのイメージをガラッと変更できるわけです。

サブカラーは、原則カーソルを合わせた時のカラーに適用される仕様です。

個別に変更したい場合は？

一部のみ色を変えたいというご要望にも対応可能です。

例えばデモサイトではデザインを美しく見せるために、ヘッダー右上のボタンやドロワーメニューには個別で色を設定しています。すべての箇所にメインカラーを適用してボタンの境目などが無くなることを避けるためです。

メインカラーを個別に適用できる箇所には、以下のようなオプションを設けていますので、お好みで個別に設定いただけます。

メインカラーを適用するオプション

個別設定「優先」で自由度も維持してます。

個別に設定した色は保存されるので、メインカラーやサブカラーを適用しない場合は、ワンタッチで元に戻すことができます。また、チェック入れたり外したりして個別に設定した色とメインカラーを比較しながら微調整が可能です。

メインカラーを適用するか否かを選ぶ設定箇所

サイトのメインカラーを一括で変更するだけでなく、細部にこだわる場合にも便利な仕様です。

サイトカラーの注意点

MASSIVEの色設定の新仕様についてご紹介しましたが、配色の決め方についていくつか注意点があります。以下の3つに注意して設定してみてください。

  • 多くの箇所に適用しているメインカラーは頻繁に変えない。
  • メインカラー、サブカラー、それ以外の箇所の色のうち、2色以上は同系色や類似色にする。
  • 明るさや、鮮やかさをできるだけ統一する。

メインカラー = 企業（商品）のイメージカラー

サイトのメインカラーは企業や商品・ブランドのイメージカラーとなりますので、一度決めたら簡単には変えないことをおすすめします。

メインカラーを変える時は、全面リニューアルするくらいの大きい出来事だということですね。

2色以上は同系色や類似色にする

こちらも絶対ではありませんが、基本は2色以上を同系色にすることでサイト全体でバランスを取れます。TCDのデモサイトでも、サイト内で使われている色は2色以上が同系色や類似色です。クリックするとデモサイトで確認できます。

  • WordPress Theme「CURE」
    WordPress Theme「CURE」

使用する色のトーンを揃える

2つ目の注意点と似ている部分ではありますが、同系色以外でもサイト内で使用する色はできるだけトーン（明るさや鮮やかさ）を揃える方が自然な仕上がりになります。もちろん記事内のテキストリンクなどのみをビビッドなカラーに変更するのはアリです。

ただ、サイト内に使われているカラーのそれぞれが、ちぐはぐなトーンになっていると落ち着きのない印象になってしまいます。

※MASSIVEのトップページに表示されている各ボタンのカラーには、メインカラーとサブカラー（ホバーカラー）が連動して適用されます。ユーザーの第一印象に大きく影響するトップページで、ちぐはぐな印象を与えないための仕様です。

まとめ

MASSIVEに実装したサイトカラー設定の新仕様は、今後リリースするテーマにも実装予定です。同じテーマで複数のサイトを制作する際などでも、メインカラーを変更するだけで瞬時に印象が変わります。特定の箇所のみで色を変更したい際もスマートな調整が可能です。

サイトのメイン・サブカラーの配色を決める際は、下記記事も参考にご覧ください。統一感のある色選びの手助けになるツールを紹介しています。

2019.02.01

2022.09.21

おすすめの配色が見つかるカラーツール13選

あなたは色を決める時、どのように検討を重ねているでしょうか。そして何を決め手に最終的な配色を決定しますか？この記事では配色を検討する時に便利なツールとなんか垢ぬけない印象の配色となってしまいがちな理由について書いていきます。日々のヒントとして参考にしていただけたら嬉しく思います。 カラ...

合わせて読みたいWordPressテーマ「MASSIVE」の関連記事

第1回 : 自社制作の採用サイトでリクルートしよう。企業文化を力強く発信できるWordPressテーマ「MASSIVE」
第2回 : WordPressテーマ「MASSIVE」でマイナーチェンジしたサイトカラー設定と配色の決め方について（当記事）
第3回 : ランディングページや下層ページも簡単につくれる。WordPressテーマ「MASSIVE」のページ制作機能を徹底解説。