proto.ioというプロトタイピングツールのブログで、proto.ioで作られたでプロトタイピングについてのレビューが公開されています。
Proto.io 2016 – A year of prototyping in review
中身を少し紹介すると、
- Android 30%
- iOS 70％
- モバイル向け 80%
- Web(PC?)向け 20%
- Helvetica Neue 44%（iOS9以前のシステムフォント）
- San Francisco 33% (iOS9～のシステムフォント)
- Roboto 23%（Androidの標準フォント）
- 角丸ボタン 57%
- 四角ボタン 43%
- Sketch 71%
- Photoshop 29%
と、プロトタイピングを作っている方々のバックグラウンドを伺えるような面白いレビューとなっていました。個人的にはSketchの割合が多いことに歓喜しましたが、AndroidとiOSの割合はもっと五分五分くらいになってほしいと思いました。
さて、今回は日本ではあまり盛り上がっていないような気がするプロトタイピングツールのFramerを紹介したいと思います。
Framerとは？
Framerは、もともとはFramer.jsというラピッドプロトタイピングを作るためのJavascriptフレームワークでした。現在でもgithubで公開されていて、ブラウザとエディターがあればJavascriptを書いてプロトタイプを作成することができます。
その後、Framer StudioというGUIアプリケーションを発売しました（Mac専用）。デスクトップアプリになったおかげで、PhotoshopやSketchデータのインポートが可能となり、アプリ上でプログラミングとプレビューを行うことが出来るようになりました。
しかし、下記の理由からFramerについては、あまり良い評価を聞くことが出来ませんでした。
- 学習コストが高い
- Javascriptが書けないといけないから、デザイナーにはハードルが高い
- コードを書かないといけないので、完成までのスピードが他のツールと比べて劣る
- 画面遷移を作りこむ設計になっておらず、マイクロインタラクションの設計に特化していた
しかし、2016年にFramer StudioはFramerと名前を変えて、目まぐるしい進化を見せてくれました。
今では、Framerの元々の強みを活かしつつ、苦手だった部分を補填、強化してとても魅力的なツールとなりました。
Framerのすごい機能たち
ここからは、「ここがすごい」と思ったFramerの新旧機能をご紹介します。以前はドメインも含め「framer.js」だったframerは、ドメインも「framer」に変え、「もうJavascriptフレームワークじゃないよー」と言っています。本当は、フレームワークなのだと思いますが、それをブラックボックス化して、GUIツールとしてバリバリやっていくようです。
描画機能がすごい
Framerは基本的には、プログラミングとプレビューを行うアプリですが、図形描画もできます。他のプロトタイピングツールと一線を画すところは、描画した図形がすぐにコードに反映されること。
プレビュー画面はキャンバスも兼用しており、プレビュー画面上で位置やスケール、角丸の調整もできます。
さらにインスペクタパネルで、数値入力によるボーダー・シャドウなどの設定も可能です。（設定できる項目は、sketchのそれと似ています。）
くどくど書きましたが、下記の動画を見ると使いやすが伝わるかと思います。
このように、特に図形描画に関しては、Framer.js時代から飛躍的に進化しています。
画面遷移がすごい
先にも言ったように、以前のFramerはマイクロインタラクションのデザインに最適化されたツールでした。そこにFramer Flowsという機能が付き、画面遷移が簡単に表現できるようになりました。
サンプルデモは下記から見ることができます。（実際に操作することができます。）
しかも、作り方は以外にも簡単で、「FlowComponent」という空のコンポーネントを作り、そこに「レイヤーの追加」と「クリック時の関数」を記述するだけです。
InVisionやProttなどのトランジション型ツールのように、画面遷移を俯瞰で見ることはできませんが、実際の製品にかなり近いプロトタイプを作成できるので、より具体的なフィードバックを得られるかもしれません。
共有機能がすごい
FlintoやPrincipleなどのデスクトップアプリのプロトタイピングツールの共有（シェア）方法は、MOVやGif動画の書き出しが主なものでした。
実際に触るには、それぞれのアプリを実際に入れて、該当のファイルを開くしかありません。（無料のモバイルアプリをDLすれば、操作可能なプロトタイプを共有可能。）
Framerはhtml,css,javascriptからできている強みを活かし、ブラウザさえあれば実際に操作できるプロトタイピングをシェアすることができます。
その名も「Framer Cloud」。
Framerでプロトタイプを作成し、GUI上の「Framer Cloud」ボタンを押すだけで、URLが生成され、そのURLを相手に教えることで、操作できるプロトタイプの共有が完了です。
しかも、「Framer Cloud」にはバージョン機能があり、Framerのライセンスがあれば、月額料金など不要で使えます。
最近、SketchもSketch Cloud (Beta)をリリースしているし、チーム内やクライアント確認はURLを発行して確認する時代になるのですね。
さらば添付ファイル。
気になるお値段
2018年10月現在では、$144で１年間の無制限アップデートを得ることができます。
「you get to keep your last version forever.」とあったので、「１年間過ぎたら、アップデートはできないけど、ずっと使えるよ。」ということでしょうか。
他のツールより少し高い印象ですが、機能を考えたら妥当な価格な気がします。
まとめ
昨今、色々なツールがリリースされて、何がなんだかわかりませんが、ツールを触るのがとても楽しいので、しばらくはこの戦国時代が終わらないと嬉しいです。
