本記事ではXDにステート機能およびホバートリガー無い状況下で、ホバーやその他インプット要素を再現する方法を紹介しています。先日のAdobeMAXでのアップデートでホバーアクションなどを手軽に作れるようになりました。後日記事を書きますが以下のAdobe公式ページを参照してください。https://helpx.adobe.com/jp/xd/help/whats-new/2020.html#component-statesはじめに前回のXDについての記事で「アートボードのオーバレイ」について動画で説明しますと伝えて動画が完成しました!プロトタイプを見るオーバレイを一歩踏み込んで使うとこのように様々な動きを表現出来ることが理解してもらえたかと思います。この記事では実際にどのように作成していくかを解説していきます。基本的な使い方まずは基本的な使い方を振り返っていきましょう。オーバレイの実装によりアートボード上にコンテンツを重ねた状態を表現する時に、アートボードを何枚も用意する必要がなくなりました。ドロップダウンメニュー、キーボードのスライドアップ、モーダルなどがそれにあたります。実際の作り方は以下の動画を見て下さい。テキスト入れるの面倒くさくなってしまった(素直)のですが、1.オーバレイさせるアートボードを用意2.リンクさせアニメーションを設定3.緑のボックスで位置を調整するという手順でサクッと簡単にオーバレイが実装出来ます。すごいや!ホバーアクションホバーアクションの実装は単純で以下の画像を見ていただけると一発で分かるかと思います。1回目のクリックでホバー時の見え方をオーバレイで表現。(このオーバレイ要素にリンクを貼っています)2回目のクリックでTOPへ移動。こんな感じで、1クリック目はホバーアクション、2クリック目はリンク先に移動という表現が可能になります。要はメニューと同じ動きで、オーバーレイするアートボードが小さくなっただけですね。カウント上記のようにオーバレイからオーバレイを同じ位置に相互に呼び出し合うことで再現しています。2の下と0に1へのリンクが無いのは、初期値が1なのでオーバレイ要素が無くなれば1が表示されるためです。(オーバレイはなにも無いところをクリックすると消えます)インラインスクロールカウントと比べてリンクはかなりスッキリしています。オーバレイ要素に「ビューポートの高さ」の指定を行うことでスクロール可能に。「固定オブジェクト」で背面の白シェイプを固定し文字がダブらないようにしています。この2つの設定だけでインラインスクロールが再現可能です。セレクトボックスなどやっていることとしてはカウントとほぼ同じです。「選択してください」でセレクト要素を呼び出し、各アイス名の呼び出し位置を「選択してください」に揃えています。セレクト要素を呼び出ている時には、右の矢印を↓にするのも大切ですね。上の3つもそうですが、アニメーションを「なし」にすることがポイントです。即座に切り替わるので、待たされることなくより自然な操作感になります。下のボタン系はここまで来たら説明不要ですね!スライダー3つの画像がループで出てくるようにリンクを設定しています。ポイントは画像半分のサイズのシェイプを不透明度0%で配置することで、見えないけどクリック出来る要素にしていることです。動画を見ていただけると分かる通りアニメーションの切り替わりの瞬間に最初の画像が一瞬見えるという仕様があります。アニメーションを「なし」にすれば解決するのですが、アニメーションが無いスライダーは中々見ないので悩みどころですね。まとめオーバレイで出来ることの多さを理解してもらえたかと思います。ここで悲しいお知らせなのですがオーバレイの呼び出しはビューポートより下に配置出来ないという特徴があります。ビューポートより下で応用的な使い方をしようとすると基本的にオーバーレイはずれてしまいます。オーバレイはアートボードを絶対配置する機能であり、相対配置は出来ないのです。元も子もない言い方をすれば「オーバレイってそういう使い方じゃないから仕方ない」のです。現状、上記のデモのようにインタラクションの説明用としてスクロールしないデータをデザインとは別で作るのがいいかと思います。これだけでもイメージが付きやすくなりコミュニケーションの齟齬が防げるのでは無いでしょうか?という訳で僕が作ったデザインデータを配布します。jp」からデザインをお借りしています。XD用の日本語ワイヤーフレームUIキットです。今回はUIキットとしてではなくデザインを一部お借りする形でしたが、洗礼されたUIキットなので是非使ってみてください。日本語のUIキットなのですぐに使いこなせると思います。ここまで読んでいただきありがとうございました!僕が住んでいる札幌でもXDに関する勉強会が開かれるなど、XD化の動きが活発になってきて嬉しい限りです!誰か札幌でXD専門の勉強会発足してくだちい。XDUGについて札幌でもXDの勉強会が発足されました。いうか、僕が発足しました。