配色の基本ルール
元記事
色数を制限する
配色は最高でも３色まで
配色カラーパレットとして定義した色以外が必要な場合は、色合いや色彩トーンを使ったテクニックを利用する
配色カラーパレットの作成
単色、モノクロ
単色をベースに、影やトーン、色合いを調整することで配色を作成する
わずかな変化に、保守的な印象を与える
類似色
選択したメインカラーのカラーホイールの両隣にある色を加えた配色
どんなデザインプロジェクトにも適用しやすい、多彩性がポイント
補色
選択したメインカラーのカラーホイールの反対側にある色との組み合わせ
赤と緑や、青とオレンジなど
ハイコントラストが特徴だが、バランスや調和が取りにくく、適用しにくい点もある
何かを目立たせたい時、もっとも簡単な方法は、補色カラースキーム
カスタム
手軽にカラーパレットを作成できる方法の一つに、白黒を基調としたベーシックな配色に、鮮やかなアクセントカラーを追加する方法があり、魅力的な見た目を実現できる
自然からインスピレーションをもらう
日常生活で美しいと感じる瞬間があれば、配色カラースキームとして活用するのもいい
60 30 10 ルール
60% + 30% + 10% の比率は、バランスのいい色をとるためのもの
60%がまとまりのある色合い、30%が補色、10%がアクセントカラー
まずはグレースケールでデザイン
デザイン要素の配置とレイアウトに集中する
黒色を利用するのは避ける
実生活では、純粋な黒色はほとんど存在しない
物体にはいずれも光量があるため、真っ黒ではなく、暗い灰色
せっかく選んだ色の隣に、純粋な黒を配置すると、際立ちすぎて他の色を圧倒する
色に少しだけ彩度を加えることが大切
重要性を色のコントラストで表現する
色は視線を誘導するのに役立つツールで、何かを目立たせたいほど、コントラストの色に頼るべき
重要なコンテンツや要素に対しては、はっきりとしたコントラストが最適
色を使ってユーザの感情を引き出す
色には固有の意味がある
ウェブサイトやアプリの配色カラーパレットを選択する際には、どのように見えるかを考えるのではなく、どのような気分を感じるのかを検討する必要がある
赤色
コンテンツによって様々なアイデアを適用することができる色
炎、温かさ、危険、血、緊急性、イキイキとした色、心臓やハートに関連、時に暴力的
素早くユーザの注目を集めたり、注目させたい特定の要素を目立たせることができる
オレンジ色
火に関連する色
行動的、精力的、楽天的な印象を与える
収穫時期、秋の季節を連想させる
黄色
太陽の色
幸せ、快活、フレンドリー、春のフレッシュさなどを表す
コンテンツによって、注意や警告のシグナルにもなる
緑色がかった黄色の配色では、不健康、不愉快な印象にもなり得る
歴史的に見て、病気、隔離などを連想させることがある
緑色
自然や植物、成長などを示す色
健康、フレッシュさ、自然をテーマにした雰囲気
深い緑色は、お金などに関連する富、安定を表す
青色
海や空を連想させる色
平和的、清潔の品質を表す
涼しく、落ち着いた印象
悲しみ、憂鬱を表すこともある
紫色
王位、威厳、名誉などを表す
霊的、宗教的にも関連づけられる
ピンク色
女性的、無邪気、若々しさを連想させる色
黒色
たくさんの意味合いを持つ色
力、高級さ、洗練、上流なイメージを演出する
死、悪魔、神秘性などにも関連づけられる
洋服において黒色は、フォーマルな正装、および追悼の意を表す
白色
ライトや雪などの色
純粋さ、純白、徳、完璧さなどを表す
ありのまま、無菌にも繋がる
灰色
中立的、洗練された印象を与える
白黒どちらにも対応できる
主要カラーとして利用することで、より形式的な堅いイメージになる
デザインを理解しやすくする
色だけの記号は避ける
色盲の人は赤色と緑色の組み合わせをうまく認識することができない
複数の視覚的要素を組み合わせ、色だけではなく、線やパターン、テクスチャ、文字テキストなどの要素を利用し、状態を伝えると良い
コントラストの低い文字テキストは避ける
コントラストの低い色では、文字が読みにくくなる
配色ツール一覧
Photoshopを利用し、色盲シミュレーションを行うこともできる
この記事が気に入ったらサポートをしてみませんか？