design
岩瀬 莉奈

2020.2.17デザイン 

Webデザイナー

岩瀬 莉奈

【Adobe XD】Webデザインでよく使用するプロトタイプの繋ぎ方

こんにちは!デザイナーの岩瀬です。

本日は、普段Webデザインを作成する際に私がよく使用している、AdobeXDのプロトタイプ機能を簡単に紹介したいと思います。

AdobeXDのプロトタイプ機能を使用すると様々な動きを再現できるのですが、今回はその中でもよく使用する、ヘッダーを固定と、
スライダーの動きを再現する方法を簡単に説明したいと思います。

 

先日バレンタインデーだったので、サンプルもバレンタイン仕様にしてみました。

02

まずはプロトタイプタブを選択します。
ホームの青いラベルが付いたアートボードは、プレビューの際に一番最初に表示されるアートボードになります。

 

08

ヘッダーの固定

ヘッダーのグループを選択して、スクロール時に位置を固定のチェックを入れる。
【スクロール】スクロール時に位置を固定

 

続いて、スライダーを作成していきます。

05

スライダーが切り替わる前と後の2つのデザインを用意します。

 

04

スライダーが切り替わるタイミングで、左右の余白が消えてしまわないよう、太い線を上に重ねます。

 

 

07

スライダーの設定

スライダーのグループを、次のアートボードへリンクを繋げます。
インタラクションの設定は以下の通り。
【トリガー】ドラッグ
【アクション】自動アニメーション
【移動先】02(次のアートボード)
【イージング】なし

 

06
スライドした後、元に戻せるように、一つ前のアートボードへもリンクを繋げます。
インタラクションの設定は以下の通り。
【トリガー】ドラッグ
【アクション】自動アニメーション
【移動先】01(一つ前のアートボード)
【イージング】なし

 

↓出来上がった動きがこちらになります。

 

最後まで読んでいただきありがとうございました!

現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
ホームページ制作サービスはこちら
ページTOPへ