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

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

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

【レスポンシブ】HTMLとCSSで固定ヘッダーメニューを作成する

【レスポンシブ】HTMLとCSSで固定ヘッダーメニューを作成する

多くのサイトでは画面遷移がしやすい等のメリットから固定ヘッダーメニューを実装するケースが増えてきました。

そこで、今回は実際に固定ヘッダーメニューのメリットデメリットを解説し、その作成方法を紹介していきます。

レスポンシブな固定ヘッダーメニューのメリット

レスポンシブな固定ヘッダーメニューには以下の二つのメリットがあると言えます。

ユーザーの回遊率を上げる

ユーザーの回遊率、つまり一度の訪問での閲覧数をあげることができます。ユーザーは画面内にリンクがなければそのサイトを離脱しようとするかもしれませんが、固定ヘッダーメニューのようなリンクを設置しておけば、他のページも閲覧してくれるかもしれません。

ランディングページのような縦に長いページでもすぐ画面遷移をおこなえる

ランディングページのような縦長になりがちなページですと、最上部と最下部にしかリンクを設置していないサイトではユーザーが画面遷移しづらいです。

しかし、固定ヘッダーメニューが設置されていればすぐ画面遷移を行うことができ、ユーザービリティが改善されます。

またスマホ画面だとさらに縦長なページになるので、より固定ヘッダーメニューが有効になってきます。

レスポンシブな固定ヘッダーメニューのデメリット

しかし、そんな固定ヘッダーメニューにもデメリットが二つあります。

画面領域が狭くなる

固定されたヘッダーメニューは常に上部の領域を使用してしまうため、本来のページの表示領域が少なくなってしまいます。

ユーザーが意図せずヘッダーメニューをタップしてしまう可能性がある

特にスマホ画面の場合、ユーザーは誤ってページ上部をタップしてしまい、意図せず画面遷移をしてしまうかもしれません。これでは、ユーザーにストレスを与えてしまい、ページを離脱する原因となってしまいます。

この問題に関しては、開閉できるヘッダーメニューやメニューの表示非表示ができるハンバーガーメニューを実装をすることで解決できます。

レスポンシブな固定ヘッダーメニューを作成する

基本的な固定ヘッダーメニュー

上記のメリットデメリットをふまえて、ここからはHTMLとCSSを使用してレスポンシブな固定ヘッダーメニューを作成します。まずはよく見かける基本的なヘッダーメニューからです。例1のページを開いてみてください。
例1 基本的な固定ヘッダーメニュー

以下例1のコードです
HTML

<div id="wrapper">
	<nav id="global-navi">
		<ul class="menu">
			<li><a href="">コンテンツA</a></li>
			<li><a href="">コンテンツB</a></li>
			<li><a href="">コンテンツC</a></li>
			<li><a href="">コンテンツD</a></li>
			<li><a href="">コンテンツE</a></li>
		</ul>
	</nav>
</div>
<div class="content">
この文章はダミーです。以下省略
</div>

CSS

#global-navi {
	background:#333;
    position: fixed;
    top: 0;
    right: 0px;
    width: 100%;
}
#wrapper nav ul li{
display:inline-block;
font-size: 16px;
padding:  30px 20px 25px 28px;
}
#wrapper nav ul li a{
color: #ddd
}
.content{
    line-height: 1.6;
    margin: 0 auto;
    padding-top: 100px;
    width: 800px;
}
.content p{
    margin-bottom: 40px;
}

重要なのは#global-naviの「position: fixed;」です。このプロパティを適用することによって要素(今回はヘッダーメニュー)を固定することができます。

このヘッダーメニューだとスマホ画面では少し窮屈に感じてしまうので、次にスマホ画面でもスペースを確保できるレスポンシブなヘッダーメニューを実装していきます。

レスポンシブな固定ヘッダーメニュー

以下のページにレスポンシブな固定ヘッダーメニューを作成します。スマホ画面はPC画面に比べ画面が小さいので、ハンバーガーメニューとしてメニューを表示非表示させる仕組みを実装しました。例2を開いてみてください。
例2 レスポンシブな固定ヘッダーメニュー
以下例2のコードです。
HTML

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<div id="wrapper">
	<p class="btn-gnavi">
		<span></span>
		<span></span>
		<span></span>
	</p>
	<nav id="global-navi">
		<ul class="menu">
			<li><a href="">コンテンツA</a></li>
			<li><a href="">コンテンツB</a></li>
			<li><a href="">コンテンツC</a></li>
			<li><a href="">コンテンツD</a></li>
			<li><a href="">コンテンツE</a></li>
		</ul>
	</nav>
	
</div>
<div class="content">
この文章はダミーです。以下省略
</div>

CSS

#global-navi {
	background:#333;
    position: fixed;
    top: 0;
    right: 0px;
    width: 100%;
    
}
#wrapper nav ul li{
display:inline-block;
font-size: 16px;
padding:  30px 20px 25px 28px;
}
#wrapper nav ul li a{
color: #ddd
}
/*スマホ画面でハンバーガーメニューの形にする*/
@media screen and (max-width: 600px) {
#wrapper nav {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    padding-top: 50px;
    background:#333;
    font-size: 16px;
    box-sizing: border-box;
    z-index: 2
}
#wrapper nav ul li {
    display:block;
    padding: 20px 28px
}

#wrapper nav ul li a {
    text-decoration: none;
    color: #ddd
}

#wrapper .btn-gnavi {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 24px;
    z-index: 3;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms
}

#wrapper .btn-gnavi span {
    position: absolute;
    width: 30px;
    height: 4px;
    background: #666;
    border-radius: 10px;
    -webkit-transition: all 400ms;
    transition: all 400ms
}

#wrapper .btn-gnavi span:nth-child(1) {
    top: 0
}

#wrapper .btn-gnavi span:nth-child(2) {
    top: 10px
}

#wrapper .btn-gnavi span:nth-child(3) {
    top: 20px
}

#wrapper .btn-gnavi.open {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

#wrapper .btn-gnavi.open span {
    background: #666
}

#wrapper .btn-gnavi.open span {
    width: 24px;
}
#wrapper .contents section p {
    position: absolute;
    top: 50%;
    width: 30%;
    line-height: 1.4;
    font-size: 20px;
    color: #fff;
    text-shadow: 0 0 6px #666
}

#wrapper .contents section:nth-child(odd) p {
    left: 10%
}

#wrapper .contents section:nth-child(even) p {
    right: 10%
}
}
.content{
    line-height: 1.6;
    margin: 0 auto;
    padding-top: 100px;
}
.content p{
    margin-bottom: 40px;
}

jQuery

$(function(){
	$(".btn-gnavi").on("click", function(){
		// ハンバーガーメニューの位置を設定
		var rightVal = 0;
		if($(this).hasClass("open")) {
			// 位置を移動させメニューを開いた状態にする
			rightVal = -300;
			// メニューを開いたら次回クリック時は閉じた状態になるよう設定
			$(this).removeClass("open");
		} else {
			// メニューを開いたら次回クリック時は閉じた状態になるよう設定
			$(this).addClass("open");
		}

		$("#global-navi").stop().animate({
			right: rightVal
		}, 200);
	});
});

スマホ画面ではハンバーガーメニューを実装することで、固定されていたとしても充分なスペースを確保することができました。また表示非表示の切り替えができるので、ユーザーが不要なタップをするというリスクを軽減することができます。

スマホ画面にて実装したハンバーガーメニューに関しては、以下のページで詳しく解説されてます。
【jQuery&CSS】レスポンシブなハンバーガーメニューを作成する

まとめ

今回の記事では、レスポンシブな固定ヘッダーメニューのメリットデメリットと、その作成方法について解説してきました。

一長一短だと思われるので、自身のサイトに合わせて適宜実装してほしいと思います。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

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

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

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。