トップ » 東京Webデザイナー日記リターンズ » diary » 離脱されるページデザイン（CSS Nite vol.30に行ってきました）

離脱されるページデザイン（CSS Nite vol.30に行ってきました）

2009年1月15日（木）、Apple Store銀座にて行われたCSS Nite vol.30に参加してきました。

テーマは「アクセス解析」。

アクセス解析ツール「シビラ」を開発している株式会社環の江尻俊章さんと、Web解析ソリューション「SiteCatalyst」を扱っているマクニカの鈴木富士雄さんのお話で、自社のサービスの説明がメインでしたが、Google Analyticsなどで応用できそうなヒントもありました（シビラとSiteCatalystは、チャンスがあればぜひ使ってみたいです！）。

さて、以前の私なら、「隅から隅まで聞いたお話をレポートしなければ！」と思うあまりに、かえって記事を書けなくなっていたところですが、今年からはその方式はやめます。自分が一番印象的だったところだけを、さらっと書きますね。参加者皆さまのブログ記事を併せて読むと、全体像が見えてくるのではないかと、他力本願していますw

で、私が一番印象に残ったことは、「離脱率が高いページのデザイン上の問題点」です。

江尻さんも鈴木さんも、アクセス解析をして発見した「離脱率の高いページ」のことを話題にしていました。

それぞれ挙げたページの見掛けは異なりますが、問題点は同じだったようです。

それはすなわち、「どこをクリックしていいか、分からないデザイン」。

江尻さんの例では、DTP的な考えで本文も全て画像化されている（っぽい）デザインの例でした。見出しも写真も説明文も、全て同じテンションで画像化されデザインされているページ、といいましょうか。全体的に均一な画像が連なっており、立体的でクリックできる感じの画像は一箇所もありません。

江尻さんは、「このデザインでどこをクリックすれば良いか分りますか？」とおっしゃいましたが、確かに非常に分りづらいものでした。正解は「見出し部分をクリック」するのでしたが、会場からは「えーwww」と軽い笑い声が起こっていました。

やはり基本的に、クリックできる画像は「押せる」感じが重要とのこと。「立体的に」「影をつける」などのデザイン処理のほうが好ましいのかなぁ、と。または、矢印や三角形などで、次のページの存在を暗示させるとか。サイトのトーン＆マナーに合うのであれば、「ここをクリック！」などの文言を入れる系もありかもしれませんね。

テキストリンクは、やはり、リンク色をが明確かつ下線をつけるのが、クリックできることが伝わりやすいです（今までにさんざん言われていることではありますが）。

もう一点江尻さんがおっしゃっていたのは、「クリックできる範囲を広めにする」ということ。例えば、クリックできないニュースの概要が数十文字あり、その後に「詳細を見る」的なリンクがちょこっとあったりするのは、リンクの範囲が狭すぎるようです。この場合は、概要も「詳細を見る」も、全てクリックできるようにするとよさそうです。

鈴木さんが例に挙げられていたのは、海外旅行の予約サイト（？）の例。「北米のリストページは離脱率が少ないのに、ヨーロッパのリストページは非常に離脱率が高いのはなぜか？」

答えは、「リンク数が多すぎる」でした。

北米は「アメリカ」「カナダ」の二つの国のリンクしかないので、ぱっと判断しやすいけれど、ヨーロッパは数十カ国あるので、リンク数が多く、そこで諦めて離脱されてしまうのではないかとのこと。

「デザインの見直しが必要かもしれません」とおっしゃっていましたが、地図の中の国をクリックするインデックスページに変更したら、クリックされやすいでしょうか？それとも「北欧」「南欧」「東欧」などのように、さらに地域を分けるのが良い？などなど、これは、自分なりに解決策を考えてみたい例でした。

また、これを、自分が日頃作成するサイトに引き寄せて考えてみると…。

CMSで機械的に生成されたリストページなどだと、カテゴリによってはリンク数が非常に多くなってしまうこともありそうなので、注意すべき点だと感じました。

[2009年1月16日]