このレッスンでは、Adobe XDのアニメーション機能を使って、マウスオーバーすると背景色が変わるボタンのプロトタイプをデザインする手順を学びます。
Adobe XDを起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプル画面が表示されます。
ボタンコンポーネントの作成とホバーステートの追加
予め、長方形ツールで作成した背景と、その上にテキストを載せたボタンが用意されています。まず、これをコンポーネントに変換します。右クリックで表示されるコンテキストメニューから「コンポーネントにする」を選択すると、ボタン周囲の枠線が青から黄緑色に変わります。これで、ボタンがコンポーネントに変換されました。
次に、ステート機能を使って、ホバーステートを追加します。ステート機能とは、ひとつのコンポーネントに対して、複数の状態を持たせることができる機能です。
プロパティインスペクターの「初期設定のステート」の横のプラスボタンをクリックすると、「新規ステート」「ホバーステート」というメニューが表示されます。ここでは「ホバーステート」を選びます。
続けて、ホバーステートの見た目を編集します。この操作は、ホバーステートが選択されている状態で行います。ボタンをダブルクリックして背景を選択したら、塗りのカラーパレットを表示して予め登録されているスウォッチから色を選択します。さらに、シャドウを有効にして、オフセットとぼかしの数値を調整します。ここで、初期設定のステートとホバーステートを順に切り替えると、背景色の変化を確認できます。
ホバーステートのインタラクションの確認
インタラクションの設定は、プロトタイプモードで行います。ワークスペース上部のタブをクリックして、プロトタイプモードに移動しましょう。
ホバーステートを追加すると、自動的にホバーのインタラクションが追加されます。そのため、特に追加の設定をしなくても、マウスオーバーでボタンの見た目が変化します。
ワークスペース右上の「デスクトッププレビュー」ボタンをクリックして、プレビューウィンドウを開き、ボタンの上にマウスカーソルを移動して、背景の色が変わり、ドロップシャドウが表示されることを確認しましょう。
インタラクションの調整
デフォルトでアクションに設定される「自動アニメーション」は、色とシャドウを扱えません。そのため、スムーズな動きになりません。そこで、アクションの種類を「トランジション」に変更し、アニメーションには「ディゾルブ」を指定します。ディゾルブは、変化後の画面が、徐々に見えてくるアニメーションです。
再度、プレビューウィンドウで確認すると、スムーズな色の変化を確認できます。