Dean Dapkus氏は、webサイトのデザインにわずかな動きを組み込んでいます。彼がAdobe XDでパララックスアニメーションを使って奥行きや視覚的な効果を追加する様子をご覧ください。

Dean Dapkus氏はAdobe Studioチームのクリエイティブディレクターです。彼はデジタルアートと伝統的な芸術を好み、この2つを新しい方法で結合させることができたときに最も幸福感を感じます。

必要な情報

このサンプルファイルには、このチュートリアルの学習内容の練習に使用できるAdobe Stock画像が含まれています。このチュートリアル以外でサンプルファイルを使用する場合には、Adobe Stockのライセンスを購入してください。このサンプルファイルの使用に適用される利用条件については、フォルダー内のReadMeファイルを参照してください。

複製する

Dapkusは、webページの初期デザインを完成させた後、要素を異なる速度で異なる方向に移動する効果であるパララックスアニメーションを追加する準備をしました。アートボードの名前をクリックし、Ctrl + D(Windows)またはcommand + D(macOS)を押して、アートボードを複製しました。その後、新しいアートボードの名前をダブルクリックして名前を変更しました。アートボードを複製すると、アートボードのレイヤーの名前が変更されずに維持されます。これはXDでアニメーション化するために必要なことです。

家具サイト用のwebデザインを表示している2つのユーザーエクスペリエンスデザインアートボード。2つのアートボードにはそれぞれParallax_StartとParallax_Endという名前が付けられている。

所定の位置に置く

Dapkusは、最初のアートボードでオブジェクトを開始位置に移動しました。レイヤーパネルを開き、End_chairsレイヤー(3脚のチェアの画像)を選択しました。次に、Shiftキーを押しながら、上端が下端と接するまで画像をアートボードの下部にドラッグしました。Shiftキーを押しながらドラッグすると、オブジェクトを直線的に移動できます。

2つの画像レイヤーを表示しているAdobe XDパネル。メインアートボード上の4脚のチェアが表示され、その下に3脚のチェアが表示されている。

ウィンドウを閉じる

Dapkusは、引き続き最初のアートボード上で、ExclusionレイヤーとそのサブレイヤーであるRepeat Gridレイヤーを展開しました。Repeat Gridの「Window」レイヤーをクリックし、長方形の上中央のハンドルをドラッグして高さが1ピクセルになるまで下に引きます。これで、サイズが変更された長方形がリピートグリッドの下部に配置されます。次に、Shiftキーを押したままドラッグして選択範囲を垂直方向に制限し、短くなった長方形をアートボードの約200ピクセル下に移動します。レイヤーパネルでは、オブジェクトはまだStartアートボード上のレイヤーグループの一部であるため、引き続きStartアートボードの一部であることに注意してください。

1ピクセルに縮小されてアートボードの下に移動されたウィンドウレイヤーと、ぼかし効果が適用された4脚のチェアを含む画像。

画像を鮮明にする

新しい画像がアニメーション化されて表示されるときに背景をぼかすため、Dapkusは、同じExclusionグループ内のBlurをクリックし、プロパティインスペクターで不透明度を0%に設定しました。

アートボード上に表示された4脚のチェア、ぼかしレイヤーが選択されたレイヤーパネル、0%に設定された不透明度を示す画像。

テキストを表示する

Dapkusは、最初のアートボードの準備を終えるため、メニューオプションを移動させて、アニメーションが表示されるときに上部に種類が表示されるようにしました。Navigationレイヤーグループをクリックして展開し、Categoriesグループを選択しました。それを選択し、Shiftキーを押しながら、見出しのModernという単語の下にドラッグしました。

webデザインのメニューオプションがページタイトルの上に配置され、レイアウトパネルでレイヤーが選択されている。

家具を移動する

次にDapkusは、Endアートボードに取り掛かりました。Start_Chairsレイヤーの4脚のチェアの画像を選択し、Shiftキーを押しながらアートボードの上にドラッグしました。もう一度Shiftキーを押しながら上中央のハンドルを下にドラッグして、中央から1920ピクセルのサイズに変更し、不透明度を20%に下げました。

4脚のチェアの画像がアートボードの上に配置され、幅が1920ピクセルに変更され、不透明度が20%に下げられていることを示す画像。

フェードイン表示する

引き続きEndアートボードで、DapkusはBlack Backgroundレイヤーを選択し、不透明度を0%に下げました。最終的には、次のアートボードが現れるにつれて明るくなる効果を得られるようにします。

黒い背景が選択され、不透明度が0に設定され、3脚のチェアが正方形のカットアウト内に別々に表示されている。

表示前にプレビューする

パララックスアニメーションをプレビューする準備ができたDapkusは、画面上部の「プロトタイプ」をクリックしました。次に、Startアートボードを選択し、ワイヤーをEndアートボードにドラッグしました。プロパティインスペクターで、「トリガー」を「キーとゲームパッド」に設定し、「キー」フィールドで下向き矢印を押しました。「アクション」を「自動アニメーション」に設定し、その他のモーション設定を定義しました。プロトタイプを表示するとき、Dapkusは、片手で下向き矢印を押し、他方の手でスワイプジェスチャーをシミュレーションすることでアニメーションを開始します。

プロトタイプモードで、青いワイヤーでStartアートボードとEndアートボードが接続され、「トリガー」が「キーとゲームパッド」に設定され、「キー」が下向き矢印設定されている。

意味のあるデザインの動き

webデザインにパララックスアニメーションを追加することで、閲覧時に奥行きが加わります。

机上のノートPCの画面に表示されている最終的なwebデザイン。パララックスをシミュレーションするためのトランジション途中の2枚のチェアの画像。

注意:このチュートリアルに付属のプロジェクトファイルは練習目的でのみご利用ください。

03/16/2020

Artist: Dean Dapkus

Adobe Stock提供元:RamilVadim AndrushchenkoMihalis A.、poligonchikMonster Ztudio

 

このページは役に立ちましたか。