ShunNote 
みなさんこんにちは。Webデザイナーのしゅん（@shun_webdesign）です。
Adobe XDを使う方でホバーの設定が困っている方はいますでしょうか？
設定がわからず、実装者におまかせなんて人もいるかも知れません。
今回はAdobe XDを使ってホバーステートの方を紹介します。紹介した方法を行えば実装者や他デザイナーとホバーの動きを共有しやすくなりコミュニケーションが円滑になります。是非お試しください。
- Adobe XDのホバーステートの使い方
- コンポーネントの使用方法
目次
ホバーステートの使い方
今回は一般的にWebサイトで使われることの多い、ボタンにホバーステートの設定を行います。
- ホバー対象のコンポーネントの作成。
- コンポーネントに登録。
- ホバーステートの設定。
ホバーさせるコンポーネントの作成
画像上のようにアートボード上にボタンを作成します。
長方形（Rキー）を押し、その上にテキスト入力（Tキー）をします。
ボタンとしてコンポーネント登録するために、作成したらテキストと長方形の2つのレイヤーを必ずグループ化（⌘G）してください。
対象をコンポーネントにする
作成したボタンをコンポーネントにします。
対象の選択→右クリック→「コンポーネントにする（⌘K）」をクリック。
コンポーネント化完了
コンポーネントにすると以下画像のように対象が左上のコーナーがひし形になり、黄緑色に囲まれます。
ホバーステートの設定
画面右側のメニューから初期ステート横「ステートの追加」を選択。
ホバーステートが選択された状態で設定を行います。今回は上画像のようにホバーでテキストが離れるアニメーションを設定していきます。
ホバーステートを選択した状態でプロパティメニューから文字間の調整をします。
画面左上の「プロトタイプ」をクリックしてプロトタイプの操作画面に移動します。初期ステートを選択し、以下画像のようにアイコンが表示されてるか確認してください。
確認できたらインタラクションを設定します。
トリガーが「ホバー」になっているか確認し、種類から「自動アニメーション」を選んでください。イージング（動きの加減速）から「イーズイン」を選び、デュレーション（インタラクションの初めから終わりまでの秒数）を決めます。
実際にホバーの設定ができてるか確認します。画面右上の「デスクトッププレビュー」をクリック。
すると、プレビュー画面が開きます。
プレビュー画面上でホバーするか確認してください。無事滑らかに動いたら完成です。
さまざまなホバーのインタラクションを作ってみる
ここからは筆者が作ってみたホバーインタラクションの作り方を紹介します。上記のホバーステートの操作で使い方は理解している前提で説明していきます。
楕円形が浮かび上がるインタラクション
テキストが楕円に囲まれるようにコンポーネントを作成します。楕円を囲んだコンポーネントを2つ並べましょう。
※紛らわしいですが「コンポーネントにする」はまだしないでください。
2つのコンポーネントの片方だけ楕円を変形させます。パスにアンカーポイントを追加して、円に見えないくらいグチャグチャにしましょう。
変形させたあと、パスのみアピアランス（透過度）を0％にしてください。
楕円を変形させたコンポーネントを「コンポーネントにする（⌘K）」で登録してください。
ホバーステートをクリック。先程作成した楕円を囲んだもののもう片方の楕円をコピーをします。
コピーした楕円をホバーステートに貼り付けてください。パスのレイアウト名が初期ステートと同じ名前になるようにしましょう。
インタラクションの設定をします。種類「自動アニメーション」を選択してください。デュレーション、イージングはお好みで変更すれば完成です。
グラデーションが移動するボタン
画像のようにテキストが白地になるようにボタンを作ります。色はなんでも大丈夫です。グラデーションは後で作成します。
グラデーションの長方形を作ります。グラデーションは3色以上にしてください。作成した長方形をボタン内の長方形下に配置します。
長方形同士を選択してシェイプでマスク（⌘+shift+M）をします。マスクをかけたら「コンポーネントにする（⌘K）」をしてください。
ホバーステートをクリックしたら、マスクをかけたグラデーションの長方形を横方向に動かします。
「自動アニメーション」を選択し、デュレーション、イージングはお好みで変更すれば完成です。
長方形にグラデーションをかけてトランジションさせるやり方もあります。マスクをかけて移動させるやり方を覚えると応用ができるのでこのような作り方にしました。
テキストが上下に動くボタン
※今回紹介する中で一番複雑です。
このコンポーネントはマスクをかけた中で上下にテキストが動く仕組みになっています。
まずはテキストを入力します。6つテキストを画像のように縦になれべてグループ化します。
ボタンにマスクをかけて見えなくするのでテキストはボタンの外側に配置してください。
次に上側に配置したテキストのみに一文字ずつシェイプでマスクをします。
下側のテキストも上側のテキストと同様にマスクをかけます。その後下側のずれたテキストをボタンの表示領域内に移動させます。
この状態でボタンの表示領域にマスクをかけます。
ホバーステートは逆に下側のテキストをした画像のようにずらしてならべます。今度は上側のテキストを表示領域内に並べます。
お疲れさまです。これで完成です。
まとめ：使い方次第でコミュニケーションが取りやすくなる
今まで動きの指示をエンジニア側の人に口頭で伝えていた人もインタラクションを作ることによってよりイメージを伝えやすくなるツールになります。
「いい感じの動きで作ってください」や「お任せで！」と曖昧に伝えていたことも事前に用意しておくことで具体的に表現しやすくもなります。
もちろん実装者の能力にもよりますが、仕組みがわかると様々なホバーのインタラクションの設定を行うことができます。
ホバーやアニメーションの作り方がわからず、なんとなく口頭で伝えていたこともインタラクションを作ることで伝えやすくなることもあります。
今回作ったものに関わらず、自分でどんどんカスタマイズしてみてください。
最後まで見ていただきありがとうございます。是非記事の共有をよろしくお願いします。
