紙の繊細な動きをHTML5で再現！めくりモーションが出来るまで

FLY5はHTML5の電子カタログebook5（イーブック・ファイブ）の姉妹サービスとして2015年8月に公開されました。
ebook5がブック形式（雑誌やフリーペーパー等）の媒体を対象としているのに対して、FLY5はフライヤー形式（チラシやポスター等）の媒体を対象としています。
どちらもPDFから誰でも簡単にHTML5形式の電子カタログや電子チラシを作れるサービスです。HTML5形式なので、スマホやタブレット、パソコンにもワンソースで対応することが可能です。

FLY5をサービスとして公開する上でこだわった点が２つあります。
1つは「ヒートマップ解析」、チラシやポスター等をFLY5を通してスマホやパソコンに配信すると、人が実際に見ている箇所をサーモグラフィーのようなデザインで知る事ができる機能です。
そして、もう1つのこだわりが「めくりの動き（フリップモーション）」です。

この記事では、めくりの動き（フリップモーション）の制作過程を少しだけ紹介してみたいと思います。

まずは紙の動きを撮影します

まずはA3サイズの用紙をスマートフォンのスローモーション機能を使って撮影しました。

めくる動きを見てみると、ページが連続している本とは違って様々な違いに気がつきます。
フライヤーは表と裏、1枚の紙でできているので、めくると言うよりは裏返すという表現の方が合っているのかもしれません。
めくる時の角度が少し斜めになる、最後にめくりの余韻が残る等、本とは違った動きを見つける事ができます。

CGで再現

次に3DCGソフトでフリップモーションを再現していきます。

CGが完成したその後、座標を書き出しHTML5（ブラウザ）で動くようにプログラミングしていくのですが、2015年8月に初公開したFLY5のフリップモーションは、現在とは違う動きでリリースされていました。

次の動画は、旧タイプのフリップモーションです。

サービス開始当初のフリップモーション

こちらの動画を見ると、

１）滑らかさがない・カクカクしている感じがする
２）動きの早さでごまかしている感じがする（涙）

と思われないでしょうか。
アニメーションの途中を抜き出した画像がこちらです。

やはり、とても粗いですね。
現在の正式版ではブラッシュアップされ、フリップモーション自体が他サービスにはない魅力の1つになったと考えています。

最新のフリップモーションはこちら

> サンプルを実際に見る
※画面右下の「裏面（表面）を表示」を押すとフリップします。

FLY5を利用するとスマホやタブレット、パソコン等端末を選ばずにチラシを配信する事ができます。また、ヒートマップ解析やアクセス解析等電子チラシならではの機能も盛りだくさん。まずは、無料トライアルをお試ししてみませんか？