【Adobe XD】パラレルスクロールの作り方！GIFで解説します！

今回は自動アニメーションを使って、

このようなオシャレなパラレルスクロールを作っていきたいと思います！

まずは、スクロールする際の画像を用意します。

今回はUnsplashのJoshua Earleさんの写真をお借りします。

Photoshopを使って写真を分割していきます。

Photoshopで写真を分割

Photoshopで行うのは、背景と前景の２分割です。

写真やイラストによっては更に分割してスライドさせることが出来るので、

挑戦してみてください。

今回はAdobe XDの説明になるので、Photoshopの説明は簡単にしますね。

スクロールの時に股の間から何もない背景が見えてしますので、

背景のスカスカな場所をコンテントアウェアフィルなどで埋めていきます。

アートボードを縦に×２

写真の配置

アートボードの下部に背景色を配置

写真の下部（雪の部分）と同じような色の背景を配置します。

そして、接続部分に長方形を配置します。

グラデーションを使ってブレンドしていきます。上部を透明度０％にするとキレイになります。

グラデーションを上手く使えば、背景も他の色などにも出来ますね。

ボタンを追加

スクロールを起こすボタンを追加します。

矢印を写真の下部に長方形を追加し、

透明度０％な長方形を矢印の下に配置してグループ化します。

 全体をグループ化

アートボード内全ての要素をグループ化します。

全体をグループ化したので、アートボード外に出ても崩れなくなりました。

アートボードのサイズを1920X1080にしても平気だと思います。

アートボードの複製

アートボード名をOption（Alt）を押しながらドラックすれば、複製できます。

２つ目のアートボード内全体を上に上げる

そしたら、背景の山の写真とテキストを下にズラします。

レイヤー内では、背景の山とテキストは一番下（後ろ）にあります。

プロトタイプで２つのアートボードを繋げる

アクションを起こす矢印から青タグを引っ張り、２つ目につなげます。

設定は

タップ　自動アニメーション　イーズイン/アウト　２秒

にしてみました。

あとは、背景の写真の位置やスクロールされるスピードをいい感じに調整してみてください。

これで完成です！

今回は少し他のアニメーションよりも高度でしたね。

ですが、やってみると案外簡単なので挑戦してみてください。

他にもAdobe XDのチュートリアルをご紹介していますので、チェックしてみてください！

ではまた！

未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース