―HOMEABOUTSERVICEWORKSRECRUITBLOGACCESSCONTACTBLOGTOPBLOG2017/08/09パーツごとに見るモバイルUI:ハンバーガーメニュー以外の特徴的なメニュー表現の事例紹介こんにちは、富川です。シナップでは月ごとにチーム発表を行っており、6月のデザインチームは「モバイルUI」をテーマに、デザイナー5名が興味のあるモバイルパーツを選んで調査し、発表しました。モバイルUIをテーマに選んだ理由シナップではここ数年、A/BテストなどのスプリットテストによるWebサイトの改善に注力しており、パーツ単位での検証を繰り返し行うことが増えてきています。今回は、各自がこれまで業務で得てきた知見をもとに、それぞれ興味のあるUIパーツを1つ選んで調査しました。第5回:「参考にしたいUIまとめ」飯山それでは早速、今回は「ハンバーガーメニュー」についてお話していきます。調査の動機2015年の夏、私はハンバーガーメニューについてひたすら調査をしたことがありました。その頃、ハンバーガーメニューはUI的に良くないのでは?という記事が話題になっていたため、日本の企業サイトでハンバーガーメニューが実際どのように使われているのか、195社の企業をリストアップして調査しました。2015年の記事(連載3回):「スマホサイトのメニュー、ハンバーガーボタンで大丈夫?」ですが、そこから2年近く経った今、メニュー表現の傾向が変わってきたと感じることが増えてきていたので、今回ハンバーガーメニューを再度テーマにしました。2015年4月に発表したIRサイトランキング上位195社を調査対象としました。今回はそのリストをもとに、当時はスマホ対応していなかった企業も含めて再度195社を見直し、前回調査時と比較してどのような変化があるかを見ていきました。見直してみると、当時すでにスマホ対応していたサイトの大半は、メニュー表現に大きな変化が起きておらず、三本線アイコンのハンバーガーボタンを画面右上で使っている企業が大半でした。前回の調査以降でスマホ対応をした企業の中には、工夫を感じるメニュー表現がいくつか見受けられました。今回は、195社のリストをもとにしつつ、それ以外でも最近気になったメニュー表現をしているサイトもあわせて、特徴的なメニュー表現について5つのテーマに分けて事例を紹介します。以外にメニューを下配置している事例はほとんどなかったのですが、画面下部のエリアを有効活用している事例が増えてきたと思います。ユニークなアイコン(製品・サービスは箱アイコン、企業情報はビルアイコン)を文字なしで使っていましたが、今回改めて見ると、アイコンはなくなり文字だけで表現されていました。ユニークなアイコンは文字なしだとやはりわかりづらかったのかもしれません。長所:企業のサービスを、オリジナル性高く表現することができる短所:一般的な形状ではないので、アイコンだけだとユーザーに伝わりにくいメニュー表現事例3:メニューから優先項目を抽出した例その1最近増えてきているメニュー周りの表現方法だと個人的に思います。ヘッダー周りの目立つ場所に優先項目を配置することで、自然にユーザーを誘導することができます。タブ長所:優先度の高い項目へ誘導しやすい、トップページ以外でも表示させることができる短所:配置できる数に限りがある(最大5つ)、上部パーツでエリアを取りがちフリックスクロールナビゲーション長所:タブと違って制限数なく多数のコンテンツを格納できる短所:最初に表示されていない項目は横スクロールが必要なので、閲覧されにくいメニュー表現事例4:メニューから優先項目を抽出した例その2四角いボタンにアイコンと文字で表現し、サイトの主要な項目をファーストビューの目立つ場所で訴求しています。このページを訪れたユーザーにどの項目を見て欲しいのか、ひと目で分かる表現になっています。両者の内容を持つ場合や、会員・購入機能などがある場合は、サイトに収めるべき情報が膨大になります。様々な目的を持ったユーザーが迷わず目的地に辿り着けるように、情報を整理して表現する必要があります。情報量の多いサイトの場合、ハンバーガーメニューはサブ利用されていることが多く、上の事例1〜4で挙げてきた内容などを組み合わせて表現している事例が多く見受けられました。その中でも特にうまく整理・表現されていると感じたサイトが、東京ガスとクロネコヤマト(個人向け)でしたので、ご紹介します。以上、メニュー表現に特徴的な工夫が凝らされているサイトを5つのテーマでご紹介しました。今もハンバーガーメニューだけで表現しているサイトが大多数ですが、前回より、ハンバーガーメニューはサブ的に利用し、他の表現手法と併用しているサイトが増えてきた印象を受けました。2015年当時と比べるとスマホの画面も大きくなったせいか、画面の下エリアを有効活用した事例が増えてきていました。ハンバーガーメニューについては長らく議論されていますが、今後メニュー周りの表現を考えていく際は、次の2つを改めて念頭に置く必要があるなと思います。その1:ハンバーガーメニューは使われなくても支障をきたさないようにしておくハンバーガーメニューは、よく使う人や関心の高い人向けの機能であり、一般のライトユーザーはまず押さない、というスタンスでいるべきだと感じました(つい最近、実際の案件でハンバーガーメニューのクリック数を調べたところ、想定よりもとても少なく驚いたことがありました...)。ハンバーガーメニューに気付かなくても、ユーザーが重要なコンテンツへストレスなく辿り着けるよう、別のUIを併用して導線を作っておくと良さそうです。その2:ユーザーがそのサイトでどんな行動を取りたいのか?をよく考えるサイト上でユーザーにどんな行動を取ってほしいのか、それはサイトによって様々です。)を正しくピックアップし、ひと目でわかる強弱を付けてレイアウトすることで、ユーザーにとってより使いやすい有益なサイトになっていくと思います。まとめここまでやってきて、ふとハンバーガーメニューって取扱説明書の目次に似ていると感じました。洗濯機を今まで使ったことのない人がやってきた時に、「取扱説明書を読めばすべての情報が入っているからね」と突き放すのではなく、「まずこの大きなボタンを押して、次に赤いボタンを押せばとりあえず洗えるよ」と伝えてあげた方が、ずっと親切だと思います。無機質なハンバーガーメニューは取扱説明書の目次に似ており、そこから必要な情報をユーザー自身に探させることはハードルが高く不親切なので、誰にでも分かる誘導をしてあげることが、ユーザー体験の向上につながるのではないでしょうか。最後にポイントをまとめましたので、メニュー表現を考えるときのひとつの参考になれば幸いです。次回はデザイナー沓掛にバトンタッチし、「ハンバーガーメニューを押した際のナビゲーションの表現方法」についてお話していきます。公式アカウントブログの更新情報やシナップからのお知らせを配信しています。SINAPシナップの活動報告や、IT業界のトレンド情報などを発信しています。ご相談・お問い合わせお仕事のご依頼やご相談など、お気軽にお問い合わせください。