XDの便利機能③-インタラクティブプロトタイプ・リンクの設定

IllustratorやPhotoshopでモックアップを作成し、お客様に提案する際に、リンクの説明はどのようにされていますか？
「ここのボタンをクリックしたら、この画面に遷移して」と言って、お話されていますか？
もしかしたら、遷移図、みたいなものを別途用意している方もいるのではないでしょうか。

XDには「プロトタイプモード」と機能がよういされていて、こちらを使うと、本物の端末のように、クリックして画面遷移、などの動きを確認することができます。

この機能を使えば、画面遷移図など用意せず、上司やお客様と共有することで、まだコーディングしていないのに実際のWebサイトのように操作することが可能です。

デザインモードでデザインをして、 プロトタイプモードに切り替える

まずは「デザインモード」で画面をデザインしておきましょう。
別ページのデザインをアートボードに分けて、同じファイルに作成します。

例えば、以下のようにトップページとサブページを作成しましょう。

そしてトップページからサブページへのリンク、サブページからトップページへ戻るリンクを設定してみます。

「デザインモード」から「プロトタイプモード」を切り替えますが、画面左上にあるモードをクリックして切り替えます。

切り替えると、プロパティーインスペクタの内容が変わります。

リンクを設定する

トップページの「続きを見る」ボタンを押すと、サブページに遷移するリンクを設定していきましょう。
リンクを設定したオブジェクトを選択すると（今回は「続きを見る」ボタンを選択します）、以下のような青いマークが表示されます。

この青いマークの右矢印をドラッグし、遷移先であるサブページの上にマウスを合わせて離します。

トップページとサブページが繋がるように、青い線が表示されます。

同様に、サブページのページタイトルからトップページへ遷移するリンクを設定しておきましょう。

プレビューを実行する

ではプレビューを実行してリンクを確認しましょう。

右上にある三角のプレビューボタンを押しましょう。

プレビューが実行されると、プレビュー用の画面が表示されます。
本物のスマフォを想定した画面です。

プレビュー画面の中で、先ほど設定した「続きを見る」のリンクを押してみましょう。

すると、本物のスマフォのように画面が遷移して、サブページが表示されたはずです！！

もちろん、サブページのページタイトルをクリックすれば、トップページへ遷移して表示されます。

XDがない場合は、コーディングまで終えることでこのような動きを確認することができるようになります。
コーディング前に遷移の確認ができるのは、とっても便利。
開発に詳しくないお客様にも直感的に操作して頂けるので、今後も活用したい機能です。