読者です 読者をやめる 読者になる 読者になる

Framer Studioを使ってみました

f:id:yunko3:20150124212743p:plain

最近、ちょいちょい耳にするFramer.js。

アニメーションを作るのに適してるライブラリ・・・というくらいしか知りませんが、試しに使ってみようと思いました。

Framer Studio なるCUIツールがあるので、お試し版でダウンロードしてみました。

Framer Studioで何が出来るのかがわかる動画

SketchのオブジェクトをFramer Studioにドラッグアンドドロップするだけで、JSのオブジェクトが生成されちゃうっていう。これはヤバイ。


Framer Studio - Basics on Vimeo

Framer.jsの特徴

アニメーションに特化したJavascriptらしい・・・。coffescriptもいけるようです。

他のライブラリよりは比較的簡単そうなので、学習コストはそこまでかからないように見える。見える・・・。見え(ry

GoogleAppleFacebookInstagramAdobeなど、名だたる企業が利用しているようです。

ただ、現時点では日本語のドキュメントがほっとんどないので、英語漬けは必須です。

Framer Studioの特徴

1.PSDやSketchファイルをそのままインポート

f:id:yunko3:20150124220005p:plain

Photoshop、Sketchファイルをインポートし、自動でオブジェクトを生成してくれるようです。

  • HTMLやCSSを組まなくていい。修正する必要もない。
  • 画像をスライスする必要がないので、画像を修正するたびに上書く手間が省けます。

2.iPhoneAndroidで直接実機確認ができる

f:id:yunko3:20150124220145p:plain

iPhoneMacWi-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、CSSJavascriptで作ってみる
  • 頑張ってXcodeとかAndroid StudioとかUnityとか覚えちゃう
  • Framer Studioに挑戦してみる

などなど、その場に合った手法を選んでくださいねー。