徹底収集36選!TweetPocketスマホはメニューバーが命!!スマホでもっとも重要な動作は「タップ」ですが、その重要な役割を引き受けるのがメニューアイコンやリストです。ユーザが求めるコンテンツにスムーズにつなげられるよう、最適化していくことが必要です。違和感なくスムーズにコンテンツにつなげるためには、最適なデザインを選択する必要があります。今回は100のスマホサイトを調査し、その中で代表的な36サイトから7つのメニューデザインに分類し、まとめてみました。ドリルダウン(3%)まとめ100のスマホサイトから見る、スマホメニューの人気ランキング上図は、100のスマホサイトをランダムに抽出し、それぞれのサイトで採用されているメニューの割合を調査した結果になります。この結果によれば、一位が圧倒的な割合で「ドロップダウン」になり、その次に「スライドメニュー」「ヘッダーメニュー」と続いていきます。以下でそれぞれのメニューの詳細をまとめました。ポピュラーなメニュードロップダウン(56%)メニューのタップによってそのメニューに属するコンテンツを展開させる、もっともメジャーなデザインです。ドロップダウンできる事が分かるように、三角のマークや、下記のような「3連ドット」のマークを添えることが多くなっています。「ほぼ」万能に対応!記載できるメニューの数が多いため、たくさんのメニューを載せたいと思うときに有効です。少ない場合でも必要な分だけ下部に伸ばせばよいため、メニュー量に関係なく導入することもできます。使いやすいメニューバーと言ってもよいでしょう。主要コンテンツから大きく異なるページに飛ばしたいとき「メニュー」や「三連ドット」などのラベルから中身を推測してもらうことになります。よって、コンテンツの内容から予測できないようなメニューや、別ページに大きく飛ばしたいメニューを設置する際には推測が難しくなるため、適さないデザインになります。シンプルなトップ画面が作れるスライドメニュー(16%)通常画面では隠しておき、必要時にスライドさせるメニューです。メニュー表示時でも、メインコンテンツの簡単なスクロールが可能であることが多くなっています。カップヌードル適している場合シンプルな画面設計を設計したいときメイン画面と同じ程度のサイズ感でメニューを立てに羅列することができるため、メインコンテンツではメニューが殆どない、シンプルな画面を設計したいときに適しています。多くのメニューを設置することができるため、ユーザの目的がひとつではなく複数あるようなサービスのサイトでも有効です。適さない場合メニュー数が少量のとき大きく画面に表示されるため、少しのメニュー数であると下部に無駄な空白が生まれてしまいます。プルダウンのメニューと同様ラベルの中身が見えないため、主要コンテンツ以外のページへ飛ばしたいときは適していません。王道デザインといえばフッター&ヘッターメニューバー(12%)PCサイトではもっとも一般的に見られる、フッター・ヘッターの位置でのメニューバーです。「ドロップダウン」のようにメニュー項目が隠されていないため、容易にメニュー項目を把握することができます。GUIDE右:栄光ハイスクール適している場合メニュー数が少ないときメニュー数が少ない場合であれば、コンテンツを邪魔することなく配置することができます。GUIDE」のようにアイコンを利用することにより短くまとめることも可能です(おすすめのフリーアイコンまとめサイトはこちら)。適していない場合メニューが多い場合メニュー数が多い場合、主要コンテンツを妨げる要因となってしまうためあまり適していません。あまりに盛り込んでしまうと頭でっかちな印象のサイトとなってしまう可能性があります。(5%)一時的に画面いっぱいに新しいウィンドウを表示します。ユーザに何らかのアクションを求めたり、警告を表示したりしますが、メニューバーでも注目を強く引くために利用されることがあります。STARBUCKS適している場合ユーザにメニュー画面でしっかり検討をしてもらいたいとき画面いっぱいにメニューを表示するため、次に何をしたらよいか分からないユーザに対して具体的な次の行動を強く示すことができ、細かな入力にも適しています。適さない場合ユーザの行動をなるべき遮りたくないとき元画面が全く見えなくなり、メニュー操作以外の自由な行動が縛られてしまうため、スムーズなページ間の移動が遮られてしまう可能性があります。(4%)グリッド状にアイコンをフラットに並べるメニュー形式です。画面いっぱいにメニューを設置し、一覧で把握してもらうことができます。ボードのデザインもサイトにより様々です。各メニューの利用頻度が均質に近いとき各メニューボタンの利用頻度が同程度に多い場合、ユーザにとって、どのコンテンツでも探しやすくなります。画面全体にメニューを広げるため、サイトのサービスを印象づけたいときにも有効です。適さない場合サイトの目的が1~2つのみであるときサイトの目的が少数しかない場合であると、あまり意味のないメニューページが毎回開かれてしまうことになり、リピートユーザにとってはストレスの原因となります。トップ画面いっぱいに利用されるため、そのページの情報量は必然的に少なくなってしまいます。(4%)トップ画面から別画面に簡単に移動できるのがタブメニューです。移動しやすいだけでなく、サイト全体のイメージもしやすいため、ユーザにとって利用しやすいメニューです。左:ことりっぷ右:CONVERSE適している場合メニュー数が少なく、構成がシンプルなサイトメニューの項目として、2~5つ程度であればタブメニューのメリットである「移動しやすさ」と「一覧性」を活かすことができます。適していない場合メニュー数が多いサイト上記とは逆に、メニュー数が多いと各タブが小さくなりすぎたり、段になって場所を取り過ぎるなどしてサイトの可読性、操作性を下げてしまうことがあります。最適な情報に的確に導くドリルダウン(3%)メニューを複数の階層に分け、いくつかの選択肢から一つを選択してもらうメニューです。トップ画面で利用されることは稀ですが、下図の「住宅販売」のように多数の選択肢がある際は利用されることがあります。複数の情報の中から適切な情報にたどり着いてほしいときユーザの最終的な目的地を、複数の階層に分けて選択してもらうことにより、たどり着いてもらいます。これにより複雑な検索をせずとも、スムーズに的確な情報にたどり着けるようになります。情報量が多くないときドリルダウンの形式では、階層を深くすればするほどタップの回数が多くなってしまい、その分ユーザが離脱する可能性もあがってしまいます。情報量がそこまで多くないときは、ドロップダウンなどの形式を検討することも必要です。食べログSUUMO月1,000万円以上の売上も!スマホ化するなら知っておきたい「モバイルマーケティング」事例集>>無料まとめいかがでしたでしょうか。メニューデザインにはそれぞれ適する場合と適さない場合があります。「ネットにはいろんな情報があるけど、どれが正しいの?」ジッセンはそんなお悩みをお持ちのWebマーケター向けに、実践的な知識を動画でお届けします。月額4,900円で業界の一流マーケターたちの200以上の動画が見放題。初沢岳2014年入社。LISKULについて検索:。