Adobe XDでオーバーレイで表示した内容をスクロールさせたい時の設定方法

こんにちは！ ケインコスゲ（@keinkosuge）です。

今回は初めてAdobe XDのお話について書きたいと思います。

ここ最近、登壇資料作成するなど含めて、徐々に Adobe XDを使う頻度を増やしてきています。

そんな最中、「オーバーレイで表示したコンテンツをオーバーレイ内でスクロールさせるにはAdobe XDではどのように設定すればいいのか」という疑問にぶち当たました。

結論からいうと無事にAdobe XDで実装することができたので、今回はオーバーレイで表示したコンテンツをオーバーレイ内でスクロールさせたい時の設定方法についてご紹介したいと思います！

そもそも、オーバーレイで表示したコンテンツをオーバーレイ内でスクロールするってどういうこと？？

正直いうと、今回の記事、言葉でどう表現したら良いのか、難しい部分があります。

なので、せっかくこの記事にたどり着いて記事の内容を一通り読んでいただいても、「これ自分がやりたいことと違う〜」となってしまっては大変申し訳ないので、まずは今回の記事で紹介したい実装内容を先に説明させていただきます！

今回は、何かと僕も色々お世話になっているし音楽も超素敵なアーティスト・シギさんのWebサイトを例に見てみたいと思います。

上記のGifアニメ画像を見ていただけるとなんとなく伝わりますかね・・・笑

Webサイト上にある何かしらのリンクをクリックすると、オーバーレイ（黒い幕が表示されてその上に別の内容・コンテンツが表示される）が出るようになり、さらにオーバーレイが表示されている状態でスクロールすると、オーバーレイ上のコンテンツが見られるようになるというものです！

うーん、やっぱり言葉で説明するの結構難しい内容な気がしますね！笑

Adobe XDでオーバーレイで表示したコンテンツをオーバーレイ内でスクロールさせるプロトタイプを作成する方法

それでは本題、Adobe XDでオーバーレイで表示したコンテンツをオーバーレイ内でスクロールさせる設定方法について見ていきたいと思います！

1、必要なデザインを用意する

今回サンプルとして、シギさんのサイトっぽいデザインを用いて、サンプルデザインを作ってみました。このアートボードを「トップ」という名前で設定します。

次に、オーバーレイで表示する用のデザインを載せたアートボードを作成します。アートボード名は「Aboutモーダル」と設定します。

これで、必要なデザインを用意することができました！ １枚目にお見せしたデザイン上にある「About」という部分をクリックしたら2枚目にあるオーバーレイ用のデザインが上に重なって表示されるイメージですね。

この時ポイントなのが、オーバーレイ用のデザインを作成するアートボードの高さは、コンテンンツがある分だけ引き伸ばしてしまってOKだということです！

ここができれば、もう勝ったも同然です！

2、Adobe XD上でプロトタイプ設定を行う

では次に、Adobe XD上で細かい設定・プロトタイプ設定などを行っていきましょう！

まずはプロトタイプモードに変換し、トップ用のアートボードの「About」と書いてあるテキストリンク部分を選択します。

すると、「どのアートボードへ、どんな動き方で繊維するように設定しますか」という旨の内容を設定するための項目入力欄が出てきますので、

• ・アクション・・・オーバーレイ
• ・出力先・・・オーバーレイで表示したいアートボード「今回はABoutモーダル」を選択

上記のような設定にします。

次にオーバーレイ時に表示されるコンテンツが掲載されているアートボード（今回はAboutモーダル）を選びます。

ここでもプロトタイプ設定を行います。

黒い幕（長方形で作成しています）を作っているレイヤーを選択し、アクション「一つ前のアートボード」を選択します。

以上で、必要な設定は全て終了です！

Adobe XD上でプロトタイプ設定を行ってみると、思い通りのことが実装できていることがわかりますね！

今回の内容は、プロトタイプの設定自体は特に普通の内容でして、オーバーレイ用で表示するアートボードの大きさをコンテンツの内容に応じた高さに設定するというのがポイントだったわけです！

まとめ

ということで、今回はAdobe XDでオーバーレイで表示した内容をスクロールさせたい時の設定方法についてご紹介させていただきました！

Adobe XD、使えば使うほど本当に扱いやすいアプリケーションだなと思うので、今後もどんどん使いこなしていきたいです！