MENU

出張デモ

資料請求
見積依頼

お問い合わせ

CONTACT

お問い合わせ

サイト職人CMSに関する
お問い合わせ・ご相談はこちらまで

東京本社

03-5366-3277

受付時間 平日9:30~18:00

関西オフィス

06-6123-7260

受付時間 平日9:30~18:00

  1. HOME
  2.  > 
  3. サイト職人スタッフブログ
  4.  > 
  5. 追従型メニューのメリット・デメリット

サイト職人スタッフブログ

追従型メニューのメリット・デメリット

20160414

みなさんは追従型メニューという言葉はご存知でしょうか?

追従型メニューというのは、ホームページ画面上の定位置にメニューを固定表示させることを言います。
通常のメニューの場合、画面をスクロールするとメニューは見えなくなってしまいますが、追従型メニューの場合には、画面スクロールさせても表示されたままになります。別名「固定メニュー」「固定表示メニュー」と言ったりもします。

例えば、この当社ホームページ(http://www.weblab.co.jp/)では、以下のように、画面上部のロゴから「お問い合わせ」ボタンまでがページのどの位置にいても常に表示されています。

追従型メニューのメリット・デメリット

追従型メニューにすることによって、ユーザーに目的のページに進んでもらうための手助けとなり、「ページ内で迷ってしまって離脱する」ことを防ぐ要因となります。
この追従型メニューは、以前はiframeという現在では推奨されていない記述を用いて実装していたのですが、最新のHTMLでは正規の方法で、もっと手軽に実装できるようになりました。
ただし、この追従型メニュー、一見すると便利のように見えますが、実はメリットとデメリットがあります。

追従型メニューのメリット

1.ページ内のどの場所にいてもすぐに目的のページをアクセスすることができる。

追従型メニューにすることで、ページ内のどの位置にいてもすぐに目的のメニューをクリックすることができます。たくさんの階層があるような規模が多いホームぺージではより有効です。

2.スマートフォンに対しては特に有効

スマートフォンやタブレットでのホームページ閲覧の際、表示画面が縦長になってしまうことが一般的です。
追従型メニューにすることでいちいちページの先頭に戻らず、ページの下部からでもメニューにアクセスすることができます。これによってユーザーの煩雑さを軽減させることができます。

追従型メニューのデメリット

表示領域が狭くなる

古い(液晶サイズの小さい)PCやスマートフォンでは、そもそもページを表示できる画面領域が狭いです。そのため追従型メニューの範囲が大きすぎると、本来のページ本体の表示領域がより狭くなってしまい、見てもらうべきコンテンツの閲覧がしにくくなってしまいます。

特にスマートフォンやタブレットでは注意が必要で、文字入力を行うために画面上でキーボードを出現させると、コンテンツの表示される画面領域はほんのわずかになってしまいます。また、ページ下部に固定表示のメニューがあった場合、スクロール操作の中で意図せずにタップしてしまうことがあり、ユーザーの意思と異なる操作になってしまう可能性があります。これはユーザーにとって非常に大きなストレスとなるので注意が必要です。

デメリットの回避策

このようなデメリットを回避するためには以下のような対策が考えられます。

1.追従型メニューの表示範囲をできるだけコンパクトにする

ページのメインはあくまでコンテンツであり、メニューではありません。追従型メニューはできるだけコンパクトにしましょう。ただし小さすぎて見にくくなってしまっては本末転倒なので、注意しましょう。
コンパクトにしつつ、少しでも画面を広く見せるための工夫として、固定表示部分を透過させて、後ろのコンテンツ部分が見えるようにするなども1つの手法です。

2.ページ下部には固定表示させない

どうしても下部に表示させなければならない理由がないのであれば、ページ下部での固定表示は避け、ページ上部へ設置しましょう。ページ下部の固定表示は上述の通り誤操作を引き起こす可能性があります。

3.メールフォームでは固定表示させない

お問い合わせや資料請求などのメールフォームのページでは、文字入力のためにキーボードを表示させる頻度が高く、また、ホームページのGOALとなるページなので、他のページに進ませるための追従型メニューを表示させる必要はありません。

まとめ

最近では追従型メニューを導入しているホームページも増えてきていますが、明確な目的もなく、「流行りなので」導入しているホームページもあるというのが実情です。
追従型メニューの導入にあたっては、デメリットも考慮しつつ、そのページを利用するユーザーの様々な環境や使い方を想定して実装を検討しましょう。

PAGETOP