このページの本文へ

前へ 1 2 3 次へ

長文もらくらく読めるJavaScriptライブラリ「bookreader.js」

たった6行でWebサイトのUIをガラッと変える

2008年06月13日 19時59分更新

文● 小橋川誠己/アスキーネタ帳編集部

  • この記事をはてなブックマークに追加
  • 本文印刷

 「こんな長いWebページ、まったく読む気がしない」。Webサイトを閲覧していてこんな経験をしたことは誰しもあるのではないだろうか。一方で、Webサイトを作る側にとっては、どこまでを1ページにまとめるかは常に悩むところだと思う。長いからといってむやみにページが分割されているのも考えもので、今度は「次のページへ」ボタンをクリックするのが面倒になり、ストレスがたまる。

 CogniTom Academic Designが作った「bookreader.js」は、そんな悩みを解決してくれるかもしれない。bookreaderは、本や雑誌をめくるような感覚で、Webページの本文を横にスクロールさせるJavaScriptライブラリだ。


「bookreader.js」のWebサイト。サイト自体がbookreader.jsを使ったデモサイトを兼ねている。中央にある [<] [>] をクリックすると1ページずつ、左右の端にある [<<] [>>] では2ページずつ(雑誌の見開きのような感覚で)ページを移動できる

 「Webサイトで横スクロール?」などという疑問はとりあえず横に置き、とにかくデモサイトを訪れてみてほしい。気持ちよくスムーズに切り替わっていく画面に、「おっ」と思われるのではないだろうか。

 動作がおもしろい(心地よい)というだけではなく、実際に長文を読んでみると、意外にもちゃんと読みやすいことを実感できる。bookreaderは、横スクロールとはいっても、まとまった“ページ”の単位でスクロールする。通常のスクロールのように、「読みながら画面を動かす」「それを目で追う」といった動きをしなくて済むので、視線が落ち着くのだ。また、ページの移動は、キーボードの矢印キー(←→)でも行なえる。操作面での負担も軽減される。


デモサイト「走れメロス」の一部。こちらは完全に文字だけだが、縦スクロールで続くよりもだいぶ読みやすいと感じた

前へ 1 2 3 次へ

ピックアップ