Moz - SEOとインバウンドマーケティングの実践情報

ビジターを顧客にするサイトデザイン

この記事はもともとSEOmozのYOUmozセクションに掲載したものですが、非常に優れているのでこちらのブログに格上げしました。

オンラインの、切実だけど思うように行かない話を取り上げる。サイトにやってきた人々が、サイトでどんな行動を選択するのか? うまく計画を立てられれば、その答えは「サイト側が望むもの」になる。

サイトにビジターが集まったとする。ビジターはサイトのいろんなページを思い思いに見て回っている。さてどうするか。アクション(行動)の道筋を明確にする必要がある。ここでいうアクションの筋道とは、手取り足取り情報を案内し、ショッピングカートや登録プラン、ダウンロードなどへとビジターを導く緻密で手の込んだ視覚による刺激のことだ。

顧客とトラフィックに関する僕の記事(日本語版記事)からの続きで、今回は、ビジターがたどる明確なアクションの道筋を作るために、ページをどうデザインするかという問題に取り組む。

サイトでのビジターの行動に影響する要因として、どんなものが考えられるだろうか。

  • サイズ――文字サイズ、ページサイズ、ページ上の要素のサイズ
  • 言葉――書いてあること、あるいは書いてあることの見え方
  • ――全体の色彩設計との調和や対照
  • 画像――図、グラフ、写真
  • スペーシング――全体的な視覚デザイン

最初3つのサイズ・言葉・色については、その一面ではあるが、1つの例にまとめることができる。下の例の中には、ビジターが注目するはずのもの、ひいては、サイト側が導きたいアクションを提示するやり方が、6通り示されている。

バナナが好きだ

バナナとココナッツとブドウが好きだ
バナナとココナッツとブドウが好きだ
バナナとココナッツとブドウが好きだ

だからみんな僕のことをこう呼ぶ

類人猿ターザンだとね!

見てもらうとわかるように、フォント・サイズ・テキストブロックなどが通常と異なる部分は、とても識別しやすい。ちょっとした違い(たとえばテキストの変更)を作るだけで、ビジターが確実に大切なポイントに気づくようにできる。このサイズ・言葉・色には、上の例の使われ方とは別の効果もある。文脈をもっと拡大して、スペースの使い方で利用できる。

スペースで顧客を獲得する

スペースのデザインは、サイトの使われ方を決める最も強力な要因の1つだ。ページに何を掲載するか、それをどう配置するかで、ユーザーが意図通りに動くかどうかは大きく違ってくる。

アクションの道筋を設計するときはまず何より、スクロールなしでアクションが見つかるようにするのが基本だ。最初のアクションの一環としてスクロールをする(長文形式の広告など)のは構わないが、その場合もクライマックスがやってくることを明確にしておく必要がある。OneStat.comによると、2007年時点でインターネット利用者の80%以上は、ディスプレイの解像度が1024×768以上だという。つまり、使えるスペースは以前よりも拡大している。まずスペース全体を考える。スペースを分割する方法が2通りある。

  • 右と左:読むときの目の動きによる分割。西洋の場合はまず左に目が行く。

    左右
  • 上から下へ:僕の知る限り、みんな上から目が行く。

    上下
  • 2つを合わせると次のように表せるはず。

    4区画

最後の図を信用したいところかもしれないが、実際はこうはならない。最初2つにのっとって合理的で効果的なデザインができるとしても、必ずしも最後の図が表すようなことにはならない。しかし、最初の2つの効果はなぜ積み重ならないのだろうか。

端的に言うと、デザインの要素がテキストの要素に優先するからだ。つまり、言葉よりも画像が重要になる。ページを見定めるその瞬間、私たちはページにある文章の内容を考慮してはいない。とりとめのないデータを頭に取り込んでいる。見出しがあり、画像があり、検索ボックスがあり、リンクがあり、やっと文章の中身を考え出す。スペースにテキストしかない場合、悪名高い「ゴールデン・トライアングル」が形成される。

ゴールデン・トライアングル
図1 グーグルの検索結果ページでの視線の動きにみるゴールデン・トライアングル

図1のように、テキストしかないページでは、左側に集まった注目は徐々に低下しゼロになり、あとは、右上四分の一に50%が目を向けている。

配置を複雑にすると注意の行き方が複雑になる。オレンジ色の列車の画像を使った例を見てもらおう(図2)。

視線トラッキングデータ
図2 画像や色彩ブロックがあるページの視線の動き

さらに具体例が欲しい人には、画像がコンバージョンをどう左右するのかをあつかった記事(英文記事)が参考になるだろう。

デザインの要素が注目度に与える影響をみていこう。ここまでの説明で、画像と余白がビジターの視線の動きに決定的な影響を与えていることはわかっただろう。

図1のグーグルの検索結果ページは、アルゴリズムではじき出された検索結果と有料リスティングの間に余白があり、ビジターの50%は視線がその余白を超えない。

図2の例では列車の画像が注意を移動させていて、画面を縦横4分割した場合の全象限に目やる人が、全体の60%もいる。画像が視線をほかに押しやれるのは、画像が意識的には捉えられないからだ。つまり、昼なのか夜なのかという感覚に近いレベルで画像は捉えられているのだ。

デザインは、ページ上のほかのコンテンツにコンテキストをもたらす。ランディングページのデザインではまず、訪れた人の視線をページの中でどう誘導するかを考えることだ。アクションをコントロールするためには、次の4つのデザイン要素に重点的に取り組むことをお勧めする。

  1. 反復
  2. 余白
  3. バランス

反復

目を引くパターンがあると見通しが立つ。パターンがあるとビジターはすぐに安心できる。ものをたくさん並べたものが、パターンになりえる。リストや、タイトル→コンテンツ→タイトル→コンテンツという並びや、表にしたデータはパターンとなり得る。

サイトで駆使できる最強のパターンの1つとして、リンクは青でアンダーライン付きといったウェブにおける標準の堅持がある。また逆に、パターンを作っておいてそれを壊すことで、標準から外れた部分が特別で、より重要であることを示すこともできる。

余白

デザインで余白の部分を残すと、ビジターにとって意味のない部分がうまれ、注意がページの余白でない部分へと動かされる。カラム間の空白、画像の周りの空白、テキスト部とテキスト部の間にある空白などが余白になる。

すき間がない、ごてごてした表示は多くのビジターに嫌がられる。デザインに余白を残すことで流れが良くなる。

色はページのトーンを決めるときだけでなく、特定のセクションに注目を集めたい場合も便利に使える。アクションを呼びかける部分を赤だとか、ページ全体の色調と対照的な色にすると、ビジターの注目を集められる。

バランス

バランス=対称ではない。特定のアクションに注目を集めたい場合は、非対称のスペースを作るとうまくいくことがある。その際は、画像と余白を使うのが簡単だ。

まとめ

軟らかい話で終わりにしたい。アクションの道筋が明確な例として、僕が気に入っているセサミ・ストリートの歌、「ほかと違うのはどれ?」(One of These Things (Is Not Like the Others))を紹介する。

この中の1つは、ほかと違う

この中の1つは、仲間はずれ

どれがほかと違うのか

この歌が終わるまでにわかるかな?

ほかと違うのが、どれだかわかった?

仲間はずれが、どれだかわかった?

これがほかと違うと思うなら

君はみごと、大正解!

画面デザイン

この歌が効果的な理由

  • 何をやるのかを伝えている
  • やるべきことを反復してる
  • 何をやるのか説明している
  • アクションが明確になっている
この記事が役に立ったらシェア!
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

人気記事トップ10(過去7日間)

今日の用語

有料検索エンジン登録
検索エンジンに対して料金を支払って、検索結果ページに反映させること。 リスティ ...→用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]