【レスポンシブ対応】ボトムナビゲーションの作り方

サイトをレスポンシブに対応させる時、どのようなナビゲーションバーを設定していますか？ハンバーガーメニューを使っているという方もいると思いますが、最近はボトムナビゲーションにする方が読者にストレスを感じさせずによりページの回遊率を高めることができるということで、使う方が増えてきています。

そこで今回はボトムナビゲーションを採用するメリットと作り方についてご紹介していきます。スマホでの利用の場合、ボトムナビゲーションのメリットは大きいですし、作り方も簡単なのでぜひこの機会に取り入れてみてくださいね！

ハンバーガーメニューの作り方については以下の記事で解説しています。

ハンバーガーメニューとは？デザイン例とスマホだけに表示する方法

 

ボトムナビゲーションとは？

ボトムナビゲーションとは、スマートフォンで見た時に画面の下の方に固定されているメニューのことです。馴染みがあるものであれば、LINEのアプリを開くと下の方に「ホーム」「トーク」「タイムライン」などのボタンが表示されていると思いますが、これのことを指します。

その他にもTwitterやInstagram・YouTubeのアプリ、そしてZOZOTOWNの商品ページ等にもボトムナビゲーションが使われています。スマートフォンを使っている人であれば大半の方が無意識で使っているのではないでしょうか。

ボトムナビゲーションのメリット

ボトムナビゲーションが人気の主要アプリやサイトで使用されているのにはそれだけの理由があります。そこでここからはボトムナビゲーションを使うことによって得られるメリットについてご紹介します。

スマホでもボタンが押しやすい

ボトムナビゲーションはスマホ操作での相性がよいことから、レスポンシブデザインの中で使われています。現在でも多くのサイトで使われているレスポンシブデザインのナビゲーションバーは「ハンバーガーメニュー」だと思います。

ハンバーガーメニューとは、サイトの右上によく設定されている三本線のメニューです。スマホが普及した際、メニューをコンパクトに収納することができると多くのサイトで採用されました。しかし、ハンバーガーメニューの配置のほとんどが右上になるため、スマホを片手で操作する際に押しづらいという点がデメリットとして挙げられていました。

これを解決したのがボトムナビゲーションになります。ボトムナビゲーションの場合、画面の下部分にボタンが設置されるため、片手で操作をする方や比較的手の小さい女性やお子様でも簡単にボタン操作をすることができるという点が評価され、多くのサイトで取り入れられるようになりました。

ページの回遊率が上がる

ボトムナビゲーションを取り入れると常に主要メニューが表示されている形になるため、ページの回遊率を上げることができます。ハンバーガーメニューのデメリットとして、コンテンツが全て収納されているのでユーザーがボタンを押さないと見てもらえないという点がありました。

しかし、ボトムナビゲーションの場合は画面下部に常にメニューが表示されており操作もしやすいので、ユーザーがストレスなく気軽にボタンを押しやすいので、サイト内で多くのページを閲覧しやすくなります。

視覚的に分かりやすい

ボトムナビゲーションは文字だけではなくアイコンをつけて表示するという使い方が多くなっています。LINEやTwitterでもホームには家のマークがついていますね。そのため、ユーザーが視覚的にメニュー内容を判断できるようになっており、より感覚的にボタンを押しやすくなっています。

ボトムナビゲーションの作り方

では次にボトムナビゲーションの作り方についてご紹介します。ボトムナビゲーションはHTMLとCSSのみで構成することができます。作り方も比較的簡単で、どなたでも容易に作成することができます。初めての方でも簡単にできるようコードを記載していますのでコピペで使用していただき、ボトムナビゲーションを導入してみてください。

ボトムナビゲーション【HTMLコードの作り方】

まずはHTMLコードの作り方についてご説明します。

ボトムナビゲーションは基本的には4~5個のメニューを表示させる場合が多いです。そのため、ulで親要素を作ります。

<ul class="menu">

次にボタンを作成します。基本的には一番左側はホームボタンになる場合が多いので、ここではホームを例に上げて作成します。

「ホーム画面URL」の部分にURⅬの挿入を、「ホーム」の記述の部分にはアイコンの下に表示させたい文字を入力してください。また、今回はfont awesome（https://fontawesome.com/icons?from=io）というサイトのアイコンを使用しております。

アイコンの種類を変えたい場合には、i要素の部分を変更してください。font awesomeの中で使いたいアイコンをクリックすると、必要なコードが表示されるので、そちらを代わりに挿入するとお好みのアイコンが表示されます。

<li>
	<a href="ホーム画面URL"><i class="fas fa-home"></i><br>
	<span class="iconname">ホーム</span></a>
</li>

上記のホームボタンと同じように、その他のボタンも作成してみましょう。表示させたい数だけ同じように記述すると複製することができます。

<li>
	<a href="飛ばしたいページのURL"><i class="アイコンのコード"></i><br>
	<span class="iconname">表示させたい名前</span></a>
</li>

HTMLは以上となります。コピペで挿入したいという方は以下のコードを貼り付けて、必要な部分だけ書き換えて使ってください。

<ul class="menu">
	<li>
		<a href="ホーム画面URL"><i class="fas"></i><br>
		<span class="iconname">ホーム</span></a>
	</li>
	<li>
		<a href="飛ばしたいページのURL"><i class="アイコンのコード"></i><br>
		<span class="iconname">表示させたい名前</span></a>
	</li>
	<li>
		<a href="飛ばしたいページのURL"><i class="アイコンのコード"></i><br>
		<span class="iconname">表示させたい名前</span></a>
	</li>
</ul>

ボトムナビゲーション【CSSコード】

次はボトムナビゲーションのCSSの作り方について開設します。

ボトムナビゲーションの場合、スクロールしても画面の下部に常にメニューが固定されている状態にする必要があります。そのため、 positionは fixedを指定しましょう。leftとbottomを0にすることで画面の下に固定することができます。

.menu {
	position: fixed;
	left: 0;
	bottom: 0;
	background: white;
	width: 100%;
}

次にメニューのボタンの部分の装飾をしていきます。  table-layoutは fixedにして固定することでバランスよくボタンを表示させることができます。text-alignで centerを指定することでボタンの中央部分に文字やアイコンを表示させることができます。

.menu li {
	display: table;
	table-layout: fixed;
	width: 100%;
	padding: 5px;
	list-style: none;
	text-align: center;
}

次にアイコンの下に表示させる文字部分です。アイコンとのバランスを考えて、カラーや文字の大きさを決定しましょう。

.menu a span {
	display: block;
	font-size: 4px;
}

CSSは以上になります。コピペで使用したい方は貼り付けて、ご自身のお好みで書き換えて使用してください。

.menu {
	position: fixed;
	left: 0;
	bottom: 0;
	background: white;
	width: 100%;
}
.menu li {
	display: table;
	table-layout: fixed;
	width: 100%;
	padding: 5px;
	list-style: none;
	text-align: center;
}
.menu a span {
	display: block;
	font-size: 4px;
}

スマホ以外で表示させない方法

ボトムナビゲーションはスマホの画面で見た場合は視覚的に見やすく、ユーザーも使いやすいですが、PC画面にはあまり適していません。そのため、スマホだけで表示したいという場合は、下記のコードをCSSに追記しましょう。

@media(min-width: 768px) {
	.bottom-menu {
		display: none;
	}
}

まとめ

ボトムナビゲーションはスマホ操作の場合、見やすく使いやすいのでユーザーがサイト内の多くのページを閲覧しやすくなりサイトに留まる時間を長くすることができます。作り方も簡単なので、ぜひ導入してみてくださいね。