• HOME
  • >
  • Web Design
  • >
  • Webサイトのファーストビューを簡単にチェック!
simures

Webサイトのファーストビューを簡単にチェック!

Webサイトをデザインする時、ファーストビューに気を使うことは当然ですが、それを簡単に調べることが出来るツールがありましたので、ご紹介します。

simures

simures


[ad#ad-4]

調べたいサイトのURLと画面サイズを入力するだけで、簡単にチェックできます。
ブラウザのサイズが変わるわけではないので、変なストレスも無いです。
さらに便利なのが、検索窓の下にある「link:~」をクリックするとファーストビューを確認できるページへリンクします。わざわざスクリーンショットを撮って報告する必要が無いので、この機能も便利ですね。

ついでに、ブラウザのサイズを変えて、ファーストビューをチェックできるツールもご紹介。

resizeMyBrowser

resizeMyBrowser
ところで、現在主流の画面解像度も下記に書いておきました。
(自社で運営しているいくつかのサイトをGoogle Analyticsで調査)

・1280×1024:17 – 19インチクラスの単体液晶ディスプレイで表示可能なピクセル数の主流

・1024×768:Windows3.0からWindows XPまでの長期間ワイド画面が登場するまでデスクトップ・ノートパソコンとも多く使われた

・1280×800:2006年あたりからのノートパソコンの主流

以上の3つがもっとも多く使われています。その他は、

・1366×768:2008年あたりからAV志向ノートパソコン用に登場

・1920×1080:2010年時点でAV用途において主流である解像度。一般的なディスプレイ(主に21インチ以上)やノートパソコンにも多く採用されている

・1680×1050:一部ノートパソコン

・1440×900:一部ノートパソコン

という感じで、続いています。(参考:ウィキペディア

では、実際のファーストビューのは幾つにすべきでしょうか?
「1280×1024」「1024×768」「1280×800」の画面解像度が多いと前述しましたが、実際の表示サイズはそれよりも小さくなります。なぜならば、ブラウザの上部にはツールバーやボタン類などがあるからです。
それらを考慮しますと、600pxの高さをファーストビューとするようにしたほうが良さそうです。
実際に、以前在職していた先輩デザイナーからは、600pxにするようにと指導されてましたっけ。

でも、何でもかんでもページ上部に情報を詰め込むのはよくないという情報もあります。
参考:web担当者Forum

上の記事によりますと、

ファーストビューに要素を詰め込んでいるデザインよりも、ファーストビューのコンテンツが少ないほうが、ユーザーはスクロールして他のコンテンツを探す行動に出る場合もあるとのこと。

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

重要なのは

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

あと補足ですが以前、ユーザビリティで有名なビービットさんにページの長さについて尋ねたことがあるのですが、最近のマウスにはスクロールホイールが付いているので、ユーザはスクロールに対して余り抵抗は無いとのことでした。
もちろん、限度はあるでしょうけど。。

次回は、各種サイトのファーストビューがどうな感じなのかを調べてみたいと思います。

スポンサーリンク

Related Posts

Leave a Reply

メールアドレスが公開されることはありません。

This blog is kept spam free by WP-SpamFree.