Adobe XDを使用してマイクロインタラクションを作成します

Sep 16, 2025

操作方法

（画像クレジット：アドビ）

Adobe XDは、プロトタイプのプロトタイピングを手助けすることができます - デザインライフサイクルで最も重要なプロセスの1つは、デザイナーとDevチームをワークフローのメンテナンスで助けることによって開発において重要な役割を果たします。最近、プロトタイピングの風景にいくつかの大きな変化がありました：デザイナーは選択のために台無しにされています。

他の多くの分野と同じように、すべてを達成できる単一のデザインとプロトタイピングツールはありません。さまざまなステージでは、独自のツールセットが必要です。デザイナーがPhotoshopとSketchに頼っていた日の日です。彼らは素晴らしいUIデザインツールですが、彼らはクイックユーザーフローとワイヤーフレームの機能を持っていません（私たちの先頭を参照） ワイヤフレームツール より多くのワイヤーフレームオプションについて）。

アニメーション、ジェスチャー、音声管理などのデザインの中でのインタラクション量の増加と共に - これらのプロトタイピング機能をすべて達成できるツールを見つけるのは難しいものです。コーディングはこれらのインタラクションを作成する1つの方法ですが、時間がかかります。幸いなことに、Adobe XDは、 'Auto Animate'という名前の便利な機能を含むプロトタイピングツールにアップデートを解除することによって救助に来ました。それは強力なツールセットへの最大の追加ではるかに大きな追加です。

Adobe Creative Cloudを入手してください

ここでのアイデアは簡単です。自動アニメーションは、設計者がアートボードを複製するかオブジェクトのプロパティを変更するだけで、没入型アニメーションを持つ対話型プロトタイプを構築することを可能にします。これらのプロパティは、寸法、xの位置、yの位置、不透明度、回転などのものです。以前はAdobe XDは、スライド、プッシュ、および解散などの基本的なインタラクションを提供しました。

新機能を追加すると、デザイナーは簡単にモーションベースのアニメーションを作成することができます。これにより、ユーザーが複数の画面間でナビゲートしているときにユーザーが情報フローの精神モデルを作成するのに役立ちます。これは、画面内または画面にフェードされた視覚的な階層、CTA、またはメッセージを一時的に作成するためにも使用できます。

この記事では、Adobe XDの新しい自動アニメーション機能を使用して単純なマイクロアニメーションを作成する方法を説明します。始める前に、オブジェクトを自動アニメーションで処理する必要がある方法について考慮すべきことがいくつかあります。

オブジェクトまたは要素が目的地アートボード上にない場合は、通常プレビューしたときにフェイスアウトします。
イニシャルアートボードに要素が存在しない場合は、フェードする傾向があります
プロトタイプモードにあるときは常にアートボードを配線します。これにより、相互作用が発生します。
アニメーションを作成するには、常にオブジェクトと要素にレイヤー内の名前が一致し、またそれらのグループの名前もあることを確認してください。

Auto Animateを使用して状態変更を加える

Adobe XD tutorial — それは簡単に聞こえるかもしれませんが、あなたは2つの形で始める必要があります（イメージクレジット：Vamsi Batchu）

Auto Animateを使用して州の変更の簡単な例を変更しましょう。この例では、変更するプロパティは幅、高さ、色です。 Auto Animate Transitionsの場合は、2つ以上のアートボードが必要です。

最初のアートボードで、図形を描く - この例では、500px x 200pxの緑の長方形です。このアートボードを複製して、2番目のアートボードの長方形を選択します。幅を1000と高さ500に増やすことによって長方形のプロパティを変更する必要があります。不透明度の変更や色のピンク色を作るなど、さらに変更を実行することもできます。

左上隅のプロトタイプタブをクリックします。最初のアートボードを選択し、それを2番目のアートボードに矢印を使ってリンクします。これを行うと、トリガー、アクション、宛先、および緩和などのパラメータを設定するために使用できるアプリの右側にあるインタラクションタブがあります。各パラメータはあなたのニーズに応じてカスタマイズできます。タップ、ドラッグ、タイミングを含むトリガーには5種類あります - それはアニメーションを開始します。

[アクション]タブのデフォルトを[自動アニメーション]に設定し、この例では2つのアートボードがあるため、[宛先]タブをArt Board 2に設定します。選択できる複数のスムーズなトランジションもあります。右上のPlayアイコンをクリックすると、Auto Animateを表示し、長方形をアニメートします。同時に変更する必要がある2つ以上の要素がある場合は、これらの要素の名前が両方のアートボードで同じであることを確認してください。これにより、アプリケーションにこれら2つの要素をアニメーション化する必要があることを通知します。

カードを拡張します

今度は、より多くの対話性と複数の要素を含むものを例に進めましょう。カードからなる最初のアートボードを作成することから始めましょう。カードには、ヘッダー、説明、下位読み取り履歴のリンクなどの要素があります。リンクの横には下向きの矢印アイコンがあります。ユーザがリンクをクリックすると、カードは引き出しのように開き、以前のエントリを表示します。これはClick / Tap関数で発生するため、前のエントリを最初のアートボードに作成しないでください。

次に、このアートボードを複製し、カードのいくつかの特性を変更します。最初にすることは、それを拡張状態のように見えるように、長方形のカードの高さを増やすことです。ヘッダーと以下の説明は変更されません。今言及されたそれらのエントリを追加する時が来ました。

カードには3つのエントリがあると思います。各エントリには、メインイメージに表示されているエントリ名、エントリ日、ボタンがあります。 1つのエントリを作成して、エントリのグループを作成するために2回複製できます。メインイメージに表示されているようにそれらをアレンジして、ビュー履歴テキストリンクをこれらのエントリの下に置きます。拡張状態にあるので、矢印アイコンを上に向けて回転させます。それでおしまい。あなたはアートボードの設定を完了しました。

アニメーションを作成するには、最初のアートボードに移動して、左上隅からプロトタイプタブをクリックします。次に、最初のアートボードの[表示履歴]リンクをクリックして、プロトタイプリンクを2番目のアートボードにドラッグします。これにより、ビュー履歴がトリガーをリンクさせます。トリガーをタップしてActivateを起動するようにすることで、右側の[Interaction]タブのプロパティを変更します。スムーズな引き出しアニメーションを見るためにそれをテストしてください。アニメーションが十分に滑らかでない場合は、[インタラクション]タブで緩和オプションを変更します。

ドラッグアニメーションを作ります

ドラッグは、モバイルインタラクションに関して最も一般的なアニメーションの1つです。 2つのアートボードで簡単な例を試してみましょう。最初のアートボードの場合は、色と寸法の輪を作成することから始めます。これで、幅250px、高さ25pxの長方形を作成します。この長方形を8回重複して、重複した間に20ピクセルのスペースを維持してスタックを作成します。このアートボードを複製する前に、最初の長方形の上に円を置きます。

2番目のアートボードのためにやるべきことはあまりありません。複製された長方形のそれぞれの間のギャップを減らすだけで、圧縮されているように感じます。最初のアートボードと同様に、サークルを最初の長方形の上に置きます。最後のステップは、左上隅からプロトタイプタブをクリックしてプロトタイプすることです。今すぐ最初のアートボードから円をクリックしてトリガーにします。前の例と同じように、トリガを設定してAuto Animateへのドラッグとアクションを設定することで、右側の[インタラクション]タブのプロパティを変更します。再生ボタンをクリックしてアニメーションをプレビューするときは、ブロックが球によって圧縮されているかのようにスムーズなアクションを見ることができます。

Infinite Loaderアニメーションを作成します

Adobe XDの最良の機能の1つは、自動アニメートが複数のアートボードの間に適用できるということです。そのようなアニメーションを実行するには、そのプロパティの1つに簡単な変更を加える必要があります。

バッテリーが埋められたロードアニメーションを作成しましょう。この完璧を得るための鍵は、最初のアートボードを正しく作成することです。最初のアートボードには、画像のようにバッテリーのプレースホルダーがあります。長方形の形状を使用して作成できます。プレースホルダ内の実際のバッテリーの場合、最初のアートボードは空になる必要があります（これは0％を表します）。このアートボードを複製し、プレースホルダーの内側に完璧にフィットする50pxの高さの緑の長方形を作成します。同様の重複を作成するので、3番目のアートボードのバッテリの高さは50pxなどで増加します。アートボードが完全に満たされるまで続けます。

これで、これらのアートボードの間に無限ループを作成して、同期ロードアニメーションを作成する必要があります。このために、プロトタイプモードで最初のアートボードをクリックして、プロトタイプの矢印を2番目のアートボードにドラッグします。トリガーを時間に設定してから、プレビューしたときに遅延を0秒に設定することで、インタラクションパネルのプロパティを変更してから0秒に設定します。最後に最後のアートボードを最初のものにリンクさせる前に、すべてのアートボードに同じ変更を3番目にリンクします。私たちはすべてのアートボードを無限ループを形成するように連携しました。ロードを滑らかにするための要件に従って、緩和と期間の設定を変更します。

Adobe XDを使用して試すことができる一連のバリエーションがありますが、ツールの現在の機能は限られており、まだ開発チームによって定期的に更新されています。そのため、原則のようなツールと比較すると、XDに制限されたツールセットがあるかのように感じるかもしれません。しかし、アドビは、ツールを学ぶのが簡単にすることの優れた仕事をしました。複雑なインタラクションを作成すると、時間と労力がかかる場合がありますが、それらはXDの自動アニメーション機能を使用して完全に達成可能です。このキーは、オブジェクトの移動、それらのサイズ変更、レイヤー、およびトリガの使用を理解することです。

この記事は当初の問題326に登場しました ネット Webデザイナーや開発者向けの世界大手雑誌。購入 問題326 または ここで購読する 。

続きを読む：

40ブリリアントのWordPressチュートリアル
11素晴らしいJavaScriptフレームワーク
Neumorphismは本当に2020年代の熱い傾向ですか？

Adobe XDを使用してマイクロインタラクションを作成します

Auto Animateを使用して状態変更を加える

カードを拡張します

ドラッグアニメーションを作ります

Infinite Loaderアニメーションを作成します

操作方法 - 最も人気のある記事

あなたのApple Icloud Storageは完全ですか？スペースを解放する方法

Apple Watch Appを作る方法

KRITAチュートリアル：デジタルアートソフトウェアの基本を学ぶ

ChiaroScuro Art：ステップバイステップガイド

8モバイルデザインの8つのゴールデンルール

オイルで肖像画の絵画絵画

ファンタジービーストを描く方法

本物のk-2SOドロイド

カテゴリ

Adob​​e XDを使用してマイクロインタラクションを作成します

Auto Animateを使用して状態変更を加える

カードを拡張します

ドラッグアニメーションを作ります

Infinite Loaderアニメーションを作成します

操作方法 - 最も人気のある記事

カテゴリ

Adobe XDを使用してマイクロインタラクションを作成します