【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

メニューを固定表示させる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サイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+