今回はAdobe XDのプロトタイプの基本的な使い方を紹介します。
インターネット上にある「プロトタイプの使い方」といった記事は基本的にアニメーションが追加されていたり、デザインが凝っていたりで正直分かりづらいなと感じたので、当サイトでは超シンプルなサンプルを使って、最も基本となるページ遷移のつなぎ方を紹介します。
プロトタイプの使い方
Adobe XDのプロトタイプを使用すると、双方のクリップボード間を移動する動きを追加できます。
この動き（アクション）を俗にインタラクティブアクションと呼ばれています。
例えば、XD上のTOPページを表現したクリップボードに『お問い合わせボタン』がある場合、そのボタンのオブジェクトをクリックした時にお問い合わせのクリップボードに移動できます。反対にお問い合わせのクリップボードのロゴをクリックした際にTOPページのクリップボードに戻ることが出来ます。（下記の様に）
実際の設定の仕方は以下のとおりです。
①まずはXDの画面の左上にあるプロトタイプを選択します。するとプロトタイプモードに移行します。
そこで次の様に操作します。
②クリックしたい部分を選択して、クリック後に切り替わるクリップボードに繋げます。
これだけで完了です。
※しかし上記のやり方は必ず一方通行なので、TOPに戻りたい場合は「お問い合わせ」のクリップボード→TOPの導線も繋げてあげなくてはいけません。
この仕組みを使うことで、様々なアニメーションや表現が出来る様になります。
以上が「【XDの基礎】プロトタイプの使い方：サイトのページ遷移の作成」でした。
この様にデザイン＋ユーザーの動きの表現が可能なのがXDの特徴です。
これをUXデザインと言い、ユーザーエクスペリエンスの向上に役立ちます。
