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

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

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

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

    • トリガー:オプションを選択します。
    • アクションオーバーレイ」を選択します。
    • アニメーション:アニメーションの種類を選択します。「スライドアップ」または「スライドダウン」を選択すると、XD によって自動的にオーバーレイがソースアートボードの端に配置されます。
    • イージング:イージング効果をシミュレートするためのオプションを選択します。
    • 持続時間:持続時間を入力します。遷移する 2 つのアートボードの間に設定できる最大期間は 5 秒です。
    ソースアートボード上にキーボードをオーバーレイとして追加
    ソースアートボード上にキーボードをオーバーレイとして追加
  3. ソースアートボード上のオーバーレイの位置を調整するには、緑色の位置ノブ(+)をクリック、ドラッグ&ドロップします。

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

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

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

例とサンプルファイル

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

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

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

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

  1. ソースアートボードと、項目のドロップダウンリストがあるオーバーレイアートボードを選択します。  
  2. プロトタイプモードに切り替えて、ソースアートボードをオーバーレイアートボードに接続します。
  3. プロパティインスペクターから、以下のオプションを選択します。
    • トリガー:「タップ」を選択します。
    • アクション:「オーバーレイ」を選択します。
    • アニメーション:「右にスライド」を選択します。
    • イージング:「イーズアウト」効果を選択します。
    • 持続時間:0.3 秒と入力します。
  4. ソースアートボードをいくつでもオーバーレイアートボードに接続します。 
  5. デスクトッププレビュー」を選択して効果をプレビューします。

視聴時間:1 分


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

ベストプラクティス

「オーバーレイは非常に強力な機能であり、多くの用途があります。ユーザーが実行しようとしているタスクが、ますます複雑になりつつある中、オーバーレイはプレッシャーをはねのけるうえで本当に役に立ちます。」と Oliver Lindberg 氏は述べています。オーバーレイをデザインする際のベストプラクティスに関する Lindberg 氏のブログを参照してください。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー