murashun.jpページネーションとユーザビリティ
はじめに
ページネーションとは、日本語でページ送りや、ページを分割するという意味があります。代表的な例では Google の検索結果の一覧がそれにあたります。情報量の多いページは複数のページに分割し、各ページには相互にアクセスするためにナビゲーション用のリンクが置かれています。
ページネーションは、印刷物の 1 ページとは根本的に異なります。印刷物のページには物理的な制限がありますが、サイトのページは任意の単位でコンテンツを分割することができます。
ページネーションは、情報量の多いページを一度に読み込ませ、表示に時間がかかることを回避する手段として利用されます。一昔前の低速度の回線と低スペックの端末が一般的だった時代では、通信量の制限がとても厳しく、様々なサイトでページネーションが使われていました。しかし、今日では回線の速度と端末のスペックは一昔前に比べて飛躍的に向上しているため、ページネーションは不要であるように思えます。
このページでは、ページを分割するページネーションとユーザビリティについて解説します。ページネーションの必要性、適切な情報を分割する単位、無限スクロールとの比較、ページネーションのデザインやユーザビリティをガイドラインを参考に見ていきます。
ページネーションの必要性
一昔前までの低速度の回線、低スペックの端末はなくなりつつあるため、ページサイズを気にしてページを分割する必要性はないように感じます。しかし、Google のようにページネーションを採用しているサイトは少なくありません。Google などの世界的なサイトは様々な環境や端末に対応するためにページネーションを採用している側面もありますが、ユーザビリティにも配慮されています。
Google の検索結果ページに表示される件数はデフォルトで 10 件に設定されています。ユーザの設定により最大で 100 件にまで拡張することができますが、情報量が多くなりユーザビリティが低下するように感じる人もいます。
このように、ページネーションとは単純にページサイズの大きいページの読み込み速度だけではなく、ユーザが快適に閲覧するための情報量を制御することでユーザビリティを高める役割も持ちます。ページネーションとは異なりますが、ブログのライティングとしてユーザが快適に読める文字数は多くても 5,000 字程度であると言われています。文字数が多すぎると、ユーザはすべて読まれずにサイトから離脱してしまうため、一般的なブログは 3,000 ～ 5,000 文字程度で書かれています。ページネーションはブログのライティングと同じように、適切な情報量によってユーザビリティを高めるという重要な意味を持ちます。
しかし、テキスト記事でも長い記事の場合にはページネーションを採用しているサイトをしばしば見かけますが、これらについては 2 つの批判があります。ひとつは、ユーザが記事をすべて読むためには何度もページネーションをクリックしなければならず、PV を稼ぎのためにあえて導入しているという批判です。もうひとつは、ページが分割されているために目的の情報をページ内検索では探せないという批判です。
テキスト記事の途中でページネーションを採用しているサイトの抗弁としては、低速度の回線や低スペックの端末への配慮や、ページ全体のサイズを抑えてパフォーマンスを確保するためと言われています。しかし、これらの抗弁には説得力がありません。なぜなら、少数のユーザを優先するために、使い勝手の悪さを多くのユーザに強いていることになるからです。
ページネーションを設置する場合、"分割する適切な情報量" の単位を適切に設定することが重要です。
分割する適切な情報量
ページを分割する適切な情報量に絶対の正解はありません。なぜなら、同じ情報量でも "もっと情報が欲しい" と感じる人もいれば、"情報量が多すぎる" と感じる人もいるため、最終的には個人の価値観によります。そのため、ページネーションを採用している場合、多くのページではどれだけの情報量を表示するかユーザに選択できるインターフェースを用意しています。
適切な情報量を、テキストの文字数として考えると難しいように思えます。しかし、コンテンツのテーマ、トピック、アイテムとして切り出しているサイトはあります。例えば、Youtube などの動画共有サイトでは、ひとつの動画をページの分割する単位として切り出しています。長時間の動画であったとしても、動画やページを分割せずに、ひとつのページですべての情報が完結しています。このようなコンテンツのアイテム単位で分割する方法は、Amazon のような EC サイトでも見ることができます。
適切な情報量の線引きが難しいジャンルは、ブログのようなテキスト記事です。多くのテキスト記事では、あるテーマのトピックについて述べています。テーマ全体を網羅すると情報量が非常に多くなるため、情報として独立しているトピック単位に分割されています。トピック単位にまとめる方法は、あるテーマについて網羅的にまとめたリファレンスなどでも見ることができます。
ページネーションと無限スクロール
情報量が多い場合、ページを分割することはひとつの方法に過ぎません。ページを分割する方法以外にも、読み込むサイズを制限する方法があります。例えば、Twitter ではスクロールを行うことで過去のツイートが次々に読み込まれる "無限スクロール" が採用されています。
無限スクロールは、情報を分割して読み込むという点についてはページネーションと同じです。ただし、ページの遷移や、スクロールすることでひとつのページに多くの情報が表示されるという点においては異なります。Twitter のタイムラインを切れ目なく表示させるという特性は、無限スクロールと非常に相性が良いものになっています。
無限スクロールはページネーションと比べて先進的なイメージがあるため、一部のデザイン的なサイトでも見ることができます。しかし、Twitter と異なりテキスト記事で無限スクロールを採用する場合、以下の問題点があります。
- 文章を読んでいる途中で何度も読み込みが発生する。
- 途中でのブックマークができず、再読込時には最初からやり直しになってしまう。
- 読み込まれていない文章はページ内検索でヒットしない。
- ページの終わりが見えず、フッターに到達できない。
個人ブログなどで無限スクロールをユーザエクスペリエンスのために採用している場合、情報の分割という点では再考の余地があります。Amazon などが無限スクロールを採用せずにページネーションを採用しているのは上記の理由からです。Twitter のようにコンテンツの探索にスクローリングが適している場合に限り、無限スクロールはユーザの滞在時間やエンゲージメントを高めることができます。
そもそも無限スクロールは、情報を分割する目的以外に、コンテンツの発見や没頭感を高める効果もあります。ニュースのフィードや商品のカタログをスクロールすることで、より多くの情報に対して次々に目を通すことができます。ページネーションでコンテンツを更新する場合、ページの遷移が入ってしまうため、ユーザの集中力が切れてしまいます。
また無限スクロールは、ページネーションと比べてモバイルフレンドリーであると言えます。スクローリングすることでコンテンツが更新されるインターフェースは、画面をタップするよりもユーザビリティにおいて優れています。なぜなら従来のボタンやリンクでの遷移よりも、スクローリングやフリックなどのジャスチャーコントロールの方が、より直感的であり、ユーザエクスペリエンスを高めるためです。
ページネーションとSEO
情報量の多いページをページネーションで分割すると、同じデザインのページがいくつも増えることになります。ページネーションを設置することで検索エンジンのクローラは、クローリングがしやすくなります。
ページネーションの設定を行うためには、link 要素で指定します。例えば、あるコンテンツが example1.html, example2.html, example3.html の 3 ページに分割されている場合、各ページには以下のように設定します。
<!-- example1.htmlの設定例 --><link rel="next" href="example2.html"><!-- example2.htmlの設定例 --><link rel="prev" href="example1.html"><link rel="next" href="example3.html"><!-- example3.htmlの設定例 --><link rel="prev" href="example3.html">
上記の例では、example1.html の次のページが example2.html を表しています。同様に、example2.html は前後のページを設定し、example3.html では前のページのみ表しています。
ページネーションの設定は任意の設定であり、必須ではありません。クローラは、ページネーションがなくても分割された複数のコンテンツの類似性を理解し、検索ユーザに最適なページを返します。ただし、クローラの判断は完璧ではないため、明示的にページネーションを設定することで、クローラにヒントを与えることができます。最終的な判断はクローラになりますが、ページネーションを設定することで、精度が向上します。
また、ページネーションは、同一のコンテンツが複数のページに分割される "canonical" とは明確に区別されますが、同時に設定することもできます。例えば、example2.html の設定例としては、以下のようになります。
<!-- example2.htmlの設定例 --><link rel="canonical" href="example2.html"><link rel="prev" href="example1.html"><link rel="next" href="example3.html">
ページネーションとユーザビリティ
無限スクロールとは異なり、ページネーションにはユーザビリティ上、注意するべき点がいくつかあります。モバイル端末からアクセスするユーザが増えているため、モバイルフレンドリーでなければユーザビリティは低くなります。それでは、ページネーションで注意すべきポイントを順に見ていきましょう。
クリック可能なボタンの領域
ページネーションのクリックできるボタン的な要素には大きく分けて "前に戻る"、"次に進む"、"ページ番号" があります。一般的にページネーションは横一列に並ぶために、モバイル端末では物理的なサイズ、または画素数的に非常に制限されてしまいます。ユーザビリティの低いサイトでは、ボタンのサイズが小さかったり、横スクロールが発生します。
これはページネーションに限ったことではありませんが、モバイルフレンドリーとなるためにはクリックできるボタン類を大きくすることが鉄則です。例えば、iOS のヒューマンユーザインターフェイスガイドラインでは、クリック可能な領域の最小サイズを 44 × 44 pt (約 7 mm)、ボタンとボタンの間隔は 2 mm 以上であると定めています。また、より慎重な操作が必要なボタンには 9 mm を推奨しています。
Microsoft の Design Universal Windows Platform によると、クリック可能な領域の最小サイズが 7 mm の場合、誤操作が 100 回に 1 回となり、9 mm では、200 回に 1 回になります。
ただし、これらのサイズは各端末の画素数を考慮する必要があります。例えば、サイズをピクセル数で指定しても、高解像度の端末で表示した場合、実際のサイズは 7 mm 以下になります。
ナビゲーションとしての役割
ページネーションはインターフェースであると同時にナビゲーションの役割も担います。その役割の内容は、"ユーザの現在位置"、"何ページあるのか"、"どのページに移動できるのか" になります。
ページネーションはユーザの現在位置をリンクの色、文字の大きさ、背景色、アニメーション効果など、様々な方法で提供します。いずれの方法にしても、ユーザが現在位置を認識できるようにするべきです。色だけに頼ってしまうと、アクセシビリティの低下を招くため、推奨されません。アクセシビリティについては、Web ユーザビリティ のページを参考にして下さい。
何ページあるのかを示すナビゲーションは、全体像を把握するために効果があります。ただし、コンテンツの量が増えると、最終ページが 100 ページになる場合もあります。ページネーションで 100 ページすべてにリンクを張るとボタンだらけになってしまうため、一般的には多くても 10 ページ前後のボタンのみ表示するようにしています。10 ページを超える場合は、"..." などの表記で省略していることを示します。
一般的なページネーションでは、"前に戻る"、"次に進む"、"ページ番号" のリンクがあります。"最初に戻る"、"最後に進む"、"ページ番号を入力" といったリンクや、ジャンプ機能を実装している場合もあります。
"最初に戻る" のリンクにはある程度の価値がありますが、"最後に進む"、"ページ番号を入力" のリンクにはあまり価値がありません。なぜなら、コンテンツの表示順が時系列順であれ、人気順であれ、最後のページに進むことは、もっとも価値の低いコンテンツにアクセスすることになるためです。また、ページ番号を入力させてジャンプするインターフェースについても、ユーザは何ページ目に何のコンテンツがあるかを知らないため、無用な機能であると言えます。
まとめ
ページネーションはページを分割する方法、ページを移動するためのインターフェース、またはナビゲーションとして機能します。しかし、情報を適切に分割するという点においては検討する余地も多く、ひとつの記事の中に設置している例もあります。
適切なページネーションは、多くの情報に対してアクセシビリティや、ファインダビリティを高め、サイトの回遊率も高めます。ページネーションの目的や役割は、ユーザが求める情報に速く、正しくアクセスできるようにするためです。そのため、Web パーツのひとつとして安易に組み込むだけではなく、どうすればユーザに対してアクセシビリティや、ファインダビリティを高めることができるか検討することが重要だと考えます。