連載  /  

Adobe XDをもっと使いこなすヒント! 第13回 タイマートランジションとパネルの設定項目

BY 公開

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、トランジションに関連する使い方についての7つのツイートを取り上げます。

Tip 1. タイマートランジションを設定する

 

トリガーのプルダウンから「時間」を選択すると、設定した時間後に自動的にトランジションを開始させることができます。ユーザーの操作無しで次のアートボードに移動したいときに便利です。

下の例は、スタート画面を表示すると、自動的に機能紹介が開始されるというシナリオを、タイマートランジションの機能を使って実現しています。

 

 

なお、トリガーに「時間」を選択できるのはアートボードに対するトランジションに限定されます。そのため、アートボード全体を自動的に入れ替える以外の目的には使用できません。

例えば、下のTips 2のシナリオは、トリガーに「時間」を指定すると、実現できない例のひとつです。

Tip 2. 位置をキープしたままトランジション

 

通常、トランジションで次の画面に移動すると、新しい画面が先頭から表示されます。しかし、画面の状態の変化(クリックすると背景が変わる等)を表すためにトランジションを使う場合は、トランジションの前後で、画面のスクロール位置がズレてしまっていたら話になりません。

そんなとき使えるのが「スクロール位置を保存」です。上のビデオでは、設定をオンにした後は、トランジション後のアートボードが同じ位置までスクロールされた状態で表示されるため、クリックしたボタンの背景が変化したように見えます。

Tip 3. ひとつ前のアートボードに戻る

 

2つの画面を交互に表示するだけなら、それぞれが相手を遷移先に指定すれば実現できますが、ブラウザの「戻る」ボタンのように、常に前の画面に戻れるようにしたいときは、アクションから「ひとつ前のアートボード」を選択します。

Tip 4. 「プッシュ」と「スライド」の違い

 

トランジションにはアニメーションを付けられます。上下左右の4方向の何れかにアートボードが移動するアニメーションには、「プッシュ」と「スライド」の2種類があります。

「プッシュ」は、新しい画面と、元の画面が同じ速度で同じ方向に移動します。押し出されているように見えるため、「プッシュ」と呼ばれているわけです。上のビデオで実際の動作が確認できます。

 

 

それに対して、「スライド」は新しい画面の方がずっと速く移動します。そのため、上のビデオのように、パララックスのような表現になります。

アニメーションが必要ないケースのためには「なし」が用意されています。「なし」では、下のビデオのように、突然次の画面に切り替わります。切り替えを少しゆっくりにしたい場合には、「ディゾルブ」を利用しましょう。

 


いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?

次回をお楽しみに!

  TAGS

  AUTHOR

akihiro kamijo

アドビのコンサルティングチームでリードアーキテクトとして主にUIデザインプロジェクトに関わる。現在は独立してデザイン/開発に関連のマーケティング企画や情報発信、プロジェクト支援を行っている。