navigation>年末年始休業につきまして【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。TOPモバイルファーストマーケティングラボモバイルファーストマーケティングラボメニューを固定表示させるposition;fixedでサイトの回遊率をアップ!2013.07.042019.05.22WEBデザインHOMEWEBデザインメニューを固定表示させるposition;fixedでサイトの回遊率をアップ!ランディングページなどの縦に長いページでは、スマートフォンの小さな画面で表示するとページ上部のメニューまで戻りにくくなってしまいがちです。このような場合、ページのヘッダー部分を画面上部に固定表示をして、常に表示しておくことができます。グローバルメニューから各ページにいつでも遷移することができるので、回遊率を高めることも期待できます。まとめpositionプロパティpositionプロパティには固定表示をさせるfix以外にも、配置に関する様々な操作をすることができます。absoluteやrelativeをfixとともに自在に扱えるようになれば自身の思い通りの配置で、回遊率をさらに上げるサイト作りができます。以下も合わせて読んでみてください。【実例あり】position:「absolute」「relative」でレスポンシブECサイトのレイアウトを!今回作成するページhttp://kan.aispr.jp/positiontestQRコードを読み取って是非スマートフォンで確認してみてください。要素を固定表示させるには、CSSのposition:fixedを利用します。fixed;}この指定は画面に対して要素の表示位置を指定できるようにするものです。画面の左上を基点に位置を指定できるようになるので、それぞれ上から、左からの位置を「0」に指定すると左上に固定で表示されます。left:0;}この指定をすると後続のコンテンツがページの上から順に表示されるようになるので、positionで指定したコンテンツと重なってしまいます。このままでは後続のコンテンツが下に入り込んだ状態となるので、コンテンツ間の余白をmarginで調整します。50px;}marginを指定しない場合(左)とmarginで50pxの余白を持たさた場合(右)の比較。marginの幅は実機で確認しながら調整しましょう。最後にメディアクエリを使い、480px以下でこの指定が適用されるように調整すればOKです。50px;}}対応ブラウザについてしかしこのposition:fixedでの固定表示、最新のiOSやAndroidには対応していますが、iOS4以前、Android2.3.x以前のブラウザでは対応しておりません。MobileやJavaScriptを使って対応させましょう。対応状況と対応方法まとめ上部にメニューを固定させることでグローバルメニューへ簡単にアクセスでき、回遊率や滞在時間のアップが期待できる反面、デメリットとして、画面幅を占有してしまうため表示部分が狭まってしまいます。上手くバランスを取ってユーザーが使いやすいサイト作りを心がけてください。サイト最前面にコンテンツを表示させながらfixさせるモーダルウィンドウの実装方法もまとめていますのでご覧ください。上林”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。・レスポンシブECサイトがなぜ今選ばれるのか・これまでのECサイトの課題とは何なのか・どのようにすれば解決できるのかといったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。無料パンフレットを請求するABOUTモバイルファーストマーケティングラボとは、スマートフォン/タブレット/PCに対応したレスポンシブECサイトの構築や成功事例の最新情報を発信するブログです。投稿一覧15歳の時に初めて携帯電話を手にして約15年。モバイルの面白さ、奥深さに魅了されて入社。中心に業種問わず様々なクライアントをサポートしております。合わせて情報サイト、「モバイルファーストマーケティングラボ」の編集長として、毎日モバイルマーケティングの情報を発信中。ECによってより便利で過ごしやすい世の中を作るお手伝いができればと思います。「インターネットでより豊かな人生を」がモットー。