この記事は2分で読めます

【XD】ボタンのホバーアニメーション

  • 投稿日
  • 更新日
【XD】ボタンのホバーアニメーション

XDで作れるボタンのアニメーションについてご紹介します。

ディレクターへのデザイン確認やコーダーへの指示出しの際に、細かい説明が不要となるので、とても便利な機能です。

イッパイアッテナ

はじめまして、イッパイアッテナです。

ITと教養で、優秀なネコの手となり、あなたのあらゆる問題を解決します。あなたの相談役だったり、デザイナーだったり、広報だったり、わたしたちは”イッパイ”の顔をあなたに見せることができます。

ホバー(hover)とは

ホバリングという言葉を聞いたことがある方は多いのではないでしょうか。ヘリコプターやドローンなどで使われることが多い単語で空中で停止するという意味があります。

Webにおけるホバーとは、ボタンや画像にマウスを合わせてクリックをしなくてもアニメーションが始まったり変化したりする表現を指します。

ボタンのホバーアニメーションの作成方法

STEP
ボタンを作成

まずはホバー前のボタンデザインを作成しましょう。

画像に alt 属性が指定されていません。ファイル名: ty8nWef_2z08pZDwsbKVctDbLOiS0KwFCQ9AbhUDchJpZsxidwG4Ocl-fky6_vr0hsmdmUFlxMviKucebwDA-tPQ_wz7zvGrtsmUolX9reFgscL8dJHmxJsOnd1ijT5B2rE_HLgwMbGzvvK2zdqniN3reEOcekFaQ8BHlEFi3JWS4XUfGfMKiVZLURId
STEP
ボタンデザインをコンポーネントにする

右クリックでメニューバーを表示してコンポーネントにするからできます。

ショートカットはmacOSではK、WindowsはCtrlKです。

STEP
ホバーステートを選択

ボタンを選択した状態で、画面右のメニューバーのコンポーネント欄から初期設定のステートの+をクリック。ホバーステートを選んでください。

STEP
コンポーネント内にホバーデザインを作成

上記で記載したホバーステートを選択した状態で、ホバーデザインを作成します。

STEP
アニメーションをつけてプレビューで確認

ボタンを選択した状態で、左上のプロトタイプで画面を切り替え、

右のメニューバーでアニメーション設定をします。

トリガーはホバーを選択。下の画像はアクションは標準設定です。

お好みのアクションに細かく設定できます。

設定ができたらプレビューボタンで動作を確認してみましょう。

プレビューのショートカットはmacOSではEnter、WindowsはCtrlEnterです。

まとめ

このアニメーションを応用すると、グローバルメニューのプルダウンやSPのハンバーガーメニューの開閉などもプレビュー表示で見ることができます。

XDは簡単にアニメーションが作れるので、ぜひ試してみてください!

この記事で使用したデータの
ダウンロードはこちら

利用規約 ※必ずお読みください

この記事を書いた人

デザインバウム運営局
デザインバウム運営局

企業のWeb担当者の方とWeb制作に関わる方にとって、ためになる情報を発信していきます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

Web制作について相談してみませんか?

必須は必須項目です。弊社へお問い合わせいただく方は、下記の「個人情報の取り扱いについて」を必ずお読みください。

会社名

任意

お名前

必須

メールアドレス

必須

電話番号

任意

お問い合わせ内容

必須