XDでスライド式メインビジュアルを表現

Creative

この記事ではAdobe XDでWEBサイトで良くあるスライダー式のメインビジュアルを表現する方法を紹介します。

XDを使用すれば約5分と超簡単にスライダーを表現する事が出来ます。
ディレクション時や先方や外注先にスライダーの動きを伝えたい時などに便利なので是非覚えてみて下さい。

XDで良くあるスライダー式メインビジュアルを表現

今回表現するスライダーの動きは、横に自動でスライドするメインビジュアルです。
(下記のサイトの様な数秒後に自動でスライドするメインビジュアルです。)

https://www.meiji.co.jp/sports/savas/

では早速説明していきます。(5分で出来ます。)

①まずは適当サイズの画像が入る枠を数個作りしょう。
(今回は分かりやすくするために赤・黄色・青に色分けをしています。)

その数個の枠をグループ化してから水平方向のスクロールを選択してスクロールグループを作成します。(下記の写真参照)

②次にアートボードを作成した枠ぶん複製します。(今回のサンプルは3つの枠なので3つに複製)
そして各々のスクロールブロックをスライドの着地地点のイメージを持ってスライドしておきます。

③最後に、以下の様にアートボード同士をプロトタイプで繋げてあげれば動きは完成です。

④赤・黄色・青の枠の中に写真を入れ込めばメインビジュアル風のスライダーの完成です。

最後に今回紹介したスライダーを作成した、XDデータを添付しておきます。
めちゃくちゃ簡単に作成しているので実際に触ってみればすぐに理解出来ると思います。


以上が「XDで良くあるスライダー式メインビジュアルを表現」でした。

2020年9月20日Creativedesign,Reference,XD

Posted by KT