フローティングメニューとは？フローティングメニューの種類と実装例をご紹介
2020.07.16
フローティングメニューを上手く取り入れることで、サイトを見やすくすることができます。当記事では、フローティングメニューについて、作成方法も含めて詳しく解説していきます。フローティングメニューの導入を考えている方は、ぜひ参考にしてみてください。
フローティングメニューとは？
フローティングメニューとは、位置が固定されているメニューのことです。追従型メニューとも言います。フローティングメニューを設置すれば、ヘッターやフッターに常にメニューを表示させておくことになるので、メニューを使いたいときにそこまでスクロールしていく必要がありません。フローティングメニューはCSSを使って設定することができます。
フローティングメニューを設置したほうが良い業界は？
フローティングメニューは業界問わず使うことができますが、特に次の場合は設置することが推奨されます。
- サイトのユーザビリティを高くしたい場合
- メニューのクリック率を上げたい場合
サイトのユーザビリティとは、サイトの使いやすさのことです。フローティングメニューを設置し、見たいページにすぐにアクセスできるようにすることで、サイトのユーザビリティを向上させることができます。ユーザビリティの高いサイトはユーザーがアクションを起こしやすいので、利益に繋げることができます。
例として、美容院やレジャー施設等の料金表や、飲食店や運送会社等の予約ボタンなどは、フローティングメニューに設置しておくことでユーザーのアクションを招きやすくなります。
また、メニューのクリック率を上げたい場合もフローティングメニューは効果的です。これは主にLP(ランディングページ)などの広告ページにおける考えです。「買いたい」、「気になる」と思った瞬間に購入ページに飛べるメニューが画面上にあることで、ユーザーはアクションを起こしやすくなります。
LP(ランディングページ)については以下の記事で解説しております。
フローティングメニューのメリット・デメリット
フローティングメニューのメリットとデメリットを解説していきます。
フローティングメニューのメリット
フローティングメニューのメリットは、サイトのユーザビリティを向上させられることです。メニューを使いたいときにいちいちスクロールする必要がないので、サイトが使いやすくなります。違うページにアクセスしやすくなるので、サイトの直帰率を下げることも期待できます。
また、フローティングメニューは常に表示されるので、メニューがユーザーの目につきやすくなります。購入や予約などのメニューがフローティングメニューにあれば、ユーザーがアクションを起こしやすくなります。結果として、集客率の上昇に繋げることができるのです。
フローティングメニューのデメリット
フローティングメニューは設置することで、画面が狭くなります。常にメニューが表示されるので、元々の画面が小さなスマートフォンではかえってサイトが見づらくなることがあります。フローティングメニューの幅を調整することで、この問題を解決できることがあります。
2019年5月にぺライチでもフローティングメニューを導入
ぺライチは、誰でも簡単にHPができるように豊富なテンプレートが用意されているホームページサービスです。テンプレートが用意されているので、HTMLやCSSなどの専門知識がなくても指定箇所に文章や写真を追加することで、ホームページが作成することが出来ます。
2019年5月にぺライチでもフローティングメニューが追加されました。
追加方法はプレミアムブロック/テンプレートから、ブロックを追加し、「ページ情報編集」から、フローティングメニュータブを選択を選択します。その後、テンプレートに沿って入力し、保存することで、簡単にフローティングメニューを設置することが出来ます。
以下に具体的な操作方法がありますので、ご参照いただければと思います。
「ペライチ」が新たに「フローティングメニュー」機能を追加
フローティングメニューの種類
フローティングメニューの種類をご紹介していきます。
固定型
フローティングメニューが決まった位置に固定され、スクロールしても動かないパターンです。シンプルで見やすいフローティングメニューです。
以下のサイトはヘッダーがフローティングメニューとなっています。
メニューの一部が追従するパターン
画面をスクロールすると、メニューの一部が追従するパターンです。表示されているページに直接関係のあるメニューだけが表示されるので、可動域を上げることができます。
以下のサイトでは、スクロールすると一番上のヘッダーメニュー(黒枠部分)は表示されなくなります。
サイドバーが固定されているパターン
ヘッダーではなくサイドにメニューを固定するパターンです。メインコンテンツが少し狭くなりますが、メニューが多く、ヘッダーでは収まり切れない場合、メニューをサイドバーに設置して固定すると、どのメニューにも遷移しやすくなります。
スクロールすると形状が変化するパターン
スクロールすることで形状が変化するパターンです。サイトのデザイン性が上がり、可動域も広くなります。
以下のサイトでは、スクロールすると、ヘッダーに表示されていた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>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.11.0%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</head>
<div id="floatingmenu">メニュー</div>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0AjQuery(function()%20%7B%0Avar%20topBtn%20%3D%20jQuery('%23footerFloatingMenu')%3B%0AtopBtn.hide()%3B%0AjQuery(window).scroll(function%20()%20%7B%0Aif%20(jQuery(this).scrollTop()%20%3E%20300)%20%7B%0AtopBtn.fadeIn()%3B%0A%7D%20else%20%7B%0AtopBtn.fadeOut()%3B%0A%7D%0A%7D)%3B%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
フローティングメニューをWordpressに実装するプラグイン
WordPressサイトにフローティングメニューを設置したい場合、先ほどご紹介したコードを自分で実装する以外にも、プラグインを使う方法があります。
お次は、どのプラグインを使えばフローティングメニューを実装できるのかをご紹介していきます。
WP Floating Menuは、左右どちらかに固定するシンプルなフローティングメニューを簡単に実装できるプラグインです。
ベースのデザインを元に、見た目をカスタマイズすることもできます。
日本語対応はしていませんが、簡単な英語によるセッティングのため、誰でも難なく実装できるでしょう。
デモページが用意されているため、完成品のイメージを知りたい人はぜひチェックしてみてください。
Advanced Floating Content
Advanced Floating Contentは、自由度の高さが魅力のプラグインです。
ページの上下左右問わず設置できるのはもちろん、一定距離スクロールしたら表示されたり、メニュー表示時にアニメーションしたりなど、いろいろなタイプのフローティングメニューが簡単に実装できます。
ユーザーが任意でメニューを非表示にできる機能や、PCでは表示してスマホには表示しない機能（その逆もあり）なども用意されており、大変強力です。
しかしその分、すべての機能を使うには有料版を購入する必要があるため注意しましょう。
また、こちらのプラグインではフローティングメニューのほかに「フローティングバナー」を作成することも可能です。
プラグインを使って自由度の高いフローティングメニューをつくりたい方や、フローティングバナーにも興味がある方は、導入を検討してみてはいかがでしょうか。
Sticky Menu (or Anything!) Settingsは、すでにテーマに組み込まれている任意の要素を、固定型フローティングメニュー化できるプラグインです。
既存の外観に変更を加えずにフローティングメニューを追加できるため、大変便利なプラグインです。
フローティングメニュー化したくない画面サイズなども設定することが可能で、レスポンシブデザインにも事細かに対応することができます。
フローティングメニュー化する部分を要素名やクラス名で指定をする点や、z-indexの指定ができることからも分かるように、cssの知識がある人向けのプラグインとなっています。
細かい調整ができるところが魅力的ですが、css知識に自信がない方は他のプラグインをおすすめします。
設定方法
今回はご紹介した3種類のプラグインを代表して、Sticky Menu (or Anything!) Settingsでフローティングメニューを設置する方法をご紹介します。
設置完了までの大まかな流れは次の通りです。
- プラグインのインストール
- 有効化
- オプションの設定
なお、これからご紹介する方法を試す前には必ずバックアップを取っておくようにしてください。
1.プラグインのインストール
まずはSticky Menu (or Anything!) Settingsをインストールします。
ダッシュボード＞プラグイン＞新規追加から、キーワードを「Sticky Menu (or Anything!) Settings」で絞り込み検索をかけます。
画像のプラグインを探し、カードの右下に「使用中の WP バージョンと互換性あり」と書かれていることを確認して「今すぐインストール」のボタンを押します。
2.有効化
ダッシュボード＞プラグイン＞インストール済みプラグインを開きます。
インストール済みのプラグインが一覧表示されていますので、「Sticky Menu (or Anything!) on Scroll」を探して「有効化」をクリックします。
3.オプションの設定
プラグインを有効化すると、設定画面が開けるようになります。
ダッシュボード＞設定＞Sticky Menu (or Anything!)から、設定画面に進みます。
色々なオプション項目がありますが、中でも「Sticky Element: (required)」は設定必須の項目です。
最低限、このオプションだけは設定するようにしてください。
「Sticky Element: (required)」には、フローティングメニュー化したいHTML要素を指定します。
たとえば、フローティングメニュー化したい部分のクラス名が「sample」の場合、オプションの入力値は「.sample」とします。
「Sticky Element: (required)」入力したら、実際のサイトを確認してみましょう。
画面をスクロールして確認すると、設定した部分が固定型のフローティングメニューとなっているのが確認できます。
他のオプション項目の説明は以下の通りです。
必要な項目を設定してお使いくださいね。
| オプション名 |
説明 |
入力例 |
| Sticky Element: (required) |
固定型フローティングメニュー化したい要素を指定する |
menuタグを指定したい場合、「menu」。
id名がmenu_fの場合「#menu_f」。
class名がmenu_fの場合「.menu_f」。 |
| Space between top of page and sticky element: (optional) |
フローティングメニューの固定場所を、画面上部から余白をもたせたい場合に指定する |
上から10pxの位置にフローティングメニューを設置したい場合、「10」。 |
| Check for Admin Toolbar |
WordPressログイン状態時に画面上部に表示されるツールバーとフローティングメニューが被らないようにする |
被らないようにしたい場合はチェックを入れる。 |
| Do not stick element when screen is smaller than: (optional) |
ここに入力した値よりも画面の幅が小さい場合、メニューをフローティング化しない |
400px以下の場合にフローティング化したくない場合、「400」。 |
| Do not stick element when screen is larger than: (optional) |
ここに入力した値よりも画面の幅が広い場合、メニューをフローティング化しない |
1000px以上の場合にフローティング化したくない場合、「1000」。 |
応用してフローティングバナーを作ることも可能
フローティングメニューの技術を応用すれば、「フローティングバナー」を作ることも可能です。
お次はフローティングバナーについてご紹介していきます。
フローティングバナーとは？
スマートフォン向けのサイトで、ページの下部に常に表示されているバナーをよく見かけますよね。
画面をスクロールしてもずっと表示されていて、画面の下に常にくっついているようなバナーのことを「フローティングバナー」といいます。
ECサイトはもちろん、メディアサイトや個人が運営するアフィリエイトサイトなどでも使われていることが多く、一度は目にしたことがある方がほとんどでしょう。
フローティングバナーのメリット・デメリット
フローティングバナーのメリットとデメリットを解説していきます。
フローティングバナーのメリット
フローティングバナーのメリットには、主に以下のようなものがあります。
- 画面をスクロールしても常に表示されていることから、ユーザーに情報を訴求しやすい
- 実装が比較的容易で、レスポンシブデザインにも対応しやすい
- バナーの幅や高さ、デザインをきちんと考慮すれば、ユーザビリティの観点からもデザインの観点からも比較的邪魔にならずに済む
フローティングバナーは、そのページを見ている間はずっと視界に入る情報となります。
そのため常にユーザーに対して情報を発信し続けることができ、興味を持ってもらいやすくなる効果が見込めます。
また、フローティングバナーの実装はとても簡単です。
先ほど「スマホサイトにフローティングメニューを設置する場合」で紹介した方法の応用で簡単に実装できます。
少ないコードで実装でき、それでも高いコンバージョンを得られることは非常に魅力的です。
バナーは使い方次第で「邪魔なもの」にもなってしまいますが、幅や高さを考慮し、Webサイトそのものと統一性を持ったデザインにすることで、ユーザーにとって邪魔なものにならず、有益な情報をもたらすものになります。
フローティングバナーにはこのようなメリットがあるため、効果的に活用していきたいですね。
フローティングバナーのデメリット
とても魅力的な効果が見込める一方で、フローティングバナーには以下のようなデメリットもあります。
- 使い方によっては、画面がごちゃごちゃして見づらく感じてしまう
- フローティングバナーの近くに他のボタンなどがある場合、ユーザーがバナーとボタンを間違えてクリック（タップ）してしまい、ストレスを感じさせてしまう
- 常に表示されていることから、ユーザー個人がメリットを感じられない場合に鬱陶しがられてしまう
フローティングバナーは画面に常に表示されるものであるがゆえに、このようなデメリットも発生してしまいます。
「フローティングバナーで画面がごちゃごちゃする」という問題は、表示するバナーを厳選することで回避できるでしょう。
PC向けの画面でもスマホ向けの画面でも、目立つバナーが多数あると、どれも「景色」となってしまい、見てもらえないこともあります。
結果的にコンバージョンに繋がらなくなることもあるため、バナーは多ければ良いわけではないことを認識しておきましょう。
フローティングバナーはその特性上、スクロールの具合によっては他のリンクボタンなどに被ってしまうことがあります。
バナーがボタンに被った状態でボタンをタップすると、うっかりバナーの方を触ってしまいリンク先に跳んでしまう、ということが起こり得るのです。
こうした時にユーザーは「バナーなんか触ったつもりないのに。邪魔だな」と感じ、Webサイト全体に対してのイラつきに繋がってしまいます。
また、フローティングバナーの内容がユーザーにとって興味のない内容であった場合、そもそもバナーはメインコンテンツの表示領域を狭める、単なる邪魔者となることもあります。
バナーの内容は、ターゲット層が広く、どんな人にも知っておいてメリットになる情報を載せることが望ましいです。
ECサイトならば誰もが使える割引クーポンの紹介タイムセールの告知、学習塾やトレーニングジムのWebサイトなら入会金や月会費の割引キャンペーンについての内容などが、フローティングバナーに適した内容であると考えられるでしょう。
こうした「表示されていることで不具合がある」という問題に対しては、ユーザーが任意でバナーを非表示にできる機能が用意されていると親切です。
バナーの右上などに「×」や「CLOSE」などのボタンを設置し、タップすることでバナーが消える仕様にするのが良いでしょう。
まとめ
フローティングメニューを導入することで、サイトのユーザビリティやデザイン性を向上させることができます。しかし、やみくもに設置すると、かえって見づらいサイトになってしまうこともあります。ユーザーにとってよいサイトにすることを念頭に、使いやすく見やすいフローティングメニューを設置しましょう。フローティングメニューのデザインに迷ったときは、他のサイトを参考にしてみるのもよいかもしれません。
また、フローティングメニューの実装技術を応用して「フローティングバナー」をつくることもできます。
フローティングバナーは常にユーザーの目に映るため、情報の訴求がしやすく、高いコンバージョン率を得ることが可能です。
「フローティングメニュー」と「フローティングバナー」を効果的に活用することで、ユーザーにとって使いやすく、運営側としても嬉しい結果を得られるはずですよ。
ぜひフローティングメニュー、フローティングバナーを活用してくださいね。
関連
SEO対策コンテンツSEO
SEO基礎SEO対策
Google関連SEO対策
