要点
ProtoPieは完全にコード不要のプロトタイピングツールです。デザイナーにとって使いやすく、さまざまな機能と連携を備え、高度なコラボレーション機能も誇ります。
Framerは、コードを書く方法を知っていて、プロダクションコードを単一の信頼できる情報源として捉えるデザインチームに最適です。
しかし、Framerは他のプロトタイピングツールと比べて学習コストが高く、技術的なバックグラウンドを持たないデザイナーには理想的ではありません。
すべてのプロトタイピングツールが同じというわけではありません。それぞれに独自の強み、弱み、そして特定のユースケースがあります。したがって、ソリューションを導入する前に、自分とチームにとってどのプロトタイピングツールが最適かを理解する必要があります。
この記事では、現在市場にある最も強力で、最もよく知られた2つのプロトタイピングツール、FramerとProtoPieを比較します。どちらもデザイナーに多くの価値を提供してくれるため、どのプロトタイピングツールを選ぶべきか迷っているかもしれません。もしそうなら、まさにうってつけの記事です。
FramerとProtoPieを詳しく見ていきましょう。具体的には、次の項目を取り上げます。
この記事を読み終えたら、ProtoPieとFigma（これも優れたプロトタイピングツール）を比較したくなるかもしれません。その場合は、こちらをクリックしてください。
Framerのインターフェース。
Framerとは？
Framerを使うと、デザイナーはデザインとコードの両方を用いて、モバイルおよびWebインターフェース向けの高忠実度プロトタイプを作成できます。もともとは完全にコーディングベースのツールでしたが、その後、豊富な機能とメリットを提供するように拡張されました。たとえば、デザイナーは新しいプロジェクトを始める際にPhotoshopからアセットを生成したり、スプリング物理とベジェ曲線のおかげで3D空間内のレイヤーをアニメーション化したり、CSS変換に基づくハードウェアアクセラレーションで高いフレームレートを実現したりできます。
現在、Framerはブラウザ上またはデスクトップアプリとして利用できます（WindowsとMacの両方に対応）。
ProtoPieとは？
ProtoPieは、デザイナーがインタラクションデザインのアイデアを高品質で超リアルなプロトタイプへと簡単に変えられるようにします。モバイル、デスクトップ、Web、IoTなど、幅広いデジタルプロトタイピングのニーズに最適です。チームは変数や数式プロトタイプを使ってプロトタイピングでき、音声プロトタイプなども作成できます。ProtoPieは高度なハードウェアとソフトウェアの連携機能も備えており、Arduinoのシリアル通信やArduinoのワイヤレス通信など、さまざまなツールとプロトタイプが連携できます。
そのため、Microsoft、BMW、Headspace、Snap、Electronic Artなどの企業で働く世界トップクラスのデザイナーの一部は、プロトタイピングのニーズにProtoPieを日常的に活用しています。
ProtoPie vs Framer：共通点と相違点
では、詳しく見ていきましょう。ProtoPieとFramerはどう違うのでしょうか？ どのような共通点、相違点、そしてユーザーに提供する主なメリットがあるのでしょうか？
機能
優れた機能は優れたツールを生み、優れたツールは優れたプロトタイプを生みます。したがって、FramerとProtoPieのどちらを選ぶにしても、最も優れた機能を備えたプロトタイピングツールを選ぶ必要があります。
音声プロトタイピング
Framerには、音声プロトタイピング専用の機能はありません。Framer内で音声プロトタイピング機能を構築するために、他のツール（たとえばWeb Audio API）を使うことはできますが、それは手作業で行う必要があり、時間と労力の無駄です。
一方、ProtoPieは音声認識（STT）と音声合成（TTS）機能を備えた高度な音声プロトタイピング機能を提供します。音声コマンドに反応するプロトタイプや、ユーザーの発話を取り込んで読み上げ可能なテキストを生成するプロトタイプを作成できます。
音声検索、音声アシスタント、音声入力のためのリアルなプロトタイプを簡単に作成できます。画面を触るだけではない体験によって、最初からアクセシビリティを製品に組み込めます。
ProtoPieを音声プロトタイピングツールとして使う方法について、詳しくはこちらをご覧ください。
数式と変数
Framerのバリアントと変数を使えば、デザイナーは変数を使ったプロトタイピングができますが、いくつかの重要な制限があります。たとえば、Framerでは、すべてのテキストレイヤーのプロパティを変数としてカスタマイズしたり、コンポーネントを公開したり、状態間でコンポーネントをアニメーション化したりすることはまだできません。
ProtoPieでは、数式と変数がインタラクションデザインとソフトウェアプロトタイピングの中核を担っています。デザイナーは数式入力欄で数式プロトタイプを作成でき、必要なレイヤープロパティ、関数、変数をすべて数式に含められます。
数式を使ってProtoPieで可動式のタブバーを作成。
ProtoPieの豊富な数式と変数の機能は、Framer（および現在市場にある他のどのプロトタイピングツールとも）一線を画します。デザイナーは数式を使ってプロトタイプを即座に動的にでき、フレーム同士をつなぐだけでは得られないリアリティと動きをプロトタイプに加えられます。たとえば、メールアドレスを検証する、最小パスワード長を作成する、ショッピングカート内のアイテム数を数える、口座残高の合計を算出するなどです。
ProtoPieのさまざまな数式プロトタイプのユースケースを確認して、適切な構文、レイヤープロパティ、関数の使い方を学びましょう。また、あらかじめ定義された変数の使い方を理解したい場合は、こちらをご覧ください。
ソフトウェアとハードウェアの連携
Framerはさまざまなソフトウェア連携を提供していますが、残念ながらProtoPieとは異なり、外部ハードウェアと連携することはできません。正確には、ProtoPie Connectを除けば、ですが。
ProtoPieは3つのコア要素（Studio、Player、Cloud）と1つの拡張機能（Connect）で構成されています。ProtoPie Studioは、デザイナーが高度なインタラクションを作成するコード不要のインターフェースです。カメラ、音声、加速度センサーへのアクセスを提供し、さまざまなデバイスをまたいでプロトタイプを連携させることができます。ProtoPie Playerを使うと、チームはスマートデバイス上でプロトタイプを実行でき、ProtoPie Cloudはオンラインストレージとクラウドベースのコラボレーションに対応しています。
さらに、ProtoPie Connectは豊富なハードウェアとソフトウェアの連携機能を備えています。そのため、複数のデバイス、ディスプレイ、ハードウェア上でプロトタイプを同時に実行できます。ProtoPie Connectを使えば、デザイナーはArduinoに信号を送信し、またArduinoから信号を受信できます。Arduinoのシリアル通信やArduinoのワイヤレス通信も含まれます。下の動画を見て、実際の仕組みを確認してみましょう。
ソフトウェアとハードウェアを統合したプロトタイピングについてさらに学びたい方は、このステップバイステップガイドをご覧ください。
使いやすさ
プロトタイピングツールは使いやすく、既存のデザインプロセスに自然に組み込める必要があります。そうすることで、デザインチームは時間を節約し、効率を高め、仕事の質を向上させられます。したがって、どのプロトタイピングツールを導入するかを選ぶ際には、使いやすさが最優先事項です。
使いやすさ
Framerは強力なツールですが、そのぶん学習コストは高めです。デザイナーはFramerを使ってコード不要のプロトタイプを作成できますが、プロトタイプに拡張機能を加えるにはコードを活用する必要があります。つまり、チームはこのツールを最大限に活用するために、コードコンポーネント、コードオーバーライド、そしてHTML、CSS、JavaScript、Reactといったコーディング言語に慣れる必要があります。
一方、ProtoPieは完全にコード不要です。学習コストはありますが、Framerよりもはるかにシンプルで短く済みます。ProtoPieは「オブジェクト - トリガー - レスポンス」というシンプルな概念モデルで動作します。このモデルがすべてのインタラクションを支えています。デザイナーが初めてのシンプルなインタラクションを作成する場合でも、1000回目の、最も高度なインタラクションを作成する場合でも同じです。
始めるのに役立つこれらのリソースをチェックしてください。
ただし、私たちの言葉を鵜呑みにする必要はありません。あるユーザーは、「このツール［ProtoPie］は、使いやすさと強力な機能のちょうどよいバランスを実現していると思います」と述べています。
*ProtoPieの概念モデル：Object - Trigger - Response。*
共有とコラボレーション
チームワークが夢を現実にします。デザイナーはチームの全員と協力し、それぞれの視点やアイデアを共有しながら、全員が同じ認識を持つ必要があります。
Framer Libraryは、デザインとエンジニアの橋渡しを助け、ReactベースのJavaScriptライブラリを提供して、デザイナーが洗練されたインタラクションやアニメーションを簡単に作成し、共有できるようにします。デザイナーがプロトタイプを作成したら、Framer Motionで引き渡しモードに切り替え、デザイナーとエンジニアの間でシームレスに受け渡しできます。デザイナーとエンジニアは、プロトタイピングと本番環境で同じアニメーションライブラリを使うため、デザインプロセス全体で一貫性が保たれます。
ProtoPieにも、高度な共有とコラボレーション機能があります。インタラクション記録とプロトタイプを組み合わせることでコラボレーションをさらに高め、プロトタイプ作成に使った正確なインタラクションをエンジニアに提供できます。誰がプロトタイプにアクセスできるかを簡単に管理し、チームと共有する際の表示方法も細かく選べます。
インタラクション記録があれば、エンジニアは各インタラクションの仕様を簡単に確認できます。
コーディングとコード生成
デザイナーはFramerにコードを取り込み、UI画面を生成したり、実際のコードを使って特定のコンポーネントを作成・カスタマイズしたりできます。Framerでは、必要に応じてコードをプロジェクトに活用できます。したがって、チームがすでにJavaScript、HTML、CSSを使ってコーディングできるなら、豊富なカスタマイズオプションを利用できます。
Framerでは、コードを主に2つの方法で使えます。Code ComponentsとCode Overridesです。
では、チームがコードを書けない、あるいはこれをエンジニアに任せたい場合はどうでしょうか？ この場合、ProtoPieが最適です。高度なインタラクションの作成や複雑なロジックの追加であっても、完全にコード不要だからです。
では、FramerとProtoPieのどちらを選ぶべきでしょうか？
では、いよいよ公式なProtoPie vs Framerの結論です。残念ながら、すべてのデザインチームにとってどちらか一方が最良のプロトタイピングツールだと断言できるほど単純ではありません。
Framerは、コードを書けて、ユーザー調査やテスト段階で高品質な製品検証を行いたいチームに最適です。組織がプロトタイプの本番コードを絶対的な単一の信頼できる情報源と考えるなら、Framerを使ってください（本番コードをコンポーネントに簡単に取り込めるためです）。
一方、ProtoPieは、コードを書けない（または書きたくない）デザイナーにとって、最も直感的で機能が充実した選択肢です。ハードウェアとソフトウェアのプロトタイピング連携を多数備え、ドラッグ＆ドロップ機能のようなマイクロインタラクションを含む数式プロトタイプを設計でき、プロトタイプ内に音声と動画を組み込めます。さらに、チームは傾き、音、コンパスなど、スマートフォンのセンサー機能を使ったリアルなプロトタイプも作成できます。
今日からコードを1行も書かずに、自分だけの超高忠実度プロトタイプの作成を始めましょう - ProtoPieを無料で試す。 また、Cannyを使ってロードマップの内容を確認したり、フィードバックを共有したり、機能リクエストを送ったりすることもできます。
