はてなブログ・スマートフォンの新ページャ

はてなブログスマートフォンで見た時、前後の記事へのリンク(ページャ)が新しくなっていることにお気づきですか? こんな感じです。

いままでのページャは下記のようなデザインで、要素を横並びに表示していました。

f:id:ueday:20160606110527p:plain

しかし、スマートフォンの狭い画面では、長い記事タイトルのとき窮屈に見えてしまいます。また、左右どちらが新しい日付の記事なのか、一見わかりません。実際、ほかのウェブサイトを見てみると、ページャの表示方法は諸説あるようです。また、ラベル(「前・次」や「新・旧」など)も特に決まった体裁はないようでした。

はてなブログの新しいページャは、縦2列に「新しい記事」「過去の記事」を表示します。また、タイトルだけでなく記事のサムネイルを表示して、視覚的に内容をわかりやすくしました。これにより、前後の記事が読まれる可能性が高まります。

この変更は、今のところスマートフォンに対してのみ行っています。PCでの表示は、意図しないデザイン崩れを防ぐため元のままです。

なお、このブログ『つくるひと | はてな デザイナーブログ』はスマートフォンであってもPCのテーマで表示(レスポンシブモード)しています。気になる方は、ぜひスマートフォンからご自分のブログにアクセスして確かめてみてくださいね!