カラーのセンスがなくても大丈夫、効果的な色の組み合わせ方をやさしく解説
Post on:2016年4月22日
sponsors
効果的な色の組み合わせをつくるには、2つの色を選ぶことから始まります。
そのためにはデザインの理論や色の科学があり、あなたが効果的なカラーパレットをつくるのに役立つ9つの方法があります。
Webサイトを例に、効果的な色の組み合わせ方を紹介します。
色の組み合わせ方はWebだけでなく、イラストやプロダクトなど他のものにも利用できます。
How to Create Perfect Color Combinations
以下、各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。
- カラーホイールからはじめてみよう！
- ブラック、ホワイトとニュートラルが重要
- 色合いを調整する
- トレンドカラーのうまい使い方
- たくさんの色は必要？
- テキストの色はブラックやホワイトだけではない
- 内容に関連した色は？
- つくったパレットは簡単に変えない
- 色を組み合わせる大事なポイント
カラーホイールからはじめてみよう！
子どもの時に、学校でカラーホイールについて学んだことを覚えていますか？ カラーホイールは大人になった今でも実用的なツールです。
カラーホイールは、その色が他の色とどのような異なる色合いの関連性があるか調べるのに役立ちます。相性がいいカラーの組み合わせを見つける実用的な方法です。
ホイールにはプライマリーカラーの原色をはじめ、2次代表色、3次代表色のすべての組み合わせが含まれています。
- Primary colors
- プライマリーカラー（原色）: レッド・イエロー・ブルー
- Secondary colors
- 2次代表色: グリーン・パープル・オレンジ（2つの原色のミックス）
- Tertiary colors
- 3次代表色: アズール・バイオレット・ローズ・レッドオレンジ・シャルトルーズ・スプリンググリーン（原色と2次代表色のミックス）
ホイール上で色をミックスさせる方法は重要で、その色合いの組み合わせがうまく機能するかが分かります。
- Analogous
- 類似色: ある色のカラーホイールで隣接している3つの色の組み合わせ。
- Complementary
- 補色: ある色とカラーホイールの反対側の色との組み合わせ。
- Split complementary
- 分裂補色: ある色とその補色の両隣の2つの色との組み合わせ。
- Double complementary
- ダブル補色: 原色を使い、カラーホイールの反対側の色の両隣の2つの色の補色との組み合わせ。
- Monochromatic
- 同一色相: ある色とその色のバリエーションとの組み合わせ。
- Triadic
- 3色配色: カラーホイールを3等分した位置の色の組み合わせ。
色を選ぶツールのほとんどが、このカラーホイールをシミュレーションしています。
ブラック、ホワイトとニュートラルが重要
カラーパレットをさまざまな色で満たしたい気持ちは分かりますが、最も重要な色はあなたが気にかけないかもしれないブラック、ホワイト、そしてニュートラルです。
これらの色はデザインがうまくいくための秘訣で、背景や全体の雰囲気を整えたり、デザイン全体のナビゲートに貢献したり、文字を読みやすくしたり、さまざまな効果があります。
色合いを調整する
ほとんどのデザイナーはカラーホイールから色を選んでも、そのまま使うことはないでしょう。ティント、トーン、シェードの出番です。
- Tint
- ティント: ホワイトを加えます。
- Shade
- シェード: ブラックを加えます。
- Tone
- トーン: グレー（あるいはブラック・ホワイト）を加えます。
これらのバリエーションは色の彩度を変え、あなたのカラーパレットに変化を与えます。
2, 3つの色のパレットを展開させる時に、このティント・トーン・シェードを利用するのは良い方法です。すべての色合いが同じ系統で、うまく機能します。
トレンドカラーのうまい使い方
色にもトレンドがあります。長い期間使うのは難しいですが、短い期間で使うのは面白いアイデアです。もしトレンドの色を使うのあれば、1つのトレンドをオプションとしてパレットに入れるのがよいでしょう。
カラーパレットを作成する時は通常、繰り返し何度も使うことができるパレットを作成したいと考えます。色はブランドのアイデンティティであると同時に、重要な貢献者です。例えばあなたの色が2つの色で機能するとして、インパクトを与えるアクセントとしてトレンドの色を使うのはありです。トレンドの色はあくまでもオプションとして利用し、そのトレンドが終わったら、本来のアクセントカラーに戻すことができます。
たくさんの色は必要？
色は目的をもって、そして適切に使われるのがベストです。カラーパレットに5色も10色も、あるいは15色も必要ありません。最も良い色の組み合わせはニュートラルな背景と2色、あるいは3色の組み合わせです。
それはなぜでしょう？ それぞれの色は目的を持っており、使える場所があります。色はデザインで何かをすべき役割があります。色が多すぎると色の役割は失われ、そこに色があるだけの存在になってしまいます。
それぞれの色が特別な役割を持ち、ユーザーがサイトを使うことを容易にするのに役立つ色とデザインの組み合わせは確かに存在します。例えば、多くのデザイナーはサイト内のボタンに同じ色を使います。
テキストの色はブラックやホワイトだけではない
カラーの組み合わせを考える時、テキスト要素について考えることは重要です。ブラックやホワイト、グレーだけではありません。テキスト要素のために使う色（あるいは複数の色）を決めてください。
テキスト要素の色を決める時に必要なのはリーダービリティとユーザビリティが重要で、本文や見出しだけでなく、メニューで使うテキストリンクも含まれます。中でも最も重要なのはリーダービリティ、読みやすさです。見ることが可能で、容易に読むことが可能で、テキストと背景に多くのコントラストをつける必要があります。
テキスト要素のために決められた色は全体的なカラースキームの一部、もしくは文字用の特別なアクセントカラーとして扱います。
内容に関連した色は？
最も良い色の組み合わせは、「色合いに色合いを」合わせるだけでなく、「内容に色を」合わせます。Webサイト上に実際に何があるか考えてみてください。色の選択はその内容と調和していますか？
この問題は時々、見かけます。例えば、自然や環境を扱うWebサイトでグリーンやブラウンを使うかもしれません。銀行のWebサイトだと信頼をイメージしてブルーを使うかもしれません。
色はそんなに簡単なものではありません。
おかしいなと思ったら、サイトデザインにおける表象イメージを確認してみてください。最も適切な色の基準を決めるために、そのイメージからスウォッチを引き出しください。そしてそこから色を組み合わせます。
つくったパレットは簡単に変えない
ひとたびあなたが色の組み合わせを作る途中であるなら、プロジェクト中に色の使い方が一貫したままであるようにパレットを決めてください。色がどのように使われるのか、そのルールも決めておきましょう。
ここにいくつかの質問があります。
- あなたはいくつの色を使いますか？
- 使う色にティント、トーン、シェードがありますか？
- テキストには色を使うことができますか？
- UI要素用にセットの色合いがありますか？
- パレットにはないアクセントカラーは加えることができますか？
色を組み合わせる大事なポイント
色の話になると、素晴らしいパレットを作るものの多くがあなた自身から始まります。色は正しく見え、感じますか？ これは単純なテストだと思うかもしれませんが、非常に重要です。もしあなたがほんの少しでも自信がないなら、あなたが選択した色を考え直してください。もしくは色のセオリーに戻り、その色の1つを変更してください。
色の組み合わせをする上で大切なのは、パレットの中でコントラストとバリエーションをつくることです。感覚にこだわってください。そして最後に、ユーザエクスペリエンスのために内容に色を合わせることを忘れずに！
色が正しく見えているか、以前の記事を参考にどうぞ。
sponsors
