Adobe XDを使ってUIのアコーディオンを制作する方法

2023年 8月 9日　Posted　山中(デザイナー)

Adobe XD（Adobe Experience Design）は、アドビシステムズから提供されているUI/UXデザインに特化したソフトウェアです。主にWebサイトやモバイル向けのアプリなどの画面デザインやプロトタイプ作成に使われることが多く、PhotoshopやIllustratorに比べると動作が軽いため、筆者もよく使用するアプリケーションの一つです。

そんなXDですが、とりわけ便利な機能として、UIのアニメーション（動作）を比較的簡単に反映することができることだと思っています。その中で、今回はアコーディオンを開閉させる手順をご紹介します。

使用するパーツを全て制作する

長方形ツール（R）とテキストツール（T）を使用して押下できるタイトル用のボタンを制作します。長方形とテキストについてはグループ化（Ctrl or cmd + G）し、レイヤーを「A-タイトル」とします。なお、長方形に境界線を付ける場合は1pxであれば外側、2px以上は中央、もしくは外側に付けることをおすすめします。理由としては、この後にアニメーションを付与する工程があり、スタックの機能を付けることになりますが、長方形を重ねた場合、スタックをかけられない事象が見られるためです（2023年7月27日時点）。内側に境界線を設定しますと、長方形を重ねなければ上下についている境界線は太くなってしまいます。デザイン上、その形で問題なければ内側でも問題はありません。

最初に作ったボタンを複製（Ctrl or cmd + C→Ctrl or cmd + V、もしくはalt or option + カーソル移動）して、「A-タイトル」に付随する項目を制作します。今回は「A-アイテム-連番」とします。こちらも全てグループ化し、グループの名称をそれぞれ設定しておくと今後の過程で分かりやすいと思います。

Aと同様にBのタイトルとアイテムを作ります。Bはアイテム数を四つにしました。

ここまでの工程がアコーディオンで必要なパーツの制作です。ここからはアニメーションを付与するための工程になります。

アニメーションさせるための全画面の用意

全てのパーツのグループを選択した状態で、さらにグループ化します。その後、スタックにチェックを入れて機能をオンにします。今回は縦方向の開閉になりますので、縦を選択します。

グループの状態から、ステートの設定を行うためにコンポーネントへ変更します。コンポーネントへの変更は、右クリックを押下した状態で「コンポーネントにする」を押下するか（Ctrl or cmd + K）です。その後、初期のステートの横にある「+」を押下し、「新規ステート」を押下してステートを作り、ステート名を「全て閉じた状態」など、分かりやすい名前で設定します。

「全て閉じた状態」のステートを選択した状態で、A、Bのそれぞれのタイトルボタン以外を非表示にします。非表示にするには、左側のレイヤーパネルのグループ右側にある「目のアイコン」を押すことで非表示にできます。

再度新規の「基本的なアコーディオン」のコンポーネントを選択後、初期設定のステートの右側にある「+」アイコンを押下後、「新規ステート」を選択し、ステート名を「A-タイトルが開いた状態」とします。制作したステートを選択した状態でレイヤーパネルの「A-アイテム」を非表示から表示に変更します。

次に（7）のAが開いた状態を作るのには、似たような作業の繰り返しになりますが、「B-タイトルが開いた状態」という名前で新規ステートを作り、該当のステートを選択した状態で「Aの項目」を非表示にし、「Bの項目」を表示させます。

上記の工程で、アコーディオンを動かすための全ての画面を用意できました。この次はそれぞれの画面へアニメーションで動かすためのトリガーの設定などを行っていきます。

タップでアニメーションさせるための設定

今までは「デザイン」部分での制作でしたが、ここからは「プロトタイプ」の画面での設定になります。プロトタイプの画面に移動した後「全て閉じた状態」のステートを選択します。

レイヤーパネルの「基本的なアコーディオン」のコンポーネントを開き、「A-タイトル」のグループを選択し、インタラクションの右側にある「+」アイコンを押下、トリガーは「タップ（クリックすると動くように設定）」にアニメーションを「自動アニメーション」に設定し、移動先は「A-タイトルが開いた状態」にします。

この状態で、一度プレビューを行いましょう。プレビューは画面右上にある「▶」のアイコンを押すか（Ctrl or cmd + Enter）で起動できます。「A-タイトル」をクリックしてAの項目が開けば成功です。

Aと同じく「全て閉じた状態」で「B-タイトル」のグループを選択し、インタラクションの右側にある「+」アイコンを押下、トリガーは「タップ（クリックすると動くように設定）」にアニメーションを「自動アニメーション」に設定し、移動先は「B-タイトルが開いた状態」にします。これで「全て閉じた状態」のステートで行う設定は完了です。

ステートを「Aが開いた状態」を選択し、必要な設定を行っていきます。この際に考えられる動きは、「A-タイトル」をタップした際に閉じる動きと、「B-タイトル」をタップした際にBのエリアが開く動きです。それぞれの設定を行っています。なお、トリガーは「タップ」アクションの種類は「自動アニメーション」です。

まずは「A-タイトル」のグループを選択し移動先を「全て閉じた状態」にします。

次は「B-タイトル」のアクションを設定します。Bタイトルを押した後は全て開いた状態になりますので、移動先を「初期のステート」にします。これで「Aが開いた状態」のステートは完了です。

「Bが開いた状態」では「Aが開いた状態」と全く逆の工程を行いますので、「B-タイトル」の移動先を「全て閉じた状態」、「A-タイトル」の移動先を「初期のステート」で設定します。

最後に「初期のステート」を選択し、必要な移動先への設定を行います。ここではそれぞれの項目が閉じる状態になる動きになりますので、「A-タイトル」の移動先を「Bが開いている状態」、「B-タイトル」の移動先を「Aが開いている状態」に設定します。

以上で全ての工程が終了となります。いかがでしょうか。うまく動作できたでしょうか。

まとめ

今まではフロントエンドがコーディングを行った後に見ることのできた動きが、XDのツールのみで設定することができました。また、応用したアコーディオンなどの制作もできますので、今後、記事にしていきたいと思います。