Blog スタッフブログ

【Adobe XD】 プロトタイプでパララックスアニメーションを作成

Category | Blog
/ 13,080views

こんにちは、Designerの松並です。

早いもので2021年もひと月終わってしまいました。
昔から言われる言葉遊びで、「1月は往ぬ(行く)」「2月は逃げる」「3月は去る」というものがあります。
由来は「1月はお正月があり、2月は元々28日(29日)で普通より短く、3月は年度末なのでやることが多い」ということだそうです。
時間は戻って来ないので、しっかりと計画を立てて、1日1日を逃さないようにしたいものですね。

今回はAdobe XD でのパララックスアニメーションの作成手順をご紹介させていただきたいと思います。
それでは参りましょう。

Table of contents

  1. Adobe XD でのパララックス
  2. 完成イメージ
  3. デザインを作る
  4. アニメーションを作る
  5. 最後に

Adobe XD でのパララックスの表現

Adobe XD でのパララックスは、プロトタイプのアニメーションを用いて表現します。
とても手軽に動作イメージを伝えることができるのでおすすめです。

パララックスに限った話ではありませんが、Adobe XD を使用することで、コーディングの際のアニメーションを意識するようになり、完成のイメージを想定しやすくなるのも良いところだと思います。

完成イメージ

まずは本稿で紹介するパララックスアニメーションの完成イメージをご覧ください。
今回は水平方向のパララックスアニメーションと簡易的な遷移アニメーションを作ってみました。

※リンクをクリックしますと自動でアニメーションが開始されます。

デザインを作る

今回は本稿用に架空のベーカリーのラインナップページを作成致しました。

パララックスさせたい箇所のデザインが完成しましたらアートボードを複製します。
その後、アニメーション後の位置やサイズに要素を移動、変形させます。
今回は左右へスライドするアニメーションにパララックス効果を加えるため、写真をマスクし要素全体は左へ移動させ、マスク内の画像は右へ移動させました。

アニメーションを作る

アニメーションさせたい箇所のデザインが出来ましたら、プロトタイプタブへ切り替え、アニメーションの設定を行います。

今回はトリガーは「時間」に設定しましたが、見せ方によってここは変更しても良いと思います。
その他、ディレイやイージングなどの設定もお好みで調整してみて下さい。

これだけで、パララックスアニメーションが出来ていると思いますので、プレビューで確認してみて下さい。

最後に

いかがでしたでしょうか。
画像マスクと自動アニメーションを使うことで簡単にパララックスアニメーションを作成することができます。
動作イメージの共有を、クライアントやコーダーとスムーズに行える点はとても便利だと思いますので、皆様も活用してみて下さい。

今回作成した XD のデータも共有させていただきますので、よろしければ参考までに。

最後までご高覧いただきありがとうございました。

Category | Blog
Author | Takuto Matsunami / 13,080views

Company information

〒650-0024
神戸市中央区海岸通5 商船三井ビルディング4F

Contact us

WEBに関するお問い合わせは
078-977-8760 (10:00 - 18:00)