あなたのブランドイメージに適切なカラーパレットの選び方

ビジネスを構築するには多くのステップがあります。その中でも、顧客にあなたのブランドイメージを認識してもらうためのブランディング施策は重要なステップの1つです。

ご存知の通り、第一印象は人々に強い印象を与えます。そのため、あなたのホームページの印象について考える必要性があるでしょう。その第一歩として、この記事では色が与える印象について学びます。あなたのサイトのブランドイメージに適切なカラーパレット（配色）の選び方を確認しましょう。

あなたは既にホームページに使用するカラーパレットのアイデアがあるかもしれません。しかし、そのアイデアを固めてしまう前に、一度、「色」が持つ実際の意味を確認してみましょう。
 色と心理について知ることで、新たな発見があるかもしれません。

色と心理の関係性ついて理解したところで、実際にカラーパレットツールを活用してみましょう。インターネットで使用できるツールは複数ありますが、ここでは特に役立つツールをご紹介します。
 

Coolors.co
 Coolorsは現在英語版のみですが、初心者に最適な配色ツールとして世界中のユーザーに利用されています。Coolorsには思い通りの色彩に調整できる多様なツールが備わっており、作成したカラーパレットを様々なフォーマットへ変換することができます。また、数百種類もの豊富な配色があるだけでなく、他のユーザーが作成したカラーパレットを閲覧することができ、インスピレーションを見つけることがができます。
 デスクトップコンピュータ、iOSアプリケーション、Adobe Photoshop、Illustratorアドオン、さらにGoogle Chromeの拡張機能でも使用可能です。

まだまだインスピレーションが足りない？そんなあなたはColor Loversをチェックすることをお勧めします。英語版のみですが、数百万ものユーザーが作成したパレットカラーを閲覧できます。

その他の無料配色ツール：

Adobe Color CC：画像アップロードやカラーホイールなど様々な方法からカラースキームを決めることのできる便利なツール。

Colourcode (英語版)：マウス操作で簡単に配色を選ぶことができ、パレット（アナログ、トライアド、モノクロ等）の様々なカテゴリーに沿ってカラーパレットの保存ができる。

最適なカラーパレットは、あなたのターゲット層へ語りかけ、そしてホームページを魅力的に飾ることでしょう。

一般的に、ホームページの配色は2つのメインカラー（主要色）を選び、その他の色はアクセントを付けるための差し色とすることが好ましいと言われています。そして、この2色のメインカラーのうち1色をより広範囲で使うと良いでしょう。補足として最後の章でご説明します。

また、こちらは参考程度ですが、補色又はコントラストを入れる場合や一貫性を持たせる場合は、ティント、トーンそしてシェードの色彩学を使って色遊びができます。

トーン：ベースカラーにグレーを加える。

ティント：ベースカラーに白を加える。

シェード：ベースカラーに黒を加える。

アクセントカラー、つまり差し色のことですが、これはあなたのWebサイトにとって重要な役割を果たします。特に強調したい部分にアクセントカラーを使用し、適切な箇所に使用することによりサイト訪問者の興味を引くことができるでしょう。
 

アクセントカラーは通常、メインカラーより目立つ色となるので、メニューバーやCTAボタンなど、サイト訪問者を誘導したい場合に使用することをお勧めします。
 アクセントカラーを上手く使用したテンプレート例を見てみましょう。
 下記のテンプレートでは、メニューバーの赤のアクセントカラーが現在どのページに滞在しているかを示します。そして、赤の購入ボタン”Buy Tickets"は、訪問者の目を引き、クリックを促す役目を果たしているのです。

あなたが選択したカラーパレットをWebサイトへ適用する前に、”60-30-10の法則”についても知っておきましょう。
 

”60-30-10の法則”は、メインカラー60％、サブカラー30％、アクセントカラー10％にすることで、バランスの良い配色につながることを意味します。
 Webデザインに関しては、ネガティブスペース60％、コンテンツ30％、行動を誘導するためのCTA10％へと置き換えることができます。
 

また、余談ですが男性のビジネススーツは、スラックスとジャケット60％、シャツ30％、ネクタイ10％が格好よく見えるようです。

”60-30-10の法則”を参考に、バランスのとれた配色になるよう心掛けてみましょう。

カラーコントラスト - アクセシビリティを高めるポイント

オンライン上のコンテンツにおいて、アクセシビリティを意識することは必須です。UI/UX において、世界的な基準となっている、ウェブコンテンツアクセシビリティガイドライン（WCAG 2.1）によると、特別な場合を除いて、文字と背景のコントラスト比は、4.5：1 以上であることが求められています。
 
 ブランドのカラーパレットが選択できたら、カラーコントラストチェッカーなどの無料ツールで、Webデザインに利用できる背景色とテキスト色のパターンをチェックしましょう。

コントラスト比の基準を満たすカラーコンビネーションが一つもない場合は、暗い色、または淡い色を一色追加することで、コントラスト比をあげ、もう一度チェックしてみましょう。

認められている特別な場合

以下の場合には、必ずしもカラーコントラスト比が、4.5：1以上である必要はないとされています。あわせて知っておきましょう。

 ・文字が大きい場合

サイズの大きいテキストの場合は、コントラスト比が 3：1 以上あれば良い。

・付随的

純粋に装飾目的の文字や、写真の一部分であり、UX/UIにおいて重要でない場合には、要件に必ずしも当てはまらなくて良い。

・ロゴタイプ

ロゴまたはブランド名の一部である文字には、最低限のコントラスト要件はない。

あなたのブランドカラーを決める準備ができましたね！
 さぁ、Wixで素敵なホームページを作成しましょう！

ライター： Wix Team