Framerはデスクトップ、スマートフォンのWebに対応したプロトタイプを作成するためのフレームワークです。

インターネット上のサービスはより素早く実装が求められるようになっています。そこで必要になるのがプロトタイプライブラリです。今回はWeb/スマートフォン双方に対応したFramerを紹介します。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-26 21.35.40_thumb.1356530978.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-26 21.35.40.1356530978.png)
例。単純にビューを表示しています。中央がコード、右側がその結果です。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-26 21.35.50_thumb.1356530981.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-26 21.35.50.1356530981.png)
アニメーションもできます。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-26 21.35.57_thumb.1356530985.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-26 21.35.57.1356530985.png)
ボックス。スタイル指定を行っています。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-26 21.36.06_thumb.1356530989.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-26 21.36.06.1356530989.png)
イベントももちろん取れます。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-26 21.36.36_thumb.1356530993.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-26 21.36.36.1356530993.png)
こんな表示も短いコードで実現します。

Framerはビューを基本単位として表示設定を行います。どの場所に表示するかを指定し、貼付けていくイメージです。単色の他、画像を入れることもできます。さらに簡単にアニメーションの指定もできたり、CSSのスタイル設定も追加できます。イベントとアニメーションを組み合わせれば、動作が分かりやすく確認できるでしょう。公式サイトでは記述した内容がリアルタイムに反映されるので、想像に合わせてどんどん画面を作成していけるはずです。

FramerはCoffeeScript製、BSD Licenseのオープンソース・ソフトウェアです。

MOONGIFTはこう見る

Framerはそれっぽく動作するプロトタイプを手早く実現できるソフトウェアと言えます。この手の開発手法としてはまず手書きベースのワイヤーフレームがあり、ついでプロトタイプがあります。そして何度か考察を重ねた後、デザインを決めて実際の開発に入ります。

絵で描いたものと実際の動くものにしたのとでは随分イメージが違う可能性があります。その差異をプロトタイプで吸収していくのです。より動くものを求めるならばTitaniumを使う手もあるでしょうが、WebベースでというのであればFramerがおすすめです。

Framer: Modern Prototyping

koenbok/Framer · GitHub