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

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

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

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

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

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

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

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

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

バナナが好きだ

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

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

類人猿ターザンだとね！

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

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

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

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

右と左：読むときの目の動きによる分割。西洋の場合はまず左に目が行く。
上から下へ：僕の知る限り、みんな上から目が行く。
2つを合わせると次のように表せるはず。

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

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