[fancy_box]海外デザインブログDesign Shackで公開された「Infinite Scorlling: Pros and Cons」の著者Carrier Cousinsより許可をもらい日本語抄訳しています。[/fancy_box]
シングルページを利用したウェブサイトが大きなデザイントレンドになっています。特に豊富なコンテンツが用意されている場合が多く、ありがたいことに無限スクロールテクニックを利用することで、デザイナーはコンテンツを無限に並べつづけることができます。
このテクニックは一部のサイトやコンテンツ種類にも最適ですが、他のウェブサイトでは扱いにくく、悩みのタネになるのも事実です。新しいデザインテクニックだからとすぐに飛びつくのではなく、無限スクロールを採用したウェブサイトのメリット、デメリットをまずは確認してみましょう。
詳細は以下から。
無限スクロールって何？
まず無限スクロールの良い点と悪い点を見ていく前に、きちんと理解しているか確認しましょう。たくさんのシングルページ型ウェブサイトが毎日公開されていて、無限スクロールとパララックススクロールをきちんと区別することが重要です。
パララックススクロール（英: Parallax Scrolling）は、デザインの背景と前景イメージを異なるスピードで動かすことで、奥行き感を演出する人気のデザインテクニックです。特にこのテクニックはシングルページ型ウェブサイトで採用されていて、まるで複数のページやスクリーンを表示しているかのように見せてくれます。パララックススクロールは制限がないので、デザイナーは一部のパネル表示などに利用しています。
無限スクロール（英: Infinite Scrolling）はもうひとつの人気デザインテクニックで、ユーザーがページの一番下までスクロールするとコンテンツが追加され、読み続けることができます。その結果コンテンツが永遠に続き、ユーザーアクションが増えるページストリームとなります。記事がなくなるまでコンテンツは表示され続け、FacebookやTwitter、Pinterestなどのソーシャルメディアサイトでよく採用されている具体例かもしれません。ユーザーの情報をフィード上に続けて表示するので、終わりがありません。
メリット
ユーザーのページ滞在時間を保つことができる
無限スクロールは、ユーザーのウェブサイト滞在を伸ばしたいときにとても良いツールです。このテクニックはよくアップデートされるコンテンツやリストを掲載するサイトでよく見かけます。（先ほどのソーシャルメディア系ウェブサイトが良い例です。）
コンテンツが続けて表示されるので、ユーザーはスクロールを続けより滞在時間が長くなります。すでに興味があるコンテンツの下に、さらにコンテンツが表示されたら誰でも見たくなるのではないでしょうか。このテクニックは、ユーザーが探しきれていないさまざまなコンテンツを効果的に表示でき、デザイナーの手助けをしてくれるでしょう。
デメリット
フッター情報がなくなる
無限スクロールでもっとも大きな課題のひとつとして、フッターエリアがなくなってしまっているウェブサイトが多くあります。ユーザーはフッター情報を理解しようとする傾向があり、各種ソーシャルメディア用リンクやお問い合わせ先、プライバシーポリシー、コピーライトなどを記載するようにデザイナーやデベロッパーも気を配っています。
フッターを固定するアイデアは、この問題を解決する方法のひとつで、無限スクロールを実装したウェブサイトではよく見かけるようになっています。ユーザーがみつけやすい場所に重要事項をまとめてを表示するようにしましょう。
メリット
モバイル/タブレット端末に最適
無限スクロールはもともとデスクトップウェブサイト表示とは異なる、モバイルユーザーに向けて開発されたようなものです。モバイル端末はスクロール操作を基本としており、ユーザーもスクロールを想定しているので、もっとも適したテクニックといえるでしょう。
さらに無限スクロールはタッチスクリーン端末にもうまくマッチします。コンテンツがボックス状に表示されるウェブサイトでは、各ボックスがタップやクリックができるようにデザインされています。
デメリット
ナビゲーションとリンクがぐちゃぐちゃになりやすい
ウェブサイトを訪れるユーザーの多くは、トップページ以外から訪れていることを知っておきましょう。その中でもナビゲーションメニューはユーザーにとって重要になります。しかし無限スクロールではナビゲーションメニューがグチャグチャになりがちです。
ナビメニューを固定してしまう解決法もあるでしょう。しかし他のコンテンツにどのようにリンク付けしたり、サイトマップのリンクやフロー・パターンはどうなるでしょう。シングルページ型ウェブサイトでは特に大変になってくる問題のひとつです。
またブックマーク共有がしずらかったり、興味のない記事を飛ばして読むことができません。コンテンツの保存とスキップはサイト制作で考慮しなければいけないポイントでしょう。Ajaxなどを使い、独立した複数のコンテンツ用ページを無限スクロールを使ってグループ分けするなど代替案も考えおきましょう。
メリット
迫力のあるビジュアルを実現できる
できる無限スクロールはビジュアル面を重視したウェブサイトにも最適です。Pinterestスタイルのように、無限のイメージ写真を表示することが可能です。
イメージ写真の数やサイズ、形などに制限はなく、巨大なジグソーパズルの用にまとめて表示することもでき、ユニークなビジュアルを作成できます。ビジュアルはテキストや配色、UIデザインなど他の要素と一緒にユーザーにとってより魅力的に仕上げることができます。
無限スクロールを採用するウェブサイトの多くは、ビジュアルを重視したコンテンツを含んでいるケースが増えているようです。デザインや写真などを扱ったポートフォリオサイトや、写真共有サイトなどのコンテンツに向いています。またTumblrなど情報を集約するサイトなどにもよいでしょう。
デメリット
アクセス解析がむずかしくなる
もしアクセス解析を活用しているなら、無限スクロールは大きな問題となるでしょう。サーチエンジン最適化も合わせて検討したい課題です。GoogleではこのようにAjaxを使ったサイトがうまくクロールされるようにいくつかのポイントを紹介しています、こちらにも目を通しておきましょう。
メリット
サイトのブラウジングが楽になる
ウェブサイトで採用される異なるスクロール系テクニックでは、詳しい操作方法がを説明する必要があったりしますが、無限スクロールはその中でもシンプルでしょう。ページの下まで移動すれば、さらにコンテンツが追加、表示されます。これならユーザが使い方が分からずにサイトから立ち去ることもないでしょう。
デメリット
読み込み時間増加/画面フリーズの危険性
無限スクロールテクニックはしばしばページが固まってしまうことがあります。スクロールをしていると急にフリーズしてしまうこともあり、ユーザーフレンドリーに悪影響を与えかねません。
これらの問題はデザインを改善したり、開発をつづけることで解決される内容が多いでしょう。また無限スクロールが途中で停止するようにを変更してみるのもよいでしょう。たとえばイメージ写真を読み込み終わったらボタンを表示して、クリックすることでコンテンツを追加したり、同じコンテンツをループさせて表示するなど、ユーザビリティーにも工夫が大切となります。
メリット
クリエイティブなアイデアを表現できる
これまで列記してきたデメリットの多くは、無限スクロールのウェブサイト・プロジェクトのヒントとなるでしょう。無限スクロールテクニックは、クリエイティブで無限のアイデアを与えてくれ、情報やコンテンツを伝える新しいスタイルとなるでしょう。
このテクニックがどのようにあなたのコンテンツや、ウェブサイトデザインにマッチするか検討しましょう。他のエフェクトと合わせてコンテンツを面白くしているか、どのようにこのテクニックを使ってコンテンツをよりアピールできるのか、実装する前にじっくり考えてみましょう。
デメリット
他サイトとデザインが酷似している
無限スクロール・テクニックを採用する一番の問題は、たくさんある他のサイトに似てしまうという点です。多くのサイトがPinterestのようなデザインアウトラインとなってしまいます。ユニークでオリジナル性のあるデザイン制作がもっとも重要で、「みんなが使っているから」という動機ではあまりうまくいかないでしょう。
まとめ
無限スクロール・テクニックを採用するかどうか決定するのは、大きな選択になるでしょう。デザイントレンドでたのしく、いくつかのメリットをありますが、デザイナーやユーザーにとって課題となるポイントにも注意が必要です。テクニックを採用する前にメリットとデメリットを比べてみるとよいでしょう。
メリット
[list type=”star”] [li]ユーザーのページ滞在時間を保つことができる[/li]
[li]モバイル/タブレット端末に最適[/li]
[li]迫力のあるビジュアルを実現できる[/li]
[li]ブラウジングが楽になる[/li]
[li]クリエイティブなアイデアを表現できる[/li][/list]
デメリット
[list type=”star”] [li]フッター情報がなくなる[/li]
[li]ナビゲーションとリンクがぐちゃぐちゃになりやすい[/li]
[li]アクセス解析がむずかしくなる[/li]
[li]読み込み時間増加/画面フリーズの危険性[/li]
[li]他サイトとデザインが酷似している[/li][/list]
関連リソース
[list type=”hot”] [li]検索エンジンとの相性を考慮した無限スクロールのベストプラクティス – Googleウェブマスター向け公式ブログ[/li]
[li]無限スクロールを実現する無料jQueryプラグイン「Infinite Scroll」[/li]
[li]要素を無限スクロールさせるjQueryプラグインいくつか – かちびと.net[/li]
[li]世界で最も美しくSEOに適した無限スクロールを実装するサイト、QUARTZ (qz.com) – 海外SEO情報ブログ[/li][/list]
サムネイル@ : Hublot – Return to Antikythera
