Facebook Twitter RSS
追従型メニュー(フローティングメニュー)のアイデアまとめ9選・PCサイト編

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

この記事のタイトルとURLをコピーする
追従型メニュー(フローティングメニュー)のアイデアまとめ9選・PCサイト編
https://webkikaku.co.jp/blog/webdesign/pc-floating-menu/
facebook twitter hatena Pocket

追従型メニュー(フローティングメニュー)のアイデアまとめ

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

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

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

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の追従メニューも)

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

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

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

まとめ

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

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

この記事のタイトルとURLをコピーする
追従型メニュー(フローティングメニュー)のアイデアまとめ9選・PCサイト編
https://webkikaku.co.jp/blog/webdesign/pc-floating-menu/
facebook twitter hatena Pocket

東京・名古屋を中心に、中小企業に特化したホームページ制作会社。マーケットやビジネスモデルに合わせ一社一社に合わせたウェブ制作・リニューアルのご提案しています。
1000サイト以上のウェブマーケティング支援で獲得したノウハウで、リニューアル後に過去最高の成果を生み出したお取引先は多数。勘ではなくロジックに基づいたホームページ制作と柔軟な対応力で多数のお客様にご評価頂いております。

どのようなお悩みでも構いません。ホームページを有効的に活用できていないと考えているご担当者の方、まずは一度弊社にご相談くださいませ。

ご提案依頼・ご相談はこちら
公式facebook、twitterから情報を受けとる
いいね!する フォローする
前のページ
次のページ
ページトップ