Bookrock

おもしろく こともなき世を おもしろく

Webサイトの長文ページを横スクロールで読みやすくする。

Webサイトの情報量は無限大です。

紙だと、これをA4で収めてとか、動画では尺は○分でとかどうしてもその量と言うのに制限があります。

ところが、Webページだと何ページ作っても問題ありません。せっかく伝えることがあるのなら、全部出しましょう、ということでページを作ったりするのですが、ここで困るのが、それをどのようにして読みやすくするのか。

Webサイトを作っている人には、よく分かると思いますが、縦に長いページと言うのは、とても読みづらい。

長いので縦にスクロールしながら読んでいきます。そうしていくうちに縦スクロールに視線がついていかなくなり、どこを読んでいたのか分からなくなってきます。
その視線の行方不明を避けるために、ポイントとなるような画像を置いたり、頻繁に小見出しを置いたりします。そういうことを行いますが、どうしても読むのに疲れてきます。
そのため、Webサイトでは長文は向かないと言われてきます。

ここは、Webサイトを作っている人からすると、大きな矛盾であり、伝えるための情報は無限に活用できるのに、本当にそれをやると読みづらく、人が避けるページになっていくのです。

何とかできないかと思いやる方法としては、ページを分割していきます。分割するのは、ページに変化を設けるため良い面もありますが、どこで切るかとか、増えたページをどのようにお互いのページから見せていくのかとか、また考えなければいけないことができてきます。

長文をうまく見せる方法はないか?


ありました。これです。

bookreader.js

bookreader.jpg

このbookreader.jsは、横スクロールで見せるJavaScriptです。

横スクロールのページってどういうものかは、このサイトを見て、右とか左とかのキーをクリックして試してみてください。

1ページが、縦にスクロールしないと言うことは、非常に目に優しいサイトになっています。

こういうページを見せる方法として、本のようにして見せるものもありますが、そういったものはページを画像として処理するため、元あったページを画像にする必要が生じます。また、画像ですから、SEOとしては非常に弱いサイトとなります。

ところが、このbookreader.jsは、ソースを見ると、普通にテキストが入っていますので、SEOとしてみた場合、普通のページとほとんど変わらないのではないかと思います。さらに、元あったページをそのまま活用できますので、作成するのが非常に簡単です。


対応するブラウザは、

と言うことですから、問題ありません。

タグも、
[H1] : 大見出し。グリッド3行分。
[H2] : 中見出し。グリッド2行分。
[H3] : 小見出し。グリッド1行分。改ページ直後でなければ、直前に改行を追加。
[P] : 本文。グリッド1行分。DIVタグも、Pタグと同一動作。
[BR] : 本文中の改行。
[HR] : 改ページ。
[IMG] : Pタグの内部で使うと、インライン表示。それ以外では、次の改ページ
位置に挿入されます。この場合、ALT属性を指定しておくと、画像の下部にキャ
プションとして表示されます。
その他 : 本文中で、STRONG, STRIKEが使えます
と言うことですから、よほど珍しい装飾をしたいという場合を除いて問題ないと思います。

利用料も無料と言うことですから、一度試して見ることをお勧めします。