Framer

記事更新日: 2021/10/21

執筆: 編集部

編集部コメント

「Framer」は無料プランが用意されているので、UIデザインツールを本格的に導入する前に、まずは使用感を確認したい企業におすすめです。コーディングなど特別なスキルを必要とせず、右クリックやドラッグ&ドロップ、アイコンクリックなどの簡単操作で忠実度の高いプロトタイプが作成できます。プロトタイプを軸として、設計者とエンジニアなどチームで共同作業するための機能も充実しているので、設計と開発の同時進行が実現できます。

良い点

簡単なマウス操作やアイコンをクリックするだけでリアル同様のプロトタイプが作成でき、設計者とエンジニアによる共同作業のための機能も充実しています。

悪い点

月額プランで支払う場合、払い戻しができないので注意しましょう。

費用対効果:

無料プランでもプロトタイプ作成のための基本的な機能が利用できるほか、有料プランなら複数人の設計者とエンジニアによるチームで効率よく作業を進めることが可能です。

UIと操作性:

簡単なマウス操作でインタラクティブなコンポーネントが再現できたり、アイコンをクリックするだけでボタンやビデオの挿入ができるなど、初心者でも操作が可能です。

知名度:

日本での知名度は低く、日本語での解説動画やサイトなどを探すことは難しいです。

デザイン:

見せたい情報をシンプルに、かつスタイリッシュに画面に盛り込むことができます。

セキュリティ:

専任のセキュリティチームにより、データ、ネットワーク、システム、アプリケーションのセキュリティが24時間365日監視されます。

Framerの特徴3つ

1. チームコラボレーション機能に優れている

「Framer」の最大の特徴は、設計者やエンジニアたちがチームとなり共同で作業を進めるためのコラボレーション機能が優れていることです。

ブラウザで作業することができるので、ややこしいソフトをインストールすることもなく、リンクを共有するだけでチームの全員が作業を開始することができます。

チームの全員が同時に作業に携われるので、口頭や図面ではなかなか伝えることが難しい”想像しにくいアイディア”を、エンジニアたちと簡単に共有することができ、同時に即座にフィードバックを受けることも可能です。

エンジニア側としては、設計者の希望を確実に掴むことができるので、無駄なく効率的に作業が進められるでしょう。

Framerは、ハンドオフでは難しかった設計者とエンジニア間のギャップを埋め、プロトタイプを架け橋とすることで設計と開発の同時進行を実現します。

チームコラボレーション機能に優れている

2. 忠実度の高いプロトタイプが簡単に作成できる

「Framer」の二つ目の特徴は、忠実度の高いプロトタイプを簡単に作成できることです。

始め方は、1からFramerで作成することもできますし、FigmaやSketchなど利用中のUIデザインツールからインポートすることも可能です。

操作方法は至ってシンプルで、右クリックやドラッグ&ドロップの簡単操作でインタラクティブなコンポーネントが再現できたり、アイコンをクリックするだけで、デバイスフレーム、インタラクション、ボタン、ビデオプレーヤーなどを挿入することができます。

初心者でもコーディングなど特別なスキルなしで、リアル同様のプロトタイプの作成が可能です。


ドラッグ&ドロップ操作で簡単作成

 

3. コードで細かい調整も可能

「Framer」の三つ目の特徴は、コーディングも可能なことで、アニメーションや部品の配置などの細かい調整も可能です。

簡単なマウス操作でプロトタイプが作成できる一方で、プログラミングを行うようにコードを書いてプロトタイプを作成することもできます。

コード自体はシンプルで少ないコードでの記述が可能なため、後のメンテナンスも楽に行えるでしょう。

コーディングでの微調整が可能

Framerの料金プラン


無料での利用が可能な料金プランが用意されてます。

編集者数やチームでの作業に制限があったりもしますが、プロトタイプ作成のための基本的な機能の利用は可能なので、まずはお試しで使用感を試したい企業におすすめです。

支払方法はクレジットカードかPaypalです。

月額で支払う場合、キャンセルする際の払い戻しができません。

Framerの評判・口コミ

忠実度の高いプロトタイプ作成が実現
Spotify

成果物として忠実度の高いプロトタイプを使用することに慣れたら、エンジニアリングチームに静的ファイルを送信して、それを作成するように依頼するだけの時代に戻るのは困難です。

躊躇せずクリエイティブなアイデアが表現できる
Booking.com

今では、UI要素をやり直したり、最新バージョンを使用しているかどうか疑問に思ったりするのではなく、実際にデータを使用して設計し、最もクリエイティブなアイデアを表現しています。

*「Framer」公式HP参照

まとめ

今回は「Framer」の特徴・評判・料金について紹介しました。

コーディングなど特別なスキルを必要とせず、簡単なマウス操作でインタラクティブなコンポーネントを再現し、リアル同様のプロトタイプが作成できます。

さらに、このプロトタイプを軸としたチームでの共同作業のための機能も充実しているので、設計者とエンジニアのギャップをうめ、設計と開発の同時進行が実現できるでしょう。

無料プランも用意されているので、UIデザインツールを利用してみたい企業は、一度Framerの導入を検討してみてはいかがでしょうか。

画像出典元:「Framer」公式HP

関連するサービスの比較記事

ページトップへ