フローティングメニューは現在たくさんのwebサイトに採用されています。フローティングメニューを使いこなせば、ユーザビリティやクリック率の向上に役立つからです。
また個性的なフローティングメニューを設置することで、webデザインの幅をぐっと広げることも可能です。
このページではプログラミング初心者向けにフローティングメニューを使ってクリック率を上げるコツを解説します。
ハンバーガーメニューの基礎知識！作り方やメリット・デメリットを紹介
目次
フローティングメニューってなに？
画面をスクロールさせても、ずっと同じ位置に表示されているヘッダーやフッターを見たことはありませんか？
このように画面の特定の場所に固定されて、常に同じ場所に表示されるメニューを「フローティングメニュー」といいます。フローティングは英語で「浮いている」という意味です。
webサイトでほかの要素から浮いているように見えるメニューが出てきたら「フローティングメニュー」という言葉を思い出してください。
フローティングメニューは画面を動かしても常に追いかけてくるように見えることから「追従メニュー」「追従型ナビゲーション」と呼ばれることもあります。
フローティングメニューのバージョン
1口にフローティングメニューといっても、いろいろなタイプのものがあります。それぞれの特徴を見ていきましょう。
ヘッダータイプ
ヘッダーがフローティングメニューとして上部に固定されているデザインはよく見かけます。このようなヘッダーは固定ヘッダーと呼ばれることもあります。
固定フッターはスマホサイト、webサイトにかかわらず大変よく使われています。
ヘッダーメニューの中にはナビゲーションメニューが表示されていたり、検索メニューやハンバーガーメニューへのリンクが埋め込まれていたりします。
フッタータイプ
フッターがフローティングメニューとして画面の下部に固定されているパターンもあります。このようなフッターは固定フッターと呼ばれることもあります。
固定フッターには「検索メニュー」や「SNSフォロー」など実用的なメニューがコンパクトに並んでいることが多いです。
サイドメニュータイプ
サイドメニューをフローティングさせ、固定表示しているサイトもあります。このようなサイドメニューは固定サイドバーとも呼ばれます。大画面のPCにはなじみやすいデザインです。
一方画面の幅が狭く縦長のスマホ画面では、サイドメニューを固定するとサイト全体のレイアウトが崩れてしまいます。サイドメニューをフローティングさせるときは、レスポンシブ対応をしっかり行ってください。
例えばスマホでアクセスしたときは、サイドメニューの内容をハンバーガーメニュー内に移し替えるなどの処理を行うと良いでしょう。
フローティングメニューの作り方
フローティングメニューはCSSで作ることができます。
まず、フローティングさせたいメニューを
position:fixed;
で一カ所に固定します。
次に固定表示したい位置をleftやtop等を使って指定します。
（ヘッダーとして画面トップに固定するなら
top:0;
とします。）
また他の要素から浮いているように見せるには、すべての要素を重ねたとき一番上にフローティングメニューが来るようにしなければなりません。
要素同士の重なり順を設定するCSSプロパティはz-indexです。
z-indexの値は整数値で指定できます。原則的にz-indexプロパティの値が大きい要素ほど上に表示されます。フローティングメニューを設置するときは
z-index:999;
などのなるべく大きな値を持たせておくと良いでしょう。
なお、z-indexプロパティが有効なのは、positionプロパティがstatic以外の値をとるときです。
フローティングメニューには上記のようにposition:fixed;を設定しているので、問題なく効くはずです。
WEBコーディング・プログラミングに役立つ「逆引き辞典」、メリット・注意点は？
フローティングメニューのメリット
フローティングメニューを設置するメリットは、ユーザーがサイトのどこにいてもメニューにアクセスしやすくなることです。
ヘッダーやフッターのメニューにアクセスしたいとき、現在見ているページの一番最初（もしくは一番最後）までスクロールするのは結構手間がかかります。
ユーザーが面倒に思って、途中でサイトを閉じてしまうかもしれませんね。
その点、フローティングメニューはいつでもユーザーの目が届くところに表示されています。
ユーザーがアクションをしたいと思ったときにすぐ操作できるので、ユーザビリティ―を向上させるのに役立ちます。
また、通販商品のホームページなら商品購入ボタンを、飲食店のサイトなら予約ボタンをフローティングメニューに並べれば、ユーザーが「商品が買いたい」「お店で食事したい」と思ったときにすぐアクションをとれます。
フローティングメニューは集客率を高めるという意味でも役に立つのです。
フローティングメニューのデメリット
フローティングメニューは常に画面の同じ位置に表示されているため、いつも画面のスペースを占領している状態になります。
これはデザインが窮屈になったり、他の要素を覆い隠してしまうというデメリットを生み出します。
フローティングメニューが他のボタンやリンクのそばに表示されることで、押し間違いが生じてしまう可能性もあります。
このようにユーザーの都合にかかわらず常に表示されているフローティングメニューは、ときに「邪魔な物」と捉えられてしまいます。
とくにフローティングメニューに「こちらから購入」など企業の意思がはっきりわかるメニューが表示されていると、押しつけがましい印象を与えてしまうかもしれません。
フローティングメニューの工夫
フローティングメニューはただいつも同じ位置に固定されているだけではありません。
画面スクロールに従って様々な工夫をすることで、サイトデザインを豊かにし、フローティングメニューのデメリットを最小限に抑えることもできます。
例えば、画面のスクロールに合わせて固定ヘッダーの形をシンプルで低い高さに変化させるという演出があります。
ヘッダーの大きさを小さくすることで、画面の邪魔にならないように配慮しているのです。
また、スクロールすることでヘッダーメニューの中の一部だけが抜き出されてシンプルなつくりになるというデザインもあります。
例：歯科エメラルド茅ケ崎のホームページ
https://emerald-shika.jp/
フローティングメニューを半透明にして、本来はメニューの後ろに隠れてしまうはずのサイトコンテンツを見やすくするという工夫もできます。
例：onda partsのホームページ
https://www.ondaparts.jp/
フローティングメニューを取り入れるときはユーザーの目線で
フローティングメニューは画面をスクロールしても常に同じ位置に表示されているため、ユーザーがナビゲーションメニューを探す手間を最小限に抑えることができます。
ユーザーがアクションを起こしたいと思ったその時を逃さないので、直帰率を抑制したり、集客率を上げたりするのに役立ちます。
一方でユーザーの都合にかかわらずいつも表示されているフローティングメニューは、ときに圧迫感や強制感を与えてしまいます。
目立ちすぎるフローティングメニューはユーザーの好感度を下げてしまう可能性があるのです。
フローティングメニューを導入するときは、サイズ、位置、色彩などに考慮し、サイトのコンテンツの邪魔にならないように注意しましょう。
