2016.01.04
課題解決のためのUI実装講座 Web Designing 2016年1月号
カテゴリーが多いスマホサイトで役立つ「スワイプ対応メニュー」（1/2） カテゴリーを横断して多くの記事を閲覧してもらう工夫
カテゴリーが多いサイトのスマートフォン対応において、その情報量を小さい画面に収め、かつ操作しやすいUIを実現するには、どうすればいいだろうか。そこで今回は、ニュースサイトなどで見かける「スワイプ対応タブメニュー」を取り上げ、その導入事例と実装方法を解説する。
サンプルファイルダウンロードのご案内
このコーナーで紹介しているサンプルファイルは、こちらからダウンロードできます。ぜひ、サンプルを動かしたりカスタマイズしながら読み進めてください。
ニュースサイトやECサイトなど、多くのカテゴリーがあるサイトでは、ユーザーが興味ある記事を探しやすくすることは非常に重要だ。カテゴリーを横断して多くの記事を閲覧してもらうには、カテゴリーの切り替えをスムーズに行えるように工夫する必要がある。
その工夫の一つとして紹介したいのが、「スワイプ対応タブメニュー」だ（左図）。スワイプとは、指を一定方向に滑らす操作のことで、ユーザーも気軽に片手で行える。たとえば、ニュースサイトは電車内でよく利用されるが、スワイプ操作だけで、カテゴリーをスムーズに移動して興味がある記事を探すことができる。
また、スワイプ対応タブメニューは、制作側にもメリットがある。スワイプを用いた横スクロールのUIとなるので、カテゴリーの数が増減した際も柔軟に対応できるからだ。
ただし、スワイプ対応タブメニューを採用する上で注意点もある。画面外の領域にどのような情報があるのかわからないため、最後までスワイプしてもらえず、情報を発見してもらえない、またはユーザーが探したい情報に到達できないということが起きうる点だ。したがって、そうしたストレスを与えないような情報設計・デザインの考慮が必要となる。
［Case Study］事例に学ぶ、スワイプ対応タブメニューを使いやすくする工夫
スワイプ対応メニューを使いやすくするためのポイントは、隠れたエリアにさらに情報があることを直感的に伝えること、そしてカレント（現在位置）のタブを明示することだ。事例をもとに、その工夫を見てみよう。
さらに情報があることを伝える
スマホの画面の中にタブメニューをぴったりと収めてしまうと、どうしてもその表示エリアで完結しているように思えてしまう。そこで、スワイプ操作を誘導するような工夫が必要となる。
たとえば、マイナビニュースのサイトでは、右端のタブのテキストラベルが途中で切れるようになっている（01）。シンプルではあるが、テキストラベルが“途中で切れている”という違和感から、その先に続きがあることが直感的に伝わる手法だ。
右端のタブのテキストラベルが切れていることで、その先に続きがあることを直感的に伝えている
さらにマイナビニュースでは、コンテンツ部分のスワイプ時に矢印のアイコンを表示させることで、文章で説明せずとも、スワイプでタブ切り替えが可能なことを伝えている（02）。
コンテンツ部分でスワイプすると、画面端に矢印が表示され、タブを移動できることを伝えている
また、グノシーのサイトでは、タブ部分のスワイプ時に横スクロールバーを表示し、タブメニューのボリューム感を伝えている（03）。
グノシーのサイトでは、タブ部分でスワイプするときだけ、横スクロールバーが表示され、タブメニューのボリューム感がわかるようにしている
カレントのタブを明示する
タブの特性として左右に同列の情報（カテゴリー）が並ぶため、ユーザーが現在表示しているコンテンツが何のカテゴリーに所属しているのかを見失い、迷子になってしまわないように気をつけたい。
そこで、カレント（現在位置）のタブのテキストラベルや背景のカラーを変更したり、タブのサイズを変更することで（04）、一目でどのカテゴリーにいるのかわかるようにしよう。
グノシーでは、カレントのタブのテキストラベルを赤色などにしている。マイナビニュースでは、タブの背景をカテゴリカラーに変更しているほか、コンテンツ部分のスワイプに連動してタブをスクロールさせ、常にカレントのタブが画面上に表示されるようにしている
- 町田なつみ
- デジタルハリウッドにて、グラフィックデザインを専攻。卒業後は制作会社にてWebデザイナー／ディレクターを経験し、2014年より（株）LIGに参画、Webデザイナーとして業務に従事している。
- 古川佑太朗
- 2011年、東京デザイナー学院を卒業。同年、Web制作会社で働きはじめ、代理店経由の案件を数多く経験する。その後、2015年より（株）LIGにフロントエンドエンジニアとして入社。現在は、新規案件の開発業務を中心に従事している。
