ドロワーメニューとは？

この記事を読むための時間：3分

WebサイトのUI/UXデザインとして使用することの多いドロワーメニュー。デザイン性やユーザビリティを考慮して、取り入れる方も多いのではないでしょうか。

そもそもドロワーメニューとは、どんな意味があり、どのように使うものであるか知っていますか？

こちらでは、ドロワーメニューの意味や使用上メリットなどを解説します。

ドロワーメニューとはハンバーガーメニューのこと

ドロワーメニューの「ドロワー（drawer）」とは、どんな意味を持っているのでしょうか。このドロワー（drawer）は、「引き出し」という意味を持つ言葉です。

ドロワーメニューは、サイト画面の左右の上に表示されている3本ラインのアイコンのことであり、引き出しのようにサイト内のコンテンツを一覧にできることが由来です。

最近では、ドロワーメニューのことをハンバーガーメニューと表すようになっているため、「ドロワーメニュー=ハンバーガーメニュー」と覚えておくと良いでしょう。

ドロワーメニューを取り入れるメリット・デメリット

ドロワーメニューを活用するには、どんなメリット・デメリットがあるのでしょうか。ドロワーメニューを取り入れる前にチェックしていきましょう。

ドロワーメニューのメリット

ドロワーメニューは、コンテンツの内容を一つにまとめた表示アイコンです。使い勝手の良いWebサイトを作る時や表示画面をスッキリ整頓させたい時におすすめの表示アイコンとなっており、UXデザインの際に使用することがほとんどです。また見た目をスッキリさせるだけでなく、サイト内のコンテンツからトップページに戻る時や他のコンテンツに移動する時にも使いやすいアイコンです。

ドロワーメニューのデメリット

ドロワーメニューは、サイト内をスッキリと整頓できるメリットがある一方で、Webをあまり見ることのない初心者にとっては、あまり親しみのないアイコンになります。サイト画面を見ただけでは、必要な情報が得られないと認識してしまうケースもあるため、直帰率が上がってしまうこともあります。ユーザーのターゲット層などに合わせて取り入れてみると良いでしょう。

ドロワーメニュー以外のメニューの種類

サイト画面のコンテンツ管理に使うメニューアイコンやツールは、ドロワーメニュー以外にどんな種類があるのでしょうか。ドロワーメニュー以外のメニューの種類をご紹介します。

ドロップダウンメニュー

ドロップダウンメニューとは、クリック一つで関連のコンテンツを出す方法です。ドロワーメニューのように一つのメニュー表示にまとめるのではなく、横並びにジャンルを表示して、そこからさらに細かくコンテンツを表示するスタイルが基本です。

ドロワーメニューよりもさらに細かくジャンル分けしたい時におすすめのメニュー表示です。

プルダウンメニュー

プルダウンメニューという言葉もメニュー表示の種類としてよく出てくる言葉ですが、このプルダウンメニューとは、上記で説明したドロップダウンメニューと同じ表示方法のメニューです。同じ意味を持ちながらもネーミングが異なりますので、覚えておくと理解がしやすくなります。

タイルメニュー

タイルメニューは、サイト画面上部に横並びにコンテンツ内容を載せることができるメニューです。コンテンツ内容が少ない場合やコンテンツ内容をデザインの一部にしたい時に使えるメニューです。

タイルメニューは重ねることもできる！

タイルメニューは、横並び1列ではなく、2段・3段と重ねるように並べることができます。タイルメニューは、コンテンツメニューをそのまま記載する方法なため、Webサイト初心者にも分かりやすいサイトが出来上がります。

まとめ

ドロワーメニューは、サイトをより見やすくするために使われる表示アイコンです。ドロワーメニュー以外にもコンテンツの記載方法は、さまざまあるので、サイトのターゲットユーザーに合わせて選ぶことをおすすめします。ドロワーメニューの使い方をチェックして、サイトをより見やすく快適に整えてみてはいかがでしょうか。