カテゴリーが多いスマホサイトで役立つ「スワイプ対応メニュー」（1/2）

ニュースサイトやECサイトなど、多くのカテゴリーがあるサイトでは、ユーザーが興味ある記事を探しやすくすることは非常に重要だ。カテゴリーを横断して多くの記事を閲覧してもらうには、カテゴリーの切り替えをスムーズに行えるように工夫する必要がある。

その工夫の一つとして紹介したいのが、「スワイプ対応タブメニュー」だ（左図）。スワイプとは、指を一定方向に滑らす操作のことで、ユーザーも気軽に片手で行える。たとえば、ニュースサイトは電車内でよく利用されるが、スワイプ操作だけで、カテゴリーをスムーズに移動して興味がある記事を探すことができる。

また、スワイプ対応タブメニューは、制作側にもメリットがある。スワイプを用いた横スクロールのUIとなるので、カテゴリーの数が増減した際も柔軟に対応できるからだ。

ただし、スワイプ対応タブメニューを採用する上で注意点もある。画面外の領域にどのような情報があるのかわからないため、最後までスワイプしてもらえず、情報を発見してもらえない、またはユーザーが探したい情報に到達できないということが起きうる点だ。したがって、そうしたストレスを与えないような情報設計・デザインの考慮が必要となる。

［Case Study］事例に学ぶ、スワイプ対応タブメニューを使いやすくする工夫

スワイプ対応メニューを使いやすくするためのポイントは、隠れたエリアにさらに情報があることを直感的に伝えること、そしてカレント（現在位置）のタブを明示することだ。事例をもとに、その工夫を見てみよう。

さらに情報があることを伝える

スマホの画面の中にタブメニューをぴったりと収めてしまうと、どうしてもその表示エリアで完結しているように思えてしまう。そこで、スワイプ操作を誘導するような工夫が必要となる。

たとえば、マイナビニュースのサイトでは、右端のタブのテキストラベルが途中で切れるようになっている（01）。シンプルではあるが、テキストラベルが“途中で切れている”という違和感から、その先に続きがあることが直感的に伝わる手法だ。

さらにマイナビニュースでは、コンテンツ部分のスワイプ時に矢印のアイコンを表示させることで、文章で説明せずとも、スワイプでタブ切り替えが可能なことを伝えている（02）。

また、グノシーのサイトでは、タブ部分のスワイプ時に横スクロールバーを表示し、タブメニューのボリューム感を伝えている（03）。

カレントのタブを明示する

タブの特性として左右に同列の情報（カテゴリー）が並ぶため、ユーザーが現在表示しているコンテンツが何のカテゴリーに所属しているのかを見失い、迷子になってしまわないように気をつけたい。

そこで、カレント（現在位置）のタブのテキストラベルや背景のカラーを変更したり、タブのサイズを変更することで（04）、一目でどのカテゴリーにいるのかわかるようにしよう。