マニュアル キャンセル

オーバーレイの追加

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

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

キーボードがアートボード上にオーバーレイとして表示されます
キーボードがアートボード上にオーバーレイとして表示されます

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

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

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

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

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

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

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

例とサンプルファイル

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

ヘルプをすばやく簡単に入手

新規ユーザーの場合