• 14k
  • 10
スモールビジネスのコツ \ 2018年6月13日

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

ビジネスを構築するには多くのステップがあります。中でも、お客様にあなたのブランドイメージを認識してもらうことは、重要なステップの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”は、訪問者の目を引き、クリックを促す役目を果たしているのです。

アクセントカラー

”60-30-10の法則”

あなたが選択したカラーパレットを正式に適用する前に、”60-30-10の法則”について触れておきましょう。

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

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

60-30-10の法則

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

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

ライター: Wix Team

今すぐ Wixブログ を
無料購読しよう!

Wixブログを購読しよう 役立つ情報をいち早くゲット!

正しいメールアドレスを
入力して下さい

正しいメールアドレスを
入力して下さい Email already exists

正しいメールアドレスを
入力して下さい Invalid email

Wixブログを購読 \ 

WebデザインやWix新機能についての
最新情報を無料でお届けします!

正しいメールアドレスを
入力して下さい

正しいメールアドレスを
入力して下さい Email already exists

正しいメールアドレスを
入力して下さい Invalid email