追従型メニュー（フローティングメニュー）のアイデアまとめ９選・PCサイト編

追従型のナビゲーションについて少し調査する機会があったので、ついでにまとめてみました。追従型のナビゲーションにメリットデメリットあるところだとは思いますが、ウェブサイト制作のヒントにしてもらえればと思います。

ヘッダーがまるごと追従するパターン

https://www.toumeihouse.com/

シンプルにヘッダーがそのまま追従してくるパターンです。ヘッダーのサイズが大きければ可視領域が少なくなってしまいますので、その点が心配ではありますがユーザが最初に見たメニューがそのままついてくるので迷うことなく利用できるのはメリットと言えるでしょう。

メニューが小さくなって追従するパターン

https://daiei-ironworks.co.jp/

スクロールをするとヘッダーのメニューが少しサイズ縮小され、可視領域を広げるパターンの追従ナビゲーションメニューです。先ほど紹介したヘッダーが丸ごとついてくるパターンのデメリットを補う形のメニューと言えるでしょう。

別の追従メニューが表示されるするパターン

http://life.a-tm.co.jp/

スクロールをすると、最初に表示されていた減ったのナビゲーションメニューとは別に、遅れて新たに新しいナビゲーションメニューが表示されるパターンです。何か使いやすさを改善するために施されたものではありませんが、よりリッチなウェブ体験をユーザに感じてもらえることができるのではないでしょうか。

半透明で追従するパターン

https://www.ondaparts.jp/

スクロールをすると、表示されていたナビゲーションメニューが半透明になり追従するパターンです。可視領域が狭まってしまうデメリットを、メニューを透過にすることでカバーするようなアイデアです。

メニューの位置を隅にする追従するパターン

http://www.nogatadenki.jp/

こちらのパターンは、動きを工夫しているわけではなく、ナビゲーションの表示位置を左上にする工夫をしたナビゲーションメニューです。こちらもやや可視領域を広げることができるといった工夫に加え、レイアウトとして少しおしゃれな感じを演出することができるのではないでしょうか。

中段メニューが追従するパターン

https://www.datasection.co.jp/service/insight-intelligence

ヘッダーの画像下にあるメニューがスクロールをすると途中から追従型のメニューになる少し変化球のある追従メニューです。コーポレートサイトとしてのメニューを上段に設置し、ソリューション別のメニューを下段に設置、さらに追従するというアイデアはとても面白いですね。

よりリッチになって追従するパターン

https://www.tainavi-biz.com/

スクロールをすると最初に表示されていたメニューにアイコンが追加され、よりリッチなメニューが追従するパターンです。トップページを訪れるほとんどのユーザが、まずスクロールするであろうと仮定し、他のページに行きたくなった際に、アイコン付きのメニューだとよりページの内容連想しやすく、ユーザーフレンドリーな設計になっているのではないでしょうか。

サイドのメニューが追従するパターン

https://holos-home.co.jp/

追従型のメニューと言っていいのか少し悩むところではありますが、サイドにメニューが常に表示されているパターンです。メインコンテンツとなる領域が少し狭くなってしまう課題もありますが、それ以上に常にメニューが表示されておりページ遷移しやすい点では優れているのではないでしょうか。デメリット部分についてはレスポンシブにすることである程度解消ができそうですね。

ロゴだけ追従するパターン（LPの追従メニューも）

http://www.calbee.co.jp/kappaebisen/factory/

追従型メニューと言うと少し違うかもしれませんので番外編となりますが、ロゴだけ追従するといったパターンもありました。ランディングページのような構成の場合、ブラウザの隅に常にページ内リンクが設置されているのは、親切設計ですよね。

まとめ

いかがでしたでしょうか。ナビゲーションメニューは非常に便利である反面、やはり可視領域が狭まってしまうデメリットがあります。それを補うために様々な工夫がされていました。ウェブサイトの役割に応じてうまく使い分けたいですね。

今回はパソコンサイトのメニューを中心に様々なアイデアを取り上げてみましたが、今度はスマホサイトのメニューも取り上げてみたいと思います。