目次



初めに

　こんにちは。
　スクタプの開発・運営を担当している吟遊堂です。

　今回はスクタプ開発の裏話として、スクロールテリングに関する話をしていきたいと思います。

　このサイトは、「スクロール型のストーリー」を展開していくサイトです。
　そのため、スクロールに合わせて物語を展開させていくスクロールテリングはよく使う手法となっています。

　そこで、そもそもスクロールテリングとは何なのか、なぜスクタプで扱うのかといった部分にフォーカスを当てていきます。
　後半では、具体例としてスクタプに投稿している「『枕草子』春は、あけぼの」を取り上げて、その魅力をお伝えしていきます。

　それでは早速、スクロールテリングの紹介に移りましょう。


スクロールテリングとは？

　さて、「そもそもスクロールテリングって何？」という方も多いかもしれません。
　この章では、スクロールテリングという手法について説明していきたいと思います。

　スクロールテリングとは、ユーザーのスクロールに合わせて、グラフィックなどが変化していき、物語が進んでいくような感覚を提供する手法のことです。
　スクロールで進むため、画面領域が狭いスマホでも楽しめます。
　もちろん、パソコンの大きな画面で変化するグラフィックを楽しむのもいいですよ。

　テキストだけではなく、グラフィックやアニメーションがスクロールと連動して変化するため、コンテンツの内容をより直感的に理解しやすくなるという利点もあります。
　伝えたい内容に合わせてグラフィックなどが変化していくので、表現の幅も増えますね。

　そのため、近年はwebデザインのトレンドとしてよく話題に上がっている印象があります。


物語をwebで読む

　そんなスクロールテリングですが、スクタプでは投稿する作品でよく用いる手法でもあります。
　この章では、なぜスクタプでよく用いているのかという点に焦点を当てていきます。

　投稿作品でスクロールテリングを活用する理由は2つあります。

　1つ目は、単なる読書との差別化を行うためです。

　実際の書籍でも、電子書籍でも、物語を読むことはできます。
　短編小説などであれば、スキマ時間に楽しむこともできることでしょう。
　そういった、すでにある読書体験とは異なる、新しい体験を届けるのにもスクロールテリングは扱いやすいのです。

　本を用いた読書の場合、基本的に内容は文字媒体でのみ表現されます。
　絵本や漫画などであればイラストもついてきますが、そこにあるのは静止画ですよね。
　あるいは、物語を映像化してしまえば動きも付きますが、今度はユーザーによる操作感がなくなります。

　しかし、スクロールテリングを活用すれば、ユーザーによる操作と、グラフィックやアニメーションによる変化を両立させることができます。

　まさに、こうした演出はスクロールテリングの得意分野と言えるでしょう。

　2つ目は、スクタプが目指している作品の方向性と非常に相性が良いからです。
　1つ目にあげた理由と近しいものですが、スクタプの目指す方向性という観点でお話しします。

　スクタプは企画当初から、スクロールやタップなどユーザーの操作によって物語が展開していくwebサイトを集めたプラットフォームを作っていくという目標がありました。
　そうして投稿された作品をスキマ時間に楽しんでもらいたいという思いでこのサイトを運営しています。

　現在投稿している作品に関しても、挙動の前提にはこの思いがあります。
　そのため、スクタプで投稿している作品では、スクロールテリングを意識しているということですね。


『枕草子』で見るスクロールテリング

　ここまで、スクロールテリングという手法そのものの話や、スクタプとの関係などを書いてきました。
　次に、具体的な例を挙げて、スクロールテリングの魅力を伝えていきたいと思います。

　今回は、「初めに」でも書いた通り、スクタプに投稿している「『枕草子』春は、あけぼの」を使って紹介していきます。

　まずは、この作品の構成について解説していきます。

　清少納言の『枕草子』から、第一段「春は、あけぼの」を引用しています。
　四季それぞれの「をかし」について語っている段ですね。

　作中では、春夏秋冬で4つのブロックに分けています。
　春ブロックでは、「春は、あけぼの」における春についての記述のみを扱います。
　他の季節も同様ですね。
　スクロールするごとに、本文が少しずつ表示されていく形式です。

　テキスト面はこのような形になっていますが、グラフィックの変化も豊富ですよ。

　春であれば、スクロールするごとに空の色が変化し、雲も動きます。

　夏は、月が登ったり、蛍が自由に飛び回ったりと、内容に応じた多彩な演出が入っています。
　蛍は場面に合わせて飛ぶ数が変化しますよ。
　それに加えて、雨が降るシーンもありますね。

　秋は、スクロールに合わせて夕日が沈んでいくほか、内容に合わせて烏や雁が空を飛びます。
　最後には日も沈んで、風の音や虫の音を表現する波紋がゆっくりと画面に広がりますよ。

　冬は、雪が降ったり、火鉢を動かすアニメーションで冬らしい忙しなさを演出したりしています。
　特に冬は、ほかの季節とは異なり「わろし」で締められるので、アニメーションもそれに合わせて調整しています。

　このように、スクロールに合わせて少しずつ本文を表示させつつ、同時に表示された内容に合わせて背景やイラストを変化させています。
　ページをめくるように自分の意志で本文を表示させていき、かつ背景ではアニメーションが発生していくというのは、webサイトならではの表現方法です。

　まさに、新しい物語体験と言えるのではないでしょうか。


終わりに

　最後まで読んでいただき、ありがとうございます。

　このように、スクタプとスクロールテリングには深いつながりがあります。
　今後も、より新しい物語体験を目指して、スクロールテリングだけではなく様々な手法を取り入れながら、作品制作を行っていく予定です。

　最後に、今回具体例として紹介した「『枕草子』春は、あけぼの」の作品ページへのリンクを用意しました。
　この作品はイラストや演出も重要な要素ですから、文章による説明だけでは魅力を十分にお伝えしきれません。
　ここまで読んで興味を持っていただけたら、ぜひ作品も見てみてください。

「『枕草子』　春は、あけぼの」作品ページへ進む