Framer Studioを使ってみました
最近、ちょいちょい耳にするFramer.js。
アニメーションを作るのに適してるライブラリ・・・というくらいしか知りませんが、試しに使ってみようと思いました。
Framer Studio なるCUIツールがあるので、お試し版でダウンロードしてみました。
Framer Studioで何が出来るのかがわかる動画
SketchのオブジェクトをFramer Studioにドラッグアンドドロップするだけで、JSのオブジェクトが生成されちゃうっていう。これはヤバイ。
Framer Studio - Basics on Vimeo
Framer.jsの特徴
アニメーションに特化したJavascriptらしい・・・。coffescriptもいけるようです。
他のライブラリよりは比較的簡単そうなので、学習コストはそこまでかからないように見える。見える・・・。見え（ry
Google、Apple、Facebook、Instagram、Adobeなど、名だたる企業が利用しているようです。
ただ、現時点では日本語のドキュメントがほっとんどないので、英語漬けは必須です。
Framer Studioの特徴
1.PSDやSketchファイルをそのままインポート
Photoshop、Sketchファイルをインポートし、自動でオブジェクトを生成してくれるようです。
- HTMLやCSSを組まなくていい。修正する必要もない。
- 画像をスライスする必要がないので、画像を修正するたびに上書く手間が省けます。
2.iPhoneやAndroidで直接実機確認ができる
iPhoneとMacをWi-Fiにつなげば、簡単に実機でアニメーションを確認できます。（USBでもいけるっぽい）
Android端末でもいけます。
今までのアニメーション作成手法では、
- Flashでアニメーションを作る → iPhoneで動かないorz
- Gifアニメでアニメーションを作る → イベントが取れないorz
- Javascriptでアニメーションを作る → HTML、CSS面倒くさいorz
- ネイティブアプリやUnityでアニメーションを作る → 新しく勉強しないといけないorz
などなど何かしらデメリットがありました。
Framer StudioならJSだけで簡単に実機で確認できちゃうようです。
画像の「http://192.168.〜〜〜〜」を実機のブラウザに打ち込むだけで、すぐに表示確認が出来ます。
Framer Studioの弱点
いいことばかり書くと、Framer Studioを啓蒙してる人みたいに見えちゃうので、現時点で思いいつく弱点を提示してみます。実業務で導入を検討してる場合は、ご参考までにどうぞ。
- Framer StudioはWindows版がない → Framer.jsをゴリゴリ書くしか…。もうJQueryでよくね？
- 日本語ドキュメントが少ない → 英語漬けです。
- Framer.jsを覚えないといけない → 他のライブラリに比べれば分かりやすいのですが、やっぱり覚えないといけないことはある。
- Framer Studioは有料ソフト → 今のところ79.99ドルです。JSに79.99ドルも出せるかは人によりますね。
- 実際の実装に向いてるかは謎 → バグとか多そう（勝手なイメージ）
ちなみに。
アニメーションのサンプルが作れるなら、どの手法でもいいと思います。
要は、自分が早く手間なくサンプルを作れる方法を選べばいい！わけであって、手法に囚われては元も子もないです。
Framer.jsも手法の一つに過ぎません。
- FlashやAfterEffectでサンプルを作る
- すでに世に出ているプロダクトを見せる
- 紙で動かす
- Adobe Edgeを使う
- 頑張ってHTML、CSS、Javascriptで作ってみる
- 頑張ってXcodeとかAndroid StudioとかUnityとか覚えちゃう
- Framer Studioに挑戦してみる
などなど、その場に合った手法を選んでくださいねー。
