スマホのメニューがハンバーガーメニュー(3本線メニュー)に対応

スマホでのメニュー表示方法が、三本線アイコンをクリックした際に隠れたメニューが現れるハンバーガーメニューになりました。
また、ハンバーガーメニューをオフにして従来のようにメニューを常時表示することも可能です。常時表示の場合に、メニューの下層が開閉式になり更に使いやすくなりました。

表示サンプル

ハンバーガーメニュー

現在ご覧のまめわざのホームページは、ハンバーガーメニューを採用しています。スマートフォンでアクセスするか、パソコンのウィンドウを狭めてご確認ください。
メニューが表示されている場所に表示される「三本線アイコン+メニュー」を押すと、右側からメニューが現れます。

現れたメニューは次の3つの方法で消すことが可能です。

  • 左上に現れる「×」ボタンをタップ
  • メニュー以外のところをタップ
  • メニューを右側にフリック(指をスライド)

常時表示メニュー

ハンバーガーメニューを利用しない場合は、パソコンと同様にメニューが常時表示されます。
下層ページがあって表示する設定にしている場合は、パソコンではマウスを当てた際に現れますが、スマホでは上下矢印が表示され、これを押して下層ページが現れたり隠れたりします。

設定方法

標準(デフォルト)はハンバーガーメニューです。
ただし、メニューが非表示になっている場合は、メニューの表示方法にかかわらず表示されません。

常時表示メニューとの切り替え

ログイン後、ページ一覧のメニューの「編集」ボタンで、小窓の「スマホ」欄の「メニューを常時表示しない(ハンバーガーメニュー・3本線メニュー)」のチェックを外してOKすると常時表示されます。
再度ハンバーガーメニューにする際は、これをチェックしてOKします。

ハンバーガーメニューのメリット・デメリット

巨大サイトであるYahoo! Japanでは、ハンバーガーメニューとボタンアイコン型の常時表示メニューが併用されています。
シンプルに言えば、ハンバーガーメニューは「スッキリするが分かりづらい」という特徴があるからと思われます。
良し悪しを表にまとめると以下のようなイメージになります。

ハンバーガーメニュー常時表示メニュー
見た目のすっきり感×
メニューのわかりやすさ
ページビュー数

ハンバーガーメニューとフッターメニューの併用

ハンバーガーメニューは他ページの存在に気づかれずページビューが減少するというレポートもあります。
まめわざでは標準でフッターにメニューがあるため、ハンバーガーメニュー+フッターメニューの2段構えで、見た目のすっきり感を実現しつつページビューの減少対策をしています。
ハンバーガーメニューを利用する際は、フッターメニューかサイドメニューとの併用をおすすめします。

デザインの変更について

今回の更新にあたり、メニュー部分のデザインが一部変更となりました。
また、デザイン雛形によってハンバーガーメニューと三本線アイコン付きのボタンのデザインも色々と変化しますので、ぜひお試しください。

デザインのバリエーションで「紙」を選んだ場合、デザインによっては隠れているメニューにも紙の表現が付与されます
タブ型のメニューの場合は、ハンバーガーアイコンがタブ型のボタンになります
丸いボタンが特徴のデザインでは、PCで同様に丸いハンバーガーアイコンが表示されます
角丸のメニューが特徴のデザインでは、ハンバーガーアイコンが角丸のボタンになります
2017/2/7