はじめてのプロトタイプ作成

プロトタイプを作成する前に、ProtoPieをダウンロードしましょう。

このページでは、デザインをインポートして、インタラクションを作成、プロトタイプをテストして共有する方法を説明しています。

ProtoPieのモデルは、Object+ Trigger+ Responseであり、どのようなインタラクションも簡単に作成できるようになります。

ProtoPieのダウンロードはこちらから。

1. デザインのインポート

FigmaSketch、またはAdobe XDから、それぞれのProtoPieプラグインを使用してProtoPieにデザインをインポートします。

[object Object]

アートボードまたは一番上のフレームをシーンとしてインポートし、Figma、Sketch、Adobe XDと同じレイヤー階層、配置、制約を持つオブジェクトとしてインポートします。

デザインのインポートについて詳細はこちらをご参照ください。

2. はじめてのインタラクション作成

より現実的なインタラクションを作成するには、ProtoPie独自の概念モデルを理解することが不可欠です。 インタラクションに必要な要素を組み合わせて、最初のインタラクションを作成してみましょう。

ProtoPieの概念モデルを理解する

次の製品モデルの動画をご覧ください。この概念モデルは、ProtoPieの土台でありオブジェクトの動きを基にしています。

要创建一个原型,就需要先创建其交互;而要创建其交互,则应先把涉及的对象、一个触发动作、一个或多个反应动作关联在一起。

[object Object]

オブジェクトのトリガーとレスポンスを組み合わせてインタラクションを作成します。トリガーは、1つもしくは複数のレスポンスを作り出します。レスポンスはトリガーによって変化することから、様々なパターンを作り出すことが可能なのです。

[object Object]

元素の周期表に触発されたProtoPieの概念モデルには、トリガーとレスポンスの2があります。各トリガーとレスポンスには、独自の機能とプロパティがあり 、トリガーとレスポンスを組み合わせて、あらゆるインタラクションを作成できます。

[object Object]
panel trigger tap

上記の例では緑色の四角形をタップすると、右側に移動します。これはTapのトリガーにMoveのレスポンスを組み合わせた結果です。

より複雑な、高度なインタラクションも作成できます:

  • 複数のレスポンスを適用させる
  • トリガーとレスポンスをそれぞれ別のレイヤーに適用する
  • レスポンスの持続時間や遅延時間を調整する

3. 作成したプロトタイプをテストする

プレビューウィンドウでプロトタイプを実行します。 プレビューウィンドウを使用して、実際のインタラクションを確認します。 インタラクションが機能しない場合、または途中でミスをした場合は、プレビューウィンドウに表示されます。

デフォルトでは、レイヤーまたはインタラクションに変更を加えると、プレビューウィンドウが自動的に更新されます。

  1. Preview window of ProtoPie Studio showing a prototype
  2. ProtoPie Player interface

ProtoPie PlayerはProtoPie Studioと連動しているアプリです。このアプリを使用して、iOS、iPadOS、Android環境でプロトタイプを簡単に確認することができます。

ProtoPie Playerの詳細については、こちらをご参照ください。

4. プロトタイプを共有する

プロトタイプをクラウドにアップロードします。 プロトタイプのリンクをメンバーと共有します。 プロトタイプに応じて、メンバーは、デスクトップブラウザー、モバイルブラウザー、またはProtoPie Playerで試します。

[object Object]

メンバーは、クラウドでプロトタイプを使用してユーザビリティテストを行い、コメントの共有も可能です。 作成したプロトタイプにはパスワード保護をかけて共有が可能なため、セキュリティも安心です。

[object Object]

もっとProtoPieについて学ぶ

さらにProtoPieについての知識を深めるために、下記のコースが用意されています。

(YouTubeの自動翻訳を日本語に設定することも可能です)

オンラインワークショップも開催中です。

コミュニティから学ぶ

ProtoPieのコミュニティに参加して、他のProtoPieユーザーから学びましょう。 疑問に思うことを自由に質問してみましょう。 他のユーザーが以前に共有したヒント、トリック、解決策を見つけることもできます。

Back To Top