このページの本文へ

前へ 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 次へ

カテゴリートップへ

本記事はアフィリエイトプログラムによる収益を得ている場合があります

アクセスランキング

  1. 1位

    トピックス

    “持たない家電”ランキング、もはや定番のアレがやっぱり1位なような

  2. 2位

    トピックス

    思い切った慶應義塾 全教職員にNotion導入で168年分の知的資産をAIに食わせるプロジェクトが始動

  3. 3位

    トピックス

    リモートワークは福利厚生なの? ITエンジニアが本当に欲しい福利厚生第1位となる

  4. 4位

    ビジネス

    管理職こそ大事にしないとまずくないか? 約4割が「続けたい、と答えない」現実

  5. 5位

    トピックス

    ほぼスーパーで良くない? コンビニで「思ったより高い」と感じる人76%、実は中高年ほど割高感に悩んでるって知ってた?

  6. 6位

    トピックス

    インバウンドの頑張りランキングベスト3は「大分県」「岐阜県」「佐賀県」 努力が光る結果に

  7. 7位

    ビジネス・開発

    こんどは“市区町村の財政状況”が丸わかり デジタル庁「ジャパン・ダッシュボード」に地方財政データ追加

  8. 8位

    ITトピック

    管理職ほど機密情報をAIに入力している実態、なぜ?/27卒学生の就職人気、IT業界トップ企業は/最新インシデントの傾向10パターンまとめ、ほか

  9. 9位

    トピックス

    【無双状態】2025年、最も雑誌の表紙を飾ったのは「えなこ」! 1万誌を調査して見えた圧倒的カバークイーン

  10. 10位

    トピックス

    【人材争奪戦】大手企業の8割超が「高度IT人材」採用に危機感! 今一番欲しいのは「AI」と「セキュリティ」のプロだぞ

集計期間:
2026年04月19日~2026年04月25日
  • 角川アスキー総合研究所