Web用にデザインするときに絶対に避けなければならない5つの色の選択

Webは常に視覚的になっています。 優れたコンテンツは依然として王様ですが、目立つためには、そのコンテンツを魅力的なビジュアルパッケージにラップすることをお勧めします。

デザインの専門家にとって、それはそれほど問題ではありません。 彼らは色彩理論と色彩心理学に徹底的に浸っています。

しかし、Webの視覚的性質の高まりに合わせて、Webコンテンツを最新の状態に保とうとしているWeb住人の数が増えているのはどうでしょうか。 色彩理論と色彩心理学を要約したWeb記事でさえ、デザインにおける色の基本を共有するのに優れていますが、グラフィックスの専門家が行うような背景を持たない人々によって誤解される可能性があり、悲惨な決定につながる可能性があります。

では、Webページで絶対に避けなければならない色の選択は何ですか？

ピュアブラック

HTMLで＃000000としてコード化されている黒（純粋な黒）から始めましょう。

驚いた？ 黒はいたるところにありますね。ほとんどのウェブページのテキストのように、いたるところにある小さな黒いドレスと夜の空です。

まあ、純粋な黒はあなたが思うほど一般的ではありません。 その真の＃000000純黒は、実際には不自然な色です。 自然界には存在しません。 純粋な黒はすべてのスペクトルの光を吸収する必要があり、それは自然界では起こりません。 自然な色がよりブレンドされ、落ち着きます。

したがって、純粋な黒は私たちの目が見慣れているものではありません。 厳しいです。 それは際立っています（それはその小さな黒いドレスをとても人気があるものの一部です）。 それなら、ウェブデザインで使ってみませんか？ 結局のところ、色彩心理学に触れているWeb記事は、魅力、洗練、権力、権威とのつながりを強調しています。 彼らが黒の使用を奨励するとき、それらの記事は間違っていますか？

彼らはまったく間違っていません。 黒は、人々の心の中でいくつかの強力な前向きな関係をかき立てるために使用することができます。 重要なのは、純粋な黒ではない黒を使用することです。

純粋な黒は自然な色ではないため、脳が処理するのは困難です。 黒を＃000000から＃111111または同様の非常に濃い灰色にバンプしても、訪問者の脳にそれほど負担をかけることなく、黒の目を引く利点を得ることができます。

インターフェイス要素のネオンカラー

ネオンカラーも目を引く一方で、脳を圧倒する同じ傾向があります。 自然界には現れない色として、それらは脳に馴染みがなく、より落ち着いたブレンドされた色よりも処理が困難です。

グラフィックハイライトの目を見張るようなネオンカラーを保存して、インターフェイス要素ではなくビジュアルコンテンツをポップにします。 また、グラフィックに注意を引くためだけでなく、重要な情報が存在するページの部分に訪問者の注意を引くためにも使用してください。

つまり、メインテキスト、サイドバー、ナビゲーションリボン、ボタンの背景など、テキストがスーパーインポーズされる背景にネオンカラーを使用しないでください。

テキストコンテンツの背景として、目に優しい、より自然で軽くブレンドされた色を使用します。 テキストまたはテキストの背景のネオンカラーは目を疲れさせる傾向があります。 これはあなたが望む最後のものであるウェブサイトとそれが提供するものの潜在意識の否定的な印象を残す可能性があります。 あなたはあなたの訪問者にあなたのビジネスについて前向きな気持ちを残したいと思っています。

避けるべき最初の2つの色の選択をカバーする一般的なルールは、HTMLコーディングで色スペクトルの極端な色、特にテキストとテキストの背景のゼロとFを特徴とする色を避けることです。 不自然な絶対に純粋な色から少し離れてそれらをバンプすると、それらは心が処理しやすくなり、訪問者により良い印象を残します。

コントラストが高すぎる組み合わせ

過度に純粋な色を避けることに加えて、色の特定の組み合わせに注意してください。

クリスマスシーズンの定番ですが、赤と緑はサイトのデザインに多くの問題を引き起こします。デザイナーの間で小さな詩が出てくるほどです。「赤と緑は、間に色がないと決して見られないはずです」

これは、脳がこれら2つの色を処理する方法によるものです。 赤は最も暖かい色として登録され、脳の活動を刺激します。 それは私たちの注意を最も早く得る色です。 赤は脳をかき混ぜます。

一方、緑はクールな色として登録されます。 脳を落ち着かせます。 この2つを組み合わせると、脳は視覚を処理するという不快な位置に置かれ、同時にそれを動揺させて落ち着かせようとします。 それは脳を対立させます。 それは好印象を与えるのに良くありません。

前述のテキストまたはテキストの背景でのネオンカラーの使用と同様に、赤と緑を一緒に使用すると、提供するもの自体とは関係のない、提供するものに対する否定的な潜在意識の印象を訪問者に残す可能性があります。 代わりに、その否定的な印象は、衝突する色を処理することの内部の不快感から来ています。

赤と緑にも2番目の問題があります。 西洋の文化では、人々は赤を停止またはいいえに関連付け、緑を実行またははいに関連付けることに慣れています。 繰り返しますが、それは脳を不快にする矛盾した入力のセットを処理するように脳に強制します。 そして、脳が不快なとき、それはあなたの提供物にその不安感を移します-あなたが望むものではありません。

極端なコントラストではありませんが、同じ原則が赤と青の組み合わせに適用され、程度は低いですが、いわゆる二次色、つまり紫、緑、オレンジの組み合わせにも適用されます。

赤と青は、非常に暖かい色と非常に冷たい色の衝突を引き起こします。 一次色のブレンドである二次色（紫は赤と青のブレンド、緑は青と黄色のブレンド、オレンジは黄色と赤のブレンド）は単純にうまく混ざりません。 これらの組み合わせはどれも、脳が快適に処理するにはコントラストが強すぎるだけです。

繰り返しになりますが、カラーホイール上で互いに正反対の色、または暖かさと冷たさの点で反対の色を使用することから生じる脳に負担をかける組み合わせを回避する、より自然でブレンドされた色を目指してください。

コントラストが低すぎる組み合わせ

ただし、色相（色）と値（相対的な暗さ）がほぼ同じ色のみを使用する必要があるという意味ではありません。 あなたもその方向に行き過ぎて、訪問者に別の種類の問題を引き起こす可能性があります。

ピンクや黄色、水色や白地のラベンダーなど、白い背景に明るいテキストを配置すると、訪問者がテキストの内容を理解しにくくなる可能性があります。 同じことが、赤やロイヤルブルー、黒のマゼンタなど、暗い背景の暗いテキストにも当てはまります。

他の特定の悪い組み合わせは、緑に黄色または黄色に緑、そして黒、青、またはマゼンタの赤の背景です。 色覚異常の訪問者にテキストがまったく表示されないリスクを冒すだけでなく、色覚異常の訪問者にあなたが書いたものを読むように緊張させることでイライラさせます。 そして、ここでは潜在意識の印象について話しているのではありません。 私たちは、彼らがあなたのウェブサイトを彼らが読みにくくしたことであなたに意識的にイライラしていることについて話している。

このエラーは、ページ上部の大きなヘッダー画像など、画像にテキストをスーパーインポーズする場合に特によく見られます。 ヘッダー画像の大部分だけでなく、すべてのテキストがヘッダー画像ではっきりと読み取れることを常に確認してください。

多色の背景

ウェブデザイナーに無料のテクスチャ背景を提供するウェブサイトはたくさんあり、あなたはそれらがあなたのウェブサイトを際立たせると感じるかもしれません。 ただし、使用する場合は注意してください。 テクスチャード加工された背景は、忙しくて訪問者をあなたのコンテンツからそらすリスクがあります。 また、画像にテキストをスーパーインポーズする場合と同じように、テクスチャ背景でテキストが失われる危険性があります。

テクスチャ背景の選択には注意してください。 インターネットの初期の時代に人気のあった、目を刺すような色の衝突する背景は避けてください。 これらの背景は、テキストが簡単に失われる、明るく衝突する色の小さな繰り返しデザインで構成されていることがよくありました。

今日のトレンドは、気を散らすことなく背景に奥行きを与える、繊細で自然な外観です。 また、Webサイトのカラーパレットの一般的な経験則では、3色以下、間違いなく4色以下を使用します。

テクスチャの使用に注意する同じ警告が、グラデーション（背景の色または暗さが背景のある部分から別の部分に徐々に変化するグラフィック要素）の使用にも当てはまります。 ページ上のテキストの複数のブロックにそれらを使用することは避けてください。 また、テキストがグラデーションで失われないように、テキストの色を含むグラデーションの使用は避けてください。 テキストは常にボックスまたは背景のクリアな領域に配置し、他の視覚要素から十分なスペースを空けて、テキストがはっきりと目立つようにします。

結論

Webサイトの色を選択するには、お気に入りの色や別のWebサイトで気に入った色のセットを選択するだけでは不十分です。 それは、オンライン記事から孤立した推奨事項を取得するだけではありません。色の選択については、これ以上学ぶことなく知る必要があるからです。

色は説得力のある非常に強力なツールです。 注意深く使用すると、訪問者をあなたが実行してほしい行動に向けて動かすのに役立ちます。 不注意に使用すると、訪問者にあなたのビジネスに対する漠然とした不安感を残したり、サイトの使いやすさに意識的にイライラさせたりする可能性があります。

脳に優しい色の選択に焦点を合わせ、一緒にうまく機能する色を選択する方法を学び続ければ、あなたの色があなたの他のすべての要素と一緒に機能するサイトを設計するための道を歩むことができますあなたの目標を達成するためのサイト。