Lesson

XD でアニメーションするランディングページをデザイン - 全3回

ページのイントロアニメーションを作成(アニメーションするランディングページ 1/3)

このレッスンでは、ページを読み込んだ際に表示されるイントロアニメーションのつくり方を解説します。

Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプルが表示されます。

アニメーション各段階の見た目を作成

新規アートボードを作成し、それをコピーして2枚目を作成します。2枚目のアートボードには、アセットパネルからロゴをドラッグして中央に配置し、アートボードと同じ大きさの黒い長方形を作成してアートボードの下に配置します。

2枚目のアートボードをコピーして3枚目を作成します。ロゴを削除し、2枚目のアートボードの黒い長方形をコピーしてアートボード全体が隠れるように貼り付けます。

予め用意されているマスターデザインのアートボードをコピーして、4枚目のアートボードを作成します。アートボード上部に配置されている「参加する」ボタンと「ページトップ」ボタンの不透明度を0%にして非表示にします。

これでイントロアニメーション開始から終了までの各段階ができました。

自動的にアニメーションが開始されるインタラクションを設定

プロトタイプモードに移動して、1枚目のアートボードから4枚目のアートボードまで自動的にアニメーションされるように設定します。

まず、1枚目のアートボードを選択して、表示される青い矢印を2枚目のアートボードに接続します。トリガーに「時間」、ディレイに「1秒」を指定すると、1枚目のアートボードが表示された1秒後に、自動的にインタラクションが開始されます。アクションの種類に「トランジション」、アニメーションに「ディゾルブ」、イージングに「イーズアウト」、デュレーションには「0.6秒」を指定します。

次に、2枚目のアートボードを選択し、青い矢印を3枚目のアートボードに接続します。1枚目のアートボードと同様に、トリガーに「時間」、ディレイに「1秒」を指定します。アクションの種類に「トランジション」、アニメーションに「上にスライド」、イージングに「イーズアウト」、デュレーションに「0.8秒」を指定します。

最後に、3枚目のアートボードを選択し、青い矢印を4枚目のアートボードに接続します。トリガーに「時間」、ディレイには「0秒」を指定します。アクションの種類に「自動アニメーション」、イージングに「イーズアウト」、デュレーションに「0.8秒」を指定します。

プレビューして動きを確認

1枚目のアートボードを選択した状態で、ワークスペース右上の「デスクトッププレビュー」ボタンをクリックし、プレビューウィンドウを開きます。すると、1枚目のアートボードから4枚目のアートボードまで、自動的にアニメーション付きで遷移することを確認できます。