サイトアイコン writers way

ドロワーメニューを効果的に取り入れよう!スッキリしたサイトの実現

スマートフォン対応のWebページやアプリで表示をスッキリさせるために用いられることが多いのが、ドロワーメニューです。一方でメニューであることがわかりにくい、使いづらいという声もあります。そんなドロワーメニューのメリットとデメリット、効果的に取り入れるための方法をご説明します。

ドロワーメニューとは?

ドロワーメニューとは、ボタンを押すとサイドから複数のメニューが現れる仕様のことを指します。スマートフォン仕様のサイトでよく見かけますよね。ドロワーメニューを用いることで、ユーザーにとって無駄な遷移先を見せずにコンパクトに収納することができ、ユーザビリティを向上させることができます。

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

Businesswoman in strategic planning concept

スマートフォンの普及と共に一般的になったのがドロワーメニューです。そんなドロワーメニューを採用するメリットをご紹介します。

メニューがアイコン一つに収まり画面がスッキリする

ドロワーメニューはアイコン一つで表現することができます。スマートフォンの狭い画面に文字のメニューをたくさん表示すると、コンテンツを表示できるスペースが狭くなってしまいます。

ドロワーメニューならアイコン一つで済むので表示エリアを圧迫しません。また、サイトのデザインのジャマにもならないのでスッキリとしたミニマルデザインを実現できます。

メニューを階層化でき項目数の制限なく設置できる

普段はアイコン一つに収まっていますが、開けば縦スクロールするので選択できる項目数に制限がありません。また、階層化して入れ子で表示できますので、項目数が増えたらカテゴリー分けしてスッキリさせることができます。

項目やカテゴリーに増減や修正が発生した場合も、全体のデザインに影響を与えずにメニューにを編集することができます。

あまり使わない機能をまとめておける

普段はメニュー項目が隠れているので、よく使われる最低限のメニューボタンだけとドロワーメニューのアイコンだけを画面上に配置しておくことができます。

ドロワーメニューは項目を選ぶときにメニューアイコンをタップするという1動作がどうしても増えてしまいます。しかし、使用頻度の低い機能ならそれほどストレスを感じさせることなくサイトやアプリを利用できます

ドロワーメニューのデメリットも解説!

business, multimedia, people and modern technology concept – close up of businessman hand with transparent smartphone with menu icons on screen over black background

そんなスッキリ画面に欠かせないドロワーメニューですが、デメリットも指摘されています。ドロワーメニューを取り入れる場合に考慮すべきポイントにもなるデメリットをご紹介します。

そこにメニューがあることに気づかれない

スマートフォンの操作に慣れていない人は、ドロワーメニューのアイコンがメニューであることにわかりません。横3本線か、3つの点などで表されるこのメニューが浸透するまでは、そこにメニューがあることに気づかれないことによる問題がよくありました。

いまでも、スマートフォンの操作に慣れていない人は、それがメニューであると理解できません。スマートフォンが使いにくいという年配の方が多い一因になっています。

開くまでメニューの項目がわからない

スッキリとアイコン一つにメニュー項目が隠れているということは、開けばどんな項目が選べるのかも隠れていて見えないということです。そのサイトやアプリに実は実装されている機能なのに、ドロワーメニューに配置されていたため気がつかないまま不便を感じていたと言うことも発生します。

メニュー項目が階層化されている場合、メニューを開いてさらに、目的の機能が設置されているカテゴリーを開かないと見つけることができません。どこに目的の機能があるかわからなくて片っ端からメニューを開きまくった経験は誰にでもあると思います。

階層が深くなりすぎると分かりにくい

一つ前のデメリットとも重なりますが、階層が深くなると目的の機能がどこにあるか何度も項目をタップしないと見つけることができません。深くなればなるほど、その機能があることにも気がつかないということがあります。

ただでさえ、目的にたどり着く前にアイコンをタップするという動作が加わるのがドロワーメニューです。階層が深くなるとさらに、項目をタップして下の階層に移動するという動作が追加されます。深ければ深いほど、目的にたどり着くまでの手間が増加します。

また、間違えたカテゴリーを開いてしまった場合、戻るボタンで一つずつ戻らなくてはいけません。どこにいるのか迷子になりやすく、手間も倍増するのでユーザーにストレスを与えてしまいます。

ドロワーメニューを効果的に使用するために

Businessman on blurred background using digital data network with mobile phone.

ドロワーメニューはシンプルでスッキリする反面、設置方法次第ではユーザーのストレス元になってしまいます。効果的に取り入れるためには、設計段階からUIを考慮して検討することが重要になってきます。

メニュー構成は専門家の力を借りる

メニューに設置する項目の選択、効率的な階層化など、ドロワーメニューを取り入れるためにポイントとなる要素は様々です。

わかりにくいという難点に対処するためにアイコンにプラスして、「メニュー」と表示するなどの工夫が取り入れられているサイトもあります。また、メニューを開くときにアニメーションを採用して、凝っているサイトも見かけたことがあるでしょう。

説明の文字をわかりやすいと見るか、冗長と見るか人によって評価は分かれます。また、アニメーションも凝りすぎると動作が重くなり逆効果です。選択項目の文言も長すぎず、しっかり意味が伝わる的確な言葉が求められます。

もし、スッキリとして効果的なドロワーメニューを取り入れたいようでしたら、専門家の力を借りるという手もあります。

スマートフォンとPCで使い分けるのもOK

ドロワーメニューは画面の狭いスマートフォンではとても効果的です。一方、パソコン上のサイトでは、あえてメニューをアイコンに隠す必要がありません。すべてのメニューをボタンなどで配置した方がわかりやすいサイトを実現できます。

その対策として、スマートフォン用の画面にはドロワーメニューを設置する。パソコン用の画面にはメニューバーを設置する。このように両者でメニューの表示方法を変えて、使い分けるという手法を採用しているサイトもあります。このような手法も一案として考えてみてはいかがでしょう。

メニュー構成・サイト設計の専門家はクラウドソーシングで

ドロワーメニューの構成、配置やスマートフォンとパソコンの使い分けなど、効率的な設計を相談できる専門家はどのようにして見つければいいのでしょうか。

Web開発技術の進化に伴い、Webの専門家もニーズに合わせて様々な方向に特化してきています。特定のニーズにピンポイントでマッチする専門家をお探しなら、クラウドソーシングサービスがおすすめです。

例えば、「ドロワーメニューの項目選定・階層化のコンサルタント」というようにこちらの希望する条件を細かく指定して募集をかけることが可能です。募集してきた個人のフリーランサーの中から条件・経歴・見積もりコストが、ピッタリとマッチする人を選んで仕事を発注することができます。

モバイルバージョンを終了