レスポンシブメニューのデザイン4選｜takememo Vo.15

BLOG 2018.01.10 ｜ AIブログ , WordPress , ウェブ制作

こんにちは！AIコミュニケーションのコーダーのたけうちです。

新年あけましておめでとうございます！
みなさん年末年始はしっかりお休みできましたか？
2018年もみなさんにとって素敵な一年になるよう願っています！

今年もAIコミュニケーションをよろしくお願い致します。

新年最初のtakememoはレスポンシブメニューのデザインを紹介したいと思います。

スマートフォンやタブレットの普及により、当たり前となったサイトのレスポンシブ対応ですが、レスポンシブ時のメニューデザインはユーザーにとって利便性のよいものにしなければなりません。

見た目のデザインはもちろんですが、「押しやすいか」「分かりやすい位置にあるか」「一目見てメニューとわかるか」など利便性を踏まえ、最適なデザインを選択する必要があります。

恐らく一番目にすることの多いメニューがこのハンバーガーメニューです。
ユーザーの認知度が高く、メニューの構築方法も多いので設置しやすいメニュー形式の一つといえます。

その一方、三本線のアイコンをタップしなければサイトメニューが分からないというのがハンバーガーメニューのデメリットです。
スマートフォンの普及によって浸透しているものの、一目見てメニューというのがわかりにくいため、三本線のアイコンの下に「メニュー」などの文字を入れると良いでしょう。

メニュー部分が折りたたみ式になっており、タップすることでメニューが開閉し、縦に並ぶような動作が特徴です。
jQueryと組み合わせることで、動きのあるメニューを実装することができます。

しかし、アコーディオンメニューもハンバーガーメニューと同様、タップをしなければメニューが表示されないのがデメリットです。
また、メニュー項目が多ければ多いほどスクロールをしなければいけなくなるため、メニュー項目が多いサイトの場合は違うメニューデザインを採用した方が良いかもしれません。

PRADA

採用しているホームぺージは多くありませんが、視覚的にわかりやすく、子どもにも高齢者の方にも優しいインターフェースのメニューデザインです。
シンプルでわかりやすく、小さい画面でもタップしやすいため、メニューの項目が少ないサイトに向いているメニューデザインといえます。

逆に、メニューの項目が多い場合や下層がいくつも続くようなサイト構成の場合には不向きかもしれません。

メニューをタップすることで、画面いっぱいにメニューウィンドウが表示されます。
スタイリッシュでシンプルなメニューを作りやすいメニューデザインです。

デメリットはコンテンツが一時的に見えない状態になってしまう点。
モーダルウィンドウメニューを採用する際は、閉じるボタンを設置したり、モーダルウィンドウ時の背景色を半透明にするなど、ユーザーに使いやすいメニューになるよう工夫しましょう。

GREE

よく使われるレスポンシブメニューデザインばかりピックアップしましたが、どのメニューデザインもメリットやデメリットがあります。

サイトによって向き不向きもあるので、サイトにあったメニューデザインを採用しましょう。