フローティングメニューとは?フローティングメニューの種類と実装例をご紹介

WEB制作・開発実例・コラム
2019.09.27

フローティングメニューを上手く取り入れることで、サイトを見やすくすることができます。当記事では、フローティングメニューについて、作成方法も含めて詳しく解説していきます。フローティングメニューの導入を考えている方は、ぜひ参考にしてみてください。


フローティングメニューとは?

フローティングメニューとは、位置が固定されているメニューのことです。追従型メニューとも言います。フローティングメニューを設置すれば、ヘッターやフッターに常にメニューを表示させておくことになるので、メニューを使いたいときにそこまでスクロールしていく必要がありません。フローティングメニューはCSSを使って設定することができます。

フローティングメニューを設置したほうが良い業界は?

フローティングメニューは業界問わず使うことができますが、特に次の場合は設置することが推奨されます。

  • サイトのユーザビリティを高くしたい場合
  • メニューのクリック率を上げたい場合
  • サイトのユーザビリティとは、サイトの使いやすさのことです。フローティングメニューを設置し、見たいページにすぐにアクセスできるようにすることで、サイトのユーザビリティを向上させることができます。ユーザビリティの高いサイトはユーザーがアクションを起こしやすいので、利益に繋げることができます。

    例として、美容院やレジャー施設等の料金表や、飲食店や運送会社等の予約ボタンなどは、フローティングメニューに設置しておくことでユーザーのアクションを招きやすくなります。

    また、メニューのクリック率を上げたい場合もフローティングメニューは効果的です。これは主にLP(ランディングページ)などの広告ページにおける考えです。「買いたい」、「気になる」と思った瞬間に購入ページに飛べるメニューが画面上にあることで、ユーザーはアクションを起こしやすくなります。

    フローティングメニューのメリット・デメリット

    フローティングメニューのメリットとデメリットを解説していきます。

    フローティングメニューのメリット

    フローティングメニューのメリットは、サイトのユーザビリティを向上させられることです。メニューを使いたいときにいちいちスクロールする必要がないので、サイトが使いやすくなります。違うページにアクセスしやすくなるので、サイトの直帰率を下げることも期待できます。

    また、フローティングメニューは常に表示されるので、メニューがユーザーの目につきやすくなります。購入や予約などのメニューがフローティングメニューにあれば、ユーザーがアクションを起こしやすくなります。結果として、集客率の上昇に繋げることができるのです。

    フローティングメニューのデメリット

    フローティングメニューは設置することで、画面が狭くなります。常にメニューが表示されるので、元々の画面が小さなスマートフォンではかえってサイトが見づらくなることがあります。フローティングメニューの幅を調整することで、この問題を解決できることがあります。

    フローティングメニューの種類

    フローティングメニューの種類をご紹介していきます。

    固定型

    フローティングメニューが決まった位置に固定され、スクロールしても動かないパターンです。シンプルで見やすいフローティングメニューです。
    以下のサイトはヘッダーがフローティングメニューとなっています。

    固定型のフローティングメニューの例

    メニューの一部が追従するパターン

    画面をスクロールすると、メニューの一部が追従するパターンです。表示されているページに直接関係のあるメニューだけが表示されるので、可動域を上げることができます。
    以下のサイトでは、スクロールすると一番上のヘッダーメニュー(黒枠部分)は表示されなくなります。

    メニューの一部が追従するパターン

    サイドバーが固定されているパターン

    ヘッダーではなくサイドにメニューを固定するパターンです。メインコンテンツが少し狭くなりますが、メニューが多く、ヘッダーでは収まり切れない場合、メニューをサイドバーに設置して固定すると、どのメニューにも遷移しやすくなります。

    サイドバーを固定している例

    スクロールすると形状が変化するパターン

    スクロールすることで形状が変化するパターンです。サイトのデザイン性が上がり、可動域も広くなります。
    以下のサイトでは、スクロールすると、ヘッダーに表示されていたSNSのボタンやサイト名などが表示されなくなり、シンプルなグローバルナビだけが残ります。

    スクロールすると形状が変化するパターン(スクロール前)
    スクロールすると形状が変化するパターン(スクロール後)

    スクロールすると半透明になるパターン

    スクロールすることでメニューが半透明になり、追従するパターンです。サイトの使いやすさは高いままに、可動域を広く見せることができます。

    スクロールすると形状が変化するパターン例

    フローティングメニューの実装例

    フローティングメニューの実装例をご紹介していきます。以下の例はフッター部分に実装していきます。

    
        <div class="page_top">
            <a href="<?php echo home_url(); ?>">
                <i class="fa fa-caret-up" aria-hidden="true"></i>
                PAGE TOP
            </a>
        </div>
    
    
    .page_top{
        text-align: center;
        background-color: #ff8b8b;
        margin-bottom: 30px;
    }
    .page_top a{
        color: #fff;
        display: inline-block;
        width: 100%;
        padding: 20px 0;
        font-size: 17px;
        }
    .page_top a:hover{
        background-color: #fd7e7e;
        padding: 21px 0 19px;
        }
    .page_top {
        display: block;
        width: 100%;
        position: fixed;
        left: 0px;
        bottom: 2px;
        z-index: 9999;
        text-align: center;
        padding: 0 auto;
    }
    

    フローティングメニューを設置するときの注意点

    フローティングメニューはページの一部を隠してしまうので、ユーザーのストレスになることがあります。また、色やデザインによっては注意を引きすぎるあまり不快感を与えてしまうこともあります。
    そのため、フローティングメニューはさりげなく設置されているのが望ましいです。幅やデザインを調整し、ユーザーにストレスを与えないフローティングメニューになるように心掛けるようにしましょう。

    スマホサイトにフローティングメニューを設置する場合

    スマホは画面が小さいので、フローティングメニューの設置の仕方によってはページがほとんど見えなくなり、ユーザーにストレスを与えてしまうことがあります。
    スマホは基本的に縦長の画面となるので、フローティングメニューはヘッターかフッターに設置することで邪魔になりにくくなります。どうしても邪魔に感じる場合は、アコーディオンメニュー(クリックで折り畳みできるメニュー)を検討してみてもよいかもしれません。

    スマホサイトにフローティングメニューを設置する場合

    スマホサイトにフローティングメニューを設置例は以下です。

    <div id="floatingmenu">
    <a href="リンク1><img src="ボタン1"></a>
    <a href="リンク1><img src="ボタン1"></a>
    <a href="リンク1><img src="ボタン1"></a>
    <a href="リンク1><img src="ボタン1"></a>
    </div>
    
    
    #floatingmenu {
    display: block;
    width: 100%;
    position: fixed;
    left: 0px;
    bottom: 0px;
    z-index: 9999;
    text-align: center;
    padding: 0 auto;
    }
    

    ある程度の高さからフローティングメニューを表示させる場合は以下のようにします。

    
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    ~</head>
    
    <div id="floatingmenu">メニュー</div>
    <script>
    jQuery(function() {
    var topBtn = jQuery('#footerFloatingMenu');
    topBtn.hide();
    jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > 300) {
    topBtn.fadeIn();
    } else {
    topBtn.fadeOut();
    }
    });
    });
    </script>
    
    

    まとめ

    フローティングメニューを導入することで、サイトのユーザビリティやデザイン性を向上させることができます。しかし、やみくもに設置すると、かえって見づらいサイトになってしまうこともあります。ユーザーにとってよいサイトにすることを念頭に、使いやすく見やすいフローティングメニューを設置しましょう。フローティングメニューのデザインに迷ったときは、他のサイトを参考にしてみるのもよいかもしれません。

    SEOやWEB制作に関する情報を検索

    コラム

    ピックアップコラム

    最新コラム

    人気コラム

    過去の記事

    ご質問やご相談などお気軽にお問い合わせください。

    お電話でのお問い合わせはこちら

    03-5829-9912

    受付時間:平日10:00~19:00(土・日・祝日を除く)