ホームアートボードの設定と画面遷移 - Adobe XDのチュートリアル

このレッスンでは ホームアートボードの設定と 画面遷移について説明します。 教材として エクササイズファイルのフォルダーにある 10 フォルダーの中の 10_01.xd を使います。 アプリやウェブサイトのデザインが 完成したら、 次の工程として プロトタイプを作成し、 その画面をユーザーがどのように 操作するのかを確認することができます。 まず画面左上で 「デザイン」モードから 「プロトタイプ」モードに 切り替えます。 まずは何もアートボードを 選択していない状態で 右上の「デスクトッププレビュー」 三角形のアイコンをクリックしましょう。 そうすると一番左にあるアートボード、 Menu のアートボードが プレビューされました。 まず、最初に表示したい画面を ホームアートボードとして 設定します。 トップページのアートボードを クリックすると、左上に グレーのアイコンが表示されます。 このアイコンをクリックすると、 青色に変わり、 このアートボードが ホームアートボードとして 設定されました。 また何もアートボードを 選択していない状態で デスクトッププレビューをすると、 最初にトップページが表示されました。 特定のアートボードを 選択しているときは 優先されて、そのアートボードから プレビューが始まります。 次にアートボードとアートボードを 画面遷移させてみましょう。 トップページの下の方にある 「商品一覧」というボタンを クリックすると、 右に矢印付きの 接続ハンドルが表示されます。 このハンドルを ドラッグして、 ターゲットになる目的のアートボードの 上で放します。 これで商品一覧をクリックしたら Products のページに遷移する という設定ができました。 右に「インタラクション」のパネルが 見えていますが、 「種類」は「トランジション」、 「移動先」は 移動先のアートボード名ですので、 Products になっています。 アニメーションは デフォルトで「ディゾルブ」が 設定されていて、 「イージング」 「デュレーション」は 「イーズアウト」 「0.3 秒」となっていますが、 今回はこのままにしておきます。 では何も選択していない状態で デスクトッププレビューをすると、 まずトップページが表示されて、 スクロールして 「商品一覧」をクリックすると、 Products のページに 画面遷移することができました。 続いて Products のページの ページのタイトル、 ロゴを選択します。 このロゴをクリックすると、 トップページに ページ遷移するようにしましょう。 矢印付きのハンドルをドラッグして、 トップページのアートボードの上で 放します。 これで確認してみると、 トップページの「商品一覧」を クリックすると Products のページに遷移し、 左上のロゴをクリックすると、 トップページに戻る というアートボードの遷移が 確認できました。 このレッスンでは、 ホームアートボードの設定と 画面遷移について説明しました。