スマホ向けページャデザイン 3選
商品一覧や検索結果のように、一覧を表示するページでは、ページを切り替えるためのページャー（ページナビゲーション）がよく使用されます。スマートフォンサイトでも、ページャーを使用することが多いのですが、PCサイトで使われるページャーといくつかの違いがあります。
関連記事：
PCサイトとスマートフォンサイトのページャー
以下の画像はPCサイトで使われるページャーの例です。
一方、スマートフォンサイトでは、次のようなページャーになります。
PCサイトとスマホサイトのページャーを比べてみると、次のような違いがあることが分かります。
(1)スマートフォンサイトではリンク領域を拡大している
(2)スマートフォンサイトでは「次へ」「前へ」の文字の代わりに「＞」「＜」といった画像を使用する
(3)スマートフォンサイトでは特定ページへのリンク数が10から5に減っている
このうち、(1)はリンクやボタンをタッチしやすい大きさに変更する、というスマホサイトでは幅広く使用されているUIです。(2)は表示領域の狭さをカバーするため、ボタンをアイコン化して表示領域を節約するというものです。また(3)についても、表示領域の狭さをカバーするという意味で目的は同じですが、特定ページへのリンク数を減らすことで、ページャーが折り返ることなく、横1列に並べて表示させるスペースを確保しています。
ページャーは地味な存在ですが、UIをキチンと考えるとなると、小さな領域の割には実装に時間がかかってしまいますね。
ページャーパーツで変換した結果
ジーンコードのページャーパーツを使うと、PCサイトのページャーをスマートフォン用に変換できます。
以下は、あるPCサイトのページャーを変換した結果です。リンク領域の拡大、ボタンのアイコン化、ページリンク数の削減が行われていることが分かります。
PCサイト
変換結果
以下は、「最後のページ」へのリンクを含むページャーの変換例です。このサイトではページ番号の区切り文字として「|」が使用されていますが、スマートフォンサイトには出力していません。
PCサイト
変換結果 
このように、ページャーパーツを使うとスマートフォンに最適なサイズ・UIのページャーを簡単に作成することができます。
関連記事：