WD Online

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

ページ遷移をなくして離脱を防げ! 無限スクロールの活用方法(1/2) 無限スクロールを導入するメリット

Webデザインのトレンドとして注目されているシングルページデザインにおいて、よく利用されているのが、ページ遷移することなく、次のコンテンツを表示していく「無限スクロール」だ。使い勝手が向上し、ユーザーの離脱を防ぐのに効果的な手法だ。今回は、無限スクロールの活用事例と、基本的な実装方法を解説する。

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

大量のコンテンツを持つサイトでコンテンツ一覧ページをつくる場合、従来は複数の一覧ページに分割してページネーション※を設定し、ページ遷移で誘導していた。たとえば、コンテンツが1,000件あれば、1ページあたり20件掲載し、50ページ分の一覧ページを用意し、ページ遷移してもらうといった具合だ。

このような場合、目的のコンテンツに辿り着くには、何度かページ遷移が発生する。閲覧環境がPCであれば、それほどストレスに感じることはないだろう。しかし、スマホをはじめとしたモバイルデバイスにおいては話が別だ。モバイルデバイスでは、そもそもページ遷移で画面を切り替える行為をストレスに感じる傾向にある。さらに、通信状況が不安定で、中途半端な画面遷移表示になることもあり、ストレスを悪化させることもある。ページ閲覧におけるストレスは離脱に繋がるため、できるだけ減らしたいところだ。

そこで効果的なのが「無限スクロール」だ。無限スクロールであれば、自動的に次のコンテンツが表示されるので画面切り替えが生じない。また、通信状況が不安定でも何かしらコンテンツが表示されているので、ストレスの原因を減らすことができる。他にも無限スクロールには、左に挙げたメリットがある。今回は無限スクロールについて考えてみよう。

無限スクロールを導入するメリット

※ページネーションとは、一つの長いページを複数ページに分割し、「前ページ、1、2、…、次ページ」のようなリンクナビゲーションを設置して、ページ遷移できるようにすること。

 

[Case Study]無限スクロールが効果を発揮するコンテンツの種類

無限スクロールは一見どのようなコンテンツでも活用できそうだが、コンテンツの種類によっては適していないものがある。ユーザーがどのようにコンテンツを利用するのかを考えて判断しよう。

無限スクロールが適している例:時系列、ギャラリーコンテンツ

TwitterやFacebookのようなSNS、ニュース系サイトなど、時系列で最新の情報を優先して表示するコンテンツの場合、無限スクロールは最も効果を発揮する(01、02)。直感的な操作が可能なため、ストレスを感じさせず、いつでも触りたくなるようなインターフェイスを実現することができる。

d0afc717356b3ce940e19b87f64c89bf.jpg
01 ヤフー株式会社
Yahoo! JAPANを運営しているヤフー株式会社のコーポレートサイト。トップページにおいて、サービス情報やプレスリリースなどのニュースを無限スクロールで表示している。PC版ではタイル配置、スマホ版ではリスト配置を採用している
a77625bea987b89945d4572728fce4bf.jpg
02 ferret
Webマーケティングに関する記事を多く掲載しているメディアサイト。トップページやカテゴリーページの記事一覧部分だけでなく、個別の記事ページでも無限スクロールを採用しており、スクロールのみで最新記事から過去記事までを読み進めることができる。そのおかげで、特にモバイルデバイスでは非常にスムーズな読書体感となっている

また、デザイン系のポートフォリオサイトや写真共有サイトなども無限スクロールが効果的だ。さまざまな作品や写真などを印象的に並べることによって、ビジュアルでユーザーを楽しませることができる(03)。

5b7f6f60a16c906793ed8726ed4edcb3.jpg
03 Pinterest
テーマ別の画像をコレクションできる、写真共有サイト。無限スクロールを使ったサイトの代表例といえるだろう。タイル配置のレイアウトはPCだけでなく、モバイルデバイスとも相性がよい

無限スクロールが適していない例:ECコンテンツ

ECサイトは、無限スクロールに向いていないとされている。たとえば、SNSでは次々と表示されるコンテンツを消化し、過去のコンテンツへ後戻りすることはあまりないが、ECサイトでは、気になった商品を後からチェックすることが多々あるからだ。

無限スクロールで商品を表示していたら、目当ての商品に戻るために、スクロールで探し続けることになり、ストレスを与えてしまう可能性がある。ECサイトでは、無限スクロールの採用を避けたほうがよいだろう。

 

b1ddc200e3e749554d67706d0a85d807.jpg
Text:橋本裕敬
玩具店でマネージャーを経験後、デザイナーとしてWeb制作会社に転職。LINEクリエイターズスタンプなど、Web制作以外のクリエイティブもしつつ、2015年より(株)LIGに入社。 http://liginc.co.jp/
9783bb04e08757c4b5227dc838041007.jpg
Text:蓮子和也
顔にインパクトがあるフロントエンドエンジニア。アパレル会社でECサイトの運用に携わったのをきっかけにWebデザイナーに転身。大手のサービスの保守運用をメインに行い、数社の制作会社を経て(株)LIGへ参画。LIGでは新規案件を中心にさまざまなUIを実装している。

掲載号

Web Designing 2016年4月号

Web Designing 2016年4月号

2016年3月18日発売 本誌:1,559円(税込) / PDF版:1,222円(税込)

ECサイト、次に打つべき6つの施策/Adobe Animate CC

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

■ 特集:ECサイト、次に打つべき6つの施策
 自動化・効率化‥‥。あなたのサイトを儲かるサイトに!

自動化と効率化が鍵。儲かるサイトはこうつくる!
「ECショップの売り上げが伸びない!」「それどころか、毎日の作業に押しつぶされそう」といった悩みを持つ店長さんやショップの運営担当さんは数多くいらっしゃるはず。そこで彼らの声にじっくりと耳を傾けてみると、「集客」「決済」「ステップメール」「チャット」「多店舗展開」「倉庫・物流」の6つにポイントがあることが見えてきました。
儲かっているショップは、この6ポイントをよくよく見直し、ツールなどを使いながら、自動化・効率化しているのです。本特集は、悩めるショップの皆さんはもちろんのこと、サイトの制作に携わるWeb制作者の皆さんにも読んでいただき、一丸となって「売れるECサイトづくり」に勤しんでいただくための内容になっています。さあ、はじめましょう!

 【Introduction】中小ECサイト運営者が、今取り組むべき6つの施策
 手間のかかるSNSマーケティング、本気で取り組むならツールが役立つ
  プロが薦める最新デジタルツールレポート1:コムニコマーケティングスイート
 カード決済をしない顧客に最適な支払い方法を提供する「導線」を
  プロが薦める最新デジタルツールレポート2:Amazonログイン&ペイメント
 シナリオに沿って内容を変え、自動送信する「ステップメール」
  プロが薦める最新デジタルツールレポート3:アスメル
 【Column】中小のECサイトにこそ、マーケティングオートメーション導入を
 Webにおける「おもてなし」の接客を実現する「チャットツール」
  プロが薦める最新デジタルツールレポート4:Zopim
 モール間の管理・連携を自動化してくれるツールがすごい
  プロが薦める最新デジタルツールレポート5:ネクストエンジン
 使いやすく独自色の強い新しい物流サービスに注目を
  プロが薦める最新デジタルツールレポート6:オープンロジ

■ 集中企画:Adobe Animate CCの全貌とその戦略
 “Flash”がHTML5時代に生まれ変わった! リッチコンテンツ作成ツールの必要性を解説

リッチコンテンツツールとしてWebシーンの一時代を築いてきたAdobe Flash Professionalが約3年ぶりのメジャーバージョンアップを行い、2016年2月、その名称を「Adobe AnimateCC」として正式に公開されました。「なぜ、今、Flashをバージョンアップするのか」「何ができて、どのような需要に対応しているのか」など、その全貌と、これからの展望について解説していきます。

■ WD SELECTION
Prius I.D./relax×LEGACY『relax』特別復刊プロジェクト/ホンダオートテラス presents 中古車グランプリ/リベロジック株式会社/727看板物語/アニメ『ヒストリカル』/IJC MUSEUM IS JAPAN COOL ?/KPP 5th Anniversary Special Website/PS4「進撃の巨人」(Yahoo! JAPAN PR企画)/GIANT MINI4WD PROJECT/un-T factory! NAGOYA /NON-GRID Inc./SAVASミルク「よみがえれ、運動部魂! 部活ワザ選手権」

■ ビジネス・EC
 □ ECサイト業界研究
  ファーストタッチポイント:リピーター獲得のポイントは「ダンボール」にあり

 □ 月刊店舗設計
  ブランドショップAXES:細かな改善を積み重ね、売上を半年間で150%向上

 □ モバイルビジネス最前線
  monomy:日本のモノづくりを変える? 新スタイルのアクセサリー通販アプリ

 □ 知的財産権にまつわるエトセトラ
  動物が描くアート作品と著作権

 □ Bay Area Startup News
  ニッチな製品でも、世界には需要がある! クラウドファンディングで海外進出

■ マーケティング・プロモーション
 □ サイト改善基礎講座
  アクセスログに統計解析を用いてユーザー像を導く

 □ ハギハラ総研
  ネット利用時間という考え方はいずれなくなる

 □ デジタルプロモーションの舞台裏
  ど真ん中の商品訴求でビール・酒類商戦を勝ち抜く

 □ 行動デザイン塾
  “脳内カレンダー”活用のススメ

 □ 課題解決のためのUI実装講座
  ページ遷移をなくして離脱を防げ! 無限スクロールの活用方法

 □ 解析ツールの読み方・活かし方
  過去パターン依存から脱却し、新たな顧客層を掘り起こす

■ クリエイティブ・コラム
 □ ナビゲーターが選ぶ注目のデジタルコンテンツ
  [バズ施策]マス→ネットでバズらせる:引越し侍TVCM by 眞鍋海里
  [デジタルプロモーション]PR成功の黄金律:Intelligent Parking Chair by 築地 Roy 良
  [Webサービス]声で伝えるストーリー:Adobe Voice by 土屋尚史
  [IoT]本当に意味のあるものは、いつだってシンプルだ:Calender Watch by 神谷憲司

 □ モノを生むカイシャ
  シフトブレイン:本当の仲間たちとたどり着いた「働き方」の追求

 □ 清水幹太の「Question the World」
  褒めて褒めて褒めまくって、歴史を刻む:クレア・グレイヴス

 □ ツクルヒト
  「圏外」から伝えつづけるリアル:都築響一(編集者)

 □ 最果タヒの「詩句ハック」
  第22回 自動返詩

 □ デザインにできることMonologue
  Vol.147 2001年から旅して

 □ エキソニモのドーン・オブ・ザ・ボット
  人工知能は超知能、そして“悟り”へ‥‥。人間とBOTの対談も今月でログアウト!

■ インフォメーション
 □ Topics
  TABO/Japan Growth Hacker Awards 2016/Phantom 4

 □ Movement&News
  横尾芸術の本質は“ 引用” にあり「横尾忠則 迷画感応術」/「私」とは誰だろう? 世界と自分との新たな関係性を探る展覧会/玉木宏からピース又吉、メーテルまで! 展覧会は音声ガイドで選ぶ? ほか
  【2015年日本の広告費】連続増加の牽引役はインターネット広告、運用型広告はさらなる拡大/“ グロースハッカー”が語るカイゼンの極意/IBMとソフトバンク、Watson日本語版APIを提供開始 ほか

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

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