WD Online

課題解決のためのUI実装講座 Web Designing 2016年1月号

カテゴリーが多いスマホサイトで役立つ「スワイプ対応メニュー」(1/2) カテゴリーを横断して多くの記事を閲覧してもらう工夫

カテゴリーが多いサイトのスマートフォン対応において、その情報量を小さい画面に収め、かつ操作しやすいUIを実現するには、どうすればいいだろうか。そこで今回は、ニュースサイトなどで見かける「スワイプ対応タブメニュー」を取り上げ、その導入事例と実装方法を解説する。

サンプルファイルダウンロードのご案内
このコーナーで紹介しているサンプルファイルは、こちらからダウンロードできます。ぜひ、サンプルを動かしたりカスタマイズしながら読み進めてください。

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

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

c9d2826918411c519083960f4baf8a0e.jpg
「スワイプ」とは、指を画面に置いたまま一定方向に滑らせる操作のこと。スマホのホーム画面を前後に移動したり、ブラウザアプリでページの閲覧履歴を移動する際に用いられる。このスワイプ操作と連動して、タブを切り替えることで、カテゴリー間のスムーズな移動を実現する

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

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

 

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

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

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

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

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

a872feb82ca104dac31b39f7108516f1.jpg
01 タブ部分が横スクロール可能なことを伝える例 マイナビニュース
右端のタブのテキストラベルが切れていることで、その先に続きがあることを直感的に伝えている

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

2caeca6e7f4f5152d9cb41222a128cce.jpg
02 スワイプでタブ切り替えが可能なことを伝える例
コンテンツ部分でスワイプすると、画面端に矢印が表示され、タブを移動できることを伝えている

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

c45a2520a5d6bfd0bbed1211705349bd.jpg
03 タブメニューのボリュームを伝える例 グノシー
グノシーのサイトでは、タブ部分でスワイプするときだけ、横スクロールバーが表示され、タブメニューのボリューム感がわかるようにしている

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

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

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

902bf05ede184ee478546e70ddeb56dd.jpg
04 カレントのタブを伝える例
グノシーでは、カレントのタブのテキストラベルを赤色などにしている。マイナビニュースでは、タブの背景をカテゴリカラーに変更しているほか、コンテンツ部分のスワイプに連動してタブをスクロールさせ、常にカレントのタブが画面上に表示されるようにしている
464f409ca3721528ec7a36babe9fa3e0.jpg
町田なつみ
デジタルハリウッドにて、グラフィックデザインを専攻。卒業後は制作会社にてWebデザイナー/ディレクターを経験し、2014年より(株)LIGに参画、Webデザイナーとして業務に従事している。
a75fcfaf8af9649a7f85e9440a2fbc33.jpg
古川佑太朗
2011年、東京デザイナー学院を卒業。同年、Web制作会社で働きはじめ、代理店経由の案件を数多く経験する。その後、2015年より(株)LIGにフロントエンドエンジニアとして入社。現在は、新規案件の開発業務を中心に従事している。

掲載号

Web Designing 2016年1月号

Web Designing 2016年1月号

2015年12月18日発売 本誌:1,530円(税込) / PDF版:1,200円(税込)

グロースハック/「キーワードツール」活用講座

サンプルデータはこちらから

■ 特集:今日から始める“成長戦略”グロースハック
 世界の急成長サービスが特集 実践するデジタル時代のマーケティング手法

近年、「グロースハック」という言葉を耳にすることが増えてきました。しかし、その本当の中身を正しく理解している人はあまりいないようです。チップス? テクニック? スタートアップ企業向けの秘密のノウハウ? いえ、そうではないんです。グロースハックとは、これからのデジタル時代に必須の「マーケティングの考え方」のことなのです。今回はさまざざな角度からグロースハックの考え方を紹介していきます。

■ 集中企画:ネットビジネスを有利にするための「キーワードツール」活用講座
 SEOやリスティング広告対策に! 事前にユーザーの検索行動がわかる

「キーワードツール」は、インターネットにおける検索行動量を手早く調査できるツールです。つまり、あるキーワードが「どれくらいのユーザーにリーチするのか」を事前に推定できます。ここでは、ツールの概要とともに、その活用術について解説します。

■ WD SELECTION
 WDが選ぶ注目のデジタルコンテンツ
GREEN NAME/LIFE IS A GIFT/ORCHESTRE DE PARIS/KAI FACT magazine/Deja vu/くばら あごだしチャレンジ/キリンメッツ スター・ウォーズ/google STARWARS/LACOSTE-F/W OUTWEAR/Christmas Express/めぐみ野 スペシャルコンテンツ「トマトになった男の子」/Japan Sumo Cup/沖縄戦 全記録|NHKオンライン/Typetone

■ ビジネス・EC
 □ ECサイト業界研究
 カンバセーションコマース:Facebook を利用した会話によるEC

 □ 月刊店舗設計
 ULYSSES:適切な場所での情報発信がビジネスの可能性を広げる

 □ モバイルビジネス最前線
 MYALO:禅×脳科学によるストレスコントロール「マインドフルネス」をアプリで学ぶ

 □ 知的財産権にまつわるエトセトラ
 作者以外にも著作権は認められる

 □ Bay Area Startup News
 画像やテキストを判別して自動でサイトをつくる「The Grid」

■ マーケティング・プロモーション
 □ サイト改善基礎講座
 ユーザーインタビューで有効なコンテンツを見定める

 □ ハギハラ総研
 日本人の半分はまだECを利用していない

 □ デジタルプロモーションの舞台裏
 ビジネス展開を見越し運用体制の強化を図った“マーケティングツール”サイト

 □ 行動デザイン塾
 ブームは「なじみの行動」が火付け役に

 □ 課題解決のためのUI実装講座
 カテゴリーが多いスマホサイトで役立つ「スワイプ対応タブメニュー」

 □ 解析ツールの読み方・活かし方
 買収したサイトを最小限のコストでリノベーションする

■ クリエイティブ・コラム
 □ ナビゲーターが選ぶ注目のデジタルコンテンツ
 [バズ施策]誰のためにつくるのか?: John Lewis Christmas Advert 2015 眞鍋海里
 [デジタルプロモーション]「ノーデジタル」の拡散:The Gun Shop 築地 Roy 良
 [Webサービス]上質な表現の「場」:Medium 仲暁子
 [IoT]なんとなくの心地よさ:kizuki. 神谷憲司

 □ モノを生むカイシャ
 1→10drive:「体験」をデザインするプロ集団

 □ 清水幹太の「Question the World」
 Julia Kaganskiy:美人マッドサイエンティストによる、やばい実験計画

 □ ツクルヒト
 榊原澄人:「フレーム」を超えて動き出す世界

 □ 最果タヒの「詩句ハック」
 第19回 あみだく詩゛

 □ デザインにできることMonologue
 Vol.143 パブリッシュ

 □ エキソニモのドーン・オブ・ザ・ボット
 コンピュータに「嗅覚」を与えるチップがインターネットのニオイ体験を可能に!?

■ インフォメーション
 □ Topics
 突破クリエイティブアワード2015/ココノヱPresents らくがきミュージアム/第19回 文化庁メディア芸術祭/BB-8 by Sphero

 □ Movement&News
 水族館+動物園+美術館?!「NIFREL(ニフレル)」オープン!/「スター・ウォーズ」のキャラクターや乗り物を使った作品を発表するフランス人写真家の日本初個展/数万枚もの写真をコラージュして1枚の地図をつくりあげる西野壮平 ほか
 [アドテック東京 2015]属性から個人へ。エンゲージメントを高めるトレンド/[Adobe Falsh Professional]時代とユーザーの潮流にあわせ「Animate CC」として新生/Twitter Japan担当者が語るTwitter広告成功のために必要なこと ほか

編集部からのおすすめ記事

この記事を見た人はこんな記事も見ています