スマホのホームページでは当たり前になったハンバーガーメニューですが、PCでも使うべきか迷う方は多いのではないでしょうか。PCでハンバーガーメニューを使うとヘッダーはすっきりしますが、ホームページによってはメニューに気づかれず、ページを移動しにくくなります。
この記事では、PCのホームページでハンバーガーメニューを使うメリットとデメリット、使うときの注意点を解説し、当社がPCでハンバーガーメニューを提案するケースも紹介します。
PCのホームページでハンバーガーメニューを使うメリット
PCのホームページでハンバーガーメニューを使うと、ヘッダーのデザインやメニュー項目の管理でメリットがあります。
ヘッダーをすっきり見せてファーストビューを広く使える
PCのホームページでは、ヘッダーにメニューの項目を横に並べる形が一般的ですが、ハンバーガーメニューにするとヘッダーに置くのはロゴとメニューのアイコンだけになります。
ヘッダーが占める面積が小さくなり、ページを開いたときに最初に見える画面であるファーストビューを、画像やキャッチコピーに広く使えます。ヘッダーに並ぶ文字が少なくなることで、ページ全体もすっきりした印象になります。
メニューの項目が増えてもヘッダーのデザインが崩れない
ヘッダーにメニューを横に並べているホームページでは、公開後にページを増やしてメニューの項目を追加すると、ヘッダーの横幅が足りなくなることがあります。
その場合は文字を小さくしたり、メニューを2段にしたり、ヘッダーのデザインを作り直したりする対応が必要です。ハンバーガーメニューなら、追加する項目は開いたときのメニューの中に並べるだけで済み、ヘッダーの見た目は変わりません。
新しいサービスのページを作る予定がある会社や、事業の拡大に合わせてページが増えていくホームページでは、メニューの項目を後から足しやすい点がメリットになります。
PCとスマホでメニューの操作を同じにできる
スマホのホームページでは、画面の幅が狭いことからハンバーガーメニューを使うのが一般的です。
PCでもハンバーガーメニューにすると、PCとスマホのどちらで見ても同じアイコンからメニューを開く操作になり、ユーザーが迷わずに使えます。普段はスマホでホームページを見ていて、仕事中だけPCで見るユーザーにとっても、操作の違いを覚える必要がありません。
メニューの中に並べる項目もPCとスマホでそろえられるので、更新のときに片方だけ項目が違うといったミスも起きにくくなります。
PCのホームページでハンバーガーメニューを使うデメリット
PCのホームページでハンバーガーメニューを使うと、メニューの見つけやすさやページの移動のしやすさでデメリットがあります。
メニューがあることに気づかれにくい
PCのホームページでは、ヘッダーにメニューの項目が並んでいる形が長く使われてきたため、PCで見るユーザーはヘッダーの文字からページを探すことに慣れています。
ハンバーガーメニューは3本線のアイコンだけが表示されるので、アイコンの意味を知らないユーザーや、PCではメニューが並んでいるものと思っているユーザーには、メニューがあることに気づかれにくくなります。
メニューに気づかないユーザーは、ページ内のリンクを探してスクロールを続けたり、見たいページが見つからないままホームページを離れたりします。
メニューを開く操作が1回増える
ヘッダーにメニューが並んでいるホームページなら、ユーザーは見たいページの項目をそのままクリックできます。
ハンバーガーメニューでは、アイコンをクリックしてメニューを開き、そこから項目を選ぶ形になり、ページを移動するたびに操作が1回増えます。開くまでどのような項目があるかも分からないので、ホームページにどのようなページがあるのかを一目でつかめません。
1回の操作の差は小さく見えますが、複数のページを移動するたびに手間が重なり、ほかのページを見ずに終わるユーザーが出てきます。
問い合わせやサービスなど見てほしいページへの導線が隠れる
ヘッダーにメニューが並んでいるホームページでは、問い合わせやサービスページへのリンクが常にユーザーの目に入ります。
ハンバーガーメニューにすると、これらのリンクもほかの項目と一緒にメニューの中に入るので、メニューを開かない限り表示されません。
サービスの内容を読んで問い合わせようと思ったユーザーが、問い合わせページへのリンクをすぐに見つけられないと、そのまま問い合わせをやめてしまうことがあります。サービスのページも同じく、ユーザーの目に触れる機会が減り、会社が一番見てほしいページが見られにくくなります。
PCではハンバーガーメニューを使わないほうがよいホームページ
PCでハンバーガーメニューを使うかは、ホームページを見るユーザーやユーザーの見方によって判断が変わります。
高齢の方などパソコンの操作に慣れていないユーザーが多いホームページ
接骨院や介護施設、葬儀社など、高齢の方がよく見るホームページでは、PCでハンバーガーメニューを使わないほうが無難です。
パソコンの操作に慣れていないユーザーは、3本線のアイコンがメニューだと分からず、クリックしようとも思わないことがあります。ヘッダーに項目が文字で並んでいれば、どこを押せば目的のページに移動できるのかがすぐに分かります。
高齢の方の家族が代わりに調べるケースもありますが、実際にサービスを利用する本人が見ることを考えると、メニューは隠さずに見せておくほうがユーザーに親切なホームページになります。
ユーザーが色々なページを見てから判断するホームページ
注文住宅や法人向けのサービスなど、金額が大きく比較して選ばれるサービスのホームページでは、ユーザーはサービス内容、料金、実績、会社概要などを見比べてから問い合わせるかを決めます。
こうしたホームページでPCのハンバーガーメニューを使うと、ページを移動するたびにメニューを開く必要があり、見比べる途中で手間を感じさせてしまいます。メニューがヘッダーに常に表示されていれば、ユーザーは今どのページを見ていて、次にどのページを見ればよいかが分かり、迷わずに移動できます。
判断に必要なページを順番に見てもらうことが問い合わせにつながるので、メニューは常に見える形にしておくほうが向いています。
ホームページでハンバーガーメニューを使うときの注意点
ハンバーガーメニューを使うと決めた場合は、メニューの見つけやすさや操作のしやすさを補う工夫が必要です。
アイコンの近くにMENUの文字を入れてメニューだと分かるようにする
ハンバーガーメニューの3本線のアイコンだけでは、メニューだと気づかないユーザーがいます。
アイコンの下や横にMENUの文字を入れると、アイコンの意味を知らないユーザーにもメニューだと伝わります。日本語のホームページであれば、英語ではなくカタカナでメニューと入れる方法もあります。
アイコンの大きさや色も、ヘッダーの中で目立つように調整し、ロゴと並んだときに埋もれないようにすることが大切です。
問い合わせページへのリンクはメニューの外に置くか検討する
ハンバーガーメニューの中に問い合わせページへのリンクを入れると、メニューを開かない限りユーザーの目に入りません。
問い合わせを増やしたいホームページでは、ヘッダーのアイコンの横に問い合わせボタンを置いたり、ページの下部や各ページの本文の終わりに問い合わせへのリンクを入れたりする方法があります。
一方で、ヘッダーにボタンを置くとハンバーガーメニューを使ってヘッダーをすっきり見せたい狙いが薄れるので、ホームページの目的に合わせて、メニューの外に置くかどうかを判断します。
開いたメニューの閉じ方を分かりやすくする
PCでハンバーガーメニューを開くと、画面全体や画面の半分ほどをメニューが覆う形になることが多くあります。
閉じるボタンが小さかったり、背景と同じような色で見えにくかったりすると、ユーザーは元のページに戻る方法が分からなくなります。閉じるボタンはメニューを開いたアイコンと同じ位置に、×のマークなど分かりやすい形で置きます。
メニューの外側をクリックしても閉じられるようにしておくと、閉じるボタンを探さなくても元のページに戻れます。
当社がホームページ制作でPCのハンバーガーメニューを提案するケース
当社では、PCでハンバーガーメニューを使うかどうかを、基本的にトップページのメイン画像をどう見せるかで判断しています。
トップページのメイン画像を大きく見せて、ページを開いたユーザーにインパクトを与えたい場合は、PCでもハンバーガーメニューを設置します。ヘッダーにメニューの項目が並んでいると、画像の上に文字が重なったり、画像の表示される範囲が狭くなったりして、メイン画像のインパクトが弱く感じられます。
施設の外観や商品の写真など、画像で第一印象を伝えたいホームページでは、ヘッダーをロゴとアイコンだけにすることで、メイン画像の見せ方を優先できます。一方で、メイン画像のインパクトよりも、各ページへ移動しやすいことを重視するホームページでは、PCのヘッダーにメニューの項目を並べる形で制作しています。
まとめ
PCでハンバーガーメニューを使うかは、ホームページを見るユーザーと、トップページで何を優先して見せたいかで判断します。メニューを隠してすっきり見せるか、ページを移動しやすくするかを、制作前に決めておくことが大切です。
当社では、御社のサービスやユーザーをヒアリングしたうえで、メイン画像の見せ方やメニューの形を含めたホームページのデザインを提案しています。見た目の印象と使いやすさを両立させ、問い合わせにつながるホームページに仕上げます。
デザインの方向性を決めきれない、今のホームページのメニューが使いにくいといったお悩みがあれば、お気軽にご相談ください。
