このページの本文へ

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

    デジタル

    「そんなことも知らんで、介護やってるんですか?」 救急隊員の一言からkintone×AIの組織変革が始まった

  2. 2位

    TECH

    Claude CodeのPlan modeをやめてみる ~grill-meスキルで一歩ずつ設計を固め、アプリを作る~

  3. 3位

    ネットワーク

    「手のひらネットワーク機器」第4弾が登場、テーマは“ShowNetを手のひらに”! こだわりの両面マウントや高密度ポートも 6月11日発売

  4. 4位

    TECH

    Obsidianで構築したエンジニアの「第二の脳」― 個人ナレッジベース構築のすべて

  5. 5位

    TECH

    出自で決まる「SASE」の最適解 主要外資ベンダー5社のコンセプトと強み

  6. 6位

    TECH

    FortiGateの圧倒的シェアをサプライチェーン防御に生かす フォーティネット 2026年度事業戦略

  7. 7位

    デジタル

    ブラックスケルトンモデルも登場!ヤマハ初のWi-Fi 7対応AP「WLX333」「WLX232」投入

  8. 8位

    ビジネス・開発

    「デザインの仕事は半減するかもしれない」 MIXIデザイン本部が挑む「AIネイティブなものづくり」への転換

  9. 9位

    TECH

    酵素遺伝子の喪失がカギとなる、大腸菌がカメムシ共生細菌へ変化する仕組み

  10. 10位

    ITトピック

    SCS評価制度でセキュリティ投資「増額予定」が8割/大企業と中小企業のAI導入格差は2.7倍/情シスの3人に2人が「シャドーAI増加」実感、ほか

集計期間:
2026年06月01日~2026年06月07日
  • 角川アスキー総合研究所