【Adobe XD】手軽に作れる!パララックスアニメーション作成方法

AdobeXDパララックスアニメーション作成方法

みなさんこんにちは。しゅん(@shun_webdesign)です。

デザイナーの方ならご存知のAdobe XD(以下略:XD)ですが、これを読んでいる方でプロトタイプを作っているでしょうか?

XDはWebデザインやUIデザインを作成するためのツールですがプロトタイプを作らずにアートボードにデザインのみ作っている方も多いでしょう。

そんな方のために今回はWebサイトでも多い表現の一つであるパララックスアニメーションを作る方法を紹介します。

この投稿をInstagramで見る

Shun(@shun_webdesign)がシェアした投稿

合わせて読みたい

AdobeXD Tipsまとめ 【Adobe XD】保存版これだけ見とけば大丈夫!今から使えるTipsまとめ 【Adobe XD】コーディングが分からなくても迷わない!XDの使い方

パララックスとは?

パララックスとは英語で「parallax(視差)」という意味です。例えば、サイト上でスクロールすると画像やテキストのスクロールスピードが違うことでズレたりする表現を見たことがないでしょうか?

スクロールやカーソルの移動を利用したウェブサイトならではの表現方法です。

作成方法

実際にスクロールさせてプロトタイプを動作させるわけではなく、キーを押すことで画面(表示領域)が移動するように設定します。

作成方法まとめ
  1. デザインの作成
  2. インタラクションの設定
  3. プロトタイプで動作確認

手順

STEP.1
デザインの作成

パララックスさせるデザインを作成します。アートボードはビューポートの高さに設定し画面のサイズに合わせましょう。

アートボード外に表示してるブロックは薄く表示されます。

アートボード画像

STEP.2
アートボードを複製

作成したデザインを複製し、表示領域を動かします。

各ボードのレイヤー名が同じでないと自動アニメーションが動作しないので気をつけてください。

STEP.3
インタラクションの設定

プロトタイプの画面へ移動し、キーを押して表示領域が動くように設定します。

  1. インタラクション[トリガー]から[キーとゲームパッド]を選択。
  2. [↓]矢印キーを押す
  3. アクション[種類]の[自動アニメーション]を選びます。
  4. イージング、デュレーションは各自お好みで変更してみてください。

※画面を上方向に動かしたい場合は同様に[↑]矢印キーを押して設定してください。

STEP.4
動きに合わせてテキストやオブジェクトをずらす

ここまでで下記GIFのように矢印キーを押すとブロックごとに動くようにできたはずです。

つぎに表示領域に合わせてパララックスを設定します。表示領域外のテキスト、オブジェクトを選択して上下に配置を移動させましょう。

画面外のテキストを上からフェードインしてくるようにテキストを上側に配置します。(下記画像参照)

STEP.5
プロトタイプで動作確認

画面右上のレビューボタンをクリックし、プロトタイプ上の動きを確認します。

画面の動きに合わせてテキストが動くようになったのがわかるでしょうか。

STEP.6
オブジェクトの追加

現状態でも完成でいいのですがパララックス感が足りない方は他オブジェクトを追加配置してください。

下記画像のようにバラバラに図形を配置しました。

完成

オブジェクトに応じて移動距離がバラバラに動いたら完成です。

さらにXDアニメーションについて知りたい方はコチラ

【Adobe XD】まるっと解説!ホバーステートの使い方 Adobe XDで全画面風スクロールを作る 【Adobe XD】普通とはすこし違う!全画面スクロールのチュートリアル

まとめ

Adobe XDでパララックスを作成する手順です。

  1. デザインの作成
  2. アートボードを複製
  3. インタラクションの設定
  4. 動きに合わせてテキストやオブジェクトをずらす
  5. プロトタイプで動作確認

最後まで読んでいただきありがとうございます。是非記事の共有をよろしくお願いします。

この記事の他にもXD関して情報を発信していますのでご覧ください。

XDでキャラクターアニメーションを作る方法を解説 【Adobe XD】スワイプ操作でキャラクターアニメーションを作る方法を解説

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA