©2013 八八粍・デイズ/コミック・アニメーション©2013 八八粍・デイズ/コミック・アニメーション

押井守監督作品「ちまみれマイ・らぶ」HTML5 アニメーションを活用した iPad 向け電子出版

押井守監督の電子書籍の初監督となった「ちまみれマイ・らぶ」は、セルアニメでもない、マンガでもない、タブレットデバイスに最適な演出を追求してコミックアニメーション社が制作したコンテンツです。特に、色の表現力の高さは、他の媒体では体験できないレベルを目指しました。

押井守監督原作のコミックアニメーション「ちまみれマイ・らぶ」 ©2013 八八粍・デイズ/コミック・アニメーション押井守監督原作のコミックアニメーション「ちまみれマイ・らぶ」 ©2013 八八粍・デイズ/コミック・アニメーション

企画/背景

「ちまみれマイ・らぶ」は、押井守監督の指揮の元、iPad を前提としたコンテンツとして制作されました。押井監督の「紙媒体のコンテンツをほぼそのままモニタ上に持ってきたようなコンテンツには物足りなさを感じていた」という演出家としてのこだわりと、現時点における iPad のデバイスとしての性能とのバランスを取る中で、新しい表現の形が生まれました。その一番の特徴は、色彩豊かなイラスト一枚一枚の魅力を前面に、そこにシンプルな効果を重ねて変化を加えることで、時間軸すなわちストーリ性を生みだしているという点です。特に、デバイスの高い色再現性を生かした一枚絵による感動は、数多くのセル画を必要とするアニメーションや、紙面への印刷を前提としたマンガでは実現できなかったものです。是非、iPad ならではの感動を、実機で確認してみてください。
コンテンツを制作する技術としては、HTML5 アニメーションを採用しました。事前にプロトタイプ制作による評価を行い、機能はもちろん制作ワークフローの効率やコストも含めた評価による判断です。実際に制作されたコンテンツでは、高い表現力や滑らかな動きが実現でき、またコンテンツサイズは許容できる範囲に押さえることができました。

画面上の演出は絵コンテを使って入念に検討された画面上の演出は絵コンテを使って入念に検討された

コンテンツは直接 iPad の画面を触って操作できるコンテンツは直接 iPad の画面を触って操作できる

制作/開発

今回制作したコンテンツは、丁寧に描かれた一枚絵にシンプルな動きをつける、それを HTML5 ベースで作成するというものでした。そこで、HTML アニメーション制作の専用ツールである Edge Animate を試してみたところ、これがピタリとはまりました。Edge Animate の利用は初めてでしたが、本当に必要な機能だけが一つの画面に見つけやすく収められており、分かりやすいチュートリアルが提供されていたこともあり、すぐに使いこなせるようになりました。タイムラインも、アニメーションの設定されたオブジェクトごとに大きく色分けされ、更にプロパティごと個別に表示されるため、どこでどんなアニメーションが設定されているかが一目で分かります。秒を単位としてでタイミングを指定できるのも直感的で分かりやすいと思いました。
Edge Animate のコードビューを使えば、JavaScript を使ってコンテンツ内の要素に動的な動きを追加できます。具体的に、今回の制作では、音を読み込んで鳴らす、自然な雷に近づけるよう光るタイミングをランダムにする、といった目的で利用しました。このように、広く標準技術として利用されている JavaScript のスキルやノウハウが利用できることは、拡張性の面における Edge Aminate の利点です。

Edge Animate のシンプルな UI は初めてでも簡単に使いこなすことができたEdge Animate のシンプルな UI は初めてでも簡単に使いこなすことができた

コードビューで JavaScript を記述すれば、Edge Animate のコンテンツを自由に拡張できるコードビューで JavaScript を記述すれば、Edge Animate のコンテンツを自由に拡張できる

今後の展望

大規模なアニメーションのプロジェクトに関わったことで、自身の表現の輪を広げることができたと感じています。何より HTML がこだわりを持ったクリエーターの要望にも十分に応えられる技術であることに確信が持てました。それと、Creative Cloud に登録していたため、直ぐに制作ツールの Edge Animate を使えたのは幸いでした。Creative Cloud では頻繁にツールが更新されるため、制作側としては挑戦できる場が色々と広がります。このような技術やツールの進歩が生み出す新たな可能性も含めて、今後は HTML コンテンツの制作により積極的に取り組みたいと考えています。
また、コンテンツとして「ちまみれマイ・ラブ」の発色のきれいさには驚きました。今後同様なデバイスの特性を生かしたコンテンツが増えていくことでしょうし、今回の作品がその皮切りなれば良いと願っています。更に、同様の手法で簡易的なゲームも作れるでしょうし、デバイス上の表現のための新たな演出手法が発明されるかもしれません。まだまだ今回のプロジェクトの先にはポテンシャルがありそうです。そして、それがクリエイターのキャリアにとっても、新しい方向性や可能性を開くことを期待しています。

写真左から、監督を務めた押井氏、イラストと演出担当の水野氏、Edge Animate 制作担当の渡辺氏写真左から、監督を務めた押井氏、イラストと演出担当の水野氏、Edge Animate 制作担当の渡辺氏

事例データ

事例カテゴリ 電子出版
プラットフォーム iOS, タブレット
使用したWeb技術 HTML5, アニメーション, 電子出版

制作企業

会社名 株式会社コミックアニメーション (http://www.comicanimation.jp)
開発担当エリア 製作・販売
スタッフ
  • 河野晴彦(事業責任者)
会社名 株式会社スパイラルエッジ (http://spiraledge.jp/)
開発担当エリア Edge Animateコンテンツ制作
スタッフ
  • 渡辺知規(Web Designer)
会社名 ピクセルズ株式会社 (http://www.pixels.jp/)
開発担当エリア アプリ開発
スタッフ
  • 石津輝人
  • 大嶋彈

クレジット

page top