<p class="thumb"><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2012/06/browser-size.png" alt="" title="browser size analysis" width="510" height="281" class="none" /></p>
<p>ランディングページを作成していると、一般的にファーストビューはどのくらいまで表示されるんだろう、という疑問がまず出てくると思います。訪問者がランディングページを訪れて、最初に目に入るファーストビューがどこまでになるのかを知るには、Google Labsの<a href="https://support.google.com/analytics/answer/2558864?hl=ja" target="_blank">Browser Size</a>のようなツールがが便利です。</p>
<p>そのブラウザサイズを解析する機能が、Google Analyticsに実装されることになった（記事：<a href="http://analytics.blogspot.jp/2012/06/new-feature-conduct-browser-size.html" target="_blank">[New Feature]: Conduct Browser-Size Analysis Within Google Analytics - Analytics Blog</a>）ので、早速試してみました。</p>
<p>※今後数週間のうちに全アカウントで使えるようになるそうです。</p><!--more-->
<h3 class='header-label'>Google Analyticsでファーストビューを確認できる新機能「ブラウザのサイズ」</h3>
<p>Google Analyticsに新たに実装された新機能「ブラウザのサイズ」は、<strong>訪問者が自分のサイトを開いた時に最初に目に入るファーストビューがどこまでになるのかを解析</strong>できるもの。</p>
<p>何％までの人が、どこまで最初に見ることができるのかを把握できるので、ファーストビューの改善には欠かせない機能になりそうです。</p>

<h4 class='tips'>ファーストビューのサイズをチェック</h4>
<p><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2012/06/browser-size0.png" alt="browser-size check" title="browser-size0" width="500" height="259" class="aligncenter size-full wp-image-20368" /><br />↑ページに訪れるひとのファーストビューがどれくらいのサイズなのかを一目瞭然にしてくれます。</p>

<p><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2012/06/browser-size1.png" alt="percentages" title="browser-size1" width="500" height="254" class="aligncenter size-full wp-image-20369" /><br />↑さらにパーセンテージごとにタイル表示させることも可能。マウスオーバーで色の濃さを変えてくれるので、視認性も良い感じです。</p>

<h4 class='tips'>デモ動画</h4>
<iframe width="520" height="293" src="http://www.youtube.com/embed/m4UhvivfbJk" frameborder="0" allowfullscreen></iframe>

<h4 class='tips'>サイトのユーザー、ページの訪問者のサイズも表示</h4>
<p><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2012/06/browser-size6.png" alt="user" title="browser-size6" width="500" height="106" class="aligncenter size-full wp-image-20375" /><br />↑Google Labsが提供するブラウザサイズツールの場合、ウェブユーザーのデータでしか見ることができませんでしたが、Google Analyticsでは「サイトのユーザー」「このページのユーザー」という設定もできるようになっています。</p>

<p>サイトによってターゲット層が異なれば、ブラウザのサイズも変わるのは当然なので、リアルなデータを得られるのは良いですね。</p>


<h4 class='tips'>ブラウザのサイズを見る手順</h4>
<p><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2012/06/browser-size7.png" alt="browser　size" title="page analysis" width="500" height="235" class="aligncenter size-full wp-image-20377" /><br />↑ブラウザのサイズを解析するには、「コンテンツ」＞「サイトコンテンツ」＞「すべてのページ」を開き、解析したいページのファイル名部分をクリックします。</p>

<p><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2012/06/browser-size3.png" alt="page analysis tab" title="browser-size3" width="500" height="294" class="aligncenter size-full wp-image-20371" /><br />↑次に「ページ解析」のタブをクリック。</p>

<p><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2012/06/browser-size4.png" alt="browser size button" title="browser-size4" width="500" height="252" class="aligncenter size-full wp-image-20372" /><br 
/>↑そしてページの内容が表示されている枠内の右上にある「ブラウザのサイズ」をクリックすれば表示されます。</p>

<p><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2012/06/browser-size5.png" alt="first view" title="browser-size5" width="500" height="58" class="aligncenter size-full wp-image-20370" /><br />↑何％のひとがどこまでをファーストビューで見られるのかを見るには2つの方法があり、ひとつは左側のスライダを調整することで表示し、もうひとつは「パーセンタイル値を表示」をクリックして、タイル表示させることができます。</p>

<p>試してみたい方は<a href="http://www.google.com/analytics/" target="_blank">Google Analytics</a>へどうぞ。</p>

<p>いままでは都度ブラウザサイズツールを開いてチェックする必要がありましたが、Google Analytics内で完結できるようになり、なおかつサイトやページの訪問者のデータを反映できるのがリアルで良いですね。今後はヒートマップ機能もついたりするのかな。と淡い期待をｗ</p>

<dl class="amaz clear"><dt>Google Analyticsではじめるテストマーケティング<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4839935483/webm-22/ref=nosim/" target="_blank"><img class="a-img" src="http://ecx.images-amazon.com/images/I/41T4e7td9ZL._SL160_.jpg" alt="Google Analyticsではじめるテストマーケティング" /></a></dt>
<dd><form class="a-cart-form" method="post" action="http://www.amazon.co.jp/gp/aws/cart/add.html" target="_blank"><input type="hidden" name="AssociateTag" value="webm-22" /><input type="hidden" name="SubscriptionId" value="028QVM5GAF1MWA4NBMR2" /><input type="hidden" name="ASIN.1" value="4839935483" /><input type="hidden" name="Quantity.1" value="1" /><input type="image" name="submit.add-to-cart" src="http://rcm-images.amazon.com/images/G/09/extranet/associates/buttons/remote-buy-jp5.gif" /></form></dd><dd>価格：<span class="a-price-text">￥ 2,079</span></dd>
<dd>平均評価：★★★★☆</dd><dd>納期：在庫あり。</dd><dd><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4839935483/webm-22/ref=nosim/" target="_blank">Amazon で詳細を見る</a> by 多読 書評ブログ</dd></dl>