ホームページ制作・大阪インフォメーションメディアデザイン

06-6809-5021

Columnコラム

WEBサイト制作

2022.09.02

【Adobe XD】画像のホバーアニメーションの作り方~すぐに実践できる初級編~

【Adobe XD】画像のホバーアニメーションの作り方~すぐに実践できる初級編~

Webサイトのボタンやバナーリンクに施されているホバーアニメーションは、 インタラクションデザインのひとつ。 サイト制作する上でも、インタラクションデザインは重要なステップになります。 実際のUI/UXに近い検証がデザインの提案段階で可能になれば、 プロジェクトもよりスムーズに進んでくれそうです。 今回の記事では、Adobe XDの「ホバーステート機能」を使って 画像のマウスオーバーに合わせて切り…

Webサイトのボタンやバナーリンクに施されているホバーアニメーションは、
インタラクションデザインのひとつ。
サイト制作する上でも、インタラクションデザインは重要なステップになります。
実際のUI/UXに近い検証がデザインの提案段階で可能になれば、
プロジェクトもよりスムーズに進んでくれそうです。

今回の記事では、Adobe XDの「ホバーステート機能」を使って
画像のマウスオーバーに合わせて切り替わるホバーアニメーションの作り方を詳しく解説します。

Adobe XDを使い始めたばかり…という初心者の方でもすぐに実践できる
基本的なホバーアニメーションを全5パターンご紹介!

1. 画像が拡大(ズームイン)

マウスオーバーすると表示サイズはそのままで、中の画像だけがふわっと拡大するホバーアニメーション。

マウスオーバーすると表示サイズはそのままで、中の画像だけがふわっと拡大するホバーアニメーション

まずは、このホバーアニメーションの作り方を解説していきます↓↓↓

【作り方】1-1. 画像をシェイプでマスクする

画像をシェイプでマスクする

①レイヤーの最前面に配置したオブジェクトと画像を重ね合わせます。
②オブジェクトと画像は選択状態のまま、右クリック→[シェイプでマスク]をクリックします。
③オブジェクトと画像がマスクグループになります。

<POINT>
・画像のドラッグ&ドロップまたは、[アピアランスをペースト]のメニューからでも画像マスクは可能です。
・後から画像やシェイプを編集するかも?という場合は[シェイプでマスク]する方法をおすすめします。

【作り方】1-2. コンポーネント化してホバーステートを追加する

コンポーネント化してホバーステートを追加する

①レイヤーのマスクグループを選択したままワークスペース右上のコンポーネント[+で追加]
②さらに初期設定のステート[+で追加]→[ホバーステート]をクリックします。

これでマスクグループがコンポーネント化されます。
同時に、ワークスペース右上のコンポーネントの[ホバーステート]が選択されている状態になります。

【作り方】1-3. ホバーステートを編集する

ホバーステートを編集する

①マスクオブジェクトをダブルクリックします。
②レイヤーのマスクグループ内[画像]を選択→画像を110%くらいまで拡大します。
③ワークスペースのコンポーネントを[初期設定のステート]に戻します。
※この時、レイヤーのマスクグループのコンポーネントが選択されていないと、[初期設定のステート]には戻せません。

<POINT>
・画像の拡大率によって、ホバーアニメーションの速度が変わってきます。
・拡大率が大きいほど、マウスオーバー時の動きも大きく(激しめに)なります。

【作り方】1-4. プロトタイプを設定する

プロトタイプを設定する

ワークスペース上部のタブを【プロトタイプモード】に切り替えて、コンポーネントの設定を以下に設定して完成です。

●種類:自動アニメーション
●イージング:イーズイン/イーズアウト
●デュレーション:0.6秒


<POINT>
・[イージング]で動きの緩急を変えて、[デュレーション]で画像が拡大する時の速度を調整します。
・デュレーションの秒数はプルダウン表示になっていますが、5秒までの好きな数字をテキスト入力することもできます。


※ワークスペースの上部の▶(デスクトッププレビュー)から表示確認できます。

 

2. 画像が透過

マウスオーバーすると画像ふわっと透過するホバーアニメーション。

マウスオーバーすると画像ふわっと透過するホバーアニメーション

次に、このホバーアニメーションの作り方を解説していきます↓↓↓

あらかじめ、上で解説した【作り方 1-1】と【作り方 1-2】を参考に
画像のマスクと、マスクグループのコンポーネント化の設定をお願いします。

【作り方】2-1. ホバーステートを編集する

ホバーステートを編集する

①マスクオブジェクトをダブルクリックします。
②レイヤーのマスクグループ内[画像]を選択→画像の不透明度50~70%くらいまで下げます。
③ワークスペースのコンポーネントを[初期設定のステート]に戻します。
※この時、レイヤーのマスクグループのコンポーネントが選択されていないと、[初期設定のステート]には戻せません。

【作り方】2-2. プロトタイプを設定する

プロトタイプを設定する

ワークスペース上部のタブを【プロトタイプモード】に切り替えて、コンポーネントの設定を以下に設定して完成です。

●種類:自動アニメーション
●イージング:イーズイン/イーズアウト
●デュレーション:0.4秒


※ワークスペースの上部の▶(デスクトッププレビュー)から表示確認できます。

 

3. 画像がボタンを押したように沈む

マウスオーバーすると画像がボタンを押したようにふわっと沈むホバーアニメーション。

マウスオーバーすると表示サイズはそのままで、中の画像だけがふわっと拡大するホバーアニメーション

続いて、このホバーアニメーションの作り方を解説していきます↓↓↓

あらかじめ、上で解説した【作り方 1-1】を参考に画像のマスクグループの作成をお願いします。

【作り方】3-1. 影オブジェクトを最背面に配置する

影オブジェクトを最背面に配置する

①作成した画像のマスクグループの背面に影オブジェクトを配置します。
②マスクグループと影オブジェクトはレイヤーをグループ化しておきます。

<POINT>
・サンプルの影オブジェクトは、マスクグループから右10px・下10pxずらした位置に配置しています。
・影オブジェクトの配置によって、画像が沈む方向も変わってきます。

【作り方】3-2. コンポーネント化してホバーステートを追加する

コンポーネント化してホバーステートを追加する

①レイヤーのグループを選択したままワークスペース右上のコンポーネント[+で追加]
②さらに初期設定のステート[+で追加]→[ホバーステート]をクリックします。

これでグループがコンポーネント化されます。
同時に、ワークスペース右上のコンポーネントの[ホバーステート]が選択されている状態になります。

【作り方】3-3. ホバーステートを編集する

ホバーステートを編集する

①グループオブジェクトをダブルクリックします。
②レイヤーの[マスクグループ]を選択→右10px・下10pxの位置に移動。
③レイヤーの[影オブジェクト]を選択→レイヤーを非表示(目隠し)にします。
④ワークスペースのコンポーネントを[初期設定のステート]に戻します。
※この時、レイヤーのグループのコンポーネントが選択されていないと、[初期設定のステート]には戻せません。

【作り方】3-4. プロトタイプを設定する

プロトタイプを設定する

ワークスペース上部のタブを【プロトタイプモード】に切り替えて、コンポーネントの設定を以下に設定して完成です。

●種類:自動アニメーション
●イージング:イーズイン/イーズアウト
●デュレーション:0.4秒


※ワークスペースの上部の▶(デスクトッププレビュー)から表示確認できます。

 

4. 画像の上に文字が出現

マウスオーバーすると画像の上に文字がふわっと出現するホバーアニメーション。

マウスオーバーすると画像の上に文字がふわっと出現するホバーアニメーション

続いて、このホバーアニメーションの作り方を解説していきます↓↓↓

【作り方】4-1. 画像をシェイプでマスクする

画像をシェイプでマスクする

①レイヤーを上から[1.オブジェクト]→[2.文字]→[3.透過グラデーション]→[4.画像]の順番に並べておきます。
②4つのレイヤーを重ね合わせて選択状態のまま、右クリック→[シェイプでマスク]をクリックします。
③4つのレイヤーがマスクグループになります。

【作り方】4-2. [文字・透過グラデーション]レイヤーを非表示にする

[文字・透過グラデーション]レイヤーを非表示にする

①画像上の文字を選択→左下端あたりの位置に移動。
②レイヤーのマスクグループ内[文字・透過グラデーション]非表示(目隠し)にします。

<POINT>
サンプルプレビューのように下から上にフェード表示させたい場合は、実際の表示位置よりも文字を下に配置してください。

【作り方】4-3. コンポーネント化してホバーステートを追加する

コンポーネント化してホバーステートを追加する

①レイヤーのマスクグループを選択したままワークスペース右上のコンポーネント[+で追加]
②さらに初期設定のステート[+で追加]→[ホバーステート]をクリックします。

これでマスクグループがコンポーネント化されます。
同時に、ワークスペース右上のコンポーネントの[ホバーステート]が選択されている状態になります。

【作り方】4-4. ホバーステートを編集する

ホバーステートを編集する

①マスクオブジェクトを2回ダブルクリックします。
②レイヤーのマスクグループ内[文字][透過グラデーション]表示(目隠し解除)します。
③レイヤーの[文字]を選択→20pxほど上の位置に移動。
④ワークスペースのコンポーネントを[初期設定のステート]に戻します。
※この時、レイヤーのマスクグループのコンポーネントが選択されていないと、[初期設定のステート]には戻せません。

【作り方】4-5. プロトタイプを設定する

プロトタイプを設定する

ワークスペース上部のタブを【プロトタイプモード】に切り替えて、コンポーネントの設定を以下に設定して完成です。

●種類:自動アニメーション
●イージング:イーズイン/イーズアウト
●デュレーション:0.4秒


※ワークスペースの上部の▶(デスクトッププレビュー)から表示確認できます。

 

5. 画像の周囲に枠線が出現

マウスオーバーすると画像の周囲に枠線がふわっと出現するホバーアニメーション。

マウスオーバーすると画像の周囲に枠線がふわっと出現するホバーアニメーション

さいごに、このホバーアニメーションの作り方を解説していきます↓↓↓

あらかじめ、上で解説した【作り方 1-1】を参考に画像のマスクグループの作成をお願いします。

【作り方】5-1. 枠線オブジェクトを最前面に配置する

枠線オブジェクトを最前面に配置する

①作成した画像のマスクグループの前面に枠線オブジェクトを配置します。
※枠線オブジェクトの[線][塗り]は、どちらもなしの状態です。
②マスクグループと枠線オブジェクトはレイヤーをグループ化しておきます。

【作り方】5-2. コンポーネント化してホバーステートを追加する

コンポーネント化してホバーステートを追加する

①レイヤーのグループを選択したままワークスペース右上のコンポーネント[+で追加]
②さらに初期設定のステート[+で追加]→[ホバーステート]をクリックします。

これでグループがコンポーネント化されます。
同時に、ワークスペース右上のコンポーネントの[ホバーステート]が選択されている状態になります。

【作り方】5-3. ホバーステートを編集する

ホバーステートを編集する

①グループオブジェクトをダブルクリックします。
②レイヤーのグループ内[枠線オブジェクト]の線サイズを10px・線の位置は内側に設定します。
③ワークスペースのコンポーネントを[初期設定のステート]に戻します。
※この時、レイヤーのグループのコンポーネントが選択されていないと、[初期設定のステート]には戻せません。

【作り方】5-4. プロトタイプを設定する

プロトタイプを設定する

ワークスペース上部のタブを【プロトタイプモード】に切り替えて、コンポーネントの設定を以下に設定して完成です。

●種類:自動アニメーション
●イージング:イーズイン/イーズアウト
●デュレーション:0.4秒


※ワークスペースの上部の▶(デスクトッププレビュー)から表示確認できます。

 

さいごに

今回は、5パターンのホバーアニメーションの作り方をご紹介しましたが、
どのアニメーションもコンポーネント化→プロトタイプ設定までの流れはだいたい同じです。

Adobe XDで作成したいろいろなデザインにカスタマイズして
UI/UXデザインの施策にお役立ていただければ幸いです。

 

この記事を共有する