TL;DR
Principle for Mac は、画面間のアニメーションや遷移を作成する際に使える堅実な選択肢です。
しかし、主な欠点は（Macユーザー専用であることに加えて）、高度なインタラクションやハイフィデリティなプロトタイピングを支える機能が不足していることです。
ProtoPie は、単なるモーションデザインツール以上の存在です。ProtoPie では、ユーザーは複雑なインタラクションを組み立て、コードを書かずにセンサー対応のプロトタイプを作成できます。
プロトタイピングは、製品開発やインタラクションデザインのプロジェクトに欠かせない作業です。市場には多くのラピッドプロトタイピングツールがあるため、どれを使うべきか迷うかもしれません。もし「プロトタイピングツール比較」の記事を探しているなら、この ProtoPie vs. Principle の記事が両者の違いを理解し、どちらが最適なプロトタイピングツールかを明らかにしてくれます。どうぞお楽しみに。
この記事で取り上げる内容は次のとおりです。
次の基準に基づいて、プロトタイプの作成とテストにおいて両者はどう違うのでしょうか。
さっそく始めましょう。
Principleとは？
Principle for Mac は、Web、モバイル、デスクトップ向けにアニメーション付きでインタラクティブなユーザーインターフェースを作成するのを支援する UX プロトタイピングツールです。名前のとおり、Principle は Mac オペレーティングシステム向けにカスタム設計されており、Core Animation によって動作します。
特定の用途向けに特別なツール群を提供するのではなく、Principle はデザイナーや開発者が組み合わせてさまざまなアニメーション効果やインタラクティブな効果を生み出せる汎用的な機能を提供します。
Principle を使う利点の一部は次のとおりです。
アニメーションのプロトタイピングとダイナミックなグラフィックスに特化して設計されています。
ユーザーフレンドリーなインターフェースで、学習コストも比較的低めです。
プレビューとテスト用の連携アプリとして Principle Mirror が用意されています。
Principle のインターフェース。
ProtoPieとは？
ProtoPie は、デザインチームとその企業がモバイル、デスクトップ、Web、IoT など向けの高いインタラクティビティを備えたリアルなプロトタイプを作成するのを支援する、最も簡単で完全コード不要のプロトタイピングツールです。ProtoPie は macOS と Windows で動作し、ProtoPie Player アプリは iOS と Android の両方に対応しています。
ProtoPie でプロトタイピングする主な利点の一部は次のとおりです。
ProtoPie は、シームレスなクロスプラットフォームおよびクロスデバイス連携を可能にする IoT 対応ツールです。
ProtoPie を使えば、デバイス固有の技術を利用して、3D Touch センサー、傾き、近接、音でプロトタイプを強化できます。
ProtoPie は非常に 使い方が簡単です。クリックして選択するだけで、トリガーとレスポンスベースのインタラクションを有効にできます。
ProtoPie Player は、どのデバイスからでもプロトタイプを即時展開できるようにし、アプリを非常に便利なものにします。
ProtoPie はハードウェアとソフトウェアの両方に対応しています。
ProtoPie Studio のインターフェース。
Principle for Mac と ProtoPie では、インタラクションはどのように作成されるのでしょうか？
ProtoPie ではオブジェクトにトリガーとレスポンスを追加してインタラクションを作成できるのに対し、Principle ではアートボードやレイヤーにトランジション矢印を適用してインタラクションを作成します。これらは Principle の用語ではイベントと呼ばれます。
Principle はいくつかの種類のイベントをサポートしており、それらを組み合わせることでユーザーはアニメーションやインタラクションを設計できます。これらのイベントには次のようなものがあります。
Hover（外側と内側）
Tap
Scroll（開始、解除、終了）
Drag（開始と終了）
Touch（上と下）
Auto
さらに、Principle ではユーザーは次の 3 種類のインタラクションを実行できます。
Dragging: タッチし続けてレイヤーの位置を変更します。
Scrolling: 必要に応じて、レイヤーのグループ全体または特定の子レイヤーを移動します。
Paging: ホーム画面や画像カルーセルを上下にページ送りし、読みやすくします。
長方形レイヤーにトランジション矢印を追加するには、稲妻アイコンをクリックします。
いろいろあるように見えるかもしれませんが、ProtoPie Studio には、ユーザーが息をのむようなインタラクションを設計できる幅広いオプションが搭載されています。ProtoPie でのプロトタイピングは、たった 1 つの概念モデルに集約されます。オブジェクト、トリガー、そして 1 つ以上のレスポンスを組み合わせて、思い描けるあらゆるインタラクションを作成できるのです。
元素周期表に着想を得て、ProtoPie には 2 つのグループからなる独自のバージョンがあります。トリガーとレスポンスです。
ProtoPie のトリガーについて詳しく知るにはここをクリックし、レスポンスについて詳しく知るにはこのドキュメントページをご覧ください。
ProtoPie vs. Principle: ProtoPie が優れている理由は？
Principle と ProtoPie でインタラクションがどのように作成されるかがわかったところで、これらのプロトタイピングツールの違いの細かな点を見て、なぜ ProtoPie がそれほど強力なのかをより深く理解していきましょう。
実テキスト入力機能
ユーザーがテクノロジー上で行う多くの作業には、何らかの形のテキストが関わります。書き込む場合もあれば、音声認識を使う場合もあります。テキストベースのフォーム、検索バー、ログインをサポートするには、テキスト入力レイアウトを使う必要があります。Principle にはまだそのようなレイアウトがないため、ブランドの収益性にとってこれがどれほど重要かを考えると、残念です。
一方、ProtoPie ではテキスト入力レイアウトを利用できます。必要なのは、プロトタイプデザインに入力レイヤーを追加するだけで完了です。入力レイアウトのサイズ、位置、間隔まで、すべて ProtoPie Studio で調整できます。
さらに優れているのは、ProtoPie が 1 行入力と複数行入力の両方に対応していることです。いつもどおり、入力レイヤーは物理キーボードでも、
iOS、iPadOS、Android 上でも機能します。
ProtoPie で入力レイヤー機能を使う方法については、以下のチュートリアルをご覧ください。
スマートデバイスの内蔵機能を使ってプロトタイプに命を吹き込む
このプロトタイピング対決で ProtoPie がさらに高評価を得る理由は、Principle とは異なり、カメラ、加速度計/ジャイロ、マイク、コンパス、近接、3D Touch など、さまざまなスマートデバイス内蔵センサーをシームレスに取り込めるからです。
これらの機能のうち、コンパスとチルトの 2 つがどのように動作するのかを見ていきましょう。
Compass
ProtoPie では、Compass は、デバイスの向いている方向に基づいてレスポンスが実行される状態です。Compass Trigger を追加したら、それを Rotate Response にリンクし、値を入力して磁場の方向に基づく回転を生成します。
ProtoPie で作成したモバイルコンパス。
Tilt
ProtoPie における Tilt トリガーの正式な定義は、「デバイスの角度に基づいてレスポンスが実行される状態」です。言い換えると、レイヤーに Tilt トリガーを適用すると、レスポンスはデバイスの角度に基づいて動作します。
ProtoPie で作成したパノラマカメラのプロトタイプ。
インタラクション記録: 単なる引き継ぎ以上のもの
Principle のプロトタイプツール（Version 6 以降）では、ユーザーが Web を通じてプロトタイピングプロセスを共有できます。しかし、文書化したプロセスを誰かに書き出すには、有効期限が切れていない Principle ライセンス、または少なくとも Free Trial 期間内のライセンスが必要です。どちらも満たしていない場合、ドキュメントのエクスポート機能にはアクセスできません。さらに、有効なライセンスがあっても、アニメーションの値は書き出せません。これは製品開発プロセス全体にとって問題になる可能性があります。
ProtoPie は違います。Team & Enterprise プランでは、ProtoPie はインタラクション記録と呼ぶ機能を提供しています。これは、プロトタイプ作成時に行われたすべてのインタラクションをリアルタイムで記録し、文書化します。インタラクション記録では、各インタラクションの正確な仕様と、プロトタイプのレイヤー属性に関する詳細が記録されます。
この機能は、製品開発時に複数のチームや外部のステークホルダーと協力する必要があるときに非常に役立ちます。きちんと文書化されたプロトタイプ計画を他者と簡単に共有できるため、素早く簡単なデザイン判断が可能になります。
インタラクション記録を使うと、デザイナーは次のことができます。
誤解なく意図を伝えられる;
開発者に本当に必要な値を提供できる;
時間を節約できる;
インタラクション記録ページ。
プロトタイプのテストがこれまでになく簡単に
プロトタイプデザインが完成したら、次はデバイス間でのプロトタイプのプレビューとテストです。スマートフォンやタブレットでプロトタイプをテストする方法が気になるなら、答えがあります。
Principle には Principle Mirror という連携アプリがあり、ダウンロードしてプロトタイプのプレビューに使えます。このアプリは、プロトタイプ作成時にメインの Principle ツールで作成した内容をすべて同期します。ただし、Mac 以外のデバイスでプロトタイプをプレビューしたい場合に Principle Mirror の問題が生じます。デバイスを USB ケーブルでコンピューターに接続する必要があります。Principle Mirror にはまだ直接的なデバイス間互換性がありません。しかし、一度 USB でデバイスを接続すれば、スマートフォンやタブレットと同期したプロトタイプは、複数回のプレビューとテストに引き続き利用できます。
Principle Mirror と ProtoPie Player の比較。
ProtoPie には ProtoPie Player という同様の連携アプリがあります。この ProtoPie アプリを使うと、スマートデバイス上で ProtoPie Studio で開発しているデザインをリアルタイムで同期できます。Principle Mirror とは異なり、ProtoPie Player アプリでは、ProtoPie Studio から QR コードをスキャンするだけで、iOS、iPadOS、Android 上でプロトタイプを簡単に表示、体験、テストできます。USB ケーブルを使ってプロトタイプに接続することもできます。
組み込みプラグインでワークフローを強化
Principle と ProtoPie はどちらもサードパーティ連携をサポートしていますが、その対応範囲は異なります。Principle は Sketch と Figma からのデザイン取り込みのみに対応しています。しかし、ProtoPie では AdobeXD、Sketch、Figma からデザインを取り込めます。さらに、Lottie アニメーションも追加できます。
ProtoPie Studio の取り込み機能を使えば、途中からでも作業を再開できます。
ProtoPie vs. Principle: 結論は？
Principle と ProtoPie の違いを理解すると、最適なハイフィデリティプロトタイピングツールを選ぶ際に、デザイナーは候補を絞り込みやすくなります。上の比較を見ると、次の理由から、ProtoPie が 2 つのうちで圧倒的に優れたプロトタイピングツールであることがわかります。
Principle は優れていて使いやすいツールですが、特に iOS に強く偏っているうえ、多くの制限があります。
ProtoPie では無限に組み合わせられるトリガーとレスポンスにより、プロトタイプ作成がより簡単です。
インタラクション記録により、ProtoPie ではプロトタイピングのドキュメント化プロセスもより簡単で、より速く、よりシームレスです。
どちらのツールにもプレビューとテスト用の堅牢な連携アプリがありますが、ProtoPie Player のほうがデバイス間で同期しやすく、使いやすいです。
センサー対応: ProtoPie の強みは、傾き、音、コンパス、近接センサー、3D Touch センサーなど、スマートデバイスのセンサーをプロトタイプ内で制御できることです。
もう 1 つの利点は、Principle（または他のどのプロトタイピングツール）から ProtoPie への移行が簡単なことです。ProtoPie コミュニティ に参加して、ほかの ProtoPie ユーザーと交流し、この素晴らしいプロトタイピングツールをどのように使っているか学びましょう。さらに、プロトタイピングが初めてなら、そこでいくつかのヒントやコツを学び、自分の ProtoPie に活かすこともできます。
