お久しぶりです、デザイナーのスライです。
怒りのUI第9回目「ページネーションのUIを考える」です。

ページネーションとは

ブログ記事やサイト内検索など、動的に生成されるページにおいて、
ナビゲーションの役割を果たすUIのことを指します。

ページネーションのおさらい

WEBサイトにおいてページネーションを使用する機会は多くあると思いますが、
ページネーションをデザインする際のポイントをおさらいしましょう。

クリッカブルな要素は大きく、認識しやすく

誤クリックを防ぐためにも、クリッカブルな要素は十分な大きさを確保しましょう。
また、クリッカブルな要素だとすぐ認識できるデザインにしましょう。
（アンダーラインを入れる、テキストの色を変える、ボタンにする、など）

現在地を認識しやすく

ナビゲーションであることから、現在地をすぐ認識できるデザインにしましょう。
（テキストの色を変える、級数を大きくする、など）

次のページと前のページへ遷移する要素を作る

「11」の次は「12」、「12」の次は「13」と、ページを順番に遷移する場合、
クリック要素の位置が変わっていくのはユーザーにとって好ましくありません。

次のページと前のページへ遷移させる要素を作ることにより、
ユーザーは常に同じ要素をクリックすればよくなります。
それはユーザーにとってより快適なサイト回遊へと繋がります。

・・・ん？

この記事を執筆中に、私は疑問を感じました。

他サイトのページネーション例を見る

百聞は一見にしかず、他社のページネーション例を見てみました。
左からamazon.co.jp、アメブロ、Google、です。
（※2017年3月13日現在、スマートフォンで閲覧した場合）

各サイトの特徴

3サイトで共通するのは、前のページと次のページへ遷移する要素があること。
アメブロとGoogleに共通するのが、最初のページと最後のページへ遷移する要素があることです。

そして「無い」ことで共通する点が1つあります。
例えば「1」「2」「3」といったナンバリングされたクリッカブル要素がありません。
（PCサイトにはアメブロ以外ナンバリングされたクリッカブル要素はあります）

前述の私の疑問とは、まさにこの要素のことです。

ページネーションを使用する状況を考える

記事の冒頭に書いた通り、多くの場合ブログやサイト内検索で使用されると思います。
ブログ・サイト内検索共に、閲覧しているページ以外の情報が欲しい場合に
ページネーションを使用すると考えられます。

つまり、ユーザーの大半は前のページと次のページへ遷移する要素しか使用しないと考えられます。
動的に生成されるページネーションにて、いきなり「10ページ目の情報が見たい」
と思うユーザーは皆無に等しいでしょう。

現に、スマートフォンで閲覧した場合、3サイト共にナンバリングされた要素は削除されています。

ナンバリングされた要素は必要なのか？

• ユーザーが使用する頻度は限りなく低いと思われる。
• PCサイトでスペースがあるからといって、不要な要素は入れるべきではない。
• ユーザーの混乱を最小限にするために、PCとスマートフォンでなるべくUIは統一する。

上記の理由を元に、ページネーションを考えました。

それぞれ必要と思われるクリッカブル要素4つのみという、シンプルなUIです。
このUIであればPC、スマートフォンでUIが統一されているためユーザーが混乱することはないでしょう。

どのくらいページがあるのかユーザーに認識させるため、
「最初へ」「最後へ」のテキストをナンバリングに変更したUIも作成しました。

まとめ

UIをデザインする際、当たり前過ぎて無意識の内にデザインしてしまうことがあるでしょう。
私もページネーションにはナンバリングされた要素があって当然、と考えていました。

今回の記事を書くにあたって、ページネーションのポイントをおさらいしている中で、
PCデザインにあってスマートフォンデザインにないものがある、と気づきました。

スマートフォンの普及によりユーザー環境は大きく変わりました。
PCデザインの「当たり前」の中には、モバイルファーストでは不要なものがあると思います。
「当たり前」に囚われず、環境に適したUIデザインを心がけたいところです。