qproject

Digital Reading UI/UX, 2017

201797日、プロジェクト「キュー」が始動しました。三島賞受賞作家・上田岳弘氏の最新小説「キュー」が、日本で最も歴史ある月刊文芸誌『新潮』と日本最大級のインターネット情報サイト「Yahoo! JAPAN」のスマートフォン版において、9ヶ月間に渡り同時連載されます。
WEB上での読書体験、UI/UXのデザインをTakramが担当。Takramは、スマホウェブならではの小説の読書体験を考えるにあたって、文字組と挿絵にこだわり全体を設計・デザインしています。今後単なる小説の連載という枠組みを超えて、新潮社、Yahoo! JAPANTakram3社と上田岳弘氏が共同でひとつの作品を作り上げていきます。

イントロダクション

「キュー」は誌面のみならずウェブ上で公開される小説です。スマホ向けウェブは本来、日々のニュースなどいわゆる「フロー情報」が多く流通する場です。一方小説は、長時間の読書が必要となるため(そして即時的に意味を持つというよりもしばしば遅効的に読者に影響を及ぼすため)いわば「ストック情報」です。小説をスマホ向けウェブで発表するという試みは、ある種矛盾するものづくりに解を見出すような取り組みとも言えます。
もとはYahoo! JAPANより「新しい読書体験を想像してください」と声がけをいただきましたが、それを拡大解釈し、どうせなら「スマホならではの読書体験のスタンダードをつくりたい」と考えました。
Takramが着目したのは、スマホの長時間読書で気になる「目と手の疲れ」です。小さな文字を長時間見つめると目が疲れやすく、またたくさんのページめくり(スクロール)をすると親指が疲れやすいものです。以下、それらに対するUI/UX上の工夫を紹介します。

文字組とそのUI

文字組とそのUIは「縦書き・縦スクロール・ページング」という組み合わせを用い設計・デザインしています。
ウェブページでは横書きが主流ですが、今回は純文学の小説作品であるため「縦書き」としています。ただ、長い時の洗礼を受けて読みやすく最適化されている紙の本をそのままなぞることはできないため、スマホ向けウェブならではの操作性が求められます。
そこでページめくりは「縦スクロール」を用いています。これは一般的なウェブサイトで親しまれているUIであり、また親指の関節の可動域を考慮した際に(多くの電子書籍アプリで用いられている)横スクロールよりも負荷が少なく、長時間読書をしていても疲れづらい設計となっています。
次に「ページング」です。普通ウェブページでは、親指が動いた距離だけ新たな行が表示される「無段階スクロール」が一般的ですが、今回は1ページずつの文章のかたまりがスクロールする「ページング」方式を用いています。このとき上下方向の移動量が多くなるため、スクロール中の動き全体をアニメーションとして描画するのではなく、中間フレームを省いています。スクロール動作を始めると、まず現在のページが透明になりながら消え、次のページが到着寸前の位置に半透明で現れ、次第に見えるようになります。一連の動きは合計1秒に満たない細かなUI/UXですが、これにより画面の動き・ちらつきを減らし、目が疲れにくい設計となっています。
このように「縦書き・縦スクロール・ページング」という組み合わせにより、目も手も疲れにくいUI/UXを目指しました。

挿絵としてのGenerative Art

上田氏の作品世界をデジタルプラットフォームならでは挿絵として表現するため、Takramでは作品テーマと符合するジェネレーティブアートを毎月製作し、連載と合わせて毎月発表します。
今回上田氏は「パーミッションポイント」というモチーフを小説に取り入れています。これは人類が経験する「進化の通過点」を指す言葉で、初回の「一般シンギュラリティ」を含め、9章の中で合計9つが登場するとのこと。Takramはこのパーミッションポイントをテーマに、合計9つのジェネレーティブアートを発表します。
ジェネレーティブアートは一人ひとりの画面で違う絵柄となるアニメーションとして表示されます。例えば初回配信に掲載される「一般シンギュラリティ」では、読者がタップした画面上の位置とその時刻をきっかけにアニメーションが生成される仕組みです。「読者の数だけ」異なる挿絵が生まれることとなります。

※ジェネレーティブアートとは、自律的システムにより部分または全体がつくられる芸術作品を指します。作者が用意するのはアルゴリズムであり、作品そのものではありません。アルゴリズムに従って実行された結果が、自律的に生成(ジェネレート)されます。

「一つの文学作品に読者の数だけ異なる挿絵が寄り添う」という出来事を楽しむため、挿絵をSNS場で共有できるようにしました。表示されるキャプションには日付・時刻が含まれるため「キャプションも絵柄も全員異なる挿絵」として楽しんでいただければと考えています。

今後の展開

日本で一番長い歴史を誇る純文学の雑誌と、日本で最大規模のウェブポータルが出会う場で、期待の新人作家の最新作が発表される。そのプロジェクトに参加させていただけるというのは、とても貴重な機会です。Takramが依頼内容を拡大解釈し「スマホならではの読書体験のスタンダードをつくりたい」と考えたのは、この枠組み自体に大きな魅力と可能性を感じているからに他なりません。
実は、初回リリースには採用されていない機能やアイデアがまだまだ複数あります。Takramとしては、今後四者連携のもと、それらも順次公開できたらという思いがあります。
また我々の期待としては、Yahoo! JAPANがこのプラットフォームを(たとえばブログシステムとして)一般に公開し、さらに文学の裾野を広げる、というシナリオもあり得るのではと半ば勝手に夢想しています。今回のように「ある作家を応援する」という取り組みも継続しながら、その先には「あらゆる作家」、さらには「あらゆるネットユーザ」が自らの文章を発表できるプラットフォームになる。そのような選択肢もある得るのではないでしょうか。それにより、スマートフォン向けウェブの上でも様々な作品が書かれ流通するのではと思います。
現在進行形のプロジェクトです。多くの人がこの小説に触れることで、文学、デジタル、デザインの交点に新たな文化が花開きます。今後の進化にもご期待ください。

https://bibliobibuli.yahoo.co.jp/q/

CREDIT

Client: Yahoo Japan Corporation
Director & Context Designer: Kotaro Watanabe (Takram)
Design Engineering Adviser: Hisato Ogata (Takram)
Software Design Engineering: Minoru Sakurai (Takram)
Design Engineer: Ryosuke Fujii (Takram)
Design Engineer: Satoru Osawa (Takram)
Graphic Designer: Taro Yumiba (Takram)
UI Designer: Terushige Enatsu (Takram)
UI/UX Designer & Project Manager: Takeshi Saijo (Takram)

Related Projects