今回のテーマは「読む」

Web上にはさまざまな情報が存在している。画像、動画、音楽などリッチメディアのデータも多いが、基本はテキストデータになるだろう。ブログやコミュニティサイトなどには文字が膨大に存在している。短い文章であればコンピュータ上で読むのも簡単だが、小説のような長文をコンピュータで読むのは辛いのではないだろうか。

それは解像度や輝度、フォント、リフレッシュレート、デザインの問題など多数の要因が絡んでいる。だが、徐々にではあるが改善されてはいる。それはハードウェアレベルで解決するものもあれば、ソフトウェアレベルで解決できるものもある。

今回はそんなコンピュータ上で「読む」ことに対するソフトウェアレベルでの改善案を紹介したい。Webアプリケーションやオープンソース・ソフトウェア(OSS)を活用すればきっと今よりも読みやすさが増すはずだ。

今回紹介するOSS・Webアプリ
『Readable』 ブックマークレットで読みやすく整形
『Read It Later』 iPhoneと連携する"あとで読む"
『Better Web Readability Project』 Webブラウザで文章を読みやすくする
『bookreader.js』 JavaScriptのドキュメントリーダ


ブックマークレットで読みやすく整形

名称 Readable
URL http://readable-app.appspot.com/

『Readable』はブックマークレットを配布して展開するWebアプリケーションだ。任意のWebサイトに対してこのブックマークレットを実行すると、本文部分と思わしき部分をピックアップし、文字サイズなどを調整して表示してくれる。これにより、デザインによって見づらいブログも読みやすい状態になる。

設定画面。できあがったブックマークレットをブラウザに登録すれば準備完了

設定項目はフォントの種類/ サイズ/ テキストボックスの幅/ マージン/ カラーテーマなどになる。さらにフルコントロールにすると画像の回り込みや行間などこまかく設定できるようになる。設定が終わったらそのブックマークレットをWebブラウザのツールバーに登録すればよい。

きれいに本文だけを抽出できると読みやすい

Webサイトのデザインによってはツールバーやフッターなどの情報も表示されてしまうだろう。だが、文字サイズや余計な装飾を省くだけでずいぶんと読みやすくなるはずだ。ブログ、メディアサイトで威力を発揮することだろう。



iPhoneと連携する"あとで読む"

名称 Read It Later
URL http://readitlaterlist.com/

『Read It Later』は和訳すれば「あとで読む」だ。ブックマークレットで配布されており、任意のWebサイトで実行すれば、あとで読むためのリストに登録されるようになる。ここまでであればソーシャルブックマークサービスと変わらない。しかし、Read It Laterの場合は専用のiPhoneアプリケーションが提供されているのが特徴だ。

WebブラウザやiPhone、Firefoxアドオンを使ってあとで読みたいURLを登録していく

このiPhoneアプリケーションでは登録してあるWebサイトの情報をiPhone上で閲覧できるほか、デザインを除いたテキストモードで閲覧するようにもできる。同期する際にコンテンツをダウンロードし、オフラインでも閲覧することもできる。

iPhone版。テキストのみにすればぐっと読みやすくなる

iPhoneをはじめ、携帯電話であればあまりチカチカせずに文字を読むことができる。長文コンテンツや小説サイトを登録しておき、オフラインでゆっくり読めるのが魅力的なWebサービス＆アプリケーションだ。



Webブラウザで文章を読みやすくする

名称 Better Web Readability Project
URL http://code.google.com/p/better-web-readability-project/

いかにパソコンで読みやすい状態にするか。いわば"リーダビリティ"を追求するのが『Better Web Readability Project』だ。オープンソースのプロジェクトなので、言語の違い(英語の場合、頭文字のサイズが大きくなっている)、デバイスの違いなどが反映されやすいだろう。

コントラストを抑えたり文字サイズを調整したりしてブラウザでも文章を読みやすくしている

現状では背景色は薄い暖色系で、文字とのコントラストを抑えられている。文字幅は480pxlになっており、左右の移動を少なくしている。そのほか、画像の回り込み、行間、文字サイズの設定などでリーダビリティを高める工夫が凝らされている。

下線がついたバージョン。文字が多い場合はこちらの方が読みやすい

Better Web Readability Projectでそのサンプルを見ると、シンプルなWebデザインで疲れづらい、そして読みやすさが感じられるはずだ。ブログなどをお持ちの方は参考になる点が多いのではないだろうか。



JavaScriptのドキュメントリーダ

名称 bookreader.js
URL http://code.google.com/p/bookreader-js/

日本語と英語では事情が異なるため、リーダビリティは一筋縄ではいかない。特にインターネットの普及によって横組みの日本語文章には日常的に接するようになった。そうであっても読みやすい日本語環境を提供するのが『bookreader.js』だ。

上下スクロールが長くなる文章を分割して、横スクロールに変更してくれるJavaScript

bookreader.jsは、横組み文章を適当な幅で自動的に分割して右に並べてくれる。JavaScriptのファイルを読み込むだけで使えるというシンプルさだ。キーボードの左右やマウスで矢印をクリックすることで、段落ごとに読み進めることができる。縦のスクロールによる動きがなくなると読みやすさが大きく向上する。

次期0.8系。より読みやすくなっている

現在の0.4系では文字サイズの変更などがあり、次期0.8系ではサイドバーによる作品情報紹介やページフッターにツールバーが追加されるようになっている。フォントにきれいなものを使えば、長文を読むのもずっとラクになるはずだ。

いかがでしたか?

コンピュータ上で読みやすいコンテンツを提供する技術というとPDFなどが思い当たるだろう。だがコンテンツの自由度が下がってしまうため、万人に対して読みやすい状態とは言えなくなってしまうのが欠点だ。Webブラウザだけでリーダビリティが追求できれば、相手の環境や状態に応じてコンテンツの組み方を変えられるようになる。

米AmazonによるKindle DX、Googleブック、O'Reilly Japan Ebook Storeなど日本でも電子書籍に対する注目は徐々に高まってきている。個人がブログやWebサービスを使って情報発信するようになっている昨今、読みやすさを考えて発信するのは大事になるのではないだろうか。

著者プロフィール:MOONGIFT 中津川 篤司(なかつがわ あつし)

1978年生まれ。オープンソース紹介サイト「MOONGIFT」管理人。プログラマ、SE、ITマネージャを経て、オープンソースのビジネス活用を推進する。現在は独立し、Webサービスのコンサルティング、プロデュースを行う。