記事の詳細

慣れないと動作を作るだけで余裕で一日持っていかれますね、AdobeXDのアニメーション。

ドロップダウンメニューのアニメーション

この画面を

Adobe XDでレスポンシブなグローバルメニューを作るときのテクニック

こんなふうにしたいとき。

Adobe XDでレスポンシブなグローバルメニューを作るときのテクニック

 

動作としては、以下のようになります。

最初の配置はこう。

Adobe XDでレスポンシブなグローバルメニューを作るときのテクニック

ヘッダーをずらすとわかりますが、ヘッダーの下にドロップダウンしてくるメニューがすでに隠されています。リピートグリッドを使ってテキストを打っていますが、下にボックスオブジェクトを設けてリピートしてもOKです。

また、現在見えませんが、グローバルメニューのところのホバーアクションは、カラーの透明度を0にしたボックスを置いています。

Adobe XDでレスポンシブなグローバルメニューを作るときのテクニック

ドロップダウンメニューが展開したあとの図を二枚並べて、こんな感じ。

Adobe XDでレスポンシブなグローバルメニューを作るときのテクニック

作業としては、

  • ヘッダーの下に隠してあるドロップダウン時に展開するメニューを利用して、次のページを作る事。
  • ホバーアクションで変化する透明なボックスのカラーを透明度100%にすること。

プロトタイプモードにして繋げたら、設定は「自動アニメーション」へ。

Adobe XDでレスポンシブなグローバルメニューを作るときのテクニック
これで上記動画のように動作します。

ヘッダーをコンポーネントしてしまうと、サンプルビューで妙なちらつきが起こります。グループ化も同様。アニメーションしているところを内包してコンポーネント化はできないようです。
メニューの動作とメニューからページの遷移は別に作ったほうがいいかもしれません。

ハンバーガーメニューのアニメーション

やることはだいたい上記と一緒です。

画面はこんな感じ。

Adobe XDでレスポンシブなグローバルメニューを作るときのテクニック

ヘッダーの裏にメニューを隠してあります。自動アニメーションで繋げていきます。

Adobe XDでレスポンシブなグローバルメニューを作るときのテクニック
ムービーにするとこんな感じ。

なお、ドロップダウンメニューを子までアコーディオンにする場合はちょっと工夫が必要です。
下に隠すのはこの三つの要素。

子要素まで展開しきった場合はこんなふうになります。

Adobe XDでレスポンシブなグローバルメニューを作るときのテクニック

アセットに名前を付けて管理しておくとわかりやすいですね。

ポイントなのは、ヘッダーから子要素、その下に回るサンプルタイトル2、3も、最初の画面から一緒に動かしていくこと。
ドロップダウンの一段階めが展開した時点で、子要素とその下の要素を一番手前の要素にし、透明度をゼロにしておくこと。

Adobe XDでレスポンシブなグローバルメニューを作るときのテクニック

最終的にこんな動きになります。

 

横スライドインのメニューのアニメーション

オーバーレイ機能を使います。
画面はこんな感じ。

Adobe XDでレスポンシブなグローバルメニューを作るときのテクニック

プロトタイプで「オーバーレイ」に設定し、アニメーション後の位置を設置します。

Adobe XDでレスポンシブなグローバルメニューを作るときのテクニック

こんな動作になります。

オーバーレイはビューポートに指定した範囲にしか適応できませんのでご注意ください。

グローバルメニューの固定表示

オブジェクトを選択したときに右側メニュー内の「スクロール時に位置を固定」にチェックをつけると、オブジェクトが固定されます。オブジェクトはいくつでも固定にすることが出来ます。

Adobe XDでレスポンシブなグローバルメニューを作るときのテクニック

 

様々な使い方がありますが、動作を入れるとどうにもビジュアルのデザインに集中できなくなってしまうのは難点ですね……AAdobeXDの動作を意識しながら使いこなすのにはまだまだ慣れが必要なようです。

 

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
久保田 里美

久保田 里美

価値あるコンテンツ制作部インクループ株式会社
デザイナー。コンセプト設立からデザインを理論立てて起こすことをポリシーに、WEB媒体から紙媒体まで幅広く手掛けていきたいデザイナー。日々勉強日々精進。

ほかの投稿も読んでみませんか?

コメントは利用できません。

AD

ページ上部へ戻る