【Adobe XDの使い方】アニメーション付きプレゼン資料の作り方
Adobe XDのアニメーションを使って、建築プレゼンボードを作成しよう
「Adobe XDはデザインツール」と思っていませんか？
確かにUI / UXデザイン専用ツールとして誕生しましたが、一度使ってみるとプレゼン資料作成にとても使いやすいツールということが分かります。今回は、Adobe XD アニメーションの使い方説明を交えながら建築用プレゼン資料を仕上げてみます。
デザインを書き込むための画面を用意する
初めてファイルを作成するとき、ホーム画面でプリセットから使用するアートボード（デザインを書き込むための画面）のサイズを選択します。
アートボードを数十枚配置しても、動作は変わらずに非常に軽快に動せるため、どんどんコピーしながら資料を作り込んでいける点が魅力です。
アートボードの増やし方
- アートボードツールを使って必要な数だけアートボードを追加。
- 指定したアートボードの名前を右クリックし、コピー＆ペーストで複製。
- Macでは、Optionキーを押したままコピーするアートボードをドラッグ、Windowsでは、Altキーを押したままアートボードをドラッグすることで、コピー。
Adobe XD 自動アニメーションとは？
Adobe XDはPowerPoint同様に、自動アニメーションを組み込んでプレゼン資料を魅力的にブラッシュアップすることができます。
例えば、デザインモードで図1のような黄色の四角形が四隅に移動している四つのアートボードを作成します。その後プロトタイプモードに切り替えて、リンク設定しインタラクションを「アクション」から「自動アニメーション」に設定します。これでプレビューすると、あっという間に黄色い四角形が四隅に順番に移動するアニメーションが実現できます。
図1：Adobe XD 自動アニメーション
このように、二つのアートボードに同じオブジェクトが存在するとそれぞれを始点と終点として、その間の座標やサイズが自動的に補完されアニメーションとして再現されます。
それではAdobe XDの機能を利用して、外構プレゼン資料に自動アニメーションを加えたプレゼン資料を作成します。せっかくAdobe XDで作成しているので、スワイプのような横スクロールも取り入れた視差効果のあるデザイン手法も取り入れてみます。
Adobe XD アニメーションの使い方
アニメーション中にオブジェクトが処理される方法には、次のような簡単なルールがあります。
- 移動先のアートボードにオブジェクトが存在しない場合、オブジェクトがフェードインする。
- 移動元のアートボードにオブジェクトが存在しない場合、オブジェクトがフェードアウトする。
アートボードをまたいでレイヤー名が同一のオブジェクトは、二つのアートボード間での差異を補完するアニメーションとなります。
これらの特性と表紙の前に、ローディングアニメーションによるギミックも追加したアニメーションを作成していきます。まずは、完成版を動画でご確認ください。
この動画には音声は含まれません。
動画内外構製品の出典：エスビック株式会社（https://www.s-bic.co.jp）
用途に合わせて手軽に使える不透明度
オブジェクトを選択してカラースライダーを使用するか、パーセンテージの値を指定して塗りおよび塗りの不透明度を設定します。タップ画面でのギミックとして、タップしたものを際立たせるために利用しますが、さまざまなシチュエーションで活用できると思います。
リピートグリッドの使い方
次いで、仕上げ材を紹介するアートボードでリピートグリッドを使います。
繰り返す基本エレメントをデザインし、仕上げ材のテクスチャをWebサイトからドラッグして一通り分を作成し、エレメントをリピートグリッドに指定します。選択している要素の表示が切り替わるため、右側にドラッグするだけで繰り返しのエレメントが簡単に作成できます。
スワイプのような横スクロール
リピートグリッドを利用したアートボードを複数コピーして、エレメントをスワイプするようにずれていくWebデザインのような視差効果を演出します。それぞれのずらした画像に合わせた名称や施工事例の写真も用意して、スワイプに合わせて切り替わるようにアートボードを編集します。
インタラクションパネルを設定する
プロトタイプモードに切り替えて、それぞれのリンクを設定していきます。インタラクションパネルは次のとおりに設定していますが、自由に調整できるためイメージに合ったものを選択してください。
- トリガー:時間／ディレイ:1秒
- アクション:自動アニメーション
- イージング:なし／継続時間:0.3秒
複合的に組み合わせてみる
フェードイン、不透明度、スワイプを組み合わせて活用するとまるでWebサイトを操作しているような自動アニメーションを表現できます。仕上げ材のテクスチャを選択し、それに合わせた施工例画像と簡単な説明文が切り替わるように、複数組み合わせて仕上げていきます。
デスクトッププレビューで確認
リンクが仕上がったらデザインモードに切り替え、デスクトッププレビュー機能で画面の切り替えなどを含めてプレビューできます。
仕上がりに問題なければ共有機能を利用し、公開または非公開のWebリンクを提供することにより関係者と共有できます。お客様にコメントを入力してもらうこともできます。
さらに詳しく知りたい方へ － 無料資料ダウンロード
本トピックスでご紹介しきれなかった内容を資料にまとめています。もちろん無料！ ぜひ情報収集や検討資料としてお役立てください。
同じテーマの記事を読む
