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

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

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

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

Framerの強み

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

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

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

01.gif

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

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

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

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

02.gif

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

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

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

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

03.gif

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

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

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

04.gif

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

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

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

05.gif

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

使い勝手はVisual Studio？

visualstudio.png

見える部分のGUIをマウスなどで設計したあと、パーツの細かい動きの制御をコードで行うという行為は、ちょうど20年前に登場したVisual Studioを彷彿とさせます。

Visual Studio 97(日本語版)は1997年5月30日に発売され、当初瞬く間に開発者の間で広まっていきました。
この背景には、当初コーディング(コマンド)だけでGUI(見える部分のパーツ)と制御部分を同時に作り上げるという既成概念を壊したことが挙げられます。
すなわち、GUIはスライドを作成するのと同じように自由に配置することができ、細かい動きはコマンドで動かすという発想が、プログラマーの間では斬新だったのです。

20年経った今、逆転の現象が起きています。
プロトタイプはSketchやIllustratorで作成し、パワーポイントでピッチ(プレゼンテーション)を行うという従来型のスタイルでは、デザイナーがアプリをデザインするのに限界が見え始めています。
もちろん、InVisionなどで画面遷移を行うこともできるでしょうが、Framerを使ってコーディングによって細かい動きを制御することができれば、本当に自分が実現したい動きを実装することが可能になります。

その意味で言えば、*「デザイナーはプログラミングもできるようになるべきか」*という(おそらく多くのデザイナーを当惑させてしまう)問題の答えは明白です。
「このボタンを押すと画面が右からぬるっと出てくる」と言われてもよく伝わらないので、自分でインタラクティブな動きまで実装できるようなデザイナーが、今こそ求められています。

まとめ

さまざまなプロトタイピングツールがありますが、その中でもFramerは直感的に思い通りのプロトタイプを短時間で作り上げることができます。
もちろん、現在チームで別のプロトタイピングツールを使っている場合はすぐに乗り換えるのは難しいかもしれませんが、まだプロトタイピングツールを使っていない場合には、使用を検討してみてはいかがでしょうか。