デザイン

デザイン

【ハンバーガーメニューの次はこれが来る!】モバイルに最適なメニューデザイン7例

5,727 views

読了時間 : 約1分46秒

今やハンバーガーメニューはスマートフォン用のデザイン要素として最もポピュラーです。しかしながら、どこでも使われるようになったために、批判も起きています。

そこで、ハンバーガーメニューの代替案として試す価値のあるデザインをいくつかご紹介します。

 

 

 

1.タブ

menu①

タブは最もシンプルなナビゲーションパターンの一つです。コンテンツ数が5つかそれ以下の場合に有効です。

 

 

 

2.タブ+More

menu②

5つ以上のコンテンツがある場合は、4つのコンテンツをタブに表示し、5つ目のタブを”More”とすることもできます。よく使われる4つのコンテンツが常に見える点は、ハンバーガーメニューよりも優れていると言えるでしょう。

 

 

 

3.折り畳み式のナビゲーション

menu③

ウィンドウの幅に合わせて変化するメニューデザインは、タブ+Moreよりも優れているナビゲーションと言えるでしょう。

 

 

 

4.スクロール可能なナビゲーション

menu④

メニューの優先順位をつけるのが難しい時、または”More”の下に隠すメニューを決められない時にこのナビゲーションが便利です。ただし、隠れてしまうコンテンツが出てくるため、デザイナーはスクロールできるということが分かるようなデザインにする必要があります。

 

 

 

5.ドロップダウンメニュー

menu⑤

多くの項目があり、それぞれに同じくらいの重要性があり、かつ可視化が必須ではない場合に、このドロップダウンメニューが役立ちます。ドロップダウンメニューのラベルがページタイトルを意味し、下向きの矢印が残りの項目を含みます。

 

 

 

6.ボトムナビゲーション

menu⑥

タブに似ていますが、トップセクションではなくボトムセクションにナビゲーションがあります。ボトムナビゲーションには、アイコンのみ、またはアイコンとラベルといったパターンがあります。

 

 

 

7.縦方向のレタリング

menu⑦

一つのトレンドであり、通常の縦方向のコンテンツとは異なります。スペースをセーブでき、また細長いラインは全てのコンテンツにフィットします。ただし背景と混ざってしまうと分かりにくくなるため、ナビゲーションバーだと分かるようなデザインにしましょう。

 

 

ハンバーガーメニューだけでなく全てのUIは的確さを持って使われなければなりません。例えば、良く使われるコンテンツをハンバーガーメニューに押し込むというのは優れた方法とは言えません。そのような的確さなしではユーザーエクスペリエンスが台無しになってしまう可能性があることを覚えておいてください。

 

 

 

 

※本稿は 「Bored with Hamburger Menu, Time to Try These Alternatives」を翻訳・再編集したものです。

 

【セレキュトのおすすめpickup】
 
■クリエイターの実績、知識はあるけどいい仕事が見つからない方におすすめ!
 【レバテックフリーランス】
 ・案件数業界最大級、エージェントの理解が深い、発注額高、圧倒的低マージン、単価アップ交渉◎
 ・エンジニア勉強会の開催有り、就業後もサポート有り
 ・年収が上がったクリエイター多数
 ・案件)【Deep Learning】AIプロダクト開発の求人・案件/~900,000円/月 など
 ⇒レバテックフリーランスを見てみる
 
■今のクリエイター技術をもっと向上したい方におすすめ!
 【デジタルハリウッドSTUDIO by LIG】
 ・あのWeb制作のプロ集団「LIG」が運営の上野・池袋のWebクリエイター育成スクール
 ・6ヶ月で未経験からwebクリエイターへ、転職サポート◎
 ・映像教材はいつでもどこからでも受講可能
 ・LIG監修のオリジナル映像講座や特別LIVE授業など特典盛りだくさん!
 ・無料相談会受付中!
 ⇒デジタルハリウッドSTUDIO by LIGを見てみる

おすすめ新着記事

おすすめタグ