GoogleもUberも使っている！次世代のプロトタイピングツール「Framer」が注目を集めている理由

更新日: 2018年05月07日

プロトタイピングツールと言えばInVisionやAdobe XD、国産ツールならProttを使っている企業やチームは多いのではないでしょうか。
今、また新たに注目を集めるプロトタイピングツールがあります。
それがFramerです。

「Framer」はFacebookを退職した2人によって開発されたプロトタイピングツールで、FacebookやGoogle、UberやDropbox、Disneyなどの企業が利用しています。

海外の有名企業がこぞってFramerを選んでいるのは、なぜなのでしょうか。

今回は、次世代のプロトタイピングツール「Framer」が注目を集めている理由を紐解いてみます。
もう他のプロトタイピングツールを使っている方も、まだプロトタイピングツールを使ったことがない方も、「Framer」の人気の理由をここで整理しておきましょう。

Framerの強み

なぜGoogleやFacebookといったテック業界の巨人たちがFramerを選んでいるのか、気になっている人もいるでしょう。
世の中にはすでにたくさんのプロトタイピングツールが存在しますが、Framerでなければダメだ、という人が実際に存在しています。

ここでは、Framerの強みについて探ってみることにしましょう。

1. ラフデザインからプロトタイピングまでワンストップで行える

Framerがこれほどまでに人気になっている理由のひとつは、オールインワンで完結するエンド・トゥ・エンドなツールになっているからです。

つまり、デザインを考え始めるところから、設計、プロトタイプまで他のツールを使ったり他のプログラムで作ったファイルを読み込んだりしなくてもいいということです。
例えば従来のプロトタイピングツールでは、SketchやIllustrator、Figmaなどのベクターデータ作成ソフトを使ってインターフェイスのデザインを行なったあと、それらのファイルをインポートしてから、プロトタイピングツールでリンクを貼る必要がありました。

Framerの最新バージョンでは、複数のソフトを行ったり来たりする必要がなくなります。

2. シンプルなコードでインタラクションを制御可能

実は、デザインからプロトタイピングまで行えるツールは他にもあります。
昨年登場したAdobe XDはその一つです。

しかし、Framerこそ、実際にグラフィカルなインタラクションをコードに置き換えて制御できる最初のアプリとして登場し、簡単にプロトタイプを作成できるツールです。

FramerではシンプルなJavaScriptベースのコードを使って、インタラクションやアニメーションを制御していきます。
例えば、デザインのある要素にアニメーションを加えたい場合、新しいレイターを作成し、コードウィンウに切り替えて、「animate」ボタンを押すだけで、Framerが自動的にコード部分にアニメーションを加えてくれます。

3. リサイズも簡単に。あらゆるデバイスのデザインが可能

さらに注目すべきは、デザイナーが配置したオブジェクトを相対位置で記憶することで、他のデバイスにも適合可能な配置ルールを作成することができることです。
まさにXcodeと同じような配置ルールを採用しており、異なるデバイスに自動的にぴったりと合うように調整してくれます。

今でさえこうした機能は当たり前のように見えますが、実はこういったプロトタイピングに欠かせない機能の多くはFramerが牽引してきました。
SketchやIllustratorなどのベクターデータを扱うツールは確かに画面全体やグラフィック、アイコンを作るのには最適ですが、音や動き、レスポンシブデザインには対応していないことの方が多いものです。
そうしたところも、Framerであれば対応することが可能です。

4. ワンクリックでURLをシェアできる

通常、プロトタイプを上司やチームにシェアする際には、対応アプリをダウンロードしてもらう必要があります。
実際に、Adobe XDやInVisionなどは、専用のAppをダウンロードしてもらわなければなりません。

しかし、FramerであればプロジェクトごとにURLが自動で発行されるので、そのURLをSlackやメールなどで送るだけです。
Framer自体がUXにこだわっているのも、人気の理由のひとつです。

5. すぐに使えるコンポーネントが多数

いくら機能的であっても、今すぐ使えなければ活用しにくいでしょう。
Framerでは、すでにスタイリッシュで使いやすいコンポーネントが揃っているので、そうしたテンプレートをベースにデザインを行うこともできます。
カード型UI、カレンダー、WiFiを表すアイコンやマテリアルコンポーネントに至るまで、ほとんどのUIが揃っています。