サイトの配色がSEOとコンバージョンに影響を与える仕組み

最終更新日:2024/02/16

ブログ

以前、色とユーザー行動の関係に関する記事を紹介したことがありましたが、今回は色がSEO、さらにはコンバージョンに与える影響について掘り下げて考えた興味深い記事を。ウェブデザインやユーザー行動に知見が深いSEO業界の超ベテラン筆者が書いただけあり、参考になる点が多し。– SEO Japan

SEOのエキスパートによって、検索エンジンフレンドリーなウェブサイトのデザインと言う用語に対する解釈は異なる。クローラビリティ – つまり、ウェブコンテンツが消費者向けの検索エンジンに確実にアクセスすることが可能なデザインを挙げる人もいれば、検索エンジンフレンドリーなデザインとは、インデクセーション – 要するにウェブページが検索エンジンのインデックスに確実に含まれるデザインを指すと主張するSEOのエキスパートもいる。

Color wheel - image

ユーザーフレンドリー(そして、サーチャーフレンドリー)な色の選定は、通常、技術力に長けたスタッフまたは芸術性に秀でたスタッフによって決められることが多い。しかし、当該のスタッフが、ユーザビリティとSEOに対して色の選択が与えるインパクトを理解しているとは限らない。

SEO vs ユーザビリティを超えた情報アーキテクチャ(日本語)の中でも指摘したように、特殊な用語が出てくる時は、SEOの全体像を理解していない人物と話をしている可能性が高い。

実際のところ、クローラビリティインデクセーション等のSEO用語を一般的に利用するウェブデザイナーはどれぐらいいるだろうか?

ウェブサイトのデザインと開発は、それぞれ異なるスキルではあるが、重複する部分も多くある。アーティストやグラフィックデザイナーの中には、素晴らしい技術的なスキルを持っている人もいれば、その反対のケースも考えられる。そのため、色の選択は、技術力および芸術性に長けたスタッフの手にゆだねられることが多い。

ここでデザイナーとディベロッパーに問いたい: 色の選択が、ウェブ検索エンジンがウェブサイトのコンテンツを解釈し、表示する仕組みに影響を与えることをご存知だろうか?

ウェブ検索エンジンのユーザーが、色の選定をどのように解釈するのか理解しているだろうか?色の選択が、たとえ検索エンジンのランキングが1位だっとしても、コンバージョンにマイナスの影響を与える可能性がある点を理解しているだろうか?

色の選択がユーザビリティに与える影響

先日投稿したクリッカビリティと検索エンジンフレンドリーなウェブデザインの中でも指摘したように、クリッカビリティは、ユーザーエクスペリエンス/サーチャーエクスペリエンスにおける重要なパーツである。

重要なポイントを繰り返す:

  • ウェブページ上のすべてのクリック可能なアイテムは、クリックすることが出来る点が見て分からなければならない
  • ウェブページ上のすべてのクリック不可能なアイテムは、クリックすることが出来るように見えてはいけない
  • ウェブページ上のすべてのクリックすることが出来るように見えるアイテムは、クリック可能であり、反応しなければならない
  • サーチャー/ユーザーがクリックすることを意図していないリンクをページに載せるべきではない

ただし、全てのテキストリンクを青で記載し、アンダーラインを引くべきだと私は主張しているわけではない。そうではなく、クリック可能およびクリック不可能なテキストを同じようにフォーマットするべきではないと言いたいのだ。検索エンジンは、リンクをユーザーから隠し、検索エンジンにだけ見せようとしていると考える可能性があるためだ。

すると、大勢のウェブディベロッパーやウェブデザイナーは必ず呆れた顔で「ちょっと待って!そのデザインの基本は時代遅れだ。カーサー/マウス/指をテキストの上に乗せれば、何をクリックするべきかは分かるはずだ」と叫ぶ。

デザイナーやディベロッパーが指摘しているのは掃海作業(原文:minesweeping)と呼ばれるもので、Usability.govは掃海作業を次のように定義している:

「ウェブページ上でページのどこにリンクがあるのかを特定するための行動。掃海作業には、ユーザーが急いでカーサーやポインターをウェブページ上で動かし、カーサーやポインターが変化して「リンク」の存在を示唆する場所を確認する行為が含まれる。」

私はデスクトップ、携帯電話、そして、タブレットで10年以上に渡ってユーザビリティテストを実施してきた。リンクを探すために掃海作業を実施する人もいれば、実施しない人もいる。因みに掃海作業を純粋に好むユーザーは子供である。

そこで質問だ: ターゲットのオーディエンスに子供は含まれるだろうか?恐らく含まれていないのではないだろうか。

また、ユーザー/サーチャーに掃海作業を求めると、タスクの完了を長引かせてしまう。そもそも、ウェブページ上のアイテムが、クリック可能なことが一目で分からないなら、大半のユーザー/サーチャーはクリックしないはずだ。

そのため、クリック可能な要素およびクリック不可能な要素を色で示すつもりなら、色を途中で変えるべきではない。検索エンジンと検索エンジンのユーザーを混乱させてしまうためだ。

色、視認性 & 可読性

初めて綴った書籍「Search Engine Visibility」の中で、私はウェブデザインの5つのルールを挙げた。1つ目のルールは、読みやすいウェブサイトをデザインすることだ。当然ながら、このルールには次のようなポイントが付随する:

  • 目を通しやすい(ビジュアルの階層)
  • 読みやすい
  • 分かりやすい

色の対比は読みやすさにおいて非常に重要度が高い。最も色の対比が高いのは、白と黒である。一部のウェブデザイナーは、黒い背景に対して白いテキストを利用することを好む。スタイリッシュに見えるからだ。ただし、実際には読みにくく、コンバージョンの低下をもたらす可能性がある。コンテンツをあまりにも読みにくくしてしまうと、リンク構築において最高の結果は期待できない。そして、皆さんもご存知のように、そのリンクの獲得はSEOのプロセスにおいて今でも重要な要素とされている。

それでは、白の背景に薄いグレー等、低いコンストラストの配色を利用しているだろうか?あるいは、ウェブデザイナーが設定したテキストのサイズが小さ過ぎて、何が書いてあるのか分からないだろうか(モバイルデザインで頻繁に目にする)?このようなデザインは、テキストが辛うじて読めるとしても、検索エンジンからはスパムの烙印を押されてしまうこともある。

例えば、レスポンシブデザインを導入するウェブサイトのデザインを行うなら、フォントサイズが特定のサイズを下回らないように私なら注意する。コーディングを簡素化させるために読みやすさと見やすさを犠牲にする方針は、ユーザー中心のアプローチとは言えない。

色は分かりやすく、容易に読み取れなければならない。「色は連想でメッセージを伝える効果がある」とMECLABSのフリント・マクグローリン視は先日開催したウェブセミナー 「ウェブサイトのカラーがコンバージョンに影響を与える仕組みとは?」の中で指摘していた。

例えば、青からは様々な意味が連想される。ネイビーブルーからは、プロ意識、安全、信頼、そして、品位が伝わる。アクアブルーからは異なるメッセージが伝わる(面白い、格好良い、熱帯、水)。また、柔らかいライトブルーからは、男らしさよりも女性らしさを感じられることがある。

従って、検索エンジンと検索エンジンのユーザーにとって読みやすく、そして、分かりやすくなるように、常に色の対比を留意してもらいたい。ウェブサイトの配色を分かりやすくしたいなら、色彩の連想と文化を理解する必要がある。

色彩の連想 & 文化

「大半の国際的なマーケッターは、言語だけでなく、より広範な文化的な問題に対応しなければいけない点を理解している。」とWebCertainのCEOを務めるアンディー・アトキンス-クルーガー氏は指摘している。「しかし、文化を定義することが出来る人は少ない。個人的には「文化」とは、身近な環境であり、私達が慣れ親しんでいるもの、そして、少し奇妙に思えることだと考えている。例えば – ウェブを閲覧していて、奇妙なウェブサイトを見つけることがあるが – これは、恐らく、異なる身近な文化圏の人物が作り出したウェブサイトを見ているためだ。」

Global Search Engine Marketing - book by Anne Kennedy and Kristjan Mar Hauksson実は、私はアジア研究(日本語)の修士課程を卒業しており、アジアの宗教、文学、そして、文化を数年間教えたことがある。

ウェブデザイナー兼SEOとして、赤は中国では幸せ、日本では怒りと危険、そして、インドでは生活と創造性を意味する点を私は心得ている。

米国以外のオーディエンスをターゲットにしているウェブサイトをデザインする際は、同じテンプレートや配色は利用しないように心掛けている。

2012年に気に入ったSEOの書籍「Global Search Engine Marketing: Fine-Tuning Your International Search Engine Results」の一部を以下に掲載する:

Baiduでさえ、中国の文化には、ユーザーの行動に大幅に影響を与えるアイデンティティを形成する意味が幾つか存在すると指摘している。つまり、色、数字、言語等である。

赤が米国ではマイナスなイメージを持たれていることに私は気づいた。アメリカのデザインは青を基調にしていることが多く、スカンジナビア諸国は米国と比べると遥かに複数の色を受け入れる傾向が見られる。」とNordic eMarketingのインターネットマーケティング部門を統括し、また、「Global Search Engine Marketing: Fine-Tuning Your International Search Engine Results」の著者の一人でもあるKristjan Mar Hauksson氏は述べている。

潜在的な文化の問題をリストアップするべきである – これは、信頼の要因と言っても過言ではない。なぜなら、当該の文化圏の人と協力すると信頼が構築され、製品を購入してもらえる可能性が高くなるためだ。」とアトキンス-クルーガー氏は指摘している。「文化に注意していればそれで済むわけではない。色の選定、言語、貨幣の記号、ページの複雑さや安易さ、左から右ではなく右から左に読む方式、暦のフォーマット、型、郵便番号や代わりの番号の形式、クレジットカードの記号、配達の時期、イメージのコンテンツ等、様々な細かいポイントの一つに注意していればいいわけではない。全てが重要であり、総合的に判断される。つまり、私達と同じですか?と言う質問に対する答えである。

例えば、アイルランドには郵便番号が存在しない(そのため、郵便番号の記入を必須にするべきではない。タイでは、紫は朝を連想させるが、西洋諸国は王族を連想させる。中国で銀聯カードを認めない場合、基本的にビジネスは成り立たない。西洋諸国の企業が左から右へ読むテンプレートを、右から左に読むテンプレートに変える際、暦を変えるのを忘れがちである。また、英国と米国では異なる日付が採用されている。

そこで、読者の皆さんには、色がウェブサイトに与える影響を考えてもらいたい。色は検索エンジンフレンドリーなデザインの重要な要素の一つである。色はリンクの獲得に影響を与える。色はコンバージョンにも影響を与える。また、色の不適切な利用は、検索エンジンのスパムと考えられる可能性がある。色は検索エンジンのユーザーにとって非常に重要度が高いのだ。

参照情報

この記事の中で述べられている意見はゲストライターの意見であり、必ずしもサーチ・エンジン・ランドを代表しているわけではない。


この記事は、Search Engine Landに掲載された「How Does Color Usage Affect SEO & Conversions?」を翻訳した内容です。

どれもいわれてみると基本といえば基本ですが、様々な内容を丁寧に簡潔にまとめてくれた良記事でした。ウェブデザインの進化の過程で記事にもあるような「掃海作業」をせざるえないデザインのサイトも多かった気がしますが、最近はスマホやタブレット普及やレスポンシブWebデザインの影響なのか、よりシンプルなデザインがトレンドになっているようにも感じます。そんな今だからこそ、よりユーザー心理、行動を意識した配色を心がけたいですね。 — SEO Japan [G+]

記事キーワード

  • Facebook
  • X
  • はてなブックマーク
  • pocket
  • LINE
  • URLをコピー
    URLをコピーしました!

編集者情報

  • X
  • Facebook

アイオイクス SEO Japan編集部

2002年設立から、20年以上に渡りSEOサービスを展開。支援会社は延べ2,000社を超える。SEO/CRO(コンバージョン最適化)を強みとするWebコンサルティング会社。日本初のSEO情報サイトであるSEO Japanを通じて、日本におけるSEOの普及に大きく貢献。

メディアTOPに戻る

RECRUIT

一緒に働く人が大事な今の時代だからこそ、実力のある会社で力をつけてほしい。
自分を成長させたい人、新しいチャレンジが好きな人は、いつでも歓迎します。