編集長ブログ―安田英久
ファーストビュー都市伝説 - ページ上部に詰め込むのはダメデザイン?

「ファーストビューで重要なメッセージが全部見えるように」そんなデザイン指示をすることはありませんか?

今日は、Webページのデザイン、特にページを開いたときにまず見える「ファーストビュー」とスクロールの関係について、ユーザーテストの調査データから考え方やちょっとしたノウハウを。

ファーストビューで重要なメッセージが全部見えるように

こういうデザイン指示をすることはありませんか? ユーザーはなかなかスクロールしてくれないのだからと、とにかく最初にページを開いた状態で表示される領域に情報を詰め込むデザインになっていませんか?

スクロールヒートマップ
アクセス解析ツールユーザーインサイトで取得した、ユーザーのスクロール状況ヒートマップ

こうしたファーストビュー至上主義は、英国のユーザビリティ会社cxパートナーズの調査によると、どうやら都市伝説のようです。それどころか、ファーストビューに要素を詰め込んでいるデザインよりも、ファーストビューのコンテンツが少ないほうが、ユーザーはスクロールして他のコンテンツを探す行動に出る場合もあるとのこと。

そう、訪問者はコンテンツがあることがわかっていたら、ちゃんとスクロールしてくれるし、その証拠にアイトラッキング(視線調査)でも、スクロールバーに視線が行ってページの長さを確認する行動が、多くのサイトで確認されているとのこと。つまり、スクロールはユーザビリティ上の大きな問題ではないということなのです。

ただし、スクロールを妨げる典型的な要因もあります。

  • 画面の途中で横幅いっぱいの横線で区切りを付けている場合(見出しが背景色つきのブロックになっているなど)は、それ以上スクロールしない人が増える傾向がある。

  • ページ内の一部分だけがスクロールする(iframeなど)ようになっていると、そちらはスクロールしてもらえない傾向がある。

もちろん、訪問者はどんな長いページでも無限にスクロールしてくれるわけではありません。別の調査では、比較的ページの長いAmazonの商品ページなどでは、ページ全体の2/3より下はほとんど視線が行かなかったという結果も出ています。また、そのページを見る価値があると思わなければ、そもそもユーザーはスクロールしないでしょう。

重要なのは、

  • 訪問者の気持ちをつかまえる要素がファーストビューに入っている。
  • さらにその下にコンテンツがあることがユーザーにわかる。
  • 横に区切るデザインをするときは、ページが終わったと勘違いしないようにする。

ですね。

根拠もなくページの上部600ピクセルの高さに大量のコンテンツを詰め込むのはやめましょう。Web担も、横幅いっぱいの区切りに見える見出しが一部あるので、ちょっと見せ方を工夫してみます。

ちなみに別の記事では、「縦に伸びるボックス状のデザインをしていると、続きがあることをユーザーは理解しやすい」といったヒントもありましたので、ご参考に。

※2010-02-08 この情報の元サイトhttp://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htmを記していませんでした。

この記事が役に立ったらシェア!
tweet53このエントリーをはてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める
日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

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

今日の用語

パーミッション
もとは「許諾」を意味する言葉。Webの世界では、サーバー上でのアクセス権を表す場 ... →用語集へ

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

インフォメーション

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

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

サイトマップ
RSSフィード


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

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore