WD Online

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

スクロールに追従するナビゲーションの工夫と実装(1/2) 要素を工夫してスマホユーザーのストレスを軽減する

追従要素とは、スクロールに応じてページに表示されるナビゲーションのことだ。スマートフォン(以下、スマホ)では画面が狭くページ内の要素を一望できないだけに、追従要素は必要なリンクを探す手間を省くのに役立つ。しかし、同時にコンテンツを読む妨げになる可能性も高い。今回はスマホサイトにおける追従要素の工夫例と、基本的な実装方法を解説する。

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

スマホにおける「利便性の高い」ナビゲーションとは

「利便性の高いナビゲーション」を目指してサイトの構成を考える際、ユーザーが「どんな情報を求めているのか」を理解し、「どのようにコンテンツを移動しているのか」の導線を把握することが重要だ。そして、ナビゲーションを配置する際に注意すべき点が、画面の狭いスマホではクローム(サイトの利用に役立つインターフェイス要素)に割ける面積比率がPCと異なることだ。PCサイトならば、常に表示されているロゴや検索窓はノイズになりにくいだろう。しかし、スマホサイトではその分コンテンツ領域が狭くなり、ユーザーがストレスを感じ、結果、離脱率の高いサイトとなってしまう。

 

8003739327a5cecdb74e3ee7e1466fb6.jpg
スマホサイトの追従要素で考慮すべき3つのポイント

 

一般的な追従要素としては、サイトロゴ、グローバルナビへの導線、検索への導線、ページトップへ戻る、などがある。どれも使う場面が限られるものだけに、必要とされたときに表示することで「画面を占有する邪魔なもの」から「ユーザーの利便性を高めるもの」に変化する。

スマホサイトの追従要素において考慮すべきポイントは次の三つにまとめられる。一つ目は、ユーザーが求めているタイミングで適したナビゲーションを表示させること。二つ目は、誤ってタップする位置への配置を避けること。三つ目は、タップした後の動作を直感的に理解できないものは追従させないことだ。

 

事例に学ぶ、スマホサイトでの追従要素の工夫

追従要素は画面の狭いスマホサイトにおいて利便性を上げる重要なUIだが、表示され続けることでユーザーにストレスを与える要因となる。また不要なものと判断された場合、ユーザーの意識から追い出され認識されなくなる可能性が高い。実際のサイトで使われている追従要素のUI表現を見てみよう。

 

スクロール方向を利用した工夫

追従要素を活用するには、ユーザーが何を表示し、何をしようとしているのかを判断する必要がある。その際に役立つのがスクロールの「方向」と「位置」だ。一般的にWebページは上から下へ向かって読むように構成されている。つまり、下方向へスクロールしている間はコンテンツを読んでいる可能性が高い。これをうまく利用しているのが「WIRED」(01)や「ハフィントンポスト」(02)のサイトだ。

 

7d234f2b2abbf9551715012a77b2a987.jpg
01 スクロール方向を利用した工夫例 WIRED
「未来のトレンドを配信する」というコンセプトでさまざまな話題を取り扱うアメリカのニュースサイト。レスポンシブWebデザインとなっており、デバイスの画面サイズに応じてクロームの取捨選択がされる様子を確認することができる

 

25c2b2d97676b1cbc79e59bcce7d4bef.jpg
02 スクロール方向を利用した工夫例 ハフィントンポスト
政治やビジネス、社会情勢などを中心に取り扱うニュースサイト。下方向へスクロールしている間はヘッダが非表示となり、上方向へスクロールを開始するとヘッダが降りてきて追従するナビゲーションとして表示される。コンテンツに集中したいときには表示領域を最大限にするという、ユーザーへの配慮を感じる

 

WIREDでは、記事ページで下方向へスクロールを開始すると、追従するヘッダに表示されている内容が「グローバルナビへの導線、ロゴ、定期購読への導線」から「シェアボタン、グローバルナビへの導線」に変化する。そして、上方向に戻るときには再度ロゴへと切り替わる。狭い画面を効率的に活用し、ユーザーの利便性と制作側が表示したい要素をシンプルに両立させている。

 

スクロール位置を利用した工夫

スクロールで隠れるナビゲーションを画面に残し、ページの一覧性を保つこともできる。

「Yahoo! JAPAN」のスマホサイトでは(03)、タブを横移動することでカテゴリを横断できるように設計されている。

 

23bda4287f46786d13f3fbae0a44a7eb.jpg
03 スクロール位置を利用した工夫例 Yahoo! JAPAN
言わずと知れたポータルサイトであり、スマホサイトでは重視するコンテンツをトピックスと検索機能に絞り、直感的に操作しやすいUI設計がなされている

 

Yahoo!トピックスのエリアまでスクロールすると、タブ内のコンテンツ領域が画面縦幅に収まらないため、カテゴリの見出しを兼ねたタブをヘッダに固定し、ユーザーがページ内での現在位置を見失わないよう工夫されている。このとき検索窓とタブだけが追従し、その他のグローバルナビやロゴは隠れて見えなくなる。提示する導線を絞ることで、追従するナビゲーションをユーザーにとって利便性が高いものにしている。

 

8990e3b8def98dd1c7f254bd78fb0a28.jpg
森田珠奈子
独学でHTML・CSSコーディングを学ぶ。大学卒業後、専門学校にてグラフィックデザインを専攻。2012年に(株)LIGに入社。現在はWebデザイナー/イラストレーターとしてデザイン業務に従事している。

 

e554fb41b243f82f5edd762277bf7256.jpg
小見祐介
カフェでの勤務を経験後、独学でWeb制作を勉強。2013年からWebデザイナーとして働き始める。2015年に(株)LIGに入社。現在はフロントエンドエンジニアとして主にAngularJSを使った案件の開発・運用に従事している。 http://liginc.co.jp/

掲載号

Web Designing 2015年11月号

Web Designing 2015年11月号

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

実践的コンテンツマーケティング講座/ヒートマップツール導入ガイド

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

■ 特集:Web担当者のための実践的コンテンツマーケティング講座
 手法やツールではない、概念であり戦略だ! その秘訣、教えます。

■ 集中企画:ユーザー行動を可視化する「ヒートマップツール」導入ガイド
 ユーザー行動を探りながら、より来たくなるWebサイトを作ろう

■ WD SELECTION
 WDが選ぶ注目のデジタルコンテンツ
  写プライズ/それでも、わたし。 - niko and …/MY MINTIA MAKER/BAO BAO MUSIC/リアル脱出ゲーム「呪われたオーディション会場からの脱出」/ロッテ Fit’s presents みんなでつくろう! ウォーリーのせかい!/A DAY WITH THE ANGELS VOGUE GIRL/Hello, New World./SLICE OF HEARTLAND ハートランドビール/光文社創立70周年記念コンテンツ『360° PARTY』/TYO-ID TYO INTERACTIVE DESIGN

 ナビゲーターが選ぶ注目のデジタルコンテンツ
  [バズ施策]緻密なPR視点がキモ!:The Extreme Minuet?  眞鍋海里
  [デジタルプロモーション]行列エンターテインメント:HelixGame  築地 Roy 良
  [Webサービス]感染する情報:Plug**   仲暁子
  [IoT]実家の課題解決サービス:まごチャンネル  神谷憲司

■マーケティング・プロモーション
 □ サイト改善基礎講座
  アクセスログ解析を使った現状把握で見るべき項目

 □ ハギハラ総研
  国勢調査のオンライン回答率は、なぜ東京が低いのだろうか

 □ デジタルプロモーションの舞台裏
  テーマパークの来場者数増加を呼んだ、サンリオキャラクターが作れるサイト

 □ 行動デザイン塾
  人を動かすための18の「ツボ」

 □ 課題解決のためのU実装講座
  追従要素を工夫してスマホユーザーのストレスを軽減する

 □ 解析ツールの読み方・活かし方
  解析結果からモバイル最適化を行う


■ビジネス・EC
 □ ECサイト業界研究
  オムニチャネル:集客に必要なタッチポイント

 □ 月刊店舗設計
  ぐらこころ:写真をシェアする時代のアイデア商品「おうち写真館」

 □ モバイルビジネス最前線
  MOTTAINAIマーケット:新旧事業の社内ジョイントベンチャーが価値を作る
  
 □ 知的財産権にまつわるエトセトラ
  引用の範疇

 □ Bay Area Startup News
  カギの開け閉めをスマートフォンでワンタッチ! 勤怠管理や入室者制御もできるスマートロック

■クリエイティブ
 □ モノを生むカイシャ
  東京ピストル:「編集力」で遊べる会社!

 □ 清水幹太の「Question the World」
  Zolty(BREAKFAST):NYで最も注目される男との、やたらと落ち着く会話

 □ ツクルヒト
  保坂俊彦(サンドアーティスト):砂から生まれ、砂に還る巨大彫刻

 □ 最果タヒの「詩句ハック」
  第17回 モノローグスタンプ

 □ デザインにできることMonologue
  Vol.142 本をつくる

 □ エキソニモのドーン・オブ・ザ・ボット
  出会った女性はBOTばかり! 情報漏洩事件で判明した悲しき実態とは?


■インフォメーション
 □ Topics
  Illumicap/電撃戦-SPEED CHESS-

 □ Movement&News
  ドイツ銀行の“現代写真”コレクション/杉本博司の大規模展/「原子力」をテーマにしたシャンデリアによるインスタレーション/オモチャや廃材から創り出す“シャンデリアアート”とは?/全長100mもの超絵画大作を披露する村上隆の個展
  Facebookと違うユーザー傾向に注目! Instagramユーザー生態調査/政府が企業の世界進出を支援するフランスの試みとスタートアップたち/Twitterのタイムラインに動画広告、アプリインストールの促進剤に ほか

編集部よりお詫びと訂正のお知らせ

特集「Web担当者のための実践的コンテンツマーケティング講座」にて、P029「情報を拡散しやすい」に誌面のデータに誤りがあり、本文が読めない状態となっていました。お詫びするとともに、以下に正しい内容を掲載いたします。

▼画像をクリックすると拡大表示します。
WD1511_P29.png

また、WDオンライン版では、こちらで該当記事を含むページを無料公開しています。あわせてご参照ください。

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

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