スマートフォンサイトでアドレスバーを隠してファーストビューを多く見せる

ちょっとした小技をご紹介します。

ウェブサイトを制作する際に、特に通販サイトで重要なのがファーストビューです。そのサイトを開いたときにまず目に入ってくる部分のことです。初見でサイトの魅力をしっかり伝えることが重要になってきます。

このファーストビューの良し悪しが売上に繋がることもあります。また、ファーストビューをなるべく広く取ることで多くの情報を伝えることができます。特にスマートフォンなどモバイルデバイスは表示領域が小さいので様々な工夫が必要になってきます。

ところで、スマートフォンでウェブサイトを閲覧しているとき、画面上部にアドレスバーが表示されているのを意識したことはあるでしょうか。スクロールすれば消えるのですがそのサイトを見よう！としている時には不要ですよね。「検索したい」とか「URL入力する」とか以外にはあまり必要がありません。

このアドレスバーがなければファーストビューが少し広くなります。これまで見せたくても見えなかったバナーやお知らせなどが初見で見えるようになるわけです。

画像を見る

画像を見る

このアドレスバーを自動で見せないようにすることがjavascriptを使うと可能です。確かに「プログラムわかりません」という方もいらっしゃると思いますが、ちょっとしたプログラムなのでアクセス解析用のタグを挿入するような感覚で利用してみてください。

<script>window.addEventListener('load',function(){window.scrollTo(0,1);},false);</script>

このタグをheadタグの中に記述するだけでスマートフォンサイトでアドレスバーを隠してファーストビューを多く見せることができるようになります。

ちなみに、この機能は aiship では、標準がこの仕様です。

（　スマートフォンECクラウド型ASP『aiship（アイシップ）』 河野　）

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
掲載元のブログではわかりやすい画像つきで公開しています。
■aishipスマートフォン＆モバイルEC事例・ノウハウ集
http://www.aiship.jp/knowhow/archives/1700
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝