色を使用してサイトユーザーを操作する

私たちは、人々がトピックに深く飛び込むことに慣れていない時代に生きています。 これは設計にも当てはまります。 今日、誰もがさまざまな権威あるデザインコンテストでの勝利を高く評価しています。最悪の場合、個人的な「好き/嫌い」を大切にしています。 また、Awwwards、Behance、その他の著名な「鑑定士」から国際的なデザイン賞を受賞し、ウェブデザインの現代的なファッションを決定しています。 しかし、それらは重要ですか？ デザインの本質を見ると、それは私たちの世界と同じように、知覚の心理学に基づいています。 そして、心理学はデザインを成功させるための基盤です。 デザインコンペで勝つことはできますが、このサイトは美しい画像に過ぎず、目標をまったく達成できません。 この記事では、特に色などの重要な側面を詳細に調べることにより、ウェブサイトのデザインの心理と有効性について説明します。



色は、インターネット上の人々を操作するための最も重要なツールの1つであり、その重要性はほとんどの人が過小評価しています。 そして、これは私たちがそれに気付かないために起こり、色は背景に残ります。 サイト全体を評価します。 しかし、色の助けを借りて、感情、感情が伝わり、サイトの雰囲気が生まれます。 このツールを適切に管理することで、ユーザーを興奮させ、製品の購入などの行動を促すことができ、サイトに平和で落ち着いた雰囲気を作り出すことができます。



サイトの色は単なる美しさではありません;色は人の認識を変え、ビジネスパフォーマンスの最後の要因とはほど遠いものです。 これについて話す人はほとんどいませんが、これは純粋な心理学であり、意識と潜在意識のある仕事です。 人間の知覚の基本を完全に忘れながら、ボタンのグラデーション、丸みを帯びた角、鋭い角、ブロックサイズ、その他の小さなことについて誰もが頻繁に議論するのかはわかりません。 確かに、基本的な知覚の法則に違反する場合、「小さなもの」や「チップ」は、良い転換を達成するのに役立ちません。



この記事では、色を正しく組み合わせる方法、カラーホイールが必要な理由を説明し、どの色とそれが人間の行動にどのように影響するかを分析します。 配色がどのように機能し、どのような感情を引き起こすかを例で示します。 すべてを冠するために、色をより効果的に使用するのに役立ついくつかの有用なリソースを提供します。

カラーホイール

この記事では、色を正しく組み合わせる方法、カラーホイールが必要な理由を説明し、どの色とそれが人間の行動にどのように影響するかを分析します。 配色がどのように機能し、どのような感情を引き起こすかを例で示します。 すべてを冠するために、色をより効果的に使用するのに役立ついくつかの有用なリソースを提供します。







色や色合いの混合については無期限に話せますが、主なものを強調して基本的な情報に焦点を当てましょう。



カラーホイールには、赤、オレンジ、黄色、緑、シアン、青、紫（虹色）の7つの原色があります。 残りの色は混合することで取得できます。このような色は補色または二次色と呼ばれ、2〜3つの原色と二次色合いを組み合わせるのが最適です。



色を選択する最も簡単な方法は、いわゆる色理論に注意を向けることです。



色とそのすべての汎用性を説明するために、1つの記事では不十分であることにすぐに注意したいと思います。 したがって、この理論から次のような基本概念を選び出します。



コントラスト（または補色）は、カラーホイールの色の反対です。 各色には、最も対照的な反対色があります。 それを見つけるために、色を選択するだけで、円の反対側にある色によってコントラストが作成されます。



そのような色は、サイト上で等しい値を持つため、補色と見なすことができます。 ほとんどの場合、任意の要素に焦点を合わせるために使用されます。



例：赤と緑、オレンジと青。



類似の色 -これらの色は非常によく似ており、互いに補完し、強調して、居心地の良さと快適さを生み出します。 それらを見つけるのは簡単です：選択した色を取り、カラーホイールで近くの色を見てみましょう。まったく同じになります。



例：紫、青、ピンク。



暖色と寒色は、気分や感覚による色の区別です。



暖かく優しい感じを呼び起こす色があり、行動や購入を促します（暖かい）が、逆に彼を落ち着かせて和らげる（冷たい）色もあります。 サイトを作成するときは、ユーザーにどのような反応を期待するかに注意を払いながら、この要素を考慮する必要があります。



例：

暖かい-赤、黄、オレンジ

コールド-ブルー、グリーン、パープル



だから、私たちは補色と類似の色を見つけることを学び、それらが寒くて暖かいことがわかりました。 したがって、さまざまな被写体のサイトに異なる気分色を適用できます。



たとえば、暖かい色はクリスマスをテーマにしたサイトを作成するのに最適です。寒い冬の日には非常に欠けているお祝い、暖かさ、快適さの感覚を作成します。そのようなサイトの例はwww.portablenorthpole.comで、デザイナーは赤いお祝いの色を使用しました。



温かみのある色は、優しさ、良さ、食欲を喚起する必要があるサイトで使用されます。 例として、サイトhttp://daguia.com.brは完璧です-さまざまなお菓子（ケーキ、ケーキ、デザート）のレシピを集めました



サイトhttp://www.decibelblue.comのクールな色は、ユーザーをサイトに没頭させる海の深さと穏やかさです。 デザイナーは青い色を選択しました。これは正しい決断です。彼は、背景の水と美しいサンゴ礁の広がりを完全に強調しています。



クールな色の別の例http://thatgamecompany.comは、ゲーム開発会社のサイトです。 このサイトは明るい寒色で作られており、まるで無重力状態にあるかのように、没入感と風通しの良い効果をもたらします。



サイトの色が単なる装飾ではなく、非常に重要な要素であることを少しずつ理解しています。これは、企業の成功を左右する可能性があります。

色の組み合わせ

色の組み合わせについて説明しましょう。 結局のところ、色を選択することはすべてではありません-それが残りと調和し、各色が独自の意味を持ち、その場所にあるべき全体像を作成することが必要です。



多くは配色の正しい選択に依存します：例えば、出席のレベル、サイトでの販売。 結局のところ、人は快適で居心地の良いものでなければなりません。これが私たちと私たちが達成したいことです。



色を組み合わせるには多くの方法がありますが、最も頻繁に使用され、デザイナーの間で最も人気を得ているものを見てみましょう。



トライアド（三色）は、カラーホイール内のすべての色が三角形を形成する配色です。 これは、最もバランスのとれた信頼できるスキームです。 パレットの色の数による2番目は、色が虹のようにキラキラ光る興味の感覚を引き起こします。そのため、人は感情の絶え間ない急増を受けます。 このシステムを備えたサイトの例はhttp://drewwilson.comです -サイトには忘れられない興味深いデザインを与える3つの原色と色合いがあります



トライアドを取得するには、互いに120度の位置にある3つの異なる色を選択するだけです。







二重補完システム -スキームは、十字架上の十字架を互いに対比し、長方形を形成する4色に基づいています。 パレットは色で最も彩度が高く、これにより有利であることが判明する場合があります。それは喜びと幸福感を生み出します。 この色の組み合わせはめったに使用されませんが、興味深い解決策になる可能性があります。



例として、あなたはサイトを見ることができます-http: //www.enlighten-my-mind.com、職業を色で分けて、サイトはより活発になりました







一貫性のあるシステム -このようなシステムは、以前に類似と呼ばれていた色を組み合わせます。 色の一貫した配置は、多くのプロジェクトでしばしば不足している快適さと安らぎの感覚を与えます。



このシステムの色を選択するには、カラーホイールで次々に配置されている色を選択します。







すべてに加えて、野生生物から学ぶことができます。子供時代から私たちは多くの色と色合いに囲まれてきました-これらは日没、花、森、海、砂漠です、風景や絵画をあなたの目に楽しい色に正しく分割すると、私たちはできる色合いを得るでしょう将来のサイトの配色に変換します。



冬の森と夏の色が異なり、お互いに異なる雰囲気を作り出していることを観察するこのようなスキームの例：







人間が最も知覚しやすいのは、自然な色と自然な色です。



そこで、色の組み合わせのトピックを検討し、各カラーシステムは一意のソリューションであり、特定のタスクごとに使用する必要があることを学びました。 同様に、サイトの作成で色の調和を考慮することも重要です。 適切かつ明確に選択されたスキームは、サイトの成功に影響し、ユーザーにとっての魅力を高めることができます。 結局のところ、ユーザーは最終的に最高で最もポジティブな感情を受け取らなければなりません。



カラースキームを簡単に選択するために、同様の機能を提供する多くの異なるサイトがあります。 そしてここにそれらのいくつかがあります：



Adobe Color CC

パレットン

感情的な色知覚

各文化では、色が役割を果たしており、感情的なレベルで異なって認識されます。 しかし、西洋文化について具体的にお話ししたいと思います。 色が人の行動に与える影響のプロセスはどのように発生しますか？何が彼を購入またはより頻繁にリソースを訪問したいという欲求に正確に導いたのか。



このメカニズムは電子商取引で特に重要です。ここでは、購入の大部分が感情的なレベルで発生し、正しい色とそれに対する反応がコンバージョンに大きく影響する可能性があります。



たとえば、人気のあるオンラインストアの製品ページにアクセスし、配色や注目を集めているものに注目してください。 これらは、「購入」ボタン、値引きや販促のバナー、商品の強調された販促価格などの要素になります。 ユーザーが購入するのはこれらの要素です。



これらの各要素を個別に調べて、これらの要素に使用する色を見つけましょう。



赤 -常に行動の色であり、この暖かい色は常にユーザーの脈動を増加させ、愛、欲望、ギャンブルに関連しています。 色は力と重要性の感覚を呼び起こします。 サイト上のこの色のボタンは、常に最も注目を集めます。



ゲームスタイルを使用し、赤い色がすべてのアクセントを正しく強調しているyoutube10.withgoogle.com Webサイトを見てみましょう。







オレンジ -喜びや安らぎの感覚を呼び起こす必要のあるプロジェクトでこの色を使用することが望ましいです（オレンジが引き起こすのはこれらの関連性です）。 さらに、それは活発な動きの感覚を作成し、多くの場合、創造性の色に関連付けられています。



たとえば、Stickermule社は、Webサイトの実装にオレンジ色を選択しました。これは、これが楽しいエンターテイメントであり、購入できる興味深い楽しみであることを人間の潜在意識に反映しています。







黄色は人の感情を変えることができる色合いによって非常に興味深い色です。明るい黄色はエネルギーの色です。 古典的な黄色は平和感をもたらします。 濃い黄色はサイトを豊かにし、快適な感覚を作り出します。



たとえば、「ラパスタフレスカ」という会社のウェブサイトは、これの鮮明な例です。暖かさ、晴れた日、快適さの感覚を作り出し、市場で製品を非常にうまく宣伝しています。







緑は健康と自然との調和の色であり、この色はしばしばお金に関連付けられ、時にはギャンブルやアルコールなどの関連付けを引き起こす可能性があります。 ほとんどの場合、健康的な栄養、農業、薬などの指示がある場所に適しています。



例はOestervangskovbrugです。 サイトは緑で作られており、自然に親しみを感じることができます







青は信頼性、静けさ、平和の色ですが、黄色と同様に、その影響はあなたがどの色合いを与えるかに依存し、暗い色調は悲しみを引き起こすことさえあります。



企業サイトの場合、青色を使用するのが最適です。また、法的な主題のサイトに最適ですが、より暗い色です。



たとえば、fork-cms.comは海洋のテーマを使用しており、これにより、青色がさらに強調されます。 このサイトは企業のように見え、イラストにより清潔感、信頼感、遊び心を感じさせます。







バイオレットは不思議で不思議な色で、長い間豊かさと豪華さを感じさせます。この色は高価なものを販売したい場合に非常に適しています。ファッショナブルで面白い商品にも適しています。



DigitovのWebサイトでは、紫の色が何か面白い、神秘的な感じを与えています。







黒は非常に強い色であり、完全に注目を集めます。この色で無理をしないことが非常に重要です-サイトにポジティブな感情を呼び起こさせたい場合、黒を非常に強くすることはできません。 多くの場合、この色は背景として使用されます。 たとえば、コンピュータゲームや3Dテレビを広告で販売する場合、この色を使用してサイトに深みを与えることができます。



blizzard.comを見てみましょう。まるで（黒い背景のために）それ自体に没頭しているかのようで、明るく美しい写真がユーザーの目を引き付けます。







白 -この色は黒の正反対です。黒が完全に吸収されると、反対に白は明度とシンプルさの感覚を与えます。 白の場合、周囲のスペースは視覚的に大きくなります。 白は優しさと新鮮さです。 背景色など、ほとんどすべてのタイプのサイトに非常に適しています。



たとえば、私がbehance.netで見たサイトは、白が驚異的に機能することを鮮明に示しています。







グレー -実際には、特別な雰囲気を作り出さず、中立性、非関与などの感情を呼び起こします。 ただし、灰色とその色合いを正しく使用すれば、訪問者が快適な椅子にいるかのように感じられるように、サイトの雰囲気を補うことができます。



そのようなサイトの顕著な例は、wwwards.comです。 ここでは、グレーの色は決して無関心の感情を生み出しませんが、美しい作品の鮮やかな写真で補完され、美しさと快適さの感覚を与えます：







ブラウン -この色を地球に関連付けるのが慣習であり、自信、安定性、快適さを刺激します。 時には金と組み合わせることで、高額の費用と富を感じることがあります。 たとえば、高価なウイスキーや高価な時計を販売する必要がある場合、この色を使用できます。



romanson.comを例に考えてみましょう。写真の時計は非常に高価で高品質です。 サイトは快適さと自信の印象を持っています。 人々が購入を決定するのは、この要因です。







ピンクは女性の聴衆をより引き付け、愛情やロマンスなどの感情を呼び起こす繊細な色です。 この色は、たとえば婦人服店、花、香水などに非常に適しています。 しかし、その個々の色合い（より暗い）は、珍しい音楽、食べ物、飲み物などの領域に関連付けることができます。



代表的な例は、victoriassecret.comです。 ランジェリーの製造業者および設計者は、ピンク色の要素に重点が置かれるような配色をサイトで選択しています。







さらに -たとえば、 flatuicolorpicker.comやflatuicolors.comなどのサイトで使用できる色を選択します。 非常に使いやすく、視覚的に色を見てコードをコピーできます。

おわりに

要約すると、色は常に目立つとは限らないツールであると言いたいです。 ユーザーは、サイトが緑や青だとは思わず、一連の感情と印象を受けます。 ユーザーはスクロールし、ボタンを押します。いくつかの印象、つまりデザイナーが付けたアクセントに導かれます。 たとえば、私たちはエネルギーを与え、料金を請求するため、スニッカーズを購入します。 私たちにとって、それは私たちが見た広告のために潜在意識で遅れました。 Webデザインの色についても同じです。ボタンを押すのは、潜在意識にそれを押す衝動があるためです。 これは目に見えないものであり、しばしば注意が払われていないものですが、同時に色は非常に重要です。



製品（プロジェクト）を作成するときは、最初から色について考える必要があります。 ロゴとコーポレートアイデンティティを作成する段階でも。 ただし、既存のロゴと色があっても、さまざまなオプションをプレイして試すことができます。



サイトを改善し、その有効性を改善するのに役立つヒントをいくつか紹介します。

• サイトを作成するとき、色の数でそれをやり過ぎないでください。さもないと、サイトはサーカスのように見えます。 逆に、色が少ない場合、サイトは退屈になり、場合によってはグレーになります。 最適な数の色、理想的には2〜3とその色合いを使用します。
• アクセントを正しく配置します。 注意を高める必要があるボタン、ブロック、およびテキストの場合は、より濃い色を使用して、それらを強調します。
• テキストは常によく読む必要があり、何よりもテキストの色と最も対照的な色で表示されます。

しかし、これらはほんのいくつかの簡単なヒントですが、一般的に色は心理学に基づいた科学です。 すぐにサイトを最大限に活用してください。



色を想起させる感情は秘密兵器です。 全世界は感情に基づいています。 最大のブランドは、製品の色が購入決定にどのように影響するかを理解するために、全体の調査を実施しています。 サイトがどれほどクールで洗練されていても、ポジティブな感情を引き起こし、ユーザーは引き続き彼と協力して必要なアクションを実行するか、ネガティブな感情を引き起こし、ユーザーはそれをそのまま残します。 直帰率は、売上が低い理由を示すものではありません。



一般に、専門家と協力してください。 専門家との仕事に費用がかかると思われる場合は、アマチュアと仕事をしてみてください。



PSカスタムWeb開発とWebデザインの主要なビジネスに加えて、従業員が多数のコースを教える独自の教育プロジェクトDigitov business schoolがまだあることを多くの人が知っています。 そこで、実験を行うことにし、最近、メンタリングプログラムという革新を行いました。 指導、提案、品質評価、困難な問題への支援、開発に関するアドバイス、その他多くの有用なアドバイスを提供できるコンサルタントについては、お問い合わせください。



これは、次の2つの場合に役立ちます。

1. あなたのプロジェクト 。 独自のプロジェクトがあり、誰かがそれを開発している場合は、品質の専門家による評価、問題解決の支援、改善のヒントなどに専門家を参加させることができます。
2. トレーニング 。 あなたは専門家であり、シニアやチームリーダーと一緒に勉強したいですか？ おそらく、あなたは現在の仕事の開発に欠けていますか？ またはその逆、あなたはあなたの会社の従業員を育てたいですか？ 自分自身でこれらの質問をすることで、私たちはそのようなサービスを思いつきました。 月に数時間、あなたは常に救助に来て、あなたと一緒に設定されたKPIを達成する準備ができている信頼できるアシスタントを得ることができます。

次の分野でメンターを提供する準備ができています。

1. プロジェクトマネージャー
2. UX / UIデザイナー
3. Webデザイナー
4. チームリーダー
5. ソフトウェアアーキテクト
6. HTML / CSS開発者
7. PHP / Python / Java / JS開発者
8. QAエンジニア
9. システム管理者
10. デジタルマーケティングマネージャー

メンターシップは、適用された問題ではなく、よりグローバルな問題を解決するトップレベルの専門家とは別に議論できます。



これはこれまでの実験ですが、すでに最初のメンタリングプログラムを開始しており、実際に機能しています。 誰でもinfo@digitov.comにメールを送ることができます。詳細についてはアドバイスをいたします。



PPS新しい記事を他の記事よりも早く受け取るか、単に新しい出版物を見逃さないために-SECL Groupのファンページ（ Facebook 、 VK 、 Twitter）を購読します。



投稿者

ヴラディスラフ・ユジン

Webデザイナー

会社「 SECLグループ 」