ProtoPieとFigmaの比較や、プロトタイピングに各ツールを使用するタイミングを理解してください。
製品のUI/UXデザインは、消費者の多様化していく要求に応えるために進化しています。こうした要求に応えていくため、UXプロトタイピングツールはより強力になっています。
Digital Journalによると、2022年のUXサービス市場は192億ドルと評価されており、数字がUI/UXツールの重要性を物語っています。
そのため、このような要求に真っ向から応えられる、市場で最高の高度なプロトタイピング・ツールは何か、という差し迫った疑問が浮上します。
興味深いことに、FigmaはConfig 2023で「高度なプロトタイピング」機能を発表し、大きな注目を集めました。これにより、有料ユーザーは変数、式、条件式にアクセスできるようになります。ProtoPieチームは、この開発を全面的にサポートし、温かく賞賛します。FigmaやProtoPieのようなツールが利用できることで、デザイナーは高度なプロトタイピングに秀でることができます。Figmaのおかげで、忠実度の高いプロトタイピングとインタラクション・デザインが、デザイナーから当然のように注目されるようになったことに、ProtoPieチームは興奮しています。
しかし、この進歩は、デザイン分野で高く評価されているツールである Figma と ProtoPie が、高度なプロトタイピングへのアプローチにおいてどのように異なるのか、デザイナーに疑問を投げかけます。
FigmaとProtoPieの啓発的な比較を掘り下げてみましょう。
TL;DR
- ProtoPieを使用すると、1つのデバイスを超えた複数の状態のあるシナリオに対して、リアルで、マルチモーダルな、動的なプロトタイプを作成できます。これらは、Figmaでは非常に難しいか、最近の「高度なプロトタイピング」機能にもかかわらず、Figmaだけでは不可能です。
- ProtoPieは、Figmaにはない忠実度の高いプロトタイピング機能を（無償で）提供します。しかし、Figmaが提供する「高度なプロトタイピング」機能にアクセスできるのは、プロフェッショナル・プラン以上のユーザーだけです。
- これは「どちらか一方」の選択ではありません。最大のプロトタイピング効果を得るには、FigmaとProtoPieを併用することです。それはなぜでしょうか？
- FigmaとProtoPieは、それぞれ異なる目的を果たします。
- それぞれのツールには、お互いを補い合う長所があります。
- FigmaとProtoPieを併用し、最適なワークフローを実現する方法をご覧ください。
Figmaとは
2022年デザイン・ツール調査によると、Figmaは世界で最も人気のあるUIデザイン・ツールです。Figmaはプロトタイピング・ツールではありませんが、プロトタイピング機能を備えています。
静的な画面間の基本的なトランジションのシーケンスを見せる必要がありますか？フレームをリンクし、簡単なインタラクションを追加すれば、Figmaで簡単にそれができます。実際のインタラクションではなく、フローに焦点を当てた、いくつかの状態を持つ単純なクリック可能なプロトタイプには最適です。
少ない画面遷移の状態において、画面を追加するたびに、すぐに「麺のカオス」になってしまう可能性があります。さらに画面を増やしていくことで、遷移のためのワイヤーの量も多くなります。
理論的には、フレーム同士をリンクさせる配線モデルは理にかなっています。しかし、プロトタイプが複雑になると、意味を理解することも、管理することも、維持することも難しくなってしまいます。
Organized chaos in Figma. Image by Luke Dowding
これに対応するため、Figmaは「高度なプロトタイピング」機能を発表しました。これにより、有料ユーザーは変数、式、条件式にアクセスできるようになりました。Figmaは、純粋にリニア・プロトタイピングからシフトし始めました。
どのタイミングでFigmaをプロトタイピングに使いますか？
あなたのプロジェクトが次のような特定のユースケースに当てはまる場合、Figmaは最適なツールになります。
- 孤立していて、かつ単純なインタラクション
- いくつかの状態を持つフレームを使ったクリックスルーのプロトタイプ
- ユーザーフローの視覚的なプレビュー
- インタラクションを作り直す必要のない初期段階のプロトタイピング
-
単純な因果関係のインタラクション。
ここでProtoPieの出番です。Figmaの代わりに、またはFigmaと一緒にProtoPieを使用することで、1つまたは複数の接続されたデバイスに対して、リアルで、ダイナミックで、マルチモーダルなプロトタイプを作成することができます。
ProtoPieを使うことで、実際のユーザー体験をテストや、ゲームにおけるスマートフォンの傾きや、車のディスプレイにおける音声アクティベーションのような複雑なコンセプトを証明するといったことが実現できます。
音声とタッチを使ったマルチモーダルなインタラクションを、Figmaでどのようにプロトタイプしますか？
Figmaだけでは、特に以下のような状況において、プロトタイプを作成するのに適切なツールではないかもしれません。
- 複数のスクリーンとデバイス
- 洗練されているが現実的なマイクロ・インタラクション（タップやクリックだけではありません）
- プロトタイプを（カスタム）ハードウェアやAPIなどと接続する場合。
実際にはProtoPieとは何なんでしょうか？
2022 Design Tools Surveyによると、ProtoPieは高度なプロトタイピングカテゴリでデザイナーのトップ選択肢にランクされました。ProtoPieチームではProtoPieをインタラクションデザインのアイデアを現実的なプロトタイプに変える、最も簡単な高忠実度プロトタイピングツールと位置づけたいと思います。
デジタルなものなら何でも、スクリーンや複数のスクリーンを持つものなら何でも、忠実度の高いプロトタイプを作成できます。
- モバイル
- デスクトップ
- ウェブ
- IoT
- 車内体験
- …その他多数
さまざまな業界のデザイン・チームとその企業は、あらゆる種類の忠実度の高いプロトタイピングのために、UIデザイン・ツールFigmaの次にProtoPieを毎日使用しています。このような大手企業には、Meta、Microsoft、Zillow、Mercedes-Benz、Gojek、Flipkart などがあります。
どのような場合においてプロトタイピングにProtoPieを使うべきでしょうか？
以下のリストのようなプロジェクトであれば、ProtoPieの使用をおススメします。
- 複数の状態と依存関係を持つシナリオ
- 他のインタラクションをトリガーする条件付きインタラクションや因果関係インタラクション
- 特定のタッチスクリーンのトリガーだけでなく、"非標準 "のトリガーを持つインタラクション
- マルチモーダルなインタラクション、例えば、テキスト入力、音声、メディア再生、センサーなどを含むインタラクション
- 複数のデバイスにまたがるインタラクション
- カスタムハードウェア、APIなどを含むインタラクション
Figmaと比較して、ProtoPieはプロトタイピングにおいてどのようなメリットがありますか？
デザインに魔法の杖はありません。その代わりに、デザイナーは作業するツールを選択しなければなりません。言うまでもなく、これらのツールには適切な利点と機能が必要です。ProtoPieはプロトタイピングツールとして必要不可欠な様々な機能を備えています。
それでは、ProtoPieがFigmaよりも優れている9の利点を掘り下げてみましょう。
マルチモダリティのための幅広いトリガーとレスポンス
Figmaのトリガーリストは、ほとんどが標準的なタップ＆マウストリガーに限定されています。これは、シンプルなユーザーフローやインタラクション、プレゼンテーションには適しています。しかし、これ以上複雑なものを求めると、永遠に待たされることになります。
FigmaとProtoPieのインタラクショントリガーの違い
ProtoPieが他のツールと違うのは、マルチモーダルなインタラクションを可能にする膨大なトリガー＆レスポンスのリストを持っていることです。
トリガーだけでも、ProtoPieにはタッチ、条件、マウス、キー、入力、センサーの6つのカテゴリーがあります。基本となるタッチトリガーには、タップ、スライド、引っ張りから、スマホをピンチしたり回転させたりするものまで含まれます。また、これらを組み合わせることもできます。例えば、マウスボタンが押されているときだけ動作するマウスオーバーインタラクションなどです。
さらに強力なのは、条件付きトリガーです。一連のイベントを連鎖させたり、入力されたデータを検出することができます。マウスが要素の上に移動したり、要素から離れたりした場合のトリガーがあります。他には、キーが押されたときに設定されるトリガーや音声やサウンドから電話の傾きやコンパスといったセンサートリガーがあります。
プロトタイプにドラッグやスクロール可能な領域を追加する
Figmaでは、ドラッグ・インタラクションやスクロール可能な領域を作ることができます。しかし、それらは特定の要素に限定されます。また、同じフレーム内の他の要素やインタラクションに影響を与えることはできません。
ProtoPieでは、ドラッグ・インタラクションやスクロール可能なエリアは、他のインタラクションを引き起こすことができます。例えば、レイヤーを右や左にドラッグすると、合計得点が減ったり増えたりします。このようなインタラクションを1つのスクリーンでプロトタイプ化することができます。
スクロールが他のレイヤーにどのような影響を与えるかを発見してください。
プロトタイプに実際のテキストを入力させる
高度なプロトタイプは、現実の製品を模倣しなければなりません。スマートフォンアプリをデザインする場合、プロトタイプは実際のスマートフォンで使う最終製品のように機能する必要があります。
ログインページをプロトタイピングしているとしましょう。ProtoPieでInput Layerを追加し、いくつかのインタラクションを追加します。以上でプロトタイプの完成です！
Figmaでは、回避策として、キーボード自体をプロトタイピングする複雑なワイヤーのセットを作成する必要があります。そうでなければ、どのようにタイプするかについて、人々に想像力に頼ってもらうしかありません。これは手間がかかるだけでなく、現実的なプロトタイピングの前提に反するだけでなく、時間もかかります。
テキスト入力が可能なモバイルプロトタイプ
テキスト入力を使ったプロトタイプの例を確認してみましょう。
プロトタイプでオーディオ、ビデオ、Lottieファイルを再生する
あなたのデザインは可能な限りリッチである必要があり、そうするためにプロトタイプにメディアファイルを挿入することも必要になる場合があります。そのため、ProtoPieはオーディオ、ビデオ、Lottieファイルといったメディアファイルをサポートしています。
一方、Figmaには、ユーザーがオーディオやビデオを直接埋め込む方法はありません。メディアリッチなプロトタイプを作成するのであれば、ProtoPieは非常に有力な候補となります。
メディア再生のあるプロトタイプの例を確認してみましょう。
プロトタイプに'if/then'条件を導入する
条件は、成功するプロトタイプの主軸であり、重要な'if/then'ルールを設定します。再利用可能なトグルボタンのコンポーネントがあるとします。例えば、右にトグルすると機内モードが有効になり、左にトグルすると機内モードが無効になる。機内モードを有効にすると、特定のアイコンが現れたり消えたりする。同時に、特定のオプションはグレーアウトする。
Figmaのインタラクティブ・コンポーネントとバリアントを使えば、再利用可能なトグル・ボタンを自作できます。従来、トグル・ボタンを、状態に応じて他のレイヤーやインタラクションに独自の影響を与えるようにするのは困難でした。Figmaが有料ユーザーに提供している最新の高度なプロトタイピング機能では、単純な「if/then」の条件付けを行うことができます。
一方、ProtoPieが本領を発揮するのはここからです。本当のマジックは、ProtoPieの数式や変数と条件分岐インタラクションを組み合わせたときに起こります。
ダイヤルの位置は条件とともに表示される数字を決定します
条件付きのプロトタイプの例を確認してみましょう。
ダイナミックインタラクションの力を活用
ProtoPieの数式と変数は、動的な相互作用の中核です。これは、ProtoPieがFigmaや他のプロトタイピング・ツールと一線を画している点の1つです。数式をインタラクションに追加するだけで、プロトタイプは即座にダイナミックになります。
数式は、リテラル値の他に、変数、算術演算、モジュロ演算、テキストの追加、レイヤープロパティ、関数で構成されています。
特筆すべきは、オブジェクトのすべてのプロパティを数式で使用できることです。例えば、動いているオブジェクトのX-ポジションを監視し、特定の（計算された）値に達したときに何らかのレスポンスをトリガーすることが可能です。
ダイナミックなインタラクションに数式を使用する際の一例
- テキスト入力に基づくメールアドレスの検証
- パスワードの最小長
- ショッピングカート内のアイテム数のカウント
- ボリュームレベルがある閾値を超えた場合に警告を表示する、
- アカウント残高の合計を決定する、
- JSON形式のAPIレスポンスの解析
銀行口座の残高をチェックするプロトタイプ
スマートデバイスの内蔵ハードウェアを最大限に活用する
プロトタイプは、設計されたハードウェアとシームレスに相互作用するようにしたいものです。例えば、スマートフォンやタブレットです。これらのデバイスにはさまざまなハードウェア機能が詰め込まれています。
ProtoPieは、カメラ（写真撮影、QRやバーコードのスキャン）、マイク、ジャイロスコープ、近接センサーなど、デバイスに内蔵されたハードウェアを最大限に活用します。InstagramやTikTokのようなアプリ、音声アシスタント、ディクテーションアプリ、モバイルゲーム、拡張現実（AR）アプリのプロトタイピングが、ProtoPieを使うとすべて実現可能です。
音声プロトタイピング機能を使用したTVプロトタイプ
カメラとセンサーを備えたサーマルスクリーニング・キオスクのプロトタイプ
機能の詳細については、カメラ、音声プロトタイピング、センサーよりご確認下さい。
プロトタイプを複数のデバイスで動作させる
私たちは相互に関連し合う世界に住んでいます。UXは単一のデバイスに限定されるものではありません。人々は、接続されたデバイスのエコシステム全体に関わっています。従って、デザイナーはマルチデバイス体験をプロトタイプする必要があります。
多種多様なマルチデバイスのシナリオの例
- 1台の携帯電話からもう1台の携帯電話にテキストメッセージを送信し、通知を表示する
- タブレットでNetflixの最新番組を夢中で見た後、スマートテレビで続きを見る
- タブレットでモバイルゲームを物理的なゲームコントローラーでプレイする
- 1つのアプリからホームセキュリティカメラを調整する
- インフォテインメント・システムを音声で操作しながら、物理的なハンドルで車を運転する
ゲームパッド一体型プロトタイプ
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にインポートし、ダイナミックでマルチモーダル、そしてリアルなプロトタイプを作成します。反復しながら、適切と思われる限り、2つの間を行ったり来たりしてください。
可能性無限大のノー・コード、ハイ・フィデリティ・プロトタイピングに飛び込もう
FigmaとProtoPieの両方のパワーを活用しませんか？Figmaにはない機能を使用したProtoPieで、Figmaのデザインを、リアルで忠実度の高いプロトタイプに変えましょう。