トップ  »  東京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日]   はてなブックマーク - 離脱されるページデザイン(CSS Nite vol.30に行ってきました)

トラックバック(3)

CSS Nite in Ginza, Vol.30が終了しました(CSS Nite公式サイト)のトラックバック

2009年1月15日、アップルストア銀座にてCSS Nite in Ginza...[2009年1月17日 04:06]

続きを読む»

CSS Nite「アクセス解析」へ参加してきたよ(小さな世界)のトラックバック

ウェブ制作会社にはおなじみのイベント「CSSナイト」。初めて参加してきました。 今回のテーマは「アクセス解析」ということで、個人的に興味をそそられる分...[2009年1月17日 16:21]

続きを読む»

CSS Nite vol.30に行ってきました(Webデザインのタネ)のトラックバック

ディレクターと一緒にCSS Niteへ行ってきました。テーマはアクセス解析。 ちなみに僕は会社でアクセス解析していた時期もあったので興味持って参加...[2009年1月18日 20:55]

続きを読む»

このブログ記事に対するトラックバックURL

http://cremadesign.jp/mt401/mt/mt-tb.cgi/850

コメント(2)

TSUB :2009年1月17日 15:01

リンクが分かりづらいページは僕も印象的でした(笑)。
やはり、情報に対してアクセシブルなメディアである以上、ページ設計もそうでないといけないわけで。
視覚的なデザインとあわせユーザーインターフェイスの設計等、広い視点で見ていくことが大事ですね。

ヨーロッパサイトの離脱率が高い理由は、自分的には通貨単位が米ドルではないから、円に換算した数値がスグに分かりづらいからかと思っていましたが、てんで検討違いでした。
初歩的ですが、国内サイトだったら、日本円表記もつけないとですしね。。。

でも、よくありそうなケースではありますよね。

crema Author Profile Page:2009年1月18日 00:34

やはり、あの部分がとても印象的でしたよね。自サイトでも、離脱されるページのデザインを徹底的に見直してみたいと思いました!

コメントする

このページの先頭へ

東京ナイロンガールズ

比較的人気の記事

crema design menu