私は、広くて広大な世界から興味深い、そして私が考える有益なニュースを発信し続けます。 SEO。 今日はウェブサイトのデザインの色について話します...はい、はい、まさに配色についてです。 さて、始めましょう。 ウェブサイトのデザインの色米国のオックスフォード大学の心理学者は、広告のクリックスルー率に影響を与えると考えています。
行動: ポータル上の広告のクリック率に対するサイトの色の影響
アメリカの科学者は、平均的なユーザーが 1 つのインターネット ポータルに約 2 分費やすと計算しました。 このうち、最後の 4 ～ 7 秒が私たち SEO スペシャリストにとって決定的ですが、これはデザイナーにも当てはまります。 この期間中に、ユーザーは Web サイトを離れるか、提供された広告をクリックします。 選択は以下によって決まります ウェブサイトと広告ブロックの色。 「最悪」（望ましくない、クリックできない）オプション ウェブサイトデザイン- サイトをグレーまたは赤の色調でデザインします。 インターネット リソースに掲載される広告の効果と同様に、トラフィックはゼロ (クリックスルー率) に近づきます。 白が主要な色であるサイトを使用するユーザーは、快適さと静けさを経験します。 ユーザーはバナーをクリックしやすくなりますが、見出しが予想外に (非常に) 明るくコントラストが高く、テキストと URL が最大サイズである場合にのみ、コンテキスト広告がユーザーを惹きつけます。 ほぼ同じことがグリーンデザインでも起こります。
青のポータル デザインは信頼を表し、黄色はコンテキストに最適です
青いデザインとレイアウトの Web サイトは信頼を呼び起こします (ソーシャル ネットワーク「VKontakte」や「Facebook」がすぐに思い浮かびます)。 興味深いことに、ここでの広告は白い背景に配置され、見出しが 2 階調暗い色に設定されている場合に機能します (これも私たちのお気に入りの「VKontakte」と Facebook に適しています)。 最多優勝 ウェブサイトのデザインの色, イギリスの心理学者によると、黄色。 多くのインターネット ユーザーは一度に 2 ～ 3 個の広告を閲覧するため、ここでの訪問数とクリック数の比率は 1 対 2.5 です。 しかし、すべての黄色のサイトのバナーは効果がありません。 ユーザーが広告ブロックやバナーをクリックするポータルのデザインに適したもう 1 つの色は、コントラストのない茶色です。 ここで、バナー広告の結果は訪問 3 回あたり 1 クリックですが、コンテキスト広告の場合は約 1 ～ 2 です。
PS. 要約しましょう。 まず最初に私たちを混乱させるのは、当然のことながら、テストされた聴衆はロシア語を話す人ではなく、私たちは異なる考え方を持っているということです。 いずれにしても、CIS の居住者はアメリカやヨーロッパの居住者ではありません。 抑制されたヨーロッパやアメリカのインターネット リソースとは対照的に、ロシアの Web サイトはデザインの虹色と色合いによって常に区別されてきました (顕著な例は Apple の Web サイトです)。 第二に、これに関連して、当社の広告は明るくコントラストがあるため「クリック」されます (私自身の見解です)。 黄色のサイトやポータルについては同意できないかもしれません。これらは国内のネットワーク ユーザーの間で信頼を呼び起こしません (大きな黄色のポータルについてすぐには言いません。どれも思い浮かびません)。ただし、おそらく小さな子供たちの間を除きます (ただし、これは私の考えです)。意見）！ 一般に、おそらく小さなテストを行う必要があります。これについては「実験」セクションで説明します。
どのボタンの色が最もコンバージョン率が高いかは、多くの人が答えを知っている古い哲学的な質問です。 「赤」 - 初心者のマーケティング担当者が答えます。 「対照的」 - 経験豊富なマーケターがお答えします。 このトピックに関して 21,666 人のユーザーをテストしました。 そして、非常に興味深い結論に達しました。
記事の冒頭には、注目を集める興味深い事実を追加する必要があります。 このアドバイスに基づいて、実際にはボタンの色を変更するだけでコンバージョンが最大 65% 増加したと言えます。 この記事では、その結果とその方法について説明します。
カラーを使用するとコンバージョンをどれくらい増やすことができますか?
私たちがコンバージョン管理のための特効薬を発明したとは言いません。 コンバージョンが増加する場合、私は 1 つの単純な結論に達しました。 すべての人にとって常に機能する 100% のステートメントはありません。 魔法の薬も。 以前、「無料」という言葉が場合によってはコンバージョン率を低下させることについて書きました。 他の「100パーセント」の真実については何が言えるでしょうか。
では、ボタンの色を変えるだけでコンバージョン率はどれくらい上がるのでしょうか?
コンバージョンが最大 65% 増加しました。 65% が最大のテスト結果でした。 平均は11%でした。 しかし、このコンバージョンの増加さえも非常に良い結果です。 これはボタンの色を変更することで実現できると考えられます。
赤は勝者の色です
多くの専門家によるテストでは、赤いボタンのコンバージョン率が最も高いと報告されています。 なぜ？ それぞれの色には独自の関連性があり、特定の感情を呼び起こすことがわかっています。 赤という色は、停止、危険、情熱を意味します。 そしてほとんどの場合、それがインターネットマーケティングのより良い結果につながる（と信じられています）。
A/B テストを作成するアルゴリズムは次のとおりです。
- コンストラクターでウィジェットを作成します。 5分かかります。
- それをコピーし、テスト用に変更を加えます。 1分かかります。
- A/B テストを作成し、これらのウィジェットを選択します。 1分かかります。
1. コンストラクターでウィジェットを作成する
ウィジェットを作成するには、コンストラクターに登録する必要があります。
作成プロセスは 3 つのステップで構成されます。
- 使用するウィジェット テンプレートを選択します。
- ウィジェットを編集します: - 必要なテキストを書き込みます - 必要に応じて色を変更し、画像をアップロードします
- 表示設定を選択します: - ウィジェットをいつ表示するか (時間別、終了時、ページのスクロール時など) - どのデバイス (コンピューター、モバイル、タブレット) で - 変換後に何をするか (ありがとうを言う、経由でリダイレクト)リンクをクリックするか、単にウィジェットを閉じてください)
ウィジェットの作成に関するこのビデオをご覧ください。 ここでは各段階について詳しく説明します。 ウィジェットを作成するためのテキストによる説明は、ここにあります。
デザイナーにはさらに多くのカスタマイズオプションがあることに注意してください。 たとえば、一定のページ数を閲覧した際に表示する、曜日別、参照元別、表示頻度別などです。 ただし、最初に基本設定を使用してから、追加の設定を試してみることをお勧めします。
2. ウィジェットをコピーし、テスト用に変更を加えます
ウィジェットを作成したら、そのコピーを作成する必要があります。 新しいウィジェットに変更を加え、A/B テストを実行します。 これを行うには、作成したウィジェットの「コピー」アイコンをクリックします。
サイト上で自動的に有効になります。 編集されていないので、オフにする必要があります。 これを行うには、ステータスを変更します。
次に、「エディタに追加」アイコンをクリックして設定に移動します。
ここで、テストしたい要素を変更します。 たとえば、ボタンの色を変更してみましょう。 これはワンクリックで完了します。 別のボタンの色を選択するだけです。
「ボタンの色」をクリックして、希望する色を選択します。
その後、ウィジェットを保存します。 ステップ 4 では、前のウィジェットの設定を維持するために何も変更する必要はありません。 これを行うには、「保存」ボタンをクリックするだけです。
これで、ボタンの色が異なる 2 つのウィジェットが作成されました。 A/B テストの作成に進むことができます。 便宜上、残っているのは 2 番目のウィジェットの名前を変更することだけです。
3. A/B テストを作成する
テストを作成するには、「A/B テスト」メニューに移動する必要があります。 そして「テストの作成」ボタンをクリックします。
ここで必要なものは次のとおりです。
サイトを選択 - テストの名前を書き込みます
テストの種類を選択してください
検査の種類について。 KEPLER LEADS には、クラシックと個別の 2 種類の A/B テストがあります。 違いは、再訪問者に対するウィジェットの表示です。 再訪問者に新しいウィジェット オプションを表示したい場合は、[クラシック テスト] を選択します。 戻ってきたユーザーに別のウィジェット オプションが表示されないようにするには (表示設定に応じて、最初に表示されたウィジェット オプションが記憶され、常にこのウィジェット オプションのみがトリガーされます)、[個別] を選択します。
テストの種類を選択したら、「追加」ボタンをクリックします。 最後のステップは残っています - テスト用のウィジェットを選択します。 これを行うには、「ウィジェット」セルをクリックして選択します。
ウィジェットを選択した後、それらがすべてアクティブであるかどうかを確認します。 非アクティブなウィジェットがある場合は、ここでそれらを有効にすることができます。
全て！ テストが作成されました。 すべての結果はテスト統計で確認できます。 これを行うには、テスト名の右側にある「表示」アイコンをクリックします。 1,000 インプレッションからの合計トラフィックに対してテストを実行することを推奨します (これは「ビュー」列で確認できます)。 この後、次のテストを実行することを決定します。
結論
あなたの仕事はそこで終わりません。 次に、結果を追跡し、重要なデータに到達した後 (1000 人以上の訪問者を推奨)、他の仮説をテストする必要があります。 これらは、見出し、行動を促すテキスト、価値提案、画像などです。他の A/B テストについては、次の記事で書きます。 コメントで結果を共有してください。
HTML を使用すると、ページ上のすべてのリンクの色を設定したり、個々のリンクの色を変更したりできます。
ページ上のすべてのリンクの色を設定します
リンクの色はタグの属性として設定されます
。 属性はオプションであり、指定されていない場合はデフォルト値が使用されます。link - Web ページ上のリンクの色を定義します (デフォルトの色は青、#0000FF)。
vlink - すでに訪問したリンクの色。 デフォルトの色は紫、#800080 です。
HTML では、色は通常 #rrggbb の形式で 16 進数で指定されます。ここで、r、g、b はそれぞれ赤、緑、青の成分を表します。 各色には 00 ～ FF の 16 進値が与えられ、これは 10 進数の 0 ～ 255 の範囲に対応します。 これらの値は、# 記号が前に付けられた単一の数値に結合されます (例 1)。
例 1: リンク色の設定
サイトのコンテンツ
色は 16 進形式で指定する必要はなく、キーワードを使用することもできます。 この例では、Web ページの背景色が黒、リンクの色が赤に設定されています。
リンクの色を変更するにはCSSを使用すると便利です。 Web ページ上のすべてのリンクの色を設定するには、次の疑似クラスが適用され、A セレクターに追加されます。
訪問済み — 訪問済みリンクのスタイル。
active — アクティブなリンクのスタイル。 リンクをクリックするとアクティブになります。
例 2 は、スタイルを使用して Web ページ上のリンクの色を変更する方法を示しています。 これを行うには、カラー スタイル プロパティを使用して、特定のテキスト (この場合はリンク) の色を設定します。
例 2. スタイルで指定されたリンクの色
サイトのコンテンツ
ページ上の個々のリンクの色の設定
上記の色を設定する方法は、Web ページ上のすべてのリンクに対して機能します。 ただし、異なる色を同時に使用する必要がある場合もあります。 たとえば、Web ページの暗い領域には明るい色が、明るい領域には暗い色がそれぞれ表示されます。 これにはスタイルを使用することもできます。
リンクの色を変更するには、タグの style="color: #rrggbb" 属性を使用します。 ここで、#rrggbb は 16 進数の色です。 色の名前を使用したり、 rgb (132, 33, 65) の形式で色を指定したりすることもできます。 赤、緑、青の 10 進数値が括弧内に示されています (例 3)。
サイトのコンテンツ
インターネットマーケティング
使いやすさ
この例では、スタイルを使用して色を設定する 3 つの異なる方法を示します。
訪問者がクリックしやすい広告のカラーデザインを推測する必要はありません。 さまざまな色で広告を表示してみる必要があります。 そしてその結果に基づいて、サイト訪問者の好みを調べます。 しかし、窓の外は21世紀。 したがって、すべてを実行してくれる小さなスクリプトを作成します。
広告にはどの色を選ぶべきか
私の実験では、青、赤、緑の 3 原色に落ち着きました。 それぞれ明るさを変えて撮影してみました。 そして、もう 1 色、サイトのリンクの色を追加しました。 したがって、7 つの色が私の実験に参加することになります。
広告カラーローテーションスクリプト
ベースとして、Profit-Partner から提供された YAN (Yandex Advertising Network) の広告を表示するためのスクリプトを使用します。 自動色の変更を追加しましょう。 色ごとに独自のラベルを作成します。 将来的には、これらのセクションを使用して、サイト上のどの色の広告が訪問者にとってより魅力的であるかを分析できるようになります。
スクリプトを実行してデータの収集を開始しましょう。 統計には、スクリプトによって作成されたスライスが表示されます。
広告のカラーデザインを選択する実験を適切に行う方法
実験は少なくとも 1 週間、24 時間体制で実行する必要があります。 週末と平日のすべての時間依存性と特徴を考慮するため。 各配色を少なくとも 1000 回表示することが重要です。
実験からの結論、どの色が良いか
3 つの主要な色から選択する場合、私のサイトには明確なリーダーはありません。 数パーセントの違いは誤差によるものである可能性があります。 しかし、一般的な傾向は、プロフィット パートナー COP 専門家の推奨事項と一致しています。よりクリックしやすい色は赤です。
7 色すべてを詳しく見ると、ダークレッド (#990000)、ライトグリーン (#00CC00)、ダークブルー (#000099) のグループが訪問者に好まれています。
私の統計を見るのではなく、Yandex 広告ネットワークの広告のカラー デザインを選択する際に独自の実験を行うことをお勧めします。
複数のサイトがある場合は、サイトごとに独自の実験を行う必要があります。
計画を変更した場合は、実験を再度実行してください。
私のように複数の広告ユニットがある場合は、広告ユニットごとに独自の実験を行う必要もあります。 驚かれると思いますが、私のサイトでは記事の途中と最後にある広告ユニットでユーザーの好みが異なります。
実験は少なくとも 7 日間 24 時間実施する必要があります。
色を扱うことは、Web デザイナーにとって最も重要なスキルです。 適切に使用すれば現場に成功をもたらすことができますが、範囲の作成における小さな間違いが後々大きな問題を引き起こす可能性があります。 この記事では、Web サイトで色を扱う際にデザイナーが犯す 10 の間違いを取り上げ、それらを回避する方法を説明します。
心理テクニックを導入することに消極的
Web サイトの配色に対するユーザーの反応や感情を説明する研究は数多くあります。 もちろん、これは議論の余地があります。色の好みは国の文化、個人的な経験、その他の理由によって決まりますが、色によって伝わる雰囲気を考慮しないことはできません。 また、Web サイトを作成するときも、色の認識についての知識を応用することが重要です。たとえば、オレンジは買い物の動機に最適な色です。 オンラインストアに適した行動喚起を完璧に伝えます。
緑は信頼を象徴していますが、食べ物に関して信頼よりも重要なものは何でしょうか?
1. 盲目的な模倣
顧客の典型的な間違いは、デザインに関する自分のアイデアを投影してしまうことです。 あなたのお気に入りのフォーラムは、温かみのある「キャラメル」色、本文は濃い茶色、メッセージの背景は淡い黄色で構成されていますか? これは、エアコン専門のサイトがこの範囲を継承する必要があるという意味ではありません。 エアコンは新鮮な感覚を生み出す必要があります。この種のサイトのほとんどが青と白の色調でデザインされているのは当然のことです。特定のサイトが本当に気に入ったとしても、「まったく同じですが、私の製品に関するもの」を注文する前によく考えてください。
2. 精彩のない行動喚起
Web サイトに強力な行動喚起がある場合、ユーザーの目に留まり、ユーザーの目がそこに釘付けになる必要があります。 青白く目立たない行動喚起は、たとえ完璧に定式化されたとしても、まったく機能しません。 逆に、CTA が文字通り「押してください」と叫ぶ状況はあまり良くありません。 行動喚起は調和が取れており、対照的な色やデザインを選択することで目立つようにする必要があります。3. サイトの過剰なカラーパレット
ほとんどの場合、Web サイトをデザインするには 2 色または 3 色で十分です。 もちろん、多数の色を使用して非常に成功したデザイン ソリューションもありますが、これらは例外です。 2 色だと見た目は良くても、3 色目を追加すると汚くなってしまうということはよくあります。カラー パレットを選択するときは、少なくともカラー ホイールを使用することをお勧めします。 その助けを借りて色を選択するときは、隣接する色とその反対側にある色が互いによく合うことを覚えておく必要があります。 
専門サイトを利用するのもおすすめです。 ここでは、独自の範囲を作成することも、既製のものを使用することもできます。
最初の例ではテキストのデザインに 3 色が使用されていますが、2 番目の例では 2 色のみが使用されています。 2 番目のオプションのほうが見た目が良く、テキストも読みやすくなります。
4. 類似した要素の異なる色
ランディング ページに 3 つのチェックアウト ボタンがある場合、それらはすべて同じ色である必要があります。 ユーザーは最初のものを見た後、他のものを同じように認識します。 異なる色のボタンが同じ機能を持つ場合、混乱が生じる可能性があります。以下は、同じ Web サイト上で同じ目的を持つ 2 つのボタンの例です。 悪い決断だ。
5. 異なる種類の要素でも同じ色を使用する
逆の状況は、美しく仕上げるべきだと思う場所に「お気に入り」の色を使用する場合です。 アクション ボタンとクリック不可能な要素は同じ色であってはなりません。これはサイト使用のロジックに違反します。 特定の色とスタイルのクリック可能なボタンを作成すると、動作パターンが作成されます。そのような要素が非アクティブであることが判明すると、ユーザーの通常の動作が中断されます。6. コントラストの欠如
デザイナーは、珍しくて明るい色を追求すると、重要な点を見落とすことがよくあります。それは、テキストを読みやすくするために、テキストの色と背景の色に十分なコントラストがなければならないということです。 この原理は、以下の例で明確に実証されています。
7. 非標準のリンク色
ユーザーはマウスを動かさずにリンクとテキストを区別できる必要があります。 もちろん、ここでの色はデザイナーの唯一のツールではありませんが、おそらく最も効果的なツールです。 3 つのルール:- リンクは、マウスを移動しなくても表示される必要があります。
- リンクにマウスを置くと色が変わるはずです。
- 訪問したリンクは別の色でマークする必要があります。これは、多数の出版物がある情報サイトについては特に重要です。
8. 色あせたミニマリズムは衝動買いには向きません。
今日、通常は衝動販売を目的としたランディング ページを作成することが非常に流行しています。 そのようなページは人の感情に影響を与え、製品を購入したいという瞬間的な欲求を目覚めさせます。 ウェブサイト作成におけるもう 1 つのファッショナブルなトレンドはミニマリズムで、通常は 1 つまたは 2 つの色で特徴づけられ、多くの場合は厳格です。これら 2 つのファッション トレンドは、ほとんどの場合相容れません。 サイトを閲覧したときにまさにそのような感情が生み出されなければ、感情に基づいて販売することはできません。
購入が合理的である場合には、落ち着いた色調と厳格なミニマリズムが適切です。 はい、ミニマリズムは退屈ではなく、カラフルで、非常に感情的ですらありますが、現在、多くのデザイナーはグレートーンや「空気感」を好む傾向があり、ランディングページの販売にはあまり適していません。
しかし、これは、売れる感情的なランディング ページが虹のすべての色で輝かなければならないという意味ではありません。
9. 不適切な黒
マーケティング担当者は長い間、黒いパッケージはほぼ常に高コストで最高レベルの製品品質を意味するという事実に、有形世界の消費者に慣れてきました。 以下は、餃子と高価なシリアルのエリート ブランドの例です。
マーケティング担当者の手法と同様に、私たちの習慣もスーパーマーケットからインターネットに移行しています。たとえば、宝石会社のウェブサイトは黒で作られており、エレガントで高価に見えます。 
低価格帯のサービスを提供したり、安価な商品を販売したりする場合は、Web サイトの背景として黒を多用しないでください。 サイト訪問者の印象はあなたの販売提案と一致しません。
10. デザイナーの色の制限
このルールは、Web サイトのデザインやカラー パレットの選択には直接適用されません。 Web サイトを開発する際のデザイナーのタスクの設定について話しています。 まだ確立された企業アイデンティティや認識可能なロゴを持っていない場合 (ただし、この場合、ルールは部分的に適用されます)、デザイナーに対して使用する色に厳密な境界や制限を設定すべきではありません。あなたのビジョンは好きなだけ美しくすることができますが、デザイナーが独自のビジョンを提供するようにしてください。 何度か試してもデザイナーがあなたの好みのものを提示できない場合は、その場合にのみ、色の選択においてデザイナーに厳密な境界を設定する必要があります。
もう 1 つの例外は、カラー デザインのオプションがよく考え抜かれており、その選択を自分自身に正当化できる場合です。 原則として、顧客は、テキストの読みやすさ、ボタンの十分な明るさ、最適な色数など、デザイナーが考慮していることを考慮しません。
結論
カラースキームは、サイトに対するユーザーの第一印象を決定します。 ポジティブであることが非常に重要です。 しかし、情報を伝えるために色を使用して人々の注意を集中させることはできません。 正しい選択がわからない場合は、ヒート マップ データを使用するか、既製のインターフェイス ソリューションをぼかす簡単な手法を使用してください。 このテクニックの本質は非常にシンプルです。グラフィック プログラムを使用してページ全体をぼかし、最初にどの要素やブロックが注目を集めるかを確認する必要があります。 注目を集める 1 番目、2 番目、3 番目のブロックは、ユーザー シナリオの観点から最も重要な要素であるはずです。たとえば、Aviasales.ru の最初の画面をぼかしました。タイトルを読んだ後、要素 1、2、および 3 のブロックが注目を集めます。 ユーザーの中で正しい期待を形成すると、ユーザーは（コントラストのルールを思い出してください）パラメータと行動喚起を選択するために必要な要素を検討します。 
そして、ウェブサイト ostrovok.ru の主要なアクションが、ぼやけた背景に対してどれほどはっきりと目立つかを見てください。 
あなたのインターフェースがそのようなテストに見事に合格した場合、ユーザー心理の理解に基づいてサイトのさらなる改善を実行する必要があります。 実際のユーザーからのフィードバックを分析します。 次のような質問を使用します。「最初にどこを見ましたか。サイトの 3 つの要素をどの順序で調べましたか?」 最初にクリックする場所とその理由を教えてください。」 AskUsers では、ユーザーの注意がどのように分散されているかだけでなく、ユーザーが特定の要素に注目する理由も理解できます。 この情報は、現在のインターフェイスの多くの問題を特定し、それらを解決するための最適なオプションを見つけるのに役立ちます。
フォームはコンテンツに従属するということを忘れないでください。 カラー デザインは、ユーザーとサイト所有者にとって重要な情報にユーザーの注意を集中させるためのツールとして機能します。
