パーツごとに見るモバイルUI:ハンバーガーメニューを押した際のナビゲーションの表現方法

2017.08.23
  • UXデザイン

こんにちはデザイナーの沓掛です。

前回の記事では全部で5回に渡ってお届けする「パーツごとに見るモバイルUI」シリーズの第1回目をご紹介しました。今回も引き続きシリーズの第2回目をご紹介します。

第1回:「ハンバーガーメニュー以外の特徴的なメニュー表現の事例紹介」富川
第2回:「ハンバーガーメニューを押した際のナビゲーションの表現方法」沓掛
第3回:「カルーセルの事例と、設計・デザイン時に気をつけること」小茅
第4回:「フォームの事例と、UIを考えるときのポイント」久保田
第5回:「参考にしたいUIまとめ」飯山

第1回目の記事でも取り上げたハンバーガーメニューですが、現在でも多くのサイトで使用されているようです。導入する際にはハンバーガーメニュー自体の見せ方の工夫も必要ですが、今回は押した後に出てくるナビゲーションについて見ていきたいと思います。

実際にみなさんがハンバーガーメニューを押した後に、目的のナビゲーションを探すのに時間がかかったり、見づらいと感じた経験はありませんか。ナビゲーションが使いづらいとユーザーがストレスを感じて、サイト全体の印象にも少なからず影響してくると思います。そこで今回はハンバーガーメニューを押した後に出現するナビゲーションの見せ方について、どんな工夫が必要なのかを事例をあげてご紹介したいと思います。

展開の種類

ドロップダウン

ドロップダウンは上から下へナビゲーションが表示されるタイプで多くのサイトで使われています。ナビゲーションの項目数は少ないものから多いものまであり、導入しやすい見せ方となっています。

ドロワー

ドロワーは左右からスライドしてナビゲーションが表示されるタイプです。主にナビゲーションの項目数が多い際に、スクロールや階層を深くした見せ方のナビゲーションとして導入されています。

モーダル

モーダルは表示されたメッセージを閉じないと元の画面の操作ができないタイプです。様々なサイトを見ましたが、ナビゲーションにモーダルが使用されていることはほとんどなさそうです。最近では右画像のように、広告でモーダルが使用されているのをよく見かけるためナビゲーションに使う際は検討する必要がありそうです。

レイアウト

1列

左の画像のように比較的ナビゲーションの項目数が少ないものは目的の項目をすぐ見つけることができます。1列でナビゲーションの項目数が多くなる場合には、文字色を変えたりアイコンをつけたりすることでとても見やすくなるように工夫されていると感じました。

2列

項目数が多いときには1列のままだと、どうしても長くなってしまう時があります。そこで、2列にすることで1つの画面に収めることができたり、ユーザーが利用頻度が高そうな項目を2列に表示している工夫もありました。 また、見出しの背景色を変えるだけでも要素を区別して見せるといった工夫も見られました。

一方、右の画像のようにかなりの項目数がある場合には、2列にするだけだと少し見づらい印象を与えてしまうように感じました。この場合には重要度の高いナビゲーションの項目に絞るなどして、ユーザーが検索する際にストレスを感じないような工夫をする必要がありそうです。

スプリングボード

スプリングボードは1つ1つの項目を画面全体で俯瞰して見せることができます。左側の2つの画像では、アイコンと一緒になっているのでナビゲーションの項目が認識しやすくなっています。右側の画像はアイコンがないタイプのものです。サイトをよく利用するユーザーは項目の位置を把握できるかもしれませんが、初めて利用するユーザーには少し使いづらいかもしれません。

ここ数年で増えつつある!?展開種類の新パターン

下から上へナビゲーションが表示されるパターンも増えつつあるようです。左画像の場合、項目数が画面ちょうどで収まるようにあらかじめ見やすくしておき、アコーディオン形式を取り入れた工夫がされています。一方、右側では項目が多いためスクロールが長くなってしまい少し見づらく感じました。新しい展開の見せ方が出てきたとしても、やはりナビゲーションの項目数に合わせてユーザーが使いやすいと思える見せ方にすることが大事だと思います。

まとめ

工夫のポイントを大きく3点にまとめました。ナビゲーションを導入する際の参考にしていただけると幸いです。

  • ナビゲーションの項目数によって最適な展開方法を選ぶ
  • アイコンをプラスする、または背景色に変化をつけて項目をわかりやすくする
  • 項目数が多い時にはアコーディオンなどを利用して目的の項目まで誘導しやすくする

次回はデザイナー小茅にバトンタッチし、「カルーセル」についてお話していきます。お楽しみに!

この記事をシェアする

関連記事

Webサービスを成功に導くシナップのUXリサーチ

2023.10.04
  • UXデザイン

一見良さそうに見えるデザインにも問題点が… デザイン4大原則から考えるUIデザインの完成度を高める方法

2023.06.06
  • UXデザイン
  • UI/UX

カスタマージャーニーマップは何で作る?カスタマージャーニーマップを作るツール3選

2022.10.25
  • UXデザイン

UXリサーチとは?今日からスモールスタートで始めるUXリサーチ

2022.06.14
  • UXデザイン

成長するサービスに必要不可欠なデザインシステム4つのメリット

2021.11.09
  • UXデザイン

成長するサービスを支えスケールを可能にするデザインシステムとは

2021.10.12
  • UXデザイン

いますぐできる利用者のネガティブな感情を取り除き、 ポジティブな感情をもたらすUXデザインのヒント

2021.04.13
  • UXデザイン

春のスタートダッシュを決めよう!~2021年度版:Web業界の新人さんにオススメの書籍10選~

2021.04.07
  • UXデザイン

この3つだけはおさえておきたい。明日から作業効率が大幅アップする!この半年で行われたAdobeXDの新機能(2020年6月-12月)

2021.01.14
  • UXデザイン

2020年春からおさえておきたいデザイントレンド 7選

2020.04.14
  • UXデザイン

参考にしたいデザインシステムまとめ 10選

2019.04.11
  • UXデザイン

簡単に作れて見栄えする!CSSで作るリッチなhover演出

2018.06.21
  • UXデザイン

パーツごとに見るモバイルUI:参考にしたいUIまとめ

2017.09.12
  • UXデザイン

パーツごとに見るモバイルUI:フォームの事例と、UIを考えるときのポイント

2017.09.06
  • UXデザイン

パーツごとに見るモバイルUI:カルーセルの事例と、設計・デザイン時に気をつけること

2017.08.29
  • UXデザイン

パーツごとに見るモバイルUI:ハンバーガーメニューを押した際のナビゲーションの表現方法

2017.08.23
  • UXデザイン

パーツごとに見るモバイルUI:ハンバーガーメニュー以外の特徴的なメニュー表現の事例紹介

2017.08.09
  • UXデザイン

視覚で伝わるインフォグラフィック!面白い事例も作ってみました!

2017.06.01
  • UXデザイン

初めてでも大丈夫!Adobe XDの書き出し機能と使い方

2016.12.14
  • UXデザイン

スムーズに検索させよう!複雑な検索をするときの画面やUIパターン

2016.02.09
  • UXデザイン

よくわかるIoTの仕組み 「モノ」とインターネットを接続するには

2015.11.19
  • UXデザイン

記事をページ分割するメリット・デメリット(モバイルフレンドリー対応)

2015.08.07
  • UXデザイン

モバイルフレンドリー対応:スマホで読まれる文字数は?

2015.07.30
  • UXデザイン

スマホサイトの「続きを読む」は必要か?(モバイルフレンドリー)

2015.05.28
  • UXデザイン

人気記事

「microCMS」導入を徹底解説!メリット・デメリット、料金体系、適切なプランの選び方、最後に相談できる会社の見つけ方まで!

2024/05/22
  • Web技術

KJ法とFigma(Figjam)を活用したZoomミーティングでの意見整理テクニック

2024/05/15
  • その他

恋愛マンガシチュエーションで面白く学ぶ Webガバナンスが必要なシグナル

2024/04/10
  • その他

企業のWeb戦略成功への鍵 Webガバナンスの重要性

2024/03/13
  • その他

『SINAP Journal 2024 Winter』PDF版をアップしました!

2024/02/20
  • シナップについて

自己成長を加速させるシナップの新人研修

2023/12/12
  • シナップについて
  • 採用

注目の国産ヘッドレスCMS「microCMS」

2023/11/14
  • Web技術

Webサービスを成功に導くシナップのUXリサーチ

2023/10/04
  • UXデザイン

リアルとリモートを上手に使った、柔軟なコミュニケーション

2023/09/12
  • シナップについて

ABテスト運用でよくある6つのお悩みと解決策

2022/03/15
  • グロース

成長するサービスを支えスケールを可能にするデザインシステムとは

2021/10/12
  • UXデザイン

次世代アナリティクス「Googleアナリティクス4(GA4)」の主な特徴と今後について

2021/09/14
  • グロース