目次



初めに

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

　今回は、作品制作の流れを紹介していこうと思います。

　制作の工程は作品ごとに細かな違いがあるのですが、大まかな流れは共通しています。
　とはいえ、ブログで説明するにあたっては具体例があった方がわかりやすいですよね。
　そこで今回は、投稿作品の1つである『吾輩は猫である』の制作過程を例に、スクタプの作品制作の裏側をお見せしていきます。


制作の概要

　まず、大まかな作品作りの流れを紹介します。
　前回のブログでも軽く触れた部分ですが、今回は詳しく触れていきますね。

スクタプでは作品制作を進める際、基本的に

① 全体像を決める
② プログラミング
③ 必要なイラストを描く
④ 微調整

という流れで作っています。

　ちなみに、今回例として使う『吾輩は猫である』の制作期間は合計で10日です。
　現在投稿されている作品のうち、日本文学カテゴリーの作品は大体同じくらいの制作期間になっています。

それでは、ここから作品作りの裏話に移りましょう。


工程1：全体像を決める

作品制作で初めに取り掛かるのが、「全体像を決める」工程です。
『吾輩は猫である』の場合は、1日かけて行いました。

この工程では、

① 扱う作品の選定と使用範囲の限定
② 完成イメージ図の作成

の2つの作業が中心となります。

1. 扱う作品の選定と使用範囲の限定


　最初に、どの作品を使うかを決めます。
　作品選びにおける大前提として、著作権が切れているものを使います。

　本文は「青空文庫」というサイトから引用しています。
　場合によっては、学生時代に使っていた教科書から引っ張り出してくることもありますね。
　選んだ作品が収録されている本を持っている場合は、内容を照らし合わせて間違いがないか確認もしていますよ。

　次に、作品の選び方について解説していきます。
　細かくルールが決まっているわけではないのですが、大事にしているルールが1つあります。

　それは「知名度」です。

　知名度といっても、「たくさんの人がちゃんと把握している作品」というよりは「人生のどこかで、何らかの形で触れたことがありそうな作品」という基準です。

　作品選定は難しい部分もありますが、できる限りバランスよく選んでいければと思っています。

　ここからは、扱う範囲のお話です。
　基本的に、長い作品であればその一部を使うようにしています。

　制作側の観点だと長いほど作るのが大変になりますし、ユーザー側に立っても長すぎると「スキマ時間の読み物」としてはかみ合いません。

　そういう理由で、作品の一部を切り取って制作をしています。
　抜き取る範囲は、有名なフレーズが入っているシーンや盛り上がりそうなシーンなどを考えて選んでいます。

　『吾輩は猫である』の場合は、冒頭の有名な文章「吾輩は猫である。名前はまだ無い。」を使いたかったので、冒頭シーンを切り抜いています。

2. 完成イメージ図の作成


　次に、完成イメージ図を作成します。
　これは、Excelを使って文字の配置やアニメーションのつけ方、イラストのデザインなどを決めていく工程です。
　ここではまだイラストは描かないので、仮置き用のものをExcelの図形機能で作成している形になりますね。
　ここで作った仮置き用画像は、次のプログラミング工程でも使っているんですよ。

　一度にどれくらいの文章を表示させるか、どのタイミングでどのようなアニメーションをつけるかといった部分は、この工程で事前に決めることになります。

　実際には仕様の問題でその通りに作れなかったり、作れたけどイメージとは違う結果になったりといったこともありますね。
そういった場合は、状況に合わせていろいろ変更するようにしています。

　それでも、プログラミング中に方向性をブレさせないためには、あらかじめ全体像を決めておくことが重要になるのです。


工程2：プログラミング

　全体像の設計が完了したら、いよいよプログラミングです。
　ここが一番難しいですね。
　『吾輩は猫である』では6.5日かけて作成しました。

　スクタプでは、HTML、CSS、JavaScriptの3つを使用して作品を作っています。

それぞれの役割としては、

HTML：画面に表示させる文章や画像などの記述
CSS：表示する文字や画像の大きさや位置の調整、画面全体の見た目の設定
JavaScript：アニメーションを始めるためのスイッチの用意など

といった分担になっていますが、実際には入り組んだ部分もあります。

　例えば、「JavaScriptで文章を用意して、それをHTMLに送って画面に表示させる」といったこともあります。
　文章を細かく切り替えるときは、JavaScriptで制御した方がやりやすいのです。

　3種類使うとはいえ、使用割合は均等ではありません。
　特にJavaScriptは扱う役割が広く、ここで時間を使うことが多いですね。
　作業を進めるほどコード量も増えていくので、どこに何が書いてあるかを把握するのが大変になります。

　作ってみても想定通りに動かないことが多々あるので、作っては直し、作っては直しを繰り返しながら、最初に決めた完成イメージに近づけていきます。


工程3：イラスト制作

　プログラミングが終わったら、いよいよイラスト制作に移ります。
　ここまでは仮置き画像で作業していますが、ここで本番用のイラストを描いていきます。
　簡素な図形が正式なイラストに変わるので、この工程で作品の印象が一気に変わるんですよ。

　イラストの制作では、openCanvas7というソフトを使っています。
　『吾輩は猫である』では、合計22枚のイラストを1.5日で描きました。
　かなりの量を短時間で描いたように見えますが、そこまで筆が早いわけではありません。
　というのも、顔だけ差し替えた差分や単純な楕円の画像など、ほとんど時間がかからないイラストもたくさん使っていたからです。

　自分でイラストを描いて用意すると、微調整がしやすいというのが利点ですね。

　描いたイラストを当てはめたときに、時折問題が発生することがあります。
　具体的には、画面に合わせて行うサイズ変更で見づらくなったり、イラストが見切れてしまい、重要な要素が隠れてしまったりといったものです。
　そういった際に簡単に差し替えられるのは便利です。

　イラストが完成すると、作品はほぼ完成したも同然ですね。


工程4：微修正

　ここまでの工程を終えたら、制作した作品を実際に使われる端末で最終チェックします。
　見た目が崩れていないか、問題なく動作するかなどを確認しています。

　何も問題がなければスクタプに投稿して終わりなのですが、そう簡単にはいきません。
　たいていの場合、何かしら問題が発生します。

　開発はパソコンで行うので、パソコン版の表示は開発段階から確認しています。
　念のために完成後もチェックしていますが、あまり崩れることはありません。

　問題はスマホでの表示です。
　開発中は、パソコンのブラウザにある開発者ツールという機能で画面をスマホサイズに変更して表示の調整を行っています。
　しかし、この機能はスマホを再現しているだけなので、実際に確認するときとズレがあるんです。

　特に大きなのは、スマホでブラウザを使うときに画面上に表示される検索窓やタブの影響です。
　これらによって、作品の画面が小さくなり、表示が崩れます。

　ほかにも、iPhoneとAndroidなど、機種によって微妙に仕様が異なるという問題もあります。
　正しく設定したはずなのに、片方の機種ではうまくいってももう片方では失敗していることもよくあります。

　『吾輩は猫である』でも、この段階で問題が起きました。
　この作品では、本文を表示させている間、映画のフィルム風の枠をつけています。
　それが画面が小さくなったことで邪魔になり、本文が読みづらくなったのです。
　そのため、枠を小さくするなどの微調整を行い、バランスをとる修正作業をすることになりました。

　そういった修正作業を終えてようやく作品は完成します。
　この修正作業も、『吾輩は猫である』では1日で終わりましたが、修正箇所が多かったり、解決が難しかったりするともっと時間がかかる場合もあります。

　このような工程を経て、スクタプに投稿される作品は作られています。


終わりに

　最後まで読んでいただき、ありがとうございました。
　今回紹介したのは、スクタプにおける作品制作のほんの一例です。
　今後も、いろいろな表現方法を使った作品の投稿などを行っていく予定ですので、楽しんでいただけたらうれしいです。

　最後に、今回例として取り上げた『吾輩は猫である』の作品ページへのリンクを用意しました。
　こちらのブログと合わせて、ぜひ見ていってください。
　制作の裏側を読んだ後だと、作品の見え方も少し違ってくるかもしれません。

『吾輩は猫である』作品ページへ進む