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

よろしければこちらもご覧ください
※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。また、編集部はこの内容について正確性を保証できません。

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

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

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

ところで、スマートフォンでウェブサイトを閲覧しているとき、画面上部にアドレスバーが表示されているのを意識したことはあるでしょうか。スクロールすれば消えるのですがそのサイトを見よう!としている時には不要ですよね。「検索したい」とか「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
=============================

よろしければこちらもご覧ください
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

Web業界の転職情報

もっと見る
Sponsored by

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

今日の用語

有料検索エンジン登録
検索エンジンに対して料金を支払って、検索結果ページに反映させること。 リスティ ...→用語集へ

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

インフォメーション

RSSフィード


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