2018年12月15日(土)/ サイト作成

スマホ用の Web サイトでメニューのデザインって悩みますよね。
そんな悩みどころのメニューについて記事を書いたのでお悩みの方は記事に目を通してみては如何でしょうか?
もしかしたら役に立つヒントがるかもしれません。


スポンサーリンク

記事へのリンク

以下にまとめていますので、ぜひ読んでみて下さい。

メニューと並んで大事なナビゲーション要素であるパンくずリストも併せてどうぞ。

補足

以下、ちょっとした補足です。

カテゴリ以下のページが想像できるカテゴリを作る

メニューは多くの項目が一度に表示されてしまうとスマホのように狭い画面では分かりにくくなってしまいます。
そこでメニューに最初に表示されるカテゴリは5~6個以下にすると良いでしょう。

ただ項目を減らしただけではどのカテゴリを展開していけば良いか分からずユーザにストレスを与えてしまいますので、そのカテゴリ以下にどんなページやサブカテゴリがあるのかユーザが容易に想像できるカテゴリ分けを心掛けたいですね。

似たようなカテゴリが並んでいたら迷ってしまいますよね。
多少は迷っても良いのですが、小さなストレスがユーザの離脱率を高くします。

メニューを使いたくなる簡単な演出を入れる

メニューは割と地味に実装されがちです。
例えば常に表示領域の上端に固定表示されいたり、ハンバーガーメニューアイコンをタップしたら即座に表示されたりです。

必要な機能は満たすので問題はないですが、積極的にメニューを使いたいとは思われません。
そこで、少しだけメニューを使う際に演出があるとその演出を見る為にメニューを操作してくれます。

「ほんとかよ??」と思った方、少なくとも私の周りには数人は居ました(笑)
それも Web サイトに慣れていない方ほどそんな傾向にあるようです。
面白いから特に用のないページにも巡回しているみたいです。

なのでメニューに簡単で良いのでアニメーションなどを付けると丁度良いです。
スクロールに遅れてヌルっと追従したりハンバーガーの三本線が×印に変化したりといった小さなことで良いです。

もちろんこの演出をする為に待たされる時間が長いとテンポが悪くなって悪影響があるので0.25s~0.5sくらいの短い演出に抑えましょう。
凝り過ぎてメニューを展開したいのに1s以上も待たされると二度と使いたくありません。

人それぞれの感覚があるので色々な人に確かめてもらって意見をもらうと参考になります。
場合によっては「見ていて楽しいからもっと長い方が言うがいい」ということもあると思います。

入力したメールアドレスは公開されません。


以下のタグが使用可能です :
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください