Adobe XD ブログカードからフルページに移行するアニメーション

お久しぶりです。今回はシンプルなブログカードからフルページに移行するアニメーションを作ってみたいと思います。難しいことはしないのでどなたでも簡単に作ることができます。では作っていきましょう。

最終的にはこの様になります。

ブログカード

先ずはホバーで下からタイトルが出るブログカードを作っていきます。

まずはお好きな写真をUnsplash等から用意して頂いて、好きなサイズの長方形を上に載せましょう。

画像をマスキング

 

この用意して頂いた、画像がブログカードの背景になります。アニメーションの際に画面全面に広がるようにしたいのでマスキングをします。

画像の上に長方形を配置します。そして、2つとも選択したままCommand/Crtl + Shift + M でマスキングをします。

他の方法としては、長方形を先に用意してその中に画像をドロップしても構いません。長方形の枠線だけ消してもらえれば同じです。

 

ホバーでタイトルを出すアニメーションを作る

 

先ずは好きな大きさの長方形を先程作成したブログカードの上に用意します。

 

上だけをグラデーションの不透明度を下げた長方形をタイトルの下に配置したいので作ります。これで文字が少し読みやすくなります。あとはタイトルを上に配置します。

 

長方形とタイトルをマスキング

先程作った長方形とタイトルが隠せる大きさの長方形でまたマスキングします。背景の写真からはみ出ないようにします。

 

背景とタイトルをコンポーネント化

背景とタイトルの要素をコンポーネント化します。両方を選択してCommand /Ctrl + K でコンポーネント化できます。

ホバーステートを追加する

コンポーネントの欄の+を押せばホバーステートを選択できます。

 

初期とホバーステートをそれぞれ編集する

初期のステートではタイトルが見えないようにしたいので、タイトルを隠します。それで役に立つのがマスキングです。

レイヤーからマスキング内の長方形とタイトルを選択して、マスキング外に出します。これでタイトルが見えないようになります。

ホバーステートでは、先程移動させた要素を元の位置に戻します。初期のステートを変更するとホバーステートにも変更が加わることがあるので、忘れずに編集しましょう。

 

 

これでタイトルが下から浮かび上がります。他のアニメーションのアイデアとしては、不透明度をそれぞれのステートで変更するようなところでしょうか。

 

フルページに移行するアニメーション

作り方はとても簡単です。ではやっていきましょう。

ステートの追加

ホバーステートのように+を押して新規ステートを追加します。わかりやすい名前をつけてあげましょう。

新規ステートの編集

新規ステートを選択したまま、背景の画像をアートボード全体に広げます。この際にマスキングの長方形も広げましょう。

 

アートボードを複製

Option/Altを押しながらアートボードをドラッグすれば、複製が簡単にできます。

 

プロトタイプでアニメーションの確認

プロトタイプでそれぞれをつなげていきます。初期ステート→ホバーステート→フルページのアートボードというようにつなげていきます。

初期のステートとホバーステートはすでにつながっているので、ホバーステートを選択してフルページのアートボードにつなげます。

アニメーションの設定はタップ、自動アニメーションです。細かい設定はお好みで。

 

このままだとアニメーションが上手くいきません。なぜかと言うと先程アートボードを複製したので、コンポーネントの名前が少し変わっていると思います。自動アニメーションでは名前が違うと動作しません。同じ名前にしましょう。

ブログ本文の要素を作成

あとはブログの本文を追加したら完成です。

2つ目のアートボード上で作成

完成した形を先ずは作っていきます。画像の上に本文の要素を作成します。

コンポーネント化して編集

グループ化して、終わりでもいいのですが少しアニメーションを本文にも追加したいのでコンポーネント化します。

新規ステートを追加して本文を下にずらします。

 

1つ目のアートボードにコピーアンドペースト

作成した本文のコンポーネントを1つ目のアートボードの下に配置します。その際に本文のステートを本文が下がった新規ステートにしてください。

そしてアートボードからはみ出ないくらいの位置に配置します。アートボード外に出すとアニメーションが上手くいきません。今回は白の背景で見えなくなっていますが、もしほかの色や背景で本文の背景が見えてしまう場合は、アートボード上の要素とグループ化するかアートボードの高さを変更してください。

 

写真をスロールで動かないようにする

スクロールすると本文が写真の上に重なるような、パラレル要素があるブログがありますよね。それを再現したいと思います。

写真を固定 / アートボードの高さを変更

要素を選択するとスクロール時に位置を固定の表示が出るので、チェックを入れます。そしてアートボードの高さを変更してスクロールできるようにします。

アニメーションの確認

これであとはアニメーションの確認をするだけです。名前と配置に注意しましょう。

 

カードを増やすとこの様になります。完成です!お疲れさまでした。

 

他にもAdobe XDのチュートリアルを多くご紹介しているので、御覧ください。

ではまた!

 

Adobe XD おすすめの本

僕はスキルシェアでAdobe XDやIllustratorを学びました。コーディングもここで学んでいます。
今だけ2ヶ月無料でのお試しもありますよ!
Udemyも動画をダウンロードしていつでも学ぶことが出来るのでおすすめですよ!