ECサイト構築・リニューアルならクラウド型ECサイト構築ASPサービスサイトへ
資料請求
TOP

CATEGORY

SERVICE

メニューを固定表示させるposition;fixedでサイトの回遊率をアップ!

メニューを固定表示させるposition;fixedでサイトの回遊率をアップ!

アイキャッチ画像

ランディングページなどの縦に長いページでは、スマートフォンの小さな画面で表示するとページ上部のメニューまで戻りにくくなってしまいがちです。

このような場合、ページのヘッダー部分を画面上部に固定表示をして、常に表示しておくことができます。グローバルメニューから各ページにいつでも遷移することができるので、回遊率を高めることも期待できます。

positionプロパティ

positionプロパティには固定表示をさせるfix以外にも、配置に関する様々な操作をすることができます。absoluteやrelativeをfixとともに自在に扱えるようになれば自身の思い通りの配置で、回遊率をさらに上げるサイト作りができます。

是非、以下も合わせて読んでみてください。
【実例あり】position:「absolute」「relative」でレスポンシブECサイトのレイアウトを!

今回作成するページ

http://kan.aispr.jp/positiontest
サンプルQRコード
QRコードを読み取って是非スマートフォンで確認してみてください。(固定表示はスマートフォンのみに適用されるよう調整しています)

 

固定表示をさせる方法

要素を固定表示させるには、CSSのposition:fixedを利用します。

header {
    position: fixed;
} 

 

この指定は画面に対して要素の表示位置を指定できるようにするものです。画面の左上を基点に位置を指定できるようになるので、それぞれ上から、左からの位置を「0」に指定すると左上に固定で表示されます。

header {
    position: fixed;
    top: 0;
    left:0;
} 

 

この指定をすると後続のコンテンツがページの上から順に表示されるようになるので、positionで指定したコンテンツと重なってしまいます。

このままでは後続のコンテンツが下に入り込んだ状態となるので、コンテンツ間の余白をmarginで調整します。

nav {
    margin-top: 50px;
}

 

marginを指定しない場合(左)とmarginで50pxの余白を持たさた場合(右)の比較。marginの幅は実機で確認しながら調整しましょう。

margin指定をする

 

最後にメディアクエリを使い、480px以下でこの指定が適用されるように調整すればOKです。

/*===============================================
  横幅480pxまで(固定表示)
===============================================*/
@media screen and (max-width: 480px){
header {
    position: fixed;
    top: 0;
    left:0;
} 

nav {
    margin-top: 50px;
}
}

 

対応ブラウザについて

しかしこのposition:fixedでの固定表示、最新のiOSやAndroidには対応していますが、iOS4以前、Android2.3.x以前のブラウザでは対応しておりません。

それらのブラウザで固定表示を対応させるには、jQuery MobileやJavaScriptを使って対応させましょう。
参考:iPhone、Android position:fixed 対応状況と対応方法

 

まとめ

上部にメニューを固定させることでグローバルメニューへ簡単にアクセスでき、回遊率や滞在時間のアップが期待できる反面、デメリットとして、画面幅を占有してしまうため表示部分が狭まってしまいます。

上手くバランスを取ってユーザーが使いやすいサイト作りを心がけてください。

また、サイト最前面にコンテンツを表示させながらfixさせるモーダルウィンドウの実装方法もまとめていますのでご覧ください。
モーダルウィンドウを活用して簡単にWEB接客を導入する方法

上林

                   
商品の販売に“夢中”になれる
クラウド型ECサイト構築ASP

ECサイト構築、リニューアルを2000社以上支援してきた知見から
ECの専門家として御社のEC事業成長をサポートします。

  • 導入実績2000社以上


    導入実績

  • 注文単価増加率114%

    導入1年後の
    注文単価
    増加率

  • 売上成長率128%

    導入1年後の
    売上成長率

  • EC支援歴20年


    EC支援歴

         

WEBデザインカテゴリの最新記事