この記事ではAdobe XDでWEBサイトで良くあるスライダー式のメインビジュアルを表現する方法を紹介します。
XDを使用すれば約5分と超簡単にスライダーを表現する事が出来ます。
ディレクション時や先方や外注先にスライダーの動きを伝えたい時などに便利なので是非覚えてみて下さい。
XDで良くあるスライダー式メインビジュアルを表現
今回表現するスライダーの動きは、横に自動でスライドするメインビジュアルです。
（下記のサイトの様な数秒後に自動でスライドするメインビジュアルです。）
プロテインブランド「ザバス」｜株式会社 明治
日本で一番選ばれているプロテインブランド「ザバス」のホームページです。商品詳細や栄養に関する情報、サポートアスリート、キャンペーンなどを掲載しています。ザバスは目的に合わせた豊富なバリエーションを展開しています。
www.meiji.co.jp
では早速説明していきます。（5分で出来ます。）
①まずは適当サイズの画像が入る枠を数個作りしょう。
（今回は分かりやすくするために赤・黄色・青に色分けをしています。）
その数個の枠をグループ化してから水平方向のスクロールを選択してスクロールグループを作成します。（下記の写真参照）
②次にアートボードを作成した枠ぶん複製します。（今回のサンプルは3つの枠なので3つに複製）
そして各々のスクロールブロックをスライドの着地地点のイメージを持ってスライドしておきます。
③最後に、以下の様にアートボード同士をプロトタイプで繋げてあげれば動きは完成です。
④赤・黄色・青の枠の中に写真を入れ込めばメインビジュアル風のスライダーの完成です。
最後に今回紹介したスライダーを作成した、XDデータを添付しておきます。
めちゃくちゃ簡単に作成しているので実際に触ってみればすぐに理解出来ると思います。
以上が「XDで良くあるスライダー式メインビジュアルを表現」でした。
