オーバーレイの追加

最終更新日 : 2022年2月17日

オーバーレイを追加して、インタラクティブなスライドエフェクトをシミュレートする方法を説明します。

Adobe XD を使用すると、コンテンツを複数のアートボードに複製するのではなく、別のアートボードの上に重ねて、ドロップダウンリストやスライドアップパネルなどの効果をシミュレートできます。

デザインモードで、ソースアートボードとオーバーレイする他のアートボードを選択します。オーバーレイアートボードは複数回再利用できます。

プロトタイプモードで、ソースのアートボードからオーバーレイコンテンツのあるアートボードにコネクタをドラッグ＆ドロップします。コネクタをクリックして、プロパティインスペクターにインタラクションパネルを表示し、次のオプションを設定します。

トリガー：オプションを選択します。
アクション：「オーバーレイ」を選択します。単一のトリガー（タップなど）で2つのアクションを割り当てたい場合は、プロパティインスペクターで最初のアクション + ボタンをオーバーレイに設定し、2番目のアクション + ボタンをオーディオ再生や音声再生
などの非トランジションアクションに設定します。
アニメーション：アニメーションの種類を選択します。「スライドアップ」または「スライドダウン」を選択すると、XD によって自動的にオーバーレイがソースアートボードの端に配置されます。
イージング：イージング効果をシミュレートするためのオプションを選択します。
デュレーション：持続時間を設定します。 2 つのアートボード間のトランジションに設定できるデュレーションは最大 5 秒です。

ソースアートボード上のオーバーレイの位置を調整するには、緑色の位置ノブ（+）をクリック、ドラッグ＆ドロップします。

対応ブラウザーでオーバーレイをプレビューするには、をクリックします。

ネストされたオーバーレイ

Adobe XD では、ネストされたオーバーレイ、つまりオーバーレイを別のオーバーレイに適用することはサポートされていません。このような場合、最初のオーバーレイアートボードを別のアートボードに接続すると、最初のオーバーレイが処理されてから、2 番目のオーバーレイが処理されます。

背景ぼかし効果を使用したインタラクティブオーバーレイを作成するには、次の手順に従います。

ソースアートボードと背景ぼかしが適用されたオーバーレイアートボードを選択します。背景ぼかしを追加する方法については、XD でぼかし効果をあたえるを参照してください。
プロトタイプモードに切り替えて、ソースアートボードをオーバーレイアートボードに接続します。
プロパティインスペクターから、以下のオプションを選択します。
- トリガー：タップを選択します。
- アクション：「オーバーレイ」を選択します。
- アニメーション： ディゾルブを選択します。
- イージング：「イーズアウト」を選択します。
- デュレーション： 0.2 秒に設定します。
ソースアートボードをいくつでもオーバーレイアートボードに接続します。
「デスクトッププレビュー」を選択して効果をプレビューします。

詳細なチュートリアルおよびダウンロード可能なサンプルファイルについては、インタラクティブオーバーレイの作成を参照してください。

オーバーレイを使用してスライドインドロップダウンリスト効果を作成する方法をについては、この例の最後にあるチュートリアルを確認してください。手順は次のとおりです。

XDのオーバーレイについて詳しく学ぶには、このビデオをご覧ください。
視聴時間：10分

また、XD コミュニティで、このようなチュートリアルやサンプルファイルをさらにチェックすることもできます。

Adobe XD を使用して UX プロトタイプをデザイン
web サイトやモバイルアプリ用のインタラクティブなモックアップを作成できます。

タイマートランジションの作成

音声機能付きプロトタイプのデザイン

アプリ内のステップバイステップのビデオチュートリアルと実践的なガイダンスで学習できます。

ディスカッションに参加し、回答を見つけ、専門家から学び、知識を共有することができます。

お気に入りの Creative Cloud アプリ、サービス、ファイル管理などにアクセスできます。