正しいカラーパレットの選び方
ワイヤーフレームとプロトタイプ作成の作業のどこかで、デザインプロジェクトに適した色選びが必要になります。ある意味では、カラーパレットはデザインの構成と同じくらい重要です。その重要性を考えると、むやみに色選びするのは難しいでしょう。
製品をより魅力的に、より使いやすくするカラーパレットを選ぶために以下の情報を参考にしてみてください。
色彩理論への理解
カラーホイールは、形自体はシンプルで、ただの色彩選択に過ぎないと思われるかもしれません。しかし、勉強すればするほど、このカラーホイールの持つ意味は複雑になっていきます。カラーホイールには、以下のような例があります。
-
寒色系と暖色系。寒色系には、青、緑、紫。暖色系には、赤、オレンジ、黄色などがある。
-
値（色の濃淡）
-
彩度(色の濃さ)
このように、カラーホイールを使ってカラーパレットを作る方法は、数え切れないほどあります。
さまざまな種類のカラーパレット
人気のカラーパレットには、以下のようなものがあります。
- アナログな配色。カラーホイールで隣り合った色で構成されたカラーパレット。
- 補色の配色。カラーホイールの反対側にある色をベースにしたカラーパレット。
- ダブルコンプリメンタリー配色。カラーホイールの2点ではなく、4点を使うことを除けば、補色系に似ている。
- 単色の配色。同じ色のバリエーションを使用したカラーパレット。
- スプリットコンプリメンタリー配色。1色とその補色の隣の2色を選択する以外は、補色のように始まるカラーパレット。
- 三原色補色の配色。カラーホイールの三角形を利用したカラーパレット
色使いの60-30-10の法則
60-30-10の法則は、カラーパレットを選択し、それに忠実であることを示す簡単な方法です。うまく活用できれば、ブランドのアイデンティティを確立するのにも役立つことができます。
このルールでは、原色を60％、二次色を30％、アクセントカラーを10％使用することになっています。 このルールは、特にウェブサイトのデザインに効果的です。なぜなら、作品をクリーンでシンプルに保つことができるからです。例えば、2色目の色をページの明るい背景色として使用することができます。 ヘッダーや小見出しなど、デザインの重要な部分は原色で表示させることができます。最後に、ボタンや小さな文字にアクセントカラーを使うと、少し華やかな印象になります。
カラーパレットのトレンド
- 人間の肌色。
- 超高彩度カラー
- 色あせたような質感のある色
- シュールで目を見張るような色の組み合わせ。
カラーツールとアプリ
あなたのデザインにぴったりのカラーパレットを作成するのに苦労していませんか？オンラインツールやアプリを使えば、パステルカラーやレトロな色など、どんな色でもあなたの製品を際立たせるクリエイティブなオプションを検討することができます。
Coolors
近年、最も人気のある配色ジェネレーターの一つであるCoolorsは、Webサイトやスマートフォンアプリなどの色選びを支援するために設計されたツールです。 無料アカウントを作成し、オンライン画像のサンプリングやHexコードの入力、トレンドのカラーパレットを探索することで配色を生成できるため、多くの人がCoolorsを愛用しています。
Material Colors
Color Supply
- 補色
- アナログ
- トライアド
- スリットコンプリメント
- スクエア
- フレッシュ
- マンガ
色覚異常に対するアクセシビリティへの配慮
UXPinのカラーパレットでブランドの一貫性を高める
次のデザインでどのようなカラーパレットを選ぶにしても、ユーザーが製品の機能を理解できるような一貫性を確立する必要があります。ページごとにカラーパレットが変わると見る人は戸惑ってしまう可能性があります。 また、すべてのデザイナーが、各プロジェクトでどのようなカラーパレットを使われるかを把握しておくことが大切です。UXPinでは、デザイナーがアクセス可能で、カラーパレットの使える範囲を制限するデザインシステムを構築したことで管理者がプロジェクトをコントロールしやすくしました。それにより、デザイナーがブランドのイメージに一貫性を保つためにガードレールを設定することができます。また、優れたデザインシステムにおいては、プロセスを合理化し、製品を完成させるまでに必要な変更回数を制限することができます。 UXPinは、デザインプロジェクトをより成功に導くデザインシステムを簡単に構築することができます。今すぐ無料トライアルに申し込んでUXPinの機能をお試しください。クレジットカード情報不要で、チームにとって最高のデザイン・プロトタイピングツールがお気軽に体験頂けます。
