- 2018年6月13日
- 読了時間: 4分

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

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

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

色彩心理について学ぶ

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

カラーパレットツールの使用

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

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

Canva Canvaは2017年に日本語対応となったインフォグラフィックを作成するための人気オンラインツールです。使いたい写真をCanvaへアップロードすると、その写真に基づいて5色のカラーパレットが作成されます。しかし、残念ながらこのカラーパレットを調整することはできません。カラーパレットとしてのツールは現在のところ少ないですが、グラフィック作成のための便利なツールは多様に揃っています。

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

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

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

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

メインとなる配色を選択

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

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

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

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

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

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

アクセントカラーの選択

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

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