縁の下のUIデザイン―少しの工夫で大きな改善!

第24回 横配置メニューの項目数が多くなった場合の表現

この記事を読むのに必要な時間:およそ 2.5 分

タブをはじめ横にメニューを配置するナビゲーションは,サービス開発をしているとよく利用するUIコンポーネントです。そしてタブなどのメニューは,サービスを運営していると内容やメニュー数がよく変わります。最初はシンプルでコンパクトだったのに,時間が経つにつれ気が付くとどんどん増えていくものです。

本来であれば追加のたびに優先度を付けて,メニューに追加するべきか,追加しないべきか,追加するなら何か外せるか,の判断をしていくべきでもあります。しかし,サービスが拡大すると開発組織も大きくなり部分最適になりやすいうえ,ユーザーが増えていくとメニューを削ることで与える影響が大きくなっていきます。そのため削る判断がやりづらくなったり,外すことを検討しても実際は難しく諦める場合もあります。一度追加したメニューをあとから減らすことは難しいものです。

そこで,今回はタブなど横方向にメニューを配置するナビゲーションの注意点と,メニュー数が増えたときにUI上どのような対応をすると使い勝手が良いか,具体的な事例をもとに書いていきます。

横に配置するメニューを使うときの注意点

最初に,横にメニューを配置するデメリットについて,縦方向の配置と比較して2点紹介します。デメリットとして取り上げた点が大きな影響を及ぼしそうな場合,横配置ではなく縦配置のメニューを採用することも検討しましょう図1⁠。

図1 横に配置したメニューと縦に配置したメニューの違い

図1 横に配置したメニューと縦に配置したメニューの違い

縦方向に比べ,一度に表示できるメニュー件数が少ない

特にスマートフォンの画面は横幅が狭く縦が長いため,縦方向にメニューを配置したほうが画面内に多く表示できます(図1(a)⁠。しかし,横に配置できると高さを取らないため,メニュー直下にコンテンツなど別の要素を配置できるメリットも当然あります。

横に配置する場合,メニュー数は多くても5つほどです。そのため最初から6つ以上のメニュー数があり,どの項目も画面内にできるだけ表示したい場合は,どのように表示するか最初から検討する必要があります。

複数の階層構造を一度に表示しにくい

メニューの階層が複数になる場合も縦方向に配置したほうが階層をわかりやすく表現できます(図1(b)⁠。縦方向の場合は,階層が深くなった場合でもメニューの行頭を下げることでその階層をわかりやすく表現できますが,横方向に配置した場合は,そのままの状態では下の階層を見せるのは難しくなります。マウスオーバーするかクリックして下の階層を縦に表示するなどの検討が必要になります。

横配置メニューの件数が増えた場合の対応事例

縦方向にメニューを配置したほうが1画面に表示できるメニューの数が多くなり,階層構造がある場合もわかりやすく表現できます。一方で場所もとってしまうため,できるだけメニューをコンパクトにしたい場合は横方向に配置せざるを得ないとも言えます。そのため横方向にメニューを配置しながら,メニュー数が増えたときの対応方法についていくつかのパターンを紹介します。

スクローラブルにするパターン

まず考えられるのが,メニューを画面の外に並べてスクロールしてユーザーに選択してもらう方法です。Material Designではこのスクローラブルなタブはガイドラインにも記載されているためAndroidアプリなどではよく利用されています注1⁠。アプリではよく利用される表現ではありますが,画面外にメニューを配置した場合,ユーザーに気が付かれないことが多々あります。そのため,タップされないことも許容できないときは採用しづらくなってしまいます。

Google PlayのAndroidアプリ図2では上下に2つのタブが使われていて,上のタブがスクローラブルなものです。画面外のメニュー項目は気が付きにくいと前述しましたが,カテゴリなど項目が多くあることをユーザーが推測しやすいものは,そうでないものと比べてスクロールされる可能性も高まります。どういった項目をメニューとして配置するかによっても,適したUIのパターンが変わってきます。

図2 Google PlayのAndroidアプリ

図2 Google PlayのAndroidアプリ

注1)
AppleのHuman Interface Guidelinesには,スクロール可能なタブのデザインについての記載はありません。

最後のメニューにまとめるパターン

このパターンは,画面内の最後のメニューを「その他」⁠メニュー」などとして,入りきらないメニューを次の画面に配置するパターンです。画面内に「その他」などの項目が表示できるため,この中にもメニューがあることをユーザーに確実に伝えることができます。入りきらなかったメニューを見るためには1タップ必要となりますが,多くのメニューがあることを認識してもらいやすいため,スクローラブルにするよりも確実にユーザーに認識してもらえます。

FacebookのiPhoneアプリ図3では,画面下部のタブバーにこのパターンが利用されています。6つ目のアイコンをタップすることで,5つ目までに表示されていたメニュー以外の項目もすべて表示されます。当然直接タブバーに表示されているメニューのタップ数よりもユーザーがタップする機会は減ると思いますが,メニュー画面を専用で作ることができるため,メニュー数の多さを気にせずに追加できる点がメリットです。

図3 FacebookのiPhoneアプリ

図3 FacebookのiPhoneアプリ

複数段にするパターン

メニュー数が増えた場合,折り返して複数段にするパターンです。画面内に表示されるナビゲーションの割合は増えてしまいますが,多くのメニューをユーザーに認識してもらえるようにできます。しかし,メニュー数がさらに増えるとその分段数も増えてしまうので注意しなければいけません。

Yahoo! JAPANのスマートフォンWeb図4(a)ではメニュー項目が2段になっていて,最後の項目は図3のFacebookと同様にすべてのメニューが表示される画面が用意されています。Facebookとは異なり下部に固定せず画面の途中に配置する場合は,このように複数段並べることも選択肢として考えられます。

図4 Yahoo! JAPANのスマートフォンWeb

図4 Yahoo! JAPANのスマートフォンWeb

またYahoo! JAPANの画面には,複数段のメニューの下にスクローラブルなパターンも使われています(図4(b)⁠。同一画面内で横配置のメニューを複数使う場合でも,それぞれ目的に応じてどれを選択するか考えるようにしましょう。同じタイプのパターンが複数並んでしまうと,見分けが付きにくく冗長になってしまいます。

長押しで表示するパターン

TweetbotのiPhoneアプリ図5は画面下部に5つのメニューが並んでいますが,右の2つは長押しすると別のメニューが現れるようになっています。画面にはいつも表示されているわけではないため一見気が付きませんが,Tweetbotのようなツール型のアプリケーションの場合は,慣れれば使いやすい方法も選択肢として候補に考えられます。あらかじめ何のメニューが隠れているか把握できると,クイックにアクセスしやすく便利に使えるナビゲーションとも言えます。

図5 TweetbotのiPhoneアプリ

図5 TweetbotのiPhoneアプリ

今回は横方向にメニューを配置するナビゲーションについて,具体的な事例を交えてその特徴を書いてきました。冒頭で記載したように,メニュー数を安易に増やさないようサービス運営していくことが先決ではありますが,増えてしまった場合でも今回紹介した事例のように,いくつかの手段が考えられます。同じ横配置のメニューでもどういったパターンを使うかによって,ユーザーからの認識や使い勝手も変わってくるため,考えて選択しましょう。

WEB+DB PRESS

本誌最新号をチェック!
WEB+DB PRESS Vol.124

2021年8月23日発売
B5判/168ページ
定価1,628円
(本体1,480円+税10%)
ISBN978-4-297-12287-4

  • 特集1
    詳解Visual Studio Code
    実践的な操作,カスタマイズ,拡張機能開発
  • 特集2
    [3年ぶりのLTS]
    速攻Java 17
    言語仕様やJVMの進化を体感!
  • 特集3
    [今こそ始める]
    クラウド移行大作戦
    計画,構築,運用のポイント

著者プロフィール

池田拓司(いけだたくじ)

デザイナー。多摩美術大学を卒業後,ニフティ株式会社,株式会社はてなを経て,2012年にクックパッド株式会社に入社。2013年デザイン部長,2014年ユーザーファースト推進部長・執行役。Sassを使ったUIフレームワークの構築,Webアプリケーションなどサービス全体の設計,ユーザーのほうを向いたデザインやサービス開発の組織づくりにも努める。2017年4月に独立し,Design & Life inc.を設立。インターネットサービスをはじめとするさまざまなデザイン業,およびサービス開発などに取り組んでいる。

Design & Life inc.:http://designandlife.co.jp/