見出し画像

ページネーション要不要論

webサイトについて語るとき、よく出てくる言葉のひとつとして「没入感」という言葉があります。

没入感を演出する手段として、現実を模倣するという手段はよく取られます。たとえば本をめくる動作。電子書籍のリーダーにはまるで本当にページをめくるようなアニメーション、効果音がつけられているものがあります。

ただ、それらのデザインは本当にユーザーを満足させるものなのでしょうか?例えば、電子小説という媒体においてページの概念は本当に有用なものなのでしょうか?

Googleはその問いについてひとつの答えを出しています。

どうやら、ページネーションをつける理由はデザイン的な理由と、動作が重くなるといった技術的な理由があるようです。

ページネーションの有用性

現在何ページ目にいるか?残り何ページか?それを示すのにページネーションは有用、と言われています。

とはいえ、上記の問いは技術的にはページネーションなしでも解決できるものでしょう。

  • 全体の検索結果を取得するAPIを使用する

  • 現在のスクロール位置と全体のコンテンツ量のインジケーターを作成する

ページ内のコンテンツによっては描画が重くなるという問題も考えられます。その場合は描画内容とトレードオフになりますが、内容によっては無限スクロールで十分に対応できる場合もあるでしょう。

デザイン面での比較

これは一緒くたには語れそうにありません。ユースケースごとに考えてみましょう。

管理者投稿型のコンテンツ

ブログなどのコンテンツサイトに多い形式です。

この形式のウェブサイトはコンテンツごとにタグや著者などのメタデータを埋め込めるため、絞り込みや検索がしやすくなっており、ページネーションを必要としない場合も多くあります。

たとえば弊社のメディア(https://ics.media/)では、トップページで最新の数記事を表示し、「もっと見る」ボタンでさらに読み込めるようになっています。これにより、最新の記事以外のコンテンツにもアクセスしやすくなるという副次的な効果も得られています。

一部の記事のリストを表示し、次のコンテンツへの導線を確保している
一部の記事のリストのみ表示され、1ページ内のスクロール量が抑えられている

検索エンジンやECサイト

前述の見出しと比較して、便宜上「ユーザー投稿型のコンテンツ」と呼びます。この形式のサイトは検索結果が雑多になりやすく、サイト運営者がコンテンツの数や質を管理しにくいという点に注意したいです。

このような場合は、ページネーションを配置するのが無難でしょう。ただし、1ページあたりの表示数は注意深く検討する必要があります。ヒット数/ページが少なすぎるとページネーションをクリックする回数が増えてユーザーに煩わしい印象を与えます。

電子書籍のような読み物

このようなコンテンツはユーザー投稿型のコンテンツに分類されるので、1ページあたりの表示サイズがコントロールしやすいものに分類されます。

慣習的に、1ページあたりの表示サイズは書籍の制約を踏襲して文字サイズなどが決められるパターンが多いです。ただし、それが電子という媒体において本当に適切なデザインなのかは検討の余地があります。

ページを分割するほど、ユーザーはスクロールとページ送りという2つの動作を使い分ける機会が増え、操作が複雑な印象を与えます。

また、スマートフォンのようなデバイスでタッチ操作を行う場合と、PCでマウス操作を行う場合では全く別の操作感になります。ターゲットユーザーを明確にし、どちらの操作に重きを置くか決めることも、ウェブサイトでページの概念を取り入れる際に重要になります。

結論

こういったUIの是非について論じるとき、必要か不要か、という極端な議論に陥りがちですが、大抵の場合は状況に応じて使い分けるのが適切、というふわっとした着地点に落ち着くでしょう。

その「状況」を深掘りすることでコンテンツごとに適切なUIを整理できるようになります。今回のページネーションの例では、技術的な制約とUXの観点から必要な状況、不要な状況を考えてみました。

  • 1ページのコンテンツ量が多い場合はサイトが重くなるので分割する仕組みが必要。そのひとつがページネーションである。

  • コンテンツ量が少ない場合は必ずしもページネーションは必要でなく、順次読み込むような仕組みの方が体験が良い場合がある。

  • ひとつのページ内で「スクロール」や「タップ」など複数の操作を行わせると体験が損なわれることがある。デバイスの特性も考慮しながら、自分で触って適切な形式を見つけるのが大切。

現代のウェブデザインは現実のデザイン、たとえば本の「ページ」という概念のメタファーとしてデザインされているものが数多く存在します。

これからの世代、いわゆるデジタルネイティブと呼ばれる世代にウェブが受け継がれるとき、それらのデザインがどう変わっていくのか楽しみです。

この記事が気に入ったらサポートをしてみませんか?