スマートフォン向けページャーデザイン3選 PCからのUI最適化

商品一覧や検索結果のように、一覧を表示するページでは、ページを切り替えるためのページャー(ページナビゲーション)がよく使用されます。スマートフォンサイトでも、ページャーを使用することが多いのですが、PCサイトで使われるページャーといくつかの違いがあります。

PCサイトとスマートフォンサイトのページャー

以下の画像はPCサイトで使われるページャーの例です。

pager-2

  一方、スマートフォンサイトでは、次のようなページャーになります。

pager-sp-6

 PCサイトとスマホサイトのページャーを比べてみると、次のような違いがあることが分かります。

(1)スマートフォンサイトではリンク領域を拡大している
(2)スマートフォンサイトでは「次へ」「前へ」の文字の代わりに「>」「<」といった画像を使用する
(3)スマートフォンサイトでは特定ページへのリンク数が10から5に減っている

このうち、(1)はリンクやボタンをタッチしやすい大きさに変更する、というスマホサイトでは幅広く使用されているUIです。(2)は表示領域の狭さをカバーするため、ボタンをアイコン化して表示領域を節約するというものです。また(3)についても、表示領域の狭さをカバーするという意味で目的は同じですが、特定ページへのリンク数を減らすことで、ページャーが折り返ることなく、横1列に並べて表示させるスペースを確保しています。

ページャーは地味な存在ですが、UIをキチンと考えるとなると、小さな領域の割には実装に時間がかかってしまいますね。

ページャーパーツで変換した結果

ジーンコードのページャーパーツを使うと、PCサイトのページャーをスマートフォン用に変換できます。

以下は、あるPCサイトのページャーを変換した結果です。リンク領域の拡大、ボタンのアイコン化、ページリンク数の削減が行われていることが分かります。

PCサイト

pager-1

変換結果

pager-sp-5

以下は、「最後のページ」へのリンクを含むページャーの変換例です。このサイトではページ番号の区切り文字として「|」が使用されていますが、スマートフォンサイトには出力していません。

PCサイト

pager-4

変換結果 pager-sp-4

このように、ページャーパーツを使うとスマートフォンに最適なサイズ・UIのページャーを簡単に作成することができます。