WD Online

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

ページ遷移をなくして離脱を防げ! 無限スクロールの活用方法(2/2) PC・スマホ両対応の無限スクロールの実装

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

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

[INFINITESCROLL01]無限スクロールを実装する

ここからは、無限スクロールの実装方法について解説する。サンプルは、PCでもスマホでも対応できるようリキッドデザインにし、ページ下までいくと次のコンテンツを読み込むというものだ。なお、誌面の都合でポイントとなる部分のみを解説しているため、詳しくはサンプルファイルを見てほしい。

Ajaxで次のコンテンツを取得する

b0fce321ea626a13b7cc1e57f37ee229.jpg
01 サンプルデータのファイル構造 3つのHTMLファイルを用意し、「コンテンツ1(index.html)→ コンテンツ2(index2.html)→ コンテンツ3(index3.html)」の順番で表示していく

サンプルでは、3つのHTMLを用意した(01)。一つ目のコンテンツ1(index.html)があり、ページ下までスクロールしたら、Ajaxで次ページのコンテンツ2(index2.html)を読み込む(03)。

読み込みが始まったら、あらかじめページの一番下に設置しておいたローディング画像を表示して(A)、読み込み状態であることをユーザーにわかりやすくしておく。

<div class="scroll-content js-scroll-content">
  <div class="js-item-list-wrap">
    <div class="item-list js-item-list"
// ↓--------------------------------------------------↓ B
        data-page="1" 
        data-url="index.html"
        data-prev-url=""
        data-next-url="index2.html">
// ↑--------------------------------------------------↑ B
      <div class="item" data-page-url="index3.html">
        <h2><a href="#">1</a></h2>
      </div>
<!-- 中略 -->
  </div>
  <div class="loading" style="display: none;"><img src="img/loading.gif" alt=""></div>        // A
</div>
02 HTMLの抜粋(sample/scroll/index.html)。data属性で前・次ページのURL情報を持たせている
$.ajax({
  type: 'GET',
  url: next_data_url,
  dataType: 'html',
  success: function (data) {
    $loading.show();                                      // A
    var $itemList = $(data).find('.js-item-list');
    next_data_cache = $itemList;
  },
  complete: function() {
    $loading.hide();
  },
  error: function () {
    $loading.hide();
    alert('通信に失敗しました');
  }
});
03 JavaScriptの抜粋(sample/scroll/js/main.js)。Ajaxでコンテンツを取得する部分のコード

次のコンテンツを事前に読み込む

無限スクロールを実装する際、特に注意すべきなのは、表示スピードだ。せっかく無限スクロールにしても、表示が遅ければ、ユーザーにストレスを与えかねない。逆に言えば、そこを改善すれば、さらにユーザーの離脱率を下げることができる。

そこで今回は、一つ目のコンテンツ1を取得してブラウザに反映させたら、Ajaxですぐに次のコンテンツ2を読み込むようにする。コンテンツ1ではdata属性を使って、次に読み込むコンテンツ2の情報を持たせておく(B)。そして、コンテンツ1がブラウザに反映されたら、data属性の情報を取得し、次に読み込むコンテンツ2のURL情報を使ってAjaxを実行する。このとき、まだコンテンツ2はブラウザには反映させず、読み込んだだけの状態にしておく。そして、ページの一番下までスクロールしたら、コンテンツ2をブラウザに表示させるという仕組みだ(04)。

function showNext(data) {
 $('.js-item-list-wrap').append(data);
 next_data_url = data.data('next-url');
 next_data_cache = false;
 $.ajax({
  type: 'GET',
  url: next_data_url,
  dataType: 'html',
  success: function (data) {
   var $itemList = $(data).find('.js-item-list');
   next_data_cache = $itemList;
  },
  error: function () {
   alert('通信に失敗しました');
  }
 });
};
04 JavaScriptの抜粋(sample/scroll/js/main.js)。事前に読み込んでいた次のコンテンツを表示する部分のコード。「append(data)」の部分でコンテンツがブラウザに追加される

コンテンツ2でも同様の処理を行い、コンテンツ3以降もスムーズに表示できるようにする。このようにコンテンツの取得と表示の処理を分けることで、事前ロードが可能になる。

 

[INFINITESCROLL02]SEOを考慮した無限スクロールにする

無限スクロールを使えばリンクを省略でき、見た目がとてもフラットになり、よりスタイリッシュなデザインを表現できる。では、SEOについてはどうだろうか。ページネーションがないので、検索エンジンが各ページの情報を解析するかどうかは特に気になるところだ。Googleが無限スクロールを実装する上でのベストプラクティス※を公開しているので、その一部を紹介しよう。

JSが無効のブラウザを考慮する

JavaScriptが動かないと、当然、無限スクロールも機能しない。そうなると、次のページへ行く手段がなくなるのでUI的に望ましくない。

そこで、「前ページ」「次ページ」リンクやページネーションを用意し、noscript要素を使用して、JavaScriptが無効時のみ、それらのリンクが表示されるようにしておく(A)。

    <div class="loading" style="display: none;"><img src="img/loading.gif" alt=""></div>
  </div>
// ↓--------------------------------------------------↓ A
<noscript>
    <div class="page-link">
      <span>1</span>
      <a href="index2.html">2</a>
      <a href="index3.html">3</a>
    </div>
  </noscript>
// ↑--------------------------------------------------↑ A
<script src="js/main.js" type="text/javascript"></script>
01 HTMLの抜粋(sample/scroll/index.html)。noscript要素を使って、JavaScript無効時に備える

読み込みに応じてURLを変える

通常、無限スクロールではコンテンツを読み込んだ際にURLは変化しない。そこで、読み込むたびに擬似的にURLを変化させる。

今回は、URLの変更にreplaceStateメソッドを使用する(B)。これはブラウザの履歴には追加せずに、URLの表示だけを変えるものだ。他にpushStateメソッドがあるが、これはブラウザの履歴に追加されるため、ブラウザの「戻る」ボタンを押すと一つ前のURLのスクロール位置に移動してしまう。「戻る」ボタンを押した際のユーザーが期待する挙動は、前ページヘの移動だと思われるので、replaceStateメソッドのほうがいいだろう。

// URLを変えるタイミング
if (Math.abs(scroll_pos - last_scroll) > $window.height() * 0.1) {
  last_scroll = scroll_pos;
  $('.js-item-list').each(function() {
    if (mostlyVisible(this)) {
      history.replaceState(null, null, $(this).attr("data-url"));      // B
      return;
    }
  });
}
02 JavaScriptの抜粋(sample/scroll/js/main.js)。コンテンツ読み込み後にURLを変更する部分のコード。サンプルでは、data属性で設定していたURL情報をもとに「~/index.html」→「~/index2.html」→「~/index3.html」とURLを変えている

rel属性で前後のURLを設定する

インデックスへの登録漏れを防ぐために、各ページのhead要素内にlink要素を使って「rel="next"」と「rel="prev"」を設定し、対応する前後のコンテンツのURLをhref属性に記載する(C)。なお、一つ目のコンテンツの「rel="prev"」、最後のコンテンツの「rel="next"」は必要ない。あくまで前後にコンテンツがある場合のみ記述する。

<head>
  <meta charset="utf-8" />
  <title>Items2</title>
  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <link href="css/eric-meyer-reset.css" rel="stylesheet" type="text/css" />
  <link href="css/main.css" rel="stylesheet" type="text/css" />
// ↓--------------------------------------------------↓ C
  <link rel="next" href="index3.html" />
  <link rel="prev" href="index.html" />
// ↑--------------------------------------------------↑ C
</head>
03 HTMLの抜粋(sample/scroll/index2.html)。head要素内でrel属性を使って、コンテンツの前後関係を記述する
53122d86ebe0b0bc94382f6e207cfb5b.jpg
04 作成したサンプル
Ajaxを使用しているため、ローカル環境では動作しないこともあるので、サーバにアップロードして確認してほしい

※Googleのウェブマスター向け公式ブログ「検索エンジンとの相性を考慮した無限スクロールのベストプラクティス」 http://googlewebmastercentral-ja.blogspot.jp/2014/02/infinite-scroll-search-friendly.html

 

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を提供開始 ほか

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

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