【レスポンシブ対応】ボトムナビゲーションの作り方Webサイト制作サイト制作2020.11.17サイトをレスポンシブに対応させる時、どのようなナビゲーションバーを設定していますか?ハンバーガーメニューを使っているという方もいると思いますが、最近はボトムナビゲーションにする方が読者にストレスを感じさせずによりページの回遊率を高めることができるということで、使う方が増えてきています。そこで今回はボトムナビゲーションを採用するメリットと作り方についてご紹介していきます。スマホでの利用の場合、ボトムナビゲーションのメリットは大きいですし、作り方も簡単なのでぜひこの機会に取り入れてみてくださいね!ハンバーガーメニューの作り方については以下の記事で解説しています。まとめボトムナビゲーションとは?ボトムナビゲーションとは、スマートフォンで見た時に画面の下の方に固定されているメニューのことです。馴染みがあるものであれば、LINEのアプリを開くと下の方に「ホーム」「トーク」「タイムライン」などのボタンが表示されていると思いますが、これのことを指します。その他にもTwitterやInstagram・YouTubeのアプリ、そしてZOZOTOWNの商品ページ等にもボトムナビゲーションが使われています。スマートフォンを使っている人であれば大半の方が無意識で使っているのではないでしょうか。ボトムナビゲーションのメリットボトムナビゲーションが人気の主要アプリやサイトで使用されているのにはそれだけの理由があります。そこでここからはボトムナビゲーションを使うことによって得られるメリットについてご紹介します。スマホでもボタンが押しやすいボトムナビゲーションはスマホ操作での相性がよいことから、レスポンシブデザインの中で使われています。現在でも多くのサイトで使われているレスポンシブデザインのナビゲーションバーは「ハンバーガーメニュー」だと思います。ハンバーガーメニューとは、サイトの右上によく設定されている三本線のメニューです。スマホが普及した際、メニューをコンパクトに収納することができると多くのサイトで採用されました。ハンバーガーメニューの配置のほとんどが右上になるため、スマホを片手で操作する際に押しづらいという点がデメリットとして挙げられていました。これを解決したのがボトムナビゲーションになります。ボトムナビゲーションの場合、画面の下部分にボタンが設置されるため、片手で操作をする方や比較的手の小さい女性やお子様でも簡単にボタン操作をすることができるという点が評価され、多くのサイトで取り入れられるようになりました。ページの回遊率が上がるボトムナビゲーションを取り入れると常に主要メニューが表示されている形になるため、ページの回遊率を上げることができます。ハンバーガーメニューのデメリットとして、コンテンツが全て収納されているのでユーザーがボタンを押さないと見てもらえないという点がありました。ボトムナビゲーションの場合は画面下部に常にメニューが表示されており操作もしやすいので、ユーザーがストレスなく気軽にボタンを押しやすいので、サイト内で多くのページを閲覧しやすくなります。視覚的に分かりやすいボトムナビゲーションは文字だけではなくアイコンをつけて表示するという使い方が多くなっています。LINEやTwitterでもホームには家のマークがついていますね。そのため、ユーザーが視覚的にメニュー内容を判断できるようになっており、より感覚的にボタンを押しやすくなっています。ボトムナビゲーションの作り方では次にボトムナビゲーションの作り方についてご紹介します。ボトムナビゲーションはHTMLとCSSのみで構成することができます。作り方も比較的簡単で、どなたでも容易に作成することができます。方でも簡単にできるようコードを記載していますのでコピペで使用していただき、ボトムナビゲーションを導入してみてください。ボトムナビゲーション【HTMLコードの作り方】まずはHTMLコードの作り方についてご説明します。ボトムナビゲーションは基本的には4~5個のメニューを表示させる場合が多いです。そのため、ulで親要素を作ります。class="menu">次にボタンを作成します。基本的には一番左側はホームボタンになる場合が多いので、ここではホームを例に上げて作成します。「ホーム画面URL」の部分にURLの挿入を、「ホーム」の記述の部分にはアイコンの下に表示させたい文字を入力してください。awesome(https://fontawesome.com/icons?from=io)というサイトのアイコンを使用しております。アイコンの種類を変えたい場合には、i要素の部分を変更してください。awesomeの中で使いたいアイコンをクリックすると、必要なコードが表示されるので、そちらを代わりに挿入するとお好みのアイコンが表示されます。class="iconname">ホーム</span></a></li>上記のホームボタンと同じように、その他のボタンも作成してみましょう。表示させたい数だけ同じように記述すると複製することができます。class="iconname">表示させたい名前</span></a></li>HTMLは以上となります。コピペで挿入したいという方は以下のコードを貼り付けて、必要な部分だけ書き換えて使ってください。次はボトムナビゲーションのCSSの作り方について開設します。ボトムナビゲーションの場合、スクロールしても画面の下部に常にメニューが固定されている状態にする必要があります。fixedを指定しましょう。leftとbottomを0にすることで画面の下に固定することができます。100%;}次にメニューのボタンの部分の装飾をしていきます。fixedにして固定することでバランスよくボタンを表示させることができます。centerを指定することでボタンの中央部分に文字やアイコンを表示させることができます。center;}次にアイコンの下に表示させる文字部分です。アイコンとのバランスを考えて、カラーや文字の大きさを決定しましょう。4px;}CSSは以上になります。コピペで使用したい方は貼り付けて、ご自身のお好みで書き換えて使用してください。4px;}スマホ以外で表示させない方法ボトムナビゲーションはスマホの画面で見た場合は視覚的に見やすく、ユーザーも使いやすいですが、PC画面にはあまり適していません。そのため、スマホだけで表示したいという場合は、下記のコードをCSSに追記しましょう。none;}}まとめボトムナビゲーションはスマホ操作の場合、見やすく使いやすいのでユーザーがサイト内の多くのページを閲覧しやすくなりサイトに留まる時間を長くすることができます。作り方も簡単なので、ぜひ導入してみてくださいね。2016年9月ご質問やご相談などお気軽にお問い合わせください。