色には多くの心理的瞬間があり、私はこの分野の専門家であるとは主張していませんが、時々逆説的に思える
色の選択と使用に文化の影響があると思います。ウェブサイトのデザインに取り組むときは、この影響を考慮する必要がありますが、特定の文化に依存しないアイデアがあることも明らかです。
今日、色を選択する問題について考えたいと思います。私が推測するように、私たちは皆、特定の反応に関連付けられています-例えば、成功の色、失敗の色、すべて正しいか間違っているときに登録フィールドに入力するときに表示される色の選択肢は何ですか？ 「成功」を考えるとき、どんな色が思い浮かびますか？
この問題を調査するために、非常に迅速で簡単なテストを作成しました。 このテストに合格し、この問題について独自の意見を述べるために、 ここ （ 約英語 ）にアクセスできます。
上記のテスト（ 約英語 ）に合格したら、この投稿の最後にコメントを残し、色とデザインの関係についての考えを共有してください。 そして、いくつかの人気のあるサイトとそれらが従うルールを比較した結果を見て、あなたがちょうど合格したテストから
翻訳スポンサー： Aiken Studio
なぜ色？
GetClicky（私たちが本当に気に入っているサービス）からの実行の成功に関するメッセージを受け取るまで、私たちはそれらについて決して考えなかったことを認めなければなりません。 Feedburnerのアドレスをアカウントに追加しました。これは、 「エラー警告赤」と呼ばれる色で入力されたメッセージです。
そして、ご存知のように、最初は彼らがこの操作中にどこかで犯したエラーについて書いてくれたと思いました（それは私たちのせいです-メッセージ全体を読んでいませんでした）。操作が正常に完了したことが通知されたこと。 これを「エラー警告赤」で書くことにより。
この瞬間を止めて分析する必要がありました。 赤を失敗と関連付けるのはなぜですか？ たぶん、私たちの脳は非常に奇妙に構築されているのでしょうか、それとも私たち全員が観察することを学んだ一般に受け入れられているルールのようなものがありますか？
私たちは、いくつかの人気サイトで登録フォームのフィールドを調べ、それらが従う一般に受け入れられているルールを見つけます（存在する場合）。 分析のために選択したサイトは、 Gmail 、 Twitter 、およびFacebookでした。これらはすべて非常に人気があり、サイトのデザイン、その使いやすさを非常に真剣に掘り下げています（少なくともそうすべきです）。
例としてのサイト
Gmail
例 ：Gmailアカウントのユーザー名は使用できません。
彼らはあなたが選択したユーザー名が利用できないことを示すために赤いテキストを使用しました。これは合理的な十分な解決策だと思います。 彼らは、ユーザー名がすでに使用されているという事実に注意を喚起し、別のオプションを選択する必要があることを伝えたいと考えています。
例 ：ユーザーが選択したGmailアカウントの名前が利用可能
この場合、彼らは青いテキストを使用しました。 おそらく私たちの研究の結果がこの問題に光を当てるだろうが、私たちは彼らの選択の理由を理解していると確信していません。 予定通りにすべてが進んでいるので、彼らはあなたが先に進むことを望んでいます。
例 ：Gmailアカウントの弱いパスワード。
そして再び、彼らは赤いテキストを使用して、パスワードのクラッキングに対する耐性のレベルに注意を引きました。 明らかに、彼らはより安全なパスワードを望み、選択したパスワードを変更するようにあなたを説得しようとします。
例 ：Gmailのパスワードは強力です。
この場合、彼らは選択したユーザー名が利用可能であることを示す青いテキストとは対照的に、パスワードが強いことを示すために緑色のテキストを選択しました。 おそらく、彼らは奨励したい行動に緑色のテキストを使用していますか？
例 ：Twitterユーザー名/ログイン/パスワード。
ご覧のとおり、Twitterはさまざまな色を使用してさまざまなものを示しています。 最初のフィールドですべてが問題ないことを示す緑色のテキスト 、選択したユーザー名がすでに使用されたことを示す赤色のテキスト 、選択したパスワードが単純すぎることを示す灰色のテキストを選択しました（入力しました） 123456）-ところで、セキュリティの向上を目的とした興味深い手段。 これまでのところ、緑は成功したアクションの色のように見えます。
例 ：Twitterパスワード。
Twitterが色域全体を使用して、パスワードに関するさまざまなレベルのセキュリティを示す赤から緑までのパスワードに関するさまざまな情報を送信する方法を見るのは非常に興味深いです。 実際、メッセージを伝えるための非常にシンプルで視覚的な方法です。
フェイスブック
次のように言ってみましょう。Facebookでの登録プロセスが無意味であることには本当に驚きました。「登録」ボタンをクリックするまで、間違いが表示されることはありません。その後もシステムのように見えます。一度に1つのエラーのみを示します。 さて、彼らは色で何を手に入れましたか：
例 ：Facebookで登録します。
ご覧のとおり、Facebookは赤いテキストを使用して、登録する前に生年月日を入力する必要があることを警告しています。 まあ、これは明らかであり、非常に明確に強調されています。 奇妙なのは、システムが一度に1つのエラーのみを示し、特定の各フィールドに入力するための要件についてプロンプトを表示しないという事実です。たとえば、パスワードは6文字より長くする必要があり、名前には大文字を1つだけ使用できます-はい、このため登録は停止されました。 しかし、少なくともそれらは、そのようなメッセージに赤を使用することは一定です。
Getclickyケース
Getclickyの例に戻ります-確認のための赤いテキスト。 TwitterのGetclickyチームにメッセージを残しました。彼らから受け取った応答は次のとおりです。
興味深い点は、ユーザーが伝えようとしているメッセージに関係なく、ユーザーの注意を引き付けるため、赤いテキストを使用していることです。 あなたが彼らのサイトをさまよう場合、あなたはこの傾向を見つけるでしょう：
もちろん、競合他社との比較に関する質問の場合は、肯定的/確認的なメッセージに緑色を使用します。
これは何？ 保存されていない変更の赤いテキスト。変更が保存されると、 緑色のテキストに変わります。
興味深い点として、彼らはここに少し多様性を追加しましたが、全体として、メッセージを伝えるために赤い色を使用するように感じています。 ただし、この問題について多少不変であっても、彼らを傷つけることはありません。 これが結果にどのように関係するか見てみましょう。
結果：
クイックテストの結果 （この記事の執筆時点で得られたもの ）に注目します （急に見逃した場合は、ここで合格できます）。
あなたが見ることができるように、人々は何よりも緑を成功と関連付けます;回答者の76％が成功を意味するこの色を選択しました。 これに赤を選んだ人はいません。
回答者の大部分（88％）が失敗の色として赤を選択しました-私たちだけでなく、それを聞いてうれしいです：
次の点の興味深い結果：回答者の71％が（もちろん、選択する限られたグループから）最も目立つ色として赤を選択し、18％が緑を選択しました。 すべてのメッセージをユーザーに伝えるために、将来的に赤を使用すべきだと思いますか？
この割り当てでは、59％が紫を選択し、35％が青を選択しました。 どこかでそのようなすみれ色を使用するサイトを知っているかどうかはわかりませんが、そのような青の色合いを使用するサイトがいくつかあり、TwitterとTweetボタンが最初に思い浮かびます。 これらの結果は、人々がサイト上のボタンをどのように操作するかを示していると思いますか？
88％が「この操作を正常に完了しました」というメッセージに緑色を選択しました。ほとんどの人は緑色を成功または確認に関連付けているようです。
赤色は結果の点で依然としてリーダーです-回答者の94％が警告メッセージに赤色を選択しました：
これはどういう意味ですか？
結局のところ、赤を失敗と関連付けるだけでなく、緑を成功と関連付けます。 私たちはウェブサイトのデザインの革新を両手にしていますが、一般的に受け入れられているルールに従う必要がある瞬間や場所がありますが、この瞬間もその1つです。
そして、私たちが得た結果は、私たちが持っていた小さな選択から、赤色が最も際立っていることを示していますが、これは、すべてのメッセージを赤色で書く必要があるという意味ではありません。 結果は、肯定的な確認として赤いテキストを使用することは非論理的であり、ユーザーを混乱させる可能性があることを示しています。
Twitterはここで検討していることの最良の例だと思います-さまざまなメッセージを伝えるために非常に効率的にカラーピッカーを使用しており、これは私たちに少し時間を節約するか、不満感を避けるのに役立ちますが、それでも作成するのに役立ちますこのサービスについて人々はさらに積極的です。
赤いテキストは、Getclickyの使用を停止するのに十分ではありません（非常に気に入っているため、すべての友人にお勧めします）が、このような小さな変更は、ユーザーによるこのサービスのより肯定的な認識につながる可能性があります。 このサイトは、テキストメッセージの色の選択を100％も遵守していないため、さらに混乱を招き、一般的に受け入れられている特定の規則に従うことが重要です。
この記事から何を学ぶことができますか？
一般に受け入れられているルールは通常、理由なしには存在せず、人々はWebサイトの色の意味に非常に慣れているように見えます。また、一部の色は他の色よりも際立っている場合がありますが、またはテキスト、人々はそれに注意を払いません。
一貫性も重要な要素です。 サイトのどこかで使用する場合は、おそらくサイト全体で同じことを行う必要があります。 すべてが1つの方法で1つの方法で構成され、別の方法でまったく異なる方法で構成されている場合、ユーザーを混乱させて失望させるだけです。 恒常性に固執します。
そして重要な点： 使いやすさをチェックすることは、結局のところ、ユーザーが望むものを見つけるための最良かつ最も信頼できる方法です。誰もが独自の方法でサイトを操作するからです。 このサイトへの訪問者は、従うべき方法と同じ方法でお互いに異なります。 自分に最適なものを知るために、サイトと訪問者を調べてください。
前に言ったように、 「それを構築すれば、彼らは来るでしょう。 それをうまく構築すれば、彼らは戻ってくるでしょう」と、結局のところ、私たち全員が求めているのはそれではないでしょうか？