みなさんは、AdobeXDでマウスホバーを表現する方法をご存じでしょうか？Webデザインを作成したけど、マウスホバーをした時どのような挙動をするか、お客様にプロトタイプで見せられたら良いですよね。そんな悩みを、「ステート機能」で解決します！ステート機能そもそも、ステートとは？ステート（state）というのは「状況・状態」という意味です。XDではコンポーネントに複数の「状態」を追加できる機能のことを指します。ステート機能を使うと、マウスホバーの動きを入れたプロトタイプが作れます。ボタンホバーの作り方①ボタンを作り、コンポーネント化※ステート機能を使うにはコンポーネント化が必須②ホバーステートを追加コンポーネント化すると、「初期設定のステート」の項目が追加されます。項目の右にある「＋」ボタンを押し、「ホバーステート」をクリックします。③初期状態とホバーが並んでいるかステートの項目に「ホバー」が追加され、「初期状態」と「ホバー」の2つの状態を持つコンポーネントになる。④「ホバー」を選択し、ホバーした時のデザインを作る⑤ホバーをする時のアニメーションを設定するプロトタイプモードに切り替え、「初期設定のステート」を選択し、各種動き（アニメーション）の設定をします。プレビューで動きを確認しながら作るとやりやすいです◎≪設定例≫トリガーホバー 種類トランジション移動先ホバーステートアニメーションディゾルブイージングイーズアウトデュレーション0.3秒⑥ホバー状態→通常状態へ戻るときのアニメーション設定「ホバーステート」を選択し、先ほどのように各種動きの設定をします。筆者は⑤の設定と同じにしました。⑦プレビューでチェック右上のプレビューアイコンを押して、実際にマウスホバーしてみましょう。見た目が変われば完成です。ステート機能のメリット・デメリットメリット・完成度の高いプロトタイプが作れる・アートボードを増やさずホバーやクリック時の挙動を表現できるデメリット・たくさんステートを盛り込むとXDが重くなる・動きによっては、XD上のプレビューでは正しい挙動なのに、共有URLからプロトタイプを見ると正しく動かないときがある。・XDの特性上、プレビューモードではマウスホバーがどこに適用されているかを確認する方法はないので、実際にカーソルを合わせないと確認できない（クリックさせる動作は、関係ないところをクリックすると動きが設定されている場所が青く表示されるので確認可能）デメリット部分を補うための注意点・一度共有URLから挙動が正しいか確認する・どこにステートを入れているのかを別のアートボードに書いておく必要があるまとめお客様にデザインを見せる時にホバーアニメーションを実際に見せることで、よりデザインが伝わりやすくなります。ステートを使いこなして表現力のあるプロトタイプを作りましょう！