5-1. プロトタイプを作成する

1.プロトタイプとは

プロトタイプは、制作したUIを実際に近い形でデザインを確認することができるものです。実装前に問題点の洗い出しや、さまざまな概念をテストしたりと、作業の後戻りを防ぐことができます。

このレッスンでは、プロトタイピングの設定や使い方について説明していきます。

2.画面をプロトタイプモードに切り替える

プロトタイプを作るには、プロパティパネル上部の図2赤枠の「Prototype」を押しプロパティモードを変更します。

プロトタイプを表示するデバイスの機種や色、プレビューの表示の際の背景色を選ぶことができます。

ページ遷移などは「Interactions」から設定します。

「Interactions」の横にある「＋」のアイコンをクリックします。
追加されたインタラクションをクリックし、「Interaction details」でトリガー（※）、遷移先、アニメーションを設定します。

※トリガー：クリック・タップ・ホバー、または別のマウス/タッチ操作など

3.リンク先を選択する

リンク先は、フレーム内の（子）オブジェクトから接続するこができます。 これにより、プロトタイプ内のそのオブジェクトに接続線が作成されます。 

リンク先を選択するには、図4のように接続するオブジェクトを選択し、選択オブジェクトにある青丸をドラッグし、リンク先のフレームへドロップします。

また、「Interaction details」で後からでも設定し直すことが可能です。

4.トリガーを設定する（タップ・ホバーなど）

画面遷移のきっかけのアクションを「Trigger」で設定することができます。通常のクリック（タップ）だけではなく、PCのWebサイトであるようなホバーや、タップを押したとき・離したときなど、様々な種類が用意されています。

トリガーの種類はこのようになっています。

1. On tap
   最も一般的に使用されるトリガーであり、オブジェクトがクリックまたはタップされた後にのみアクションが実行されます。

2. On drag
   スワイプの動きを指定できます。

3. While Hovering
   このトリガーは、カーソルが触れているときにのみ、実行され、カーソルを外すともとに戻ります。

   ※PCのシュミレーションように用意されたものなので、モバイル版では、While HoveringはOn tapに自動的に変換されます。

4. While Pressing
   While Pressing Triggerは、マウスまたはトラックパッドでクリックしているときにのみ実行されます。クリックを離すと、元のフレームが再び表示されます。

5. Mouse enter
   マウスがボタン領域に入ったときと、Enterキーを押したときに画面が遷移します。ホバリングと似ていますが、こちらは、マウスを戻しても元のフレーム戻ることはありません。

6. Key/gamepad
   キーボードのキー、またはゲームパッドでクリックされた時に実行されます。

7. Mouse leave
   このトリガーは、ユーザーのマウスが領域から出たときに次の画面を遷移します。

8. Touch down
   マウスが最初に押されたとき、またはユーザーの指がプロトタイプ内のオブジェクトに最初に触れたとき、モバイルデバイスの場合に、 Destinationフレームをトリガーします。

9. Touch up
   マウスクリックが解放されたとき、またはモバイルデバイスの場合、ユーザーの指がプロトタイプ内のオブジェクトへのタッチを停止したときに、 フレームがトリガーされます。

5.アクションを設定する

アクションは、トリガーを介して、プロトタイプをどこでどのように進行させるかを決定できます。

トリガーを設定し、下にあるプルダウンから追加したいアクションを選択します。

1. None
   アクションが必要ない場合に使用します。

2. Navigate to
   遷移先を選択します

3. Open overlay
   元のフレームの上に表示されます。警告などを表示する際やモーダル表示に適しています。

4. Scroll to
   指定した箇所へスクロールで移動します。ページ内リンクなどの動作に適しています。

5. Swap overlay
   「Navigate to」のような動作で切り替わります。
   「Open overlay」のようにオーバーレイで表示されているフレームの背景色などの設定ができません。

6. Back
   プロトタイプの戻るボタンのシミュレーションに適しています。

7. Close Overlay
   表示されたオーバーレイを閉じます。 これは、画面上のプロンプトや警告が消えるのを複製するのに最適です。

8. Openlink
   プロトタイプの外部のURLにユーザーを誘導できます。 
   フィールドにURLを入力し、リンク先を設定します。

フレーム

画面遷移先を選択すると、いくつかの追加設定が使用可能となります。
表示の方法でOverlayを選択すると、表示する位置、表示されていない箇所をクリックすると閉じるようにするか、オーバーレイ時の背景色を設定できます。

6.トランジションを選択する

トランジションとは画面と画面が切り替わるときに起こるアニメーションのことです。スライドインしたり、ふわっと切り替わったりと様々な効果を選ぶことができます。これにより、実際の設定でデザインがどのように表示され、どのように反応するかをシミュレートできます。

選択を行うには、プロトタイププロパティから「Interaction details」内の「Animation」から選択することができます。

1. Instant
   インスタントトランジションは、 アクションが行われてたときにフレームをすぐに表示します。

   

2. Dissolve
   Dissolveトランジションは、次のフレームへフェードインします。 

   

3. Smart animate

   アートボードの差分を指定したアニメーションでつなぎます。

   ドロップダウンのナビゲーションなどに適しています。
   ドロップダウンで開いた部分を元に戻したようにする場合は「Back」を設定すると前の画面に戻ることができます。
   
   

4. Move in
   Move inトランジションは、フレームの上に次のフレームの上に表示します。

   

5. Move Out
   Move OutトランジションはMove inの逆の動きをします。

   

6. Push
   プッシュトランジションは、次のフレームへスライドされます。

   

7. Slide in
   Slide inトランジションは、 Move inと同様に、 次のフレームへ移動します。ただし、フレームは、2つの動作間で異なる方法で処理されます。

   

8. Slide Out
   Slide Outトランジションは、 Slide inと逆の動きをします。

   

アニメーションによって、画面の表示される方向や時間など細かい調整がプロパティで設定できます。

• ← → ↓ ↑
  次のフレームが入る方向を選択できます。

• 時計のアイコン
  移行が完了するまでにかかる時間を決定します。

• LinerやEase inなど
  イージングの設定ができます。開始時、終了時、または開始時と終了時の両方で遷移の一部を遅くすることができます。

• Preserve scroll positon
  Preserve scroll positonにチェックを入れると、2つのフレーム間を移動するときに同じスクロール位置を維持できます。