ぼくのかんがえる電子書籍リーダーのUI : 紙の書籍のUIを真似ただけでは足りなくて

 ファミコンが子どもの心を鷲づかみにしていた時代に誰しもノートに書いた「ぼくのかんがえるゲーム」。そんなノリで電子書籍リーダーのUIについて書いてみます。

 まず現状から申し上げると、iPadなどのタブレットPCがで利用できる電子書籍リーダーアプリのUIはほとんどが以下のような感じです。

iPadのiBooks UI
iTunes App Store iBooks より

 基本的に紙の書籍のUIをベースにしているわけですが、
 

正直、いろいろと足らんと思うのです。 
 

 例えば、ですが・・

  • 複数の本を同時に開けない。
  • 複数のページを同時に開けない。
  • 上の2つと関係しますが、複数の本やページを見比べることができない。
  • ページ間の遷移が酷く面倒。19ページから67ページに移動とかそんなピンポイントな移動は「無茶言うな!」という気分になる。
  • 今日はあと一区切りでとおしまいにしようとか思っているけど、その一区切りがどれくらい先か、数値による表示はあるけど実際のところようわからない。←さすがに言いがかりか?
  • ブックマークとかしおり機能とか沢山つけてしまうと、後で使おうと思っても一杯になって整理も「はぁ、もうめんどくさい!」←ものぐさですいません。

 
 とかとかいろいろと不満がでてくるのです。本文と注を行ったり来たりする学術書は結構辛い、というわけで、電子書籍にあるべきUIとは何かについては、たまにいろいろと妄想したりするのですが、こんなUIどうでしょうということで、少し書いてみました。 
 

○複数の本やページを同時に開く

 ブラウザのタブのようなUIはどうでしょう。こんな感じで同時に開いてタブでコンテンツの表示を切りかえるのです。
ウエブブラウザのようにタブで同時に複数のページを開く電子書籍のUIの図。この図ではタブを4つ開いており、うち2つは同じ書籍の異なるページ、のこり2つは別のタイトルの書籍のページをそれぞれ開いている

 同じ本の複数のページはもちろん、複数のページを同時に開きます。タブを切り替えるとこんな感じで。

最初の図のタブを切り替えた図。タブを切り替えることで前に開いていたページを保持しつつ別のページを閲覧できることを示している。
 

○複数の本やページを同時に表示する

 電子書籍の大きな欠点は複数の書籍を同時に開いて見比べることができないことです。本ならば並べて見比べることもできるんですが。電子書籍でもやりたいですよね。EPUBやmobiはリフローでデバイスのサイズの制約をあまり受けません。だからiPadでもスマホでも読めるわけですが、ならばこんな感じで同時に表示させていはいかがでしょうか。一方はスマホサイズで表示させるとか。

同じ画面上で複数のページを同時に表示した図。ある本を読みながら、別のページを参照したいという場合の同時表示なので、後者についてはやや狭い領域に表示されている
 

○さっき見たページを行ったり来たりしたいんですよ

 ということで、以下のようなどこかでみたことのあるボタンは必要ですよね。履歴を使って行ったり来たりと。すでにこの機能も備えているものもあるようですが、Webブラウザと比較するとまだまだおまけという感じが拭えません。

ブラウザの戻るボタンと進むボタンに似たボタン
 
 このボタン、次で述べる検索機能が実現するとより重要になってきます。検索結果を行ったり来たりしなければなりませんので。

○目次だけでは足りません

 電子書籍の中を自由自在に動くにはパラパラとページを順番にめくったり、目次からリンクをたどって飛んだ行ったりするだけでは全然足りませんので、やはり以下のような検索機能は必須だと思います。目的地にはずばっと行きたい。

検索窓の図

 すでに上のような検索窓は現在の電子書籍リーダーでも備えています。しかし、WordやPDFリーダーの検索機能のようにヒットした結果を順番に見ていくという本当にただのテキスト全文検索なものが多くてあまり使う気になりません。

 検索といったら、やはり以下のように検索結果を一覧してほしい。できれば、読者にとって重要な順番で、というと曖昧ですが、線やコメントつけたものを上位に上げる、すでに読んだ部分を上位に上げる、逆に未読な部分を上位にあげるとかいろいろあると思うんです。今読んでいる箇所に関係が深い順とかでもいい。もっとソーシャルでもいいし、PageRankでもいい。

Googleライクな本文の全文検索結果一覧

 ちなみに上では今開いている本の検索結果を一覧していますが、同時に今開いている本やライブラリに登録されている本を検索してくれるとさらに嬉しい。上の図でもアンダーラインに靑地とかで表示してそれっぽく見せていますが、リンクが貼られて自由に検索結果を行き来できるとよいですね!
 
 

○電子書籍でパラパラページめくるのとか厳しいのでスクロールできるようにしてください

 紙の書籍だとページをぱらぱらめくりながら、内容をざっと確認しつつ、目的のページに移動とか簡単にできますが、全く同じことを電子書籍でやるのはビジュアル的にはともかう、実用的ではないと思います。それで、紙の「ぱらぱら」の代わりにスクロールはどうでしょうかと。
 
 コンテンツの遷移の方法にもいろいろありますが、ここではスクロールとページングの2つを比較してみたいと思います。完全に主観ですが、この2つ、こんな違いがあるんじゃないかと。

・スクロール
 コンテンツの内容を確認しながらすばやく遷移することができる。しかし、スクロールするとコンテンツ全体が動くので、次に目で追うべき文字を一瞬見失う、もしくは見失わないような注意が必要になる。コンテンツを遷移する度に感じる小さなストレスは長い文章をじっくり読みたい時には堪えるかもしれません。しかし、まるごとコンテンツが入れ替わるページングと異なり、少しずつコンテンツが遷移していくので、コンテンツの前後の確認がしやすいことは大きな利点です。

 段落の間は空けましょうとか、フォントサイズに強弱つけるなどのWebならではの文章作法はスクロールしながらでの読みやすさを追求した故かもしれません。 

スクロールによるコンテンツ遷移の図 

・ページング
 ページングとはコンテンツを1ページ単位で分割して表示する方法です。つまり、1スクリーン単位でコンテンツを分割し、次のコンテンツに遷移する場合は今表示しているコンテンツと続きのコンテンツとまるごと入れ替えることになります。コンテンツの次の開始点が縦書なら右上、横書なら左上と決まっているのでページが切り替わっても次に目で追うべき文字を探す必要がないので、スクロールで感じるようなストレスはあまりない(はず)。長文をじっくり読むことに向いていると思います。

ページングによるコンテンツ遷移の図

 iPadのInstapaperアプリがスクロールとページネーション、どちらも使えるようになっているのでiPadをお持ちの方は試されると面白いかもしれません。
  
 つまり、

  • じっくり読みたいときはページング
  • 紙の本のようにパラパラ内容を確認しながらすばやくコンテンツを遷移させたい場合はスクロール

がよいのではないかと。だから、電子書籍リーダーには両方使えるようにしてほしいと思うのです。 
 
 
 

○現時点でのまとめ

 つまり、これまで上げたUIについてまとめると 

  • ブラウザのUIを取り入れてください。 
  • Webのナビゲーションも取り入れてください。

となります。こういうことを書くと、  
 
 

電子書籍はいずれWebに吸収されるとでも考えているのだろう
 
 
とか言われそうですね。しかし・・

「Webが…今のままでずっといると思うなよ……!!」
「電子書籍が…今のままでいると思うなよ……!!」

 ということで、電子書籍がWebに吸収されるという考えを持っていると思われるのは私の本意ではありません。Webも電子書籍も今後、その有り様から変わっていくだろうと考えていますので、どちらか一方がそのまま残って片方を吸収するということはないのではないかと考えています。

しかし、UI的には電子書籍はブラウザやWebに学ぶところが多々あるはずです。紙の書籍と電子書籍とUI的観点から比較して今でもはっきり言えることは、 
 

電子書籍には物理的なUIがない
 

ということです。 

 紙の書籍には本の厚さ、紙質、本の重さ、さらにいうとコンテンツに特化した装幀などがあります。コンテンツに直接触ることができるUIを持っているのです。それを前提としての紙の書籍のUIなのですが、電子書籍にはそれがありません(紙の書籍のUIについては一度別のブログで書きました)。電子書籍はナビゲーションを1つのスクリーン上で実現しなくてはならない。物理的なUIを持つ紙の書籍のUIを真似てはいろいろと足りないというのはそういう理由です。

 物理的なUIは使えない、1つのスクリーン上で全てを実現しなくてはならないという点ではWebも共通しています。ならば、そのWebの閲覧ソフトであるブラウザ、そしてコンテンツであるWebには学ぶべき点は多いのではないかと思うのです。Webブラウザは1つのスクリーンですべてのナビゲーションを実現しなければならないという制約下で20年以上試行錯誤してきたわけですから。 
 

※上の図で書籍の本文の一例として使用させていただいた書籍

河口慧海『チベット旅行記』(青空文庫)より
宮本百合子『しかし昔にはかえらない』(青空文庫) 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です