＜メルマガで発行する予定だった記事＞
海外SEOメルマガ用に書いた記事ですが、ブログにアップしました。
SEOビデオを鑑賞しながら、サイトデザインについて考えてみます。
まず、こちらのビデオをご覧ください。
このビデオは４つのパートからなっていて、このポストでは１つめのパートを取り上げます。
１つめのパートはSEOというより、より見やすいサイトをデザインする秘訣になります。
２つめパートは、『「nofollow」でGoogle PageRankをコントロール』というタイトルで、すでに解説してあります。
SEOでトップ表示を獲得できてアクセスを集めたのに、商品やサービスが売れない、資料請求もされない、リストも集まらない、じゃ、意味がありませんよね。
（１位表示で十分だという自己満足はありますが）
そこで、成約率、いわゆるコンバージョン（レート）を上昇させるのに、役立つテクニックが今回のテーマになります。
やや高度な内容です。
ちょっと難しいと感じるかもしれませんが、頑張って着いてきてください。
ビデオでは、ビジターの視線の動きを捉えて測定した結果に基づいて、サイトデザインを研究しています。（青い線が、視線の動き）
⇒ スクリーンショット01
最終的にポイントになるのは次の３つです。
⇒ スクリーンショット08
- 横長の長方形の範囲に情報を収める
- コントラストを効かせたデザインを使う
- 白の背景もしくはコントラストの効いたアイテムを使う
まず、１つめの「横長の長方形の範囲に情報を収める」から説明しましょう。
人間の視線は、あちこちピョンピョン移動しながら、目に入った断片的な情報を、寄せ集めて認識しています。
このとき、右目と左目に入ってくる情報が重なる部分は、「16:9」の比率の横長ワイドスクリーンテレビのようになります。
この「16:9」の比率の長方形の中にある濃い楕円形の部分が、右目と左目の視線が重なる部分です。
この楕円形の部分が、何を示すかというと、「視線を移動させることなく、見た瞬間に情報を理解できる範囲」になるんです。
この長方形の楕円形の範囲に必要な情報（ビジターに伝えたい情報）、を収めるんですね。
そうすることで、訪問者はあなたが伝えたい情報を瞬時に、確実に理解してくれるんです。
欲しい情報がすぐに探せるサイトデザインっていうのは、大切ですよね。
これは、「Free Shipping（送料無料）」が、一目で分かります。
⇒ スクリーンショット04
これは、商品の画像（の一部）と名前と値段が、一目で分かります。
⇒ スクリーンショット05
これは、商品のカテゴリが、一目で分かります。
⇒ スクリーンショット06
このように、サイトの訪問者に伝えたい情報を「16:9」の比率の長方形に収めることで、余計な動作を要求せずに、一瞬で理解してもらうことができるということです。
次は、２つめの「コントラストを効かせたデザインを使う」です。
このナビゲーションバーを見ると、タイトルと項目は、白と黒のコントラストが効いてますよね。
⇒ スクリーンショット06
コントラストを効かせると、ビジターの目を引き止めるのに役立ちます。
視線を逃すことなく、注意を引いて「釘付け」にできるんですね。
「どんな色を使うか」ではなくも、コントラストの出る「反対色を使う」のがコツです。
（ここなら、「白」と「黒」）
強調したい部分には、コントラストを利用しましょう。
１つめと２つめの例に出たサイトは、ここです。
⇒ http://www.european-wall-tapestries.com/
今回のテクニックで、コンバージョンアップを実現したサイトです。
じっくり研究して、マネできるところはマネしてください。
３つめは、「白の背景もしくはコントラストの効いたアイテムを使う」です。
大量の情報が書かれているページでは、「見出し」がポイントになります。
人間は見出しを見て、その情報が自分にとって必要か不要かを瞬時に判断します。
「見出し」は、白地にコントラストの効いたヘッドコピーにするのが好ましいです。
⇒ スクリーンショット07
例に出ているのは、このサイトです。
⇒ http://techmeme.com/
情報量が多すぎると、訪問者は圧倒されて、去ってしまうんです。
そういう経験ありますよね。
見た瞬間に、「うわっ、見づらっ」って、戻るボタンを押しちゃうサイト。（笑）
このサイトでは、訪問者が瞬時に自分にとって必要な情報を判断できるように、「白地の背景」に「コントラストの効いた文字（青）」でヘッドコピーを書いています。
領域もなるべく、１で説明した長方形になってますよね。
１ページに大量の情報を書く場合は、参考にしてください。
最後におまけで「７ プラスマイナス ２の法則」っていうのもあります。
これは、１度に見せる選択肢は、「７ ＋/? ２」、つまり「５?９」個に収めるというテクニックです。
↓黒い●が描かれている画像を見せます。
表示した瞬間に、●がいくつあるか声に出してみてください。
どうですが、何個の●があるかすぐに分かりました？
ビデオを見続けると、動画で見られるので時間がある人はしばらく再生して見るといいです。
そっちのほうが分かりやすいです。
人間が一瞬で判断できる数字は、４を越えたあたりから急激に時間がかかるようになります。
⇒ グラフ
ということで、１か所にまとめるアイテムの数は
７プラスマイナス２、できれば３?４個くらいが適当です。
ユーザーが一目で、どんな項目があるか理解できるからですね。
↓、そうなってますよね。
⇒ スクリーンショット06
ナビゲーションバーが、７プラスマイナス２の数で、カテゴリ分けされてます。
このテクニックも、あなたのサイトデザインに利用してください。
ユーザーフレンドリーでコンバージョンを上げるような、サイトデザインを心がけましょう。