デザインモードで、ソースアートボードとオーバーレイする他のアートボードを選択します。オーバーレイアートボードは複数回再利用できます。
最終更新日 :
2022年2月25日
- Adobe XD ユーザーガイド
- はじめに
- デザイン
- アートボード、ガイド、レイヤー
- シェイプ、オブジェクト、パス
- テキストとフォント
- コンポーネントとステート
- マスキングと効果
- レイアウト
- ビデオと Lottie アニメーション
- プロトタイプ
- 共有、書き出し、およびレビュー
- デザインシステム
- クラウドドキュメント
- 統合とプラグイン
- XD iOS 版および Android 版
- トラブルシューティング
- 既知の問題と修正された問題
- インストールと更新
- 起動時のクラッシュ
- クラウドドキュメントおよび Creative Cloud ライブラリ
- プロトタイプ作成、公開、レビュー
- 読み込み、書き出し、その他のアプリの操作
オーバーレイを追加して、インタラクティブなスライドエフェクトをシミュレートする方法を説明します。
Adobe XD を使用すると、コンテンツを複数のアートボードに複製するのではなく、別のアートボードの上に重ねて、ドロップダウンリストやスライドアップパネルなどの効果をシミュレートできます。
-
-
プロトタイプモードで、ソースのアートボードからオーバーレイコンテンツのあるアートボードにコネクタをドラッグ＆ドロップします。コネクタをクリックして、プロパティインスペクターにインタラクションパネルを表示し、次のオプションを設定します。
- トリガー：オプションを選択します。
- アクション：「オーバーレイ」を選択します。「タップ」などの 1 つのトリガーに 2 つのアクションを割り当てる場合、プロパティインスペクターの最初の「アクション」の「+」ボタンを「オーバーレイ」に設定し、2 番目の「アクション」の「+」ボタンを「オーディオ再生」や「音声再生
」などの、トランジション以外のアクションに設定します。 - アニメーション：アニメーションの種類を選択します。「スライドアップ」または「スライドダウン」を選択すると、XD によって自動的にオーバーレイがソースアートボードの端に配置されます。
- イージング：イージング効果をシミュレートするためのオプションを選択します。
- デュレーション：持続時間を設定します。遷移する 2 つのアートボードの間に設定できる最大期間は 5 秒です。
ソースアートボード上にキーボードをオーバーレイとして追加
ソースアートボード上にキーボードをオーバーレイとして追加 -
ソースアートボード上のオーバーレイの位置を調整するには、緑色の位置ノブ（+）をクリック、ドラッグ＆ドロップします。
-
対応ブラウザーでオーバーレイをプレビューするには、
をクリックします。
ネストされたオーバーレイ
Adobe XD では、ネストされたオーバーレイ、つまりオーバーレイを別のオーバーレイに適用することはサポートされていません。このような場合、最初のオーバーレイアートボードを別のアートボードに接続すると、最初のオーバーレイが処理されてから、2 番目のオーバーレイが処理されます。
例とサンプルファイル
背景ぼかし効果を使用したインタラクティブオーバーレイを作成するには、次の手順に従います。
- ソースアートボードと背景ぼかしが適用されたオーバーレイアートボードを選択します。背景ぼかしを追加する方法については、XD でぼかし効果をあたえるを参照してください。
- プロトタイプモードに切り替えて、ソースアートボードをオーバーレイアートボードに接続します。
- プロパティインスペクターから、以下のオプションを選択します。
- トリガー：「タップ」を選択します。
- アクション：「オーバーレイ」を選択します。
- アニメーション：「ディゾルブ」を選択します。
- イージング：「イーズアウト」を選択します。
- デュレーション： 0.2 秒に設定します。
- ソースアートボードをいくつでもオーバーレイアートボードに接続します。
- 「デスクトッププレビュー」を選択して効果をプレビューします。
詳細なチュートリアルおよびダウンロード可能なサンプルファイルについては、インタラクティブオーバーレイの作成を参照してください。
オーバーレイを使用してスライドインドロップダウンリスト効果を作成する方法をについては、この例の最後にあるチュートリアルを確認してください。手順は次のとおりです。
- ソースアートボードと、項目のドロップダウンリストがあるオーバーレイアートボードを選択します。
- プロトタイプモードに切り替えて、ソースアートボードをオーバーレイアートボードに接続します。
- プロパティインスペクターから、以下のオプションを選択します。
- トリガー：「タップ」を選択します。
- アクション：「オーバーレイ」を選択します。
- アニメーション：「右にスライド」を選択します。
- イージング：「イーズアウト」効果を選択します。
- デュレーション：0.3 秒に設定します。
- ソースアートボードをいくつでもオーバーレイアートボードに接続します。
- 「デスクトッププレビュー」を選択して効果をプレビューします。
詳細情報
XD のオーバーレイについて詳しくは、以下のビデオをご覧ください。
視聴時間：10 分
また、XD コミュニティで、このようなチュートリアルやサンプルファイルをさらにチェックすることもできます。
