スクロールとページング【v27】

こんにちは。こちらこそよろしくお願いします。英語で巻物のことを「スクロール」と言い、本をめくることを「ページング」と言います。巻物も本も、コンパクトに持ち運べる「情報の束」であることに違いはありませんが、実は、私たちが見ているWebサイトやアプリの大部分は、「本」ではなく「巻物」の方が実情に近いものです。というのは、本はページごとに変化する情報であるのに対して、巻物は連続的に変化する情報だからです。

はい。スクロールとページングは、どちらかが優れているというものではなく、それぞれ一長一短の特徴を持った見せ方の種類に過ぎません。テキストであればスクロールの方が良いことが多いでしょうし、画像や動画であれば、ページングの方がふさわしい場面が多いかもしれません。コンテンツの種類や見せ方によって、より適切な方法を使っていくことが、インターフェースデザインのポイントになります。

スクロールは、無段階の連続的な変化です。文字や画像を含むほとんどすべてのコンテンツは、スクロールによって表示されています。スクロールではユーザーの意思によって、画面の位置を好きな場所にコントロールできるので、コンテンツを読み込むのに適しています。

Webサイトやアプリなどで、ほとんどのコンテンツは縦にスクロールします。なぜかと言えば、文字が「左から右」に流れて、それが「上から下」へと続いている影響が最も大きく、それを大前提にして、ブラウザやOS、スマートフォンの画面の形なども設計されているからです。もし、文字が縦書き主流だったなら、スクロールが横向き主流であってもおかしくありません。

一方で、横スクロールはあまり使われることがありません。その理由も同様で、文字の流れが「左から右」であり、スクロールもそれに合わせて縦方向が主流だからです。ただし、文字が少なく画像主体であったり、タッチやフォーカスでコントロールするデバイスであるならば、横スクロールのインターフェースを検討する余地があります。

スクロールには、コンテンツの終わりがあるものとないものの2種類があります。後者は無限にコンテンツが続くため、無限スクロール（インクリメンタル・スクロール）などと呼ばれ、時事的なコンテンツやSNS等でよく使われています。「もっと見る」を押すことで、段階的にスクロールを発生させるGoogle検索結果（スマートフォン）のようなタイプも存在します。

無限スクロールでは、コンテンツの末端とフッターを見ることができないという難点があります。スクロールするごとに自動的に次が読み込まれ、コンテンツが際限なく続くため、フッターに相当する記載をどこか別の場所に退避させておく必要があります。

ページングでは、画面全体を一度に切り替えます。ページングは、コンテンツを「見る」というよりも、「切り替える」といった使い方に向いています。

ページングは、カテゴリの切り替えや記事の切り替えなどで使われるインターフェースです。スクロールが不要な、ひとつの画面内で収まるコンテンツ、例えば「写真」や「ポップアップで説明されたステップ」などにも使われます。

片手で操作するスマートフォンでは、親指を使ってスワイプ操作するのにページングがちょうどマッチします。画面幅の狭さとも相まって、スマートフォンではページングは特に便利なインターフェースです。

ページングでは「面」としてコンテンツを捉えることができる側面があります。例えば、iOS（iPhone）やAndroidのホーム画面では、いくつものアプリアイコンが並んでいます。ユーザーはそれらすべての場所を覚えたりはしません。「何枚目」の「あのあたり」にある「あのアプリ」といった具合に、漠然とした位置関係を頼りに目的のものを探します。こういった場合では、コンテンツが面として区切られたページングの方が、スクロールよりも適しているでしょう。

検索結果や長大な文章など、1ページに収めるにはあまりに長すぎるコンテンツの場合には、本のように文章をある程度の分量で区切って、続きを次のページに送ります。このナビゲーションの名前は、文字通り「ページネーション（pagination：ページ送り）」と言います。一方で、「巻物」は英語でスクロールと言い、一切の区切りがなく最後まで文章が続くものを指します。

一般的な使い方では、スクロールはコンテンツの続きを見るためのインターフェース、対してページングはコンテンツを切り替えるためのインターフェースです。したがって、スクロールとページングは、基本的に直交することになります。

Pinterestでは、ひとつのコンテンツ（記事）が縦に長い無限スクロールの形をとっています。あるコンテンツから次のコンテンツへの移動には、ひとつ前の「一覧ページ」に戻って次のコンテンツを選び直すだけでなく、左右のスワイプ操作によるページングでも移動できるようにしています。スクロールが縦方向、ページングが横方向なので、両者は直交する位置関係にあります。

他にも例えば、カテゴリ内にある「記事の一覧」をスクロールで表示するならば、「カテゴリそのもの」の切り替えはページングがふさわしいでしょう。片方の動きがスクロールなら、もう片方はページングにすると、両者の収まりが良くなります。

Androidのホーム画面は、前述したiOSと同様に、横のページングで構成されています。ところが、対になる「アプリ一覧画面」も、かつては縦のページングで作られていました。近年ではこの組み合わせは見直され、ホーム画面は横のページング、アプリ一覧画面は縦のスクロールとなっています。

カルーセルとは、言葉としてはメリーゴーランド（回転木馬）の意味であり、画面の一部分を使ったスクロールまたはページングによる割り込みです。最も代表的なカルーセルは、トップページで大きく表示したい複数のビジュアルをカルーセルによって展開するものでしょう。他にも、関連する情報などを見せたい場合に、部分的な割り込みとして使われます。

カルーセルの特徴は、画面サイズの制約を受けずに、たくさんのコンテンツを載せることができる省スペース性です。また、カルーセル自体をたくさん設置しても、構造的に破綻することがありません。その特性を利用したインターフェースが、多段積みのカルーセルです。

このインターフェースは、画面サイズが小さいスマートフォンだけでなく、TVやPCでも使われます。画面を切り替えることなく、1ページにいくつもの異なる切り口の情報をたくさん載せることができるからです。

いくつものカテゴリに分類した情報を、できるだけ多く提示したいという普遍的なニーズを実現するためには、どういったやり方があるでしょうか。ここでは、「多段積みカルーセル」と「ページングとスクロール」の組み合わせという、2つのパターンを比較してみます。

Netflixでは、デバイスがTVであれスマートフォンであれ、カルーセルを多用するところでは一貫しています。様々な切り口ごとの「動画」を提示しており、それを多段に積んで1画面でまとめています。Pinterestでは、カテゴリごとの「画像」を多数用意し、それを無限スクロールで展開しています。

Netflixでは切り口の数を、Pinterestでは画像の数を重視しているようです。

カテゴリごとに分類した大量の「何か」を展開したいという意味では、実現したいことはどちらも全く同じです。カルーセルを使って1ページで頑張って見せているのがNetflixであり、ページングを使って複数ページにまたがって展開するのがPinterestです。どちらがよりふさわしいかは、そのサービスの目的次第で変わります。