要約
InVision は、シンプルなデザインを迅速に仕上げたいときに最適なプロトタイピングツールです。UX デザイナーが、基本的でありながら実用的なプロトタイプを素早く作成できるスピードは見事です。
しかし、深さや複雑さを求めるなら物足りません。状態と組み合わさった複雑なインタラクションやアニメーションを扱う力が不足しています。さらに悪いことに、他のツールとの連携もできません。
ProtoPie はまったく別物です。リッチで複雑なインタラクションを提供し、さまざまなソフトウェアやハードウェアとの連携、さらにクラウドベースの共同作業も可能な高精細な高速プロトタイピングツールです。
近ごろビジネスの動きは速く、UX デザイナーは関係者を感心させるために、実用的で現実的なプロトタイプをすばやく作成することをますます求められています。もちろん、これには高速プロトタイピングツールが必要です。では、世の中で最も優れたプロトタイピングツールは何でしょうか？
これはしばしば、まったく異なる2つの勢力、ProtoPie 対 InVision の戦いとして見られます。
以下で、ProtoPie と InVision の違いをより詳しく見ていきましょう。
ProtoPie とは？
InVision とは？
ProtoPie とは？
ProtoPie は、コード不要で使える強力なプロトタイピングツールで、あらゆるデジタル製品向けの高精細なインタラクティブプロトタイプをすばやく作成できます。
ProtoPie は理解しやすく、使い勝手も抜群です。信じられませんか？ それならユーザーに聞いてみてください。あるユーザーは「さまざまなコンポーネントでワークフローが加速し、センサーと変数でプロトタイプが一気に強化される」と語っています。「Sketch、Adobe XD、Figma など、好きなデザインツールからカスタムデザインを取り込めます。このクロスプラットフォームツールなら、デスクトップ、タブレット、その他のプラットフォームを問わず、いつでもどこでもプロトタイプをテストできます」とも述べています。
ユーザーはプロトタイプをクラウド上で共有できるだけでなく、コメントを付けたり、誰がプロトタイプにアクセスできるかを簡単に管理したりできます。このクラウドベースのプロトタイピングツールを使えば、チームメンバーと協力し、反復作業をより速く進められます。要するに、ProtoPie はあなた独自のアイデアを、より雄弁に、より深く、より豊かに伝えるのです。ひと言でいえば、ProtoPie はアイデアに命を吹き込みます。
InVision とは？
InVision は、静的な画面のインタラクティブなプロトタイプを作成するための人気の Web ベースツールです。高精細なマイクロインタラクションや高度な状態遷移は必要ありません。
このアプリは、デザインツールの Sketch に似ているため、学習コストが低いのが特徴です。シンプルで連携しやすいワークフローにより、デザイナーは静的なスクリーンショットをアップロードし、できるだけ簡単にクリック可能なプロトタイプを作成できます。タイムラインアニメーションにも対応しており、インタラクションもすばやく分かりやすいです。とはいえ、問題はそこです。プロトタイプが複雑になるほど、動作がカクつきやすくなります。
プロトタイピングで InVision に期待できること
InVision はプロトタイピングに対して、別のアプローチを取ります。高度なインタラクションや状態と組み合わさったアニメーションではなく、画面から画面へという考え方が中心です。画面をアップロードすると、画面同士をつなぐホットスポットが作成されます。各画面をリンクするときは、遷移先画面、アクション/ジェスチャー、トランジションを指定します。ジェスチャーやアニメーションのオプションには、スライドイン、フェード、フリップ、そしてタイマーを設定して1つの画面を自動的に別の画面へ切り替える機能があります。
プロトタイプモードとページ間のリンク
Craft は Sketch と Photoshop のプラグインです。たとえば Sketch では、Sketch 内でインタラクションを追加し、それを InVision アカウントに同期できます。Craft を使うと、Sketch で「Prototype mode」に入り、任意のレイヤーに対してインタラクションを指定できます。レイヤーを選択した状態で K キーを押すだけで、別のページや同じページ内の別の位置に接続できます。トリガーイベントやアニメーションにもさまざまなオプションがあります。たとえば、push right、slide left、flow などです。
InVision は Sketch と完全に統合されているため、Sketch ファイルのデザインを変更しても、InVision ファイルに悪影響が出る心配はありません。また、画面デザインとホットスポットの追加をすばやく切り替えられます。
明らかに問題があります。InVision と Craft では複雑さに対応できません。特に、1つの画面に複数のインタラクションがあり、ユーザーにあらゆる可能性をクリックして進んでもらいたい場合はなおさらです。
それでも、InVision はシンプルなプロトタイピングには優れています。たとえば、ある画面から次の画面へどのように流れるかを示すような用途です。ただし、1つの画面内で複雑なインタラクションを扱うのには向いていません。結局のところ、InVision の売りはスピードであり、その速さは見事です。クリック可能なプロトタイプを数分で作成できます。
オーバーレイスクリーン
「Overlay」機能を使うと、下の画面をそのまま残したまま、デザイン要素を画面の上に重ねられます。これは便利で、特にハンバーガーメニューのようなものでは、作成する画面数を減らせます。各ページごとにメニューを表示した画面を作る代わりに、ハンバーガーボタンが押されたときに「Overlay」機能を使うだけです。
Specs — デザイナーと開発者のコラボレーション
Specs は、手動で仕様を作成したり、開発者と会議したりする作業を1ステップにまとめます。開発者は、通常必要となる何度ものやり取りなしに、すぐに参加してコーディングを始められます。
ProtoPie にも同様の機能であるインタラクション記録があり、InVision に引けを取りません。こちらは後ほど詳しく触れます。話を InVision に戻しましょう。
こんな場合は InVision のほうが向いています：
基本的なプロトタイプをすばやく作成する必要がある
InVision のデスクトップアプリ、Dropbox、Box とファイルを同期したい
プロトタイプ用に手早いアニメーションを使いたい
コメントにファイルを添付する必要がある
InVision は、プロダクトデザイン向けのオールインワン環境としてはうまく機能しますが、ワークフローにさまざまなツールを組み込みたい場合は不満が残るでしょう。そもそも、多くの UX デザイナーは何でも1つのツールで済ませるわけではありません。1つのプロジェクトで、最大12種類もの異なるツールを使います。InVision は他のツールと連携できないため、今日の市場では時代遅れになっています。
プロトタイピングで ProtoPie に期待できること
ProtoPie の真価は、現実的で複雑なインタラクションを見せる必要があるときに発揮されます。オブジェクト、トリガー、レスポンスの流れを伴うインタラクションをデモでき、コンパス、傾き、音、3D Touch センサーを含むスマートデバイスのセンサーをプロトタイプ内で制御できます。
そのため、ProtoPie は、コード不要で高精細なプロトタイプを作成するための、市場でも最適な選択肢です。ロジックや動的入力を扱える変数と条件を使って高度なユーザージャーニーを示す必要がある、実際のユーザビリティ評価や UX 評価にも適しています。
では、ProtoPie が InVision と何が違うのか、詳しく見ていきましょう。
プロトタイプ内でスマートデバイスのセンサーを簡単に制御する
ProtoPie なら、マイクからコンパス、3D Touch、近接センサー、ジャイロスコープまで、スマートデバイスのあらゆるセンサーを、完全ノーコードで使い、現実的な高精細プロトタイプを作成できます。
ProtoPie でアニメーション化された 3D ゲーム「Marble World」をご覧ください。
プロトタイプに音声と動画を埋め込む
ProtoPie なら、プロトタイプに音声や動画を簡単に埋め込めます。たとえば、
のようなプロトタイプでは、動画が再生されます。
Video Player プロトタイプの作り方を学びましょう。
メディアファイルも簡単に制御できます。変数を使って再生や一時停止が可能です。残念ながら、これは非常に要望の多い機能であるにもかかわらず、InVision にはありません。
ProtoPie でタッチスクリーンの力を体感する
ProtoPie は、モバイルやタブレット向けアプリに取り組むあらゆるデザインチームにとって、最も多用途なプロトタイピングツールです。
次のデモでは、スマートフォンのタッチスクリーンの上に直接置かれたさまざまな果物にプロトタイプがどう反応するかを見てみましょう。
Formula と変数を使って高度なインタラクションを作成する
変数と Formula を使えば、残高の計算やメールアドレスの検証から、複雑な動きをするオブジェクトまで、動的なインタラクションを持つプロトタイプを作成できます。たとえば、放物線を描く軌道などです。可能性はまさに無限大です。
Formula と変数を使って、リアルなタイプライター効果を作成しましょう。
この Pie をダウンロードして、ぜひご自身で試してみてください。
プラグインで ProtoPie をお気に入りのデザインツールと連携する
数回クリックするだけで、ProtoPie は macOS の Sketch、そして macOS と Windows の両方で Adobe XD や Figma からデザインを取り込めます。従来のインポートやプラグインにも対応しており、柔軟かつ簡単にデザインを取り込めます。
ProtoPie の Figma、Sketch、Adobe XD 向けプラグインは、現在すべて利用できます。
ProtoPie 対 InVision：勝つのはどちら？
InVision は評価すべき存在です。最初のころは先駆者として、デザイナーにプロトタイプの作り方を教えていました。しかし、時代は変わりました。今では ProtoPie が UX デザイナーにプロトタイピングを極める方法を教えています。
InVision はシンプルなデザインを作るのに役立つ高速プロトタイピングツールですが、変化の中で急速に時代遅れになりつつあります。関係者は、承認を出す前に、アプリの実用的で現実的なプロトタイプ、つまり手のひらの上にある本物を見たがっています。彼らがそれ以下で満足することはありません。
そこで登場するのが ProtoPie です。迅速な納期と、複雑なインタラクションやリッチなデザインに最適化された ProtoPie は、高精細プロトタイピングとクラウドベースの共同作業において、市場で最も優れた高速プロトタイピングツールです。機能が満載で、数多くのソフトウェア／ハードウェア連携も備えた ProtoPie は、大衆向けではありません。高精細プロトタイピングの価値を理解するデザインチームや関係者のためのツールです。
ProtoPie を使い始めましょう
プロトタイピングを次のレベルへ進める準備はできていますか？今すぐ登録しましょう。
ユーザーの声をもっと聞くには、ProtoPie の Discord チャンネルをご覧ください。
