MagicReader制作秘話：早送り・巻き戻しUIができるまで【アニメーションの工夫など】

8/22/2012 Leo Rivas（リオ・リーバス） 0 Comments

バージョン1.4でMagicReaderにページの「早送り・巻き戻し」機能が追加されました。以前のUIからまったく新しくゼロから作り直したのですが、今回はそのUIが生まれるまでの話を掘り探ってみます。

まず、このUIはVer.1.4を作り始めた当初、最初から最終系のイメージが出来ていたわけではありません。もともと、MagicReaderはページの両端のどちらかを長押しするとページが自動的にパラパラめくれるという仕様だったのですが、これが意外にも間違えて長押ししてしまって誤動作が発動する事が多々あり、ストレスになっていた部分なので改良しようと考えていました。

最初は、長押しをしてもいきなりページがめくれはじめるのではなく、長押ししたら本の横の厚みがスっと出て来て、その時点で指を動かすとパラパラめくれはじめれば、仮に間違えて長押ししてしまっても離せばキャンセルできる、と考え、そういう仕様に変更するだけの予定でした。

しかし、いたのさん（@Kumanbow）から送られてきた変更後のバージョンは話とはまったく違った物になっていました（笑）これはいつもの事なのですが、僕達はお互いに話合って決めても、作っているうちにもっと面白いアイディアを閃くと、驚かそうと思って勝手に作って出来上がってから渡すような事が多いのです(^^;; なのでその時もまたやられた！って思いましたね。

その時に渡されたバージョンでは、ページの端を長押しすると上下に矢印が付いたコントローラーが出て来て、上下にスライドしてページを進めたり戻ったりする感じになっていました。指をスライドさせる距離に応じてスピードが変化するのもこの時点から組み込まれていました。

面白いと思ったのですが、問題は上下だと非常に分かりづらいという点でした。上下になった理由としては、元々ページの端を長押しする仕組みだったので、左右だと左にスライドするスペースが足りないというネックがあったからです。しばらく使ってみたものの、どうも直感的に使いこなせなかったので、やはり左右じゃなければダメだという結論が出ました。

そこで、ページの端だけではなく、画面のどこでも長押し出来るようにすれば問題が解決できると思いつきました。どうしても元々ある物を変更しようとすると、以前の形に捕われがちになってしまい、左右の長押しから頭が抜けられない状態になっていて、ちょっとした盲点でした。左右どちらにでも移動できるのであれば、ページの端に限定する必要はなかったのです。返って場所は限定せず、どこからでもコントローラーを呼び出せて、好きな方向にめくれた方が使い勝手も良いので、この方向で進める事になりました。

コントローラーそのものは、目立ち過ぎず、見えずらくもなく、背景がどんな色になってもバッティングしづらい半透明の白をベースに考え、最終的にこういうデザインになりました。矢印の出るタイミングや、動くスピード、操作感なども、何度も二人で意見を出し合って調整しました。

この段階ではまだページがめくれる時の横の（本の厚みの）部分は以前のままの状態だったのですが、どうしてもそこが気になってしまって、板野さんには言わずにコッソリ作り直す事にしました。これはどちらか驚かすというよりは、まったく違う物に作り直すという事はプログラマーである板野さんの作業を増やしてしまうという事でもあるので、手間がかかってでも作り直したいと思わせるだけの物を用意する事がデザイナーの仕事でもあり、プログラマーに対しての礼儀でもあると思ったからです。

今回こだわりたかったのはページめくりのアニメーションです。電子書籍を紙の本と同じように見せたいというわけではなく、あくまでも紙の本をめくる時の気持ち良さを再現したかったのです。使い手に自分でめくっているという感覚を伝える為には演出が重要になってきます。そこで今回はページの端の部分をしっかりアニメーションさせてあげる事で、ページの動きを表現する事を試みました。この時点で既に板野さんはページそのものにも動きを付けてくれていたので、めくれている方向が分かりやすくはなっていたので、あとは横の部分の動きにかかっていました。

最初は単純に一つ一つのページが同じ距離を均等に動くように作ってみたのですが、やはり予想していた通りこれでは変化が無さ過ぎて気持ち良くありません。エスカレーターみたいですよね！

そこで、一定の動きだと機械的になってしまう為、波のような動きを意識しました。

一つ一つのページがまったく同じ動きをするのではなく、それぞれのページの動く距離を微妙に変えてみました。あるページは4ドット分動いているのに対して、あるページは3ドット、あるページは2ドットだけ、と言った感じです。これを全部で3フレーム、全てバラバラの動きにする事で、動きにリアリティーが生まれました。

これが最終版のゆっくり目のGifアニメーションです。