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

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

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

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