ウェブサイト、eコマース、またはアプリケーションの配色を開発する方法

ウェブサイト、eコマース、またはアプリの配色を開発する

ブランドに関する色の重要性に関するかなりの数の記事を共有しました。 Webサイト、eコマースサイト、またはモバイルまたはWebアプリケーションの場合、これも同様に重要です。 色は以下に影響を与えます:

  • ブランドの第一印象とその価値–たとえば、高級品は黒を使用することが多く、赤は興奮を意味します。
  • 購入決定 –ブランドの信頼は、色のコントラストによって決まる場合があります。 柔らかな配色はより女性的で信頼できるものであり、厳しいコントラストはより緊急で割引主導型である可能性があります。
  • 使いやすさとユーザーエクスペリエンス– 色には心理的なものがあります 生理学的影響もあり、ユーザーインターフェイスをナビゲートするのがより簡単またはより困難になります。

色はどれほど重要ですか?

  • 85%の人が、色が購入するものに大きな影響を与えると主張しました。
  • 色はブランド認知度を平均80%押し上げます。
  • 色の印象は、製品の承認または拒否の60%に責任があります。

Webサイトの配色を決定する場合、添付のインフォグラフィックに詳細な手順がいくつかあります。

  1. 原色 –製品またはサービスのエネルギーに適した色を選択してください。
  2. アクションカラー –これは以下のインフォグラフィックにはありませんが、プライマリアクションの色とセカンダリアクションの色を特定することは非常に役立ちます。 それはあなたの聴衆を色に基づいた特定のユーザーインターフェース要素に集中するように教育します。
  3. Additional Colors –追加を選択 補完する色 あなたの原色、理想的にはあなたの原色を作る色 ポップ.
  4. 背景色 – Webサイトの背景の色を選択します–おそらく原色よりも攻撃的ではありません。 ダークモードとライトモードも念頭に置いてください。ライトモードまたはダークモードに配色を組み込むサイトが増えています。
  5. 書体の色 – Webサイトに表示されるテキストの色を選択します–黒一色の書体はまれであり、推奨されないことに注意してください。

例として、私の会社 Highbridge 人々ができる直接販売のeコマースサイトを構築したいと考えていたドレスメーカー向けのオンラインブランドを開発しました オンラインでドレスを購入する。 ターゲットオーディエンス、ブランドの価値を理解し、ブランドは主にデジタルであるが物理的な製品もあるため、プリント(CMYK)、ファブリックパレット(Pantone)、およびデジタル(RGBおよびHex)。

市場調査による配色のテスト

配色を選択するためのプロセスは集中的でした。

  1. 私たちは、ターゲットオーディエンスを対象に一連の原色のマーケティング調査を行い、単色に減らしました。
  2. いくつかの配色を絞り込んだターゲットオーディエンスを対象に、一連のXNUMX次色とXNUMX次色のマーケティング調査を行いました。
  3. 製品のモックアップ(製品のパッケージ、ネックタグ、吊り下げタグ)と、配色を使用したeコマースのモックアップを作成し、クライアントとターゲットオーディエンスにフィードバックを提供しました。
  4. 彼らのブランドは季節性に大きく依存していたため、季節の色もミックスに取り入れました。 これは、広告やソーシャルメディア共有の特定のコレクションやビジュアルに役立ちます。
  5. 最終的なスキームを決定する前に、このプロセスをXNUMX回以上実行しました。

closet52の配色

ブランドカラーはライトピンクとダークグレーですが、 アクションカラー 緑の色合いになります。 緑はアクション指向の色であるため、ユーザーの目をアクション指向の要素に引き付けるのに最適な選択でした。 二次アクション(白い背景とテキストのある緑の境界線)に緑の逆を組み込みました。 また、ホバーアクションのアクションカラーで濃い緑色をテストしています。

サイトを立ち上げたばかりなので、マウストラッキングとヒートマップを組み込んで、訪問者が惹きつけられる要素を観察し、最も多くの人とやり取りして、見栄えが良いだけでなく、パフォーマンスも優れていることを確認します。

色、空白、および要素の特性

配色の開発は、ユーザーの操作を観察するために全体的なユーザーインターフェイスでテストすることによって常に達成する必要があります。 上記のサイトでは、非常に具体的な余白、パディング、アウトライン、境界線の半径、図像、書体も組み込んでいます。

マーケティングや製品の資料を社内で配布するために、会社に完全なブランディングガイドを提供しました。 ブランドの一貫性はこの会社にとって非常に重要です。なぜなら、彼らは新しく、現時点では業界で何の認識も持っていないからです。

これが配色の結果のeコマースサイトです

  • Closet52-ドレスをオンラインで購入
  • Closet52コレクションページ
  • Closet52製品ページ

Closet52にアクセス

色の使いやすさと色覚異常

サイトの要素全体の色のコントラストのユーザビリティテストを忘れないでください。 あなたはを使用してあなたのスキームをテストすることができます ウェブサイトアクセシビリティテストツール。 私たちの配色では、将来的に取り組む予定のコントラストの問題があることを知っています。あるいは、ユーザーのためにいくつかのオプションがあるかもしれません。 興味深いことに、ターゲットオーディエンスで色の問題が発生する可能性は非常に低いです。

色覚異常は、色のない障害のあるユーザーが区別できるいくつかの色の違いを認識できないことです。 色覚異常は約に影響します 男性のXNUMX〜XNUMXパーセント (約10.5百万人)そして女性のXNUMXパーセント未満。

Usability.gov

WebsiteBuilderExpertのチームは、このインフォグラフィックと詳細な付随記事をまとめました。 あなたのウェブサイトの色を選ぶ方法 それは非常に徹底的です。

あなたのウェブサイトの配色を選択する方法