ホームページの配色を考えるときに活用できるWebアプリ

士業が活用できるツール

ホームページを作るとき、配色をどうするか。

士業事務所自体のホームページ(いわゆるコーポレートサイト)なら、既にロゴマークなどを作っている場合にはそのカラーに合わせるほうが無難ですが、業務特化型のホームページ等では何の色をベースに使うか、作る前に迷ってしまいがちです。

自分が好きな色ではなく対象の業界で慣れ親しんだ色を使う

そのホームページを営業用途として使うのであれば、まず「自分の好きな色」を使うのではなく「対象者がイメージする色」「ホームページを訪問する側の業界で慣れ親しんだ色」を使うほうが無難です。

色で個性を打ち出そうとしても、奇抜な印象を与えてしまうと依頼に繋がらず、営業用ホームページを作る意図に反してしまいますから。

配色を検討するときはWebアプリを活用する方法もある

仮に「業界的には青を使っていることが多いから、今回は青系統で行こう」など、ベースとなる色が決まったとしても、そのベースカラーに合わせる色が(特に自分でホームページを作る場合には)次の問題として立ち上がってくるかもしれません。

というよりも実際、士業ホームページの色問題については、大抵の場合ベースカラーがある程度確定した後で、その色と相性の良い配色が決まらないという悩みのほうが発生しやすいです。

そんなときは、配色の候補を表示してくれるWebアプリを活用して、補色やアクセントとなる色を拾ってみると意外と早く問題が解決する可能性もあります。「配色のセンスは自信が無い……」という人でも、表示される配色の候補からあまり離れない範囲で色を決めていけば、全体としてまとまりのある色味になるので安心ですよ。

配色の候補(カラーパレット)を自動でピックアップしてくれるWebアプリ・サービスは多々ありますが、あまり多くの機能があっても結局どの色にするのか悩みが尽きないので、ここではホームページで使う配色の方向性をザッと確認するときに使えるサービス1つに絞って紹介します。

COLOR SUPPLY

直感的に使えるので、オススメなのがCOLOR SUPPLYです。カラーホイールの下に表示されている項目を選択することで、いくつかのパターンで配色の候補を表示してくれます。

上はComplementaryにチェックが入っていますが、この状態では補色が表示されるので、ちょっとしたアクセントなどに使いたい色を確認するときに便利です。

その配色パターンの見本も、カラーホイールのすぐ下に自動表示してくれるので、なんとなくの雰囲気を確認しながら色の選択が行えます。

微妙に自分のイメージする色の組み合わせと違うなというときは、ホイール横の組み合わせパターンをクリックすることで、同じ系統の色同士で少し違ったパターンを表示してくれます。

ホイール下の項目をComplementaryではなくAnalogousにすれば、類似色の候補を表示してくれます。

例示のアイコン等も、類似色での表示に切り替わります。

他にTriadやSquareもありますが、これからホームページを作るという段階での色の悩みなら、Complementaryでポイントとなる場所の色味を決めるとともに、Analogousで副次的に使う配色を決めれば大体の方向性は決まってくるのではないでしょうか。

上の例でいえば、ベースとなるカラーを濃い青に設定するなら、ポイントにオレンジを使い、副次的な色に水色を使えば無難な仕上がりになることが分かります。

COLOR SUPPLYである程度の色の方向性を決めたら、それだけでは外国風な配色に傾いてしまうことも多いです。

Adobe Color CCで最後の微調整

そんなときは、Adobe Color CCで配色の微妙な調整を行ってみてください。

Adobe Color CC
Create color schemes with the color wheel or browse thousands of color combinations from the Color community.

ちなみにこのAdobe Color CCですが、上部のタブを「探索」に切り替えることで、5つのカラーがセットになったテーマから、好みの配色を選ぶ使い方もできます。

士業のウェブサイト制作・活用アドバイザー。これまで制作に携わった士業ウェブサイトは、行政書士、司法書士、社会保険労務士、税理士、弁護士、建築士、土地家屋調査士等430件以上。神奈川県横浜市在住。