ページめくりの UI 考察 (1)

iPad Pro や Kindle 端末で電子書籍を読むことが圧倒的に増えたのですが、読めば読むほど本というデバイスには感心します。

そして、本に着目するとき、ページめくりの UI について思いを馳せます。この話題は一体どれほどの人が語り尽くしたのかを考えると書かなくてもいいかとも思うのですが、一応書いてみます。

まず、ページをめくるといっても、そもそも画面は 1枚なはずなのに、タブレットをランドスケープモードで閲覧して、真ん中でページをめくるので行為としては、おかしな話ですよね。それでもなぜかしっくりきます。

ただ、このページめくりがしっくりきているのは、横書きの書籍の場合。

縦書きの場合、iPad Pro とかで Kindle の縦書きの書籍を見ると、見開きだけど縦書きの文字がずっと続いていて、ページの境目がない状態になります。つまり2ページ分で 1つのページみたいになっているのです。

遠い記憶を遡ると、昔は縦書きレイアウトの書籍も真ん中に線がはいっていて、左ページと右ページという構成だったように思います (ただし、こちらについては自信なし)。　縦書きが見開きで真ん中の境目なくテキストが並ぶのは、自分の中のメンタルモデルがうまくマッチしなくて読みにくいと感じています。

ページめくりの UI は、理想的には iPad のブックアプリ

さて、ページめくりの UI に話を戻すと、昔からページをめくる UI は多くの人が苦心して、様々なデザインを行ってきました。

Flash の頃から、ページをめくるときに紙がめくれるようなアニメーションをするもの、端っこがちょっとめくれていてクリックすると次のページにパッと切り替わるものなど様々なアイデアについて実装が試みられています。ただ、悲しいことにそのうち多くは今では見ることも出来ませんが。

例えば、電子パンフレットビューワーみたいなのは一体いくつ作られてきたのでしょうか。僕自身、電子パンフレットビューワーは何個か作りました。

ページめくりという行為は、ページをめくって次のページに移動する他にもいろいろな目的があります。ちょっと書き出してみましょう。

• 次のページに進む
• 前のページに戻る
• 指定したページに移動する
• 次の見出しや章まで進める
• 本を閉じて半分のサイズとして持ち運ぶ
• 興味のあるキーワードをパラパラめくって探す
• 昔心にひっかかったテキストが書かれたページを記憶を頼りにパラパラめくって探す
• 記憶に残っているページ構成のみを目当てにパラパラとめくって探す
• 挿絵が書かれたページまでパラパラめくって探す
• なんとなくパラパラめくってながめる

前半の4つは、既存の UI でもよく実現されていることですね。基本機能はそれほど電子書籍になっても問題はなさそうです。また、「本を閉じて半分のサイズとして持ち運ぶ」についてはハードウェア的な機構も関わってくるから実現が難しいことの一つでしょう。

ただし、「〜パラパラとめくって〜」と書いた6つについては、現在でもなかなか実現できていない UI といえます。パラパラという行動は、目的地にすぐたどり着く以外にも役割があるようにも思えます。

なんとなくパラパラめくって探すという行動をしやすい UI ですが、個人的には、iPad のブックアプリは、パラパラとめくってという機能がうまく出来ていると思っています。

iPad のブックアプリで、PDF を開き、画面の中心あたりをタップすると、画面下部にサムネイルが表示されます。これを指でなぞると、画面に表示されているページが次々と高速に速度で切り替わります。

似たパターンの UI に、動画共有サイトのプログレスバーがあります。

例えば、YouTube では、プログレスバーのインジケーターをドラッグすると、ドラッグ時にサムネイルもセットで表示され、高速なランダムアクセスが可能になります。動画の場合は画面の雰囲気で探したいもの覚えてられるからサムネイルでも良いですよね。

書籍の場合はページの雰囲気だけでなく、文字も認識できる必要があるから iPad のブックアプリのようにページ全体が切り替わる必要があります。

もう少し考察を続けます。