ProtoPie vs. Figma：より高度なプロトタイピングに適したツールとは？
2024/03/29
ProtoPieとFigmaの比較や、高度なプロトタイピングのためにそれぞれのツールを使用するタイミングをご紹介します。
顧客のニーズが常に変化する中、製品やUI／UXデザインは、新しい課題に対応し続けなければなりません。そのため、ハイフィデリティ・プロトタイピングツールは時代とともにますます進化しています。
このことは、数字が物語っています。Digital Journalのレポートによると、UXサービス市場は2022年に192億ドルという驚異的な評価額にまで高騰しました。
このような状況の変化は、プロジェクトの利害関係を一層激化させ、複雑なデジタル体験を監督するデザイナーにより多くの責任を負わせることになります。ステークホルダーがデザインチームに対し、スピードと革新性に優れたものにするようプレッシャーをかける中、忠実度の高いプロトタイピングは競争力を維持するために不可欠なものとなっている。
したがって、このような要求に真っ向から応えるために、市場で最も優れた高度なプロトタイピングツールは何か、という疑問が浮かび上がります。
興味深いことに、FigmaはConfig 2023で「高度なプロトタイピング」機能を発表し、大きな注目を集めました。これにより、有料ユーザーは、変数、式、条件式にアクセスできるようになります。ProtoPieは、この開発を全面的にサポートし、心から歓迎します。FigmaやProtoPieのようなツールが利用できることで、デザイナーは高度なプロトタイピングに力を注ぐことができます。Figmaのおかげで、忠実度の高いプロトタイピングとインタラクション・デザインが、デザイナーから高い注目を集めるようになったことに、我々は胸を躍らせています。
しかし、この進歩は、デザイン分野で尊敬されているツールである Figma と ProtoPie が、高度なプロトタイピングへのアプローチにおいてどのように異なるのか、デザイナーにとって疑問となります。
FigmaとProtoPieの比較について掘り下げてみましょう。
【時間がない方向け】この記事の要約
ProtoPieを使用すると、1つのデバイスを超えたマルチステート・シナリオに対応した、リアルでマルチモーダル、かつダイナミックなプロトタイプを作成できます。これらは、Figmaでは極めて難しいか、Figmaだけでは、最新の「高度なプロトタイピング」機能があっても実現不可能と言っても過言ではありません。
ProtoPieは、Figmaにはない忠実度の高いプロトタイピング機能を無償で提供しています。一方、Figmaが提供する「高度なプロトタイピング」機能にアクセスできるのは、プロフェッショナルプラン以上のユーザーだけです。
いずれか一方だけを選択すれば良いという訳ではなく、プロトタイプ作成に最大限の効果をもたらすには、FigmaとProtoPieを併用する必要があります。理由は以下の通りです。
FigmaとProtoPieは、それぞれ異なる用途で使われている。
各ツールにはそれぞれ長所があり、実際にはお互いを補い合っている。
今回の記事でFigmaとProtoPieを併用し、最適なワークフローを実現する方法をご覧ください。
https://youtu.be/n8ftIIl10fk
ProtoPieとFigmaやその他のUI/UXデザインツールとの比較
Figmaとは？
2022年Design Tools Surveyによると、Figmaは世界で最も人気のあるUIデザインツールです。Figmaはプロトタイピングツールではありませんが、プロトタイピング機能を備えています。
静的な画面間の基本的な遷移のシーケンスを見せる必要がある場合は、フレームをリンクし、簡単なインタラクションを追加するだけなので、Figmaで簡単に実現できます。実際のインタラクションではなく、フローに焦点を当てた、いくつかのステートを含むシンプルなクリック可能なプロトタイプに最適です。ステート数が少なくても、追加すればすぐに 混乱に陥ってしまいます。ステートが増えるほど、混乱も増えます。
理論的には、フレーム同士をリンクさせる配線モデルは理にかなっています。しかし、プロトタイプが複雑になると、その意味を理解したり、管理したり、維持したりすることが難しくなるのです。
これに応えるように、Figmaは「高度なプロトタイピング」機能を発表しました。これにより、有料ユーザーは変数、式、条件式にアクセスできるようになりました。Figmaは、純粋に直線的なプロトタイピングから脱却し始めたのです。」
Figmaをプロトタイピングに使用するのはどのような場合？
Figmaは、プロジェクトが次のような特定の使用ケースに当てはまる場合に最適なツールです。
独立した基本的なインタラクション。
いくつかのステートを持つフレームによるクリックスルーのプロトタイプ
ユーザーフローの視覚的なプレビュー
インタラクションを作り直す必要のない初期段階のプロトタイピング
シンプルな原因と結果のインタラクション
ProtoPieは、Figmaの代わりに、またはFigmaと一緒に使用することで、1つまたは複数の接続されたデバイスに対して、リアルで、ダイナミックで、マルチモーダルなプロトタイプを作成することができます。
実際の体験をテストしたいとお考えであれば、ぜひProtoPieをお使いください。ゲームにおけるスマホの傾きや、車のディスプレイにおけるボイスアクティベーションのような複雑なコンセプトを証明したい場合に最適です。
Figmaで、音声とタッチ操作によるマルチモーダルなインタラクションをどのようにプロトタイプ化するのか？
Figmaだけでは、プロトタイプを作るのに適していないかもしれません。
複数のスクリーンとデバイス
洗練された、かつ現実的なマイクロインタラクション（タップやクリックを超える）
または、プロトタイプを（カスタム）ハードウェアやAPIなどと接続
ProtoPieとは？
2022年のDesign Tools Surveyによると、ProtoPieは高度なプロトタイピングカテゴリでデザイナーのトップチョイスとして選ばれました。ProtoPieは、インタラクションデザインのアイデアを現実的なプロトタイプに変える、最も簡単な高忠実度プロトタイピングツールと位置づけることができると思います。
デジタルなもの、一つでも複数でもあらゆるスクリーンを持つものに対して、忠実度の高いプロトタイプを作成できます。
モバイル
デスクトップ
Web
IoT
車内体験
他にも多数
さまざまな業界のデザインチームとその企業は、あらゆる種類の忠実度の高いプロトタイピングのために、UIデザインツールFigmaの次にProtoPieを利用しています。大手企業の例としては、Meta、Microsoft、Zillow、Mercedes-Benz、Gojek、Flipkartなどが挙げられます。
ProtoPieをプロトタイピングに使用するのはどのような場合？
もしプロジェクトが以下のリストに当てはまる場合は、ProtoPieの使用をお勧めします。
複数のステートと依存関係を持つシナリオ
他のインタラクションをトリガーする条件付きインタラクションやCEI（Cause-and-Effect Interactions）
特定のタッチスクリーンのトリガーだけでなく、標準的でないトリガーを持つインタラクション
マルチモーダルなインタラクション（例：テキスト入力、音声、メディア再生、センサーなどを含むインタラクション）。
複数のデバイスにまたがるインタラクション
カスタムハードウェア、APIなどを含むインタラクション
Figmaと比べて、ProtoPieはプロトタイピングにどのような利点をもたらすのか？
デザインに魔法の杖は存在しません。その代わり、デザイナーは使用するツールを厳選しなければなりません。言うまでもなく、これらには相応の利点と機能が必要です。ProtoPieは、ハイフィデリティ・プロトタイピングツールとして必要不可欠な様々な機能を備えています。
それでは、ProtoPieがFigmaよりも優れている9つの利点について詳しく説明します。
幅広いトリガーとレスポンスでマルチモダリティを実現
Figmaのトリガーリストは、ほとんどが標準的なタップ＆マウストリガーに限定されています。これは、シンプルなユーザーフローやインタラクション、プレゼンテーションには適していますが、これ以上複雑なものを求めると、延々と時間がかかることになります。
ProtoPieが他のツールと違うのは、マルチモーダルなインタラクションを可能にする膨大なトリガー＆レスポンスのリストを持っていることです。
トリガーだけでも、ProtoPieにはタッチ、条件、マウス、キー、入力、センサーの6つのカテゴリーがあります。基本となるタッチトリガーには、タップ、スライド、プルから、スマホをピンチしたり回転させたりするものまで含まれます。また、これらを組み合わせることもできます。例えば、マウスボタンが押されているときだけ動作するマウスオーバーインタラクションなどです。
さらに強力なのは、条件付きトリガーです。一連のイベントを連鎖させたり、入力されたデータを検出することができます。マウスが要素の上に移動したり、要素から離れたりした場合のトリガーがあります。キーが押されたときに設定されるトリガーや、音声やサウンドから電話の傾き、コンパスまで、あらゆるトリガーを設定することができます。
プロトタイプにドラッグ＆スクロール可能なエリアを追加
Figmaでは、ドラッグ・インタラクションやスクロール可能な領域を作ることができます。しかし、それらは特定の要素に限定されます。また、同じフレーム内の他の要素やインタラクションに影響を与えることはできません。
ProtoPieでは、ドラッグ・インタラクションやスクロール可能なエリアは、他のインタラクションを引き起こすことができます。例えば、レイヤーを右や左にドラッグすると、スコアの合計が増えたり減ったりします。このようなインタラクションを1つのスクリーンでプロトタイプ化することができるのです。
例えば、パララックススクロールのように、スクロールが他のレイヤーにどのような影響を与えるのか、詳しくはこちらからご覧ください。
プロトタイプの中でユーザーに実際のテキストを入力させる
高度なプロトタイプでは、実際の製品を模倣することが求められます。スマートフォンアプリをデザインする場合、プロトタイプは実際のスマートフォンで使う最終製品のように機能する必要があります。
例えば、ログインページをプロトタイピングしているとしましょう。ProtoPieで入力レイヤーを追加し、いくつかのインタラクションを追加します。これで完了です！
Figmaでは、代替手段として、キーボードそのものをプロトタイピングする複雑なワイヤーのセットを作成する必要があります。そうでなければ、どのようにタイプするかについて、ユーザーの想像力に頼らざるを得ません。これは手間がかかるだけでなく、現実的なプロトタイピングの前提に反し、時間もかかります。モバイルプロトタイプテキスト入力を使ったプロトタイプの例をこちらからお試しください。
プロトタイプでオーディオ、ビデオ、Lottieファイルを再生する
デザインは可能な限り洗練されたものである必要があり、プロトタイプにメディアファイルを挿入する必要性が生じる場合もあるでしょう。ProtoPieはオーディオ、ビデオ、Lottieファイルをサポートしています。
一方、Figmaには、ユーザーがオーディオやビデオを直接埋め込む方法はありません。メディアリッチなプロトタイプを作成するのであれば、選択肢はProtoPieしかありません。
メディア再生機能を備えたプロトタイプの例をこちらからお試しください。
「if/then」条件分岐をプロトタイプに取り入れる
条件は、成功するプロトタイプの重要な要素であり、鍵となるのが「if/then」の設定です。再利用可能なトグルボタンのコンポーネントがあると想像してみてください。例えば、右にトグルすると機内モードが有効になり、左にトグルすると機内モードが無効になる。機内モードを有効にすると、特定のアイコンが現れたり消えたりする。同時に、特定のオプションはグレーアウトするといった具合です。
Figmaのインタラクティブ・コンポーネントとバリアントを使えば、再利用可能なトグルボタンを自作できます。従来、トグルボタンを、状態に応じて他のレイヤーやインタラクションに影響を与えるようにするのは困難でした。Figmaが有料ユーザーに提供している最新の高度なプロトタイピング機能では、単純な「if/then」の条件付けを行うことができます。
一方、ProtoPieが本領を発揮するのはここからです。本当のマジックは、条件分岐をProtoPieの数式と変数と組み合わせたときに起こります。
条件付きのプロトタイプの例をこちらからお試しください。
動的相互作用のパワーを活用
ProtoPieの数式と変数は、動的相互作用の中核です。これは、ProtoPieがFigmaや他のプロトタイピングツールと一線を画している点の1つです。数式をインタラクションに追加するだけで、プロトタイプは瞬時にダイナミックになります。リテラル値の他に、数式は変数、算術演算、モジュロ演算、テキストの追加、レイヤープロパティ、関数で構成することができます。
特筆すべきは、オブジェクトのすべてのプロパティを数式で使用できる点です。例えば、動いているオブジェクトのx-positionを監視し、特定の（計算された）値に達したときに何らかの反応をトリガーすることが可能です。
以下のような動的なインタラクションに数式を使用することができます。
ボリュームレベルがある閾値を超えた場合に警告を表示する
JSON形式のAPIレスポンスを解析
スマートデバイスの内蔵ハードウェアを最大限に活用する
プロトタイプは、設計されたハードウェアとシームレスに相互作用するようにしたいものです。例えば、スマートフォンやタブレット、これらにはさまざまなハードウェア機能が詰め込まれています。
ProtoPieは、カメラ（写真撮影、QRやバーコードのスキャン）、マイク、ジャイロスコープ、近接センサーなど、デバイスに内蔵されたハードウェアを最大限に活用します。InstagramやTikTokのようなアプリ、音声アシスタント、ディクテーションアプリ、モバイルゲーム、拡張現実（AR）アプリのプロトタイピングが、ProtoPieですべて可能となります。
https://youtu.be/1SJlMFqCqa8
音声プロトタイピング機能を備えたTVプロトタイプ
https://youtu.be/fmvxhviD9R8
カメラとセンサーを備えた温度スクリーニングキオスクのプロトタイプ
カメラ、音声プロトタイピング、センサーについて、それぞれリンクから詳細をご覧ください。
プロトタイプを複数のデバイスで動作させる
我々は相互に接続された世界に生きています。UXは単一のデバイスに限定されるものではありません。人々は、接続されたデバイスのエコシステム全体に関わっています。したがって、デザイナーはマルチデバイス体験をプロトタイプする必要があります。
多種多様なマルチデバイスシナリオの例：
一方の携帯電話からもう一方の携帯電話にテキストメッセージを送信し、通知を表示する
タブレットでNetflixの最新番組を視聴した後、スマートテレビで続きを見る
タブレットでモバイルゲームを物理的なゲームコントローラーを使ってプレイする
1つのアプリからホームセキュリティカメラを調整する
インフォテインメントシステムを音声で操作しながら、物理的なハンドルで車を運転する
https://youtu.be/aBzCrEow94I
ゲームパッド一体型のプロトタイプ
Figmaのプロトタイプでは、ここまでのことはできません。前述のシナリオをプロトタイプ化し、ユーザビリティテストに使用するには、ProtoPieが必要です。実際に考えてみると、人々が毎日直面しているマルチデバイスのシナリオは、すでに無限にあります。
プロトタイプの共有と継承
忠実度の高さだけでなく、忠実度の高いプロトタイプに付加価値を与えるのは、それを使って何を達成できるかということです。
ProtoPieはこの点を大きく変えます。ProtoPieで作成したプロトタイプでは、基本的に以下の3つのことが実現できます。
共有することで、アイデアを伝え、ステークホルダーを納得させたり、賛同を得たりする
ユーザーテストによって、アイデアを迅速かつ有意義に検証する
ハンドオフによって、デザイナーと開発者間のコミュニケーションギャップを最小限に抑える
ProtoPieでは、シームレスにプロトタイプをステークホルダーと共有することができます。誰がプロトタイプにアクセスできるか、どのように表示するかを完全にコントロールできます。ProtoPie CloudまたはiOS、iPadOS、Android上のProtoPie Playerを使用して、プロトタイプを自由に操作できます。
ProtoPieの新しいユーザーテスト機能により、デザイナーや研究者は、プロトタイプをすぐに利用できる単一のエコシステム内で、モデレートされたユーザーテスト（遠隔および対面）を行うことができます。こうすることで、貴重なフィードバックを得ることができ、最終的には時間とリソースを節約することができます。
ProtoPieのハンドオフ機能により、プロトタイプの価値がさらに高まります。開発者に正確なインタラクション仕様を提供することで、何をどのように実装すべきかを正確に伝えることができます。インタラクションのレコーディング例をこちらからお試しください。
FigmaとProtoPieの併用
Figmaは素晴らしいものですが、忠実度の高いプロトタイピングを行うには、不十分である場合が多々あります。リアルで、マルチモーダルかつダイナミックなインタラクションを作成するには、FigmaとProtoPieの双方からなる充実したツール・機能が必要です。
高度なプロトタイピングでは、FigmaとProtoPieのどちらかを選択するという手も考えられます。しかし、それは得策とは言えません。実際、FigmaとProtoPieは、それぞれ果たす役割が異なるため、組み合わせて使用するのが最も効果的なのです。
製品のUIをデザインする際にFigmaを使用し、アイデアを視覚的に具体化しましょう。そして、FigmaのデザインをProtoPieにインポートし、ダイナミックで、マルチモーダルかつリアルなプロトタイプを作成します。これを納得がいくプロトタイプが作成できるまで繰り返します。
ノーコードかつハイフィデリティ・プロトタイピングの世界は無限大！
FigmaとProtoPieの両方の強みを最大限に引き出しましょう。Figmaにはない機能を使用したProtoPieを使って、Figmaのデザインを、リアルで忠実度の高いプロトタイプに仕上げることができます。