要約
Adobe XDは、優れたベクターベースのUIおよびUXデザイン機能を幅広く備えています。
ProtoPieは、ノーコードのプロトタイピングツールで、デザイナーが非常にリアルなインタラクティブプロトタイプを作成できます。
ProtoPieのプラグインをAdobe XDとの連携に使用することで、デザイナーはシームレスなエンドツーエンドのデザインワークフローを実現し、各ツールの特有の機能を活用できます。
適切なツールを使えば、デザインチームは効果的に協力し、高精細なプロトタイプを作成し、早い段階で貴重なユーザーフィードバックを得て、開発プロセスを最初から最後までスピードアップできます。
では、どのツールがあなたのチームに適しているのでしょうか？ どのソリューションを導入し、どれを避けるべきか、どう判断すればよいのでしょうか？
ProtoPieでは、現在市場で人気が高く、愛されているプロトタイピングツールのいくつかを詳しく見ています。すでにProtoPieがFigmaやFramerと比べてどうなのかを分析しました。では、ProtoPieがAdobe XDとどう比較されるのか見ていきましょう。
この記事では、ProtoPieのAdobe XD連携により、デザインプロセスの中で両方のツールをどのように活用できるかを説明します。
具体的には、この記事では以下を取り上げます：
Adobe XD：概要
Adobe XDは、スマートウォッチアプリから本格的なWebサイトまで、あらゆるもののデザインに使えるベクターベースのUIおよびUXデザインツールです。高機能で使いやすく、クロスプラットフォームに対応しており、MacとWindowsの両方で利用できます。要するに、Adobe XDはデザインチームに、効果的に協力し、息をのむような体験を生み出すために必要なすべてを提供します。
Adobe XDの機能
Adobe XDには、ユーザーが一流のデジタル体験をデザインするのに役立つさまざまな機能があります。
たとえば、以下のようなものがあります：
Repeat Grid機能を使うと、ユーザーは複製された要素のセットを作成し、Adobe XD内でさまざまなデザインを試すことができます。
Adobe XDでのプロトタイピング：XDプロトタイプに期待できること
Adobe XDにも、限られた範囲のインタラクティブなプロトタイピング機能はあります。たとえば、ユーザーはAdobe XDでAuto-Animate機能を使って動きを加え、XDプロトタイプに簡単なアニメーションを作成できます。その後、プロトタイプ機能を使って、ワイヤーやトランジションを用いながら、インタラクティブな領域をほかの画面へ視覚的につなげることができます。
Adobe XDを使っていて、より複雑なインタラクションを実現したいなら、ProtoPieはあなたのワークフローに最適な補完ツールです。
Adobe XDのプロトタイプモード。
次のセクションでは、ProtoPieがAdobe XDをどのように補完するのかを、さらに詳しく説明します。
ProtoPieの独自性
ProtoPieは、市場で最も使いやすい高精細プロトタイピングツールです。完全にノーコードでありながら、高度なインタラクション、数式、変数を備えたリアルなデザインを作成できます。
実際、ProtoPieには、XDプロトタイプよりもはるかに豊かなプロトタイプを実現する機能があります（そのため、Adobe XDとの連携を作成したのです）。これらの機能には、次のようなものがあります：
では、各機能が何を提供するのかを詳しく見ていきましょう。
マルチタッチジェスチャーを試す
ProtoPieでは、ユーザーがスマートデバイスのディスプレイに物理的に触れたときに、タッチトリガーが作動します。トリガーは、たとえばタップ、長押し、ドラッグで発動できます。ProtoPieのアニメーションは、ピンチ、プル、回転などのほかのマルチタッチジェスチャーもサポートします。
ドラッグおよびピンチトリガーを使用してProtoPie Studioで作成した、ドラッグ可能な地図プロトタイプの例。
上記のプロトタイプの再現方法を学びたい場合は、このAskProtoPieをご覧ください
条件ロジックを使ってより複雑なインタラクションを実現する
タッチトリガーとは異なり、条件トリガーは特定の条件に基づいてインタラクションを起動します。たとえば、プロトタイプの実行開始時に、レイヤーをあらかじめ決めた別の位置へ自動的に移動させることができます。
ProtoPieのアニメーションは、chain、range、start、detectを含むさまざまな追加の条件トリガーをサポートします。
ProtoPieで条件を使ったパスワード検証の例。
ProtoPieのネイティブセンサー機能を使って現実的なカメラインタラクションを作成する
ProtoPieでプロトタイプを作成するとき、ユーザーはカメラ、振動、傾き、コンパス、3D Touchなど、デバイスのネイティブ機能を活用できます。下のチュートリアルを見て、ProtoPieのネイティブセンサー機能を使って、シンプルでありながら説得力のあるカメラインタラクションを作成する方法を学びましょう。
コードを使わずにセンサーでプロトタイプを作成する
ProtoPieがAdobe XDより優れたプロトタイピングツールだということに、まだ納得できませんか？ なら、これで考えが変わるはずです。
ProtoPieでは、傾き、コンパス、音、3D Touch、近接などのセンサートリガーを試せます。たとえば、傾きトリガーは、デバイスの角度に応じてプロトタイプの反応を変えます。デバイスを横向きにすると、プロトタイプもそれに応じて反応します。同様に、プロトタイプにコンパストリガーを適用すると、デバイスが向いている方向によって反応が決まります。
ProtoPieでコーディングせずにセンサーを使ったプロトタイプ。
要するに、ProtoPieではAdobe XDのAuto-Animateトランジションをはるかに超える、超リアルなインタラクションを作成できます。
ProtoPieでほかに何ができるのか、もっと知りたいですか？ ユーザーが作成したサンプルプロトタイプをいくつか見てみましょう。
ProtoPie + Adobe XD：優位性を生むワークフロー
多くのデジタルデザイナーは、Adobe XDでデザインプロセスを始めることを好みます。しかし、macOSとWindowsで利用可能なProtoPieプラグインを使えば、XDで作成した初期デザインをProtoPieに取り込めます。複数のアートボードをシーンとして一括で取り込み、Adobe XDでデザインしていたときと同じレイヤー階層、位置、制約を保ったままオブジェクトを取り込めます。
デザインがProtoPieに入ったら、手に取り、触れ、存分に体験できるような、生き生きとしたインタラクティブなプロトタイプの作成に取りかかれます。
ProtoPie StudioにAdobe XDのデザインを取り込み、動的で条件付きのインタラクションを追加して高精細なプロトタイプを作成します。
不足しているプロトタイピング機能を補う
Adobe XDには、あいまいなコンセプトを強力なデザインへと変えるのに役立つ機能が数多くあります。しかし、ProtoPieプラグインを使えば、より高度なプロトタイピング機能を活用できます。
ProtoPieの機能を使って、プロトタイプをさらに強化しましょう。ProtoPieでは、次のようなものを作成できます：
リアルでカスタマイズされたインタラクション
条件付きインタラクション
因果関係のあるインタラクション
テキスト入力、音声、メディア再生、センサー、複数デバイスを伴うインタラクション
特定のタッチスクリーントリガーを使ったインタラクション
ProtoPieとAdobe XDでシームレスなワークフローを構築する方法については、詳しく見る。
