Adobe XDの便利な使い方!簡単操作で動きを付ける方法【垂直スクロール・水平スクロール】

2022.08.01
Adobe XDの便利な使い方!簡単操作で動きを付ける方法【垂直スクロール・水平スクロール】

AdobeXDは、Webサイトやアプリ制作のためのデザインツールです。XDのプロトタイプ作成を学ぶことで、フラットなデザインを、より説得力のあるデザインへ作り込むことができます。

今回はAdobe XDの便利な使い方として、簡単な操作でアニメーションや画像に動きを付けて遷移させる方法を紹介します。

\ あなたの会社の新規お客さまをデジタル化で創出【今なら無料】/

クリックした先のページの流れをつくる

プロトタイプではリンクさせたい要素をクリックした時にどのページに移動するかを指定することができます。この動きを加えることでページ移動を視覚的に伝えることができます。

実際の動きはプレビューで確認することができます。プレビューでは変更が即時に反映されるのでプレビューを確認しながらデザイン作業を行えます。

null

リンクさせたい要素をクリックすると青い線が表示されます。

null

移動させたいページへ青い線をドラッグ&ドロップします。

null

プレビューで確認します。要素をクリックするとページ移動することが確認できます。

時間を設定して動く変化を加える

次に時間で変わるスクロール画面のやり方です。この方法を使うとサイトでよく見る、トップが自動でスクロールする動きをつくることができます。

静的なデザインだと、テキストや口頭で説明が必要ですが、実際に動かすことで依頼主とデザイナーの間で相互理解を深めることができます。

null

スライド1枚目のページ全体を選択します。

null

スライド2枚目のページへ青い線をドラッグ&ドロップします。

null

トリガーで「時間」を選択します。

null

プレビューで確認すると時間で切り替わる様子がわかります。

ただ注意点は「時間」はページ全体への設定しかできません。現状では要素には設定できないので注意が必要です。

アニメーション効果を付けてイメージを伝える

次にご紹介するのは自動アニメーションです。
画面をタップしたら要素が画面内に入ってくる様子を作ります。

null

動かす要素を配置します。

null

ページ全体ごと複製し、複製した方の要素をページの表示ギリギリのところへセット。

null

プロトタイプで、複製したページから最初のページへ青い線をつなぎます。

null

トリガーは「タップ」、アクションは「自動アニメーション」、イージングは「イーズイン/アウト」、デュレイションは「3秒」の設定をします。

いま見ているすぐ下でちょっと待ってみてください。
null

プレビューで確認すると、こんな感じでボタンをタップで動く様子がわかります。
「タップ」を「時間」にすると設定した時間経過後、アニメーションが動き出す設定も可能です。

「Adobe XD」で垂直・水平スクロールの動きを付ける方法をさっそく試してみよう!

今回は、Adobe XDの便利な使い方として、簡単操作で垂直スクロールと水平スクロールの動きを付ける方法について紹介しました。

今回紹介したのはAdobe XDのたくさんある機能のうちの、ごくわずかな機能で、他にも使えるたくさんの機能があります。

まずは習うよりも慣れで、実際に動かしてみて覚えていくと、より実際のWEBサイトのデザインに近いページを制作できるようになります。

プロトタイプ作成を活用することで、動きごとの説明をしなくてもよくなるので余った時間はクオリティをあげる作業にまわすことができます。

デザインを依頼された場合にAdobe XDを活用することで、口頭やテキストで説明するよりも正確にイメージや操作性を伝えることができ、ストレスなくコミュニケーションがとれるようになります。

ぜひデザインをする時の参考にしてみてください。

今回はこれで以上となります。
最後までお読みいただきましてありがとうございました。


・・・・・・

あ、ちょっと待ってください。
もしかして、WEBサイトでお悩みではないですか?

私たちキャンバスプロのデジタルコンテンツ・クリエイター集団です。WEBサイト制作システム構築はもとより、臨場感あふれる動画コンテンツ制作や、面白いデジタルコンテンツ制作もおてのもの。

私たちと一緒に、あなたのお客さまが驚くようなコンテンツを一緒に作りませんか?

>> キャンバスの会社サイト

私たちが今までにどんなものを作って何をして来たのか。一部をこちらに載せておきますので、よかったら見ていってください。

>> キャンバスの制作実績

制作のご相談・ご依頼はこちらからどうぞ。

>> 相談 or 見積 or 出来るかどうか話を聞く


<< お知らせ >>

2022年6月10日より株式会社キャンバスより新サービス「オンリーワン設計図」をリリースしました!btobの営業活動にお悩みの企業さま、ぜひご一読ください。

>> 「オンリーワン設計図」公式ページ

よろしければこちらの記事もご参照ください。

>> BtoB企業の向かう先と今後求められる営業マン ~BtoB営業マンは絶滅危惧種!? ~




CANVAS MAIL
SEARCH
SERVICE
弊社の営業資料や企画書、
販促チラシ、実績資料、
動画データ等を
ダウンロードできるサービスです。
東京オフィス
〒107-0052 東京都港区赤坂9-5-26
AKASAKA HEIGHTS 301
名古屋オフィス
〒464-0037 名古屋市千種区楠元町2-60-2
LOFT 3B
大阪オフィス
〒530-0001 大阪府大阪市北区梅田2-5-13
桜橋第1ビル304
金沢オフィス
〒920-0024 金沢市西念4-24-30
MGビル302
富山ヘッドオフィス
〒939-8204 富山県富山市根塚町1-1-4
ASNビル2F
ベトナムオフィス
Unit 615-617, 6 Floor, IMC Building, 62 Tran Quang Khai, Tan Dinh Ward, District 1, Ho Chi Minh City, VIETNAM