【XDプロト】スタック機能を活用したアコーディオンの作成

Adobe XDには便利な機能がたくさんありますが、今回ご紹介するのは「スタック」機能。
「スタック」機能は、グループ化したオブジェクトの並べ替えやパディング（要素内の余白）の調整ができる機能です。
今回は、この機能を活用した「アコーディオン」の作成方法についてご紹介します。

そもそも「アコーディオン」とは？

「アコーディオン」は、アプリケーションやWebページにおいて、項目ごとに情報が格納され、クリック（タップ）することで格納された情報を開閉して表示するUI要素のことをいいます。
開閉する動作が楽器のアコーディオンに似ていることから、この名前が付けられました。

アコーディオンの作成手順

01. アコーディオンの要素を作成

アコーディオンにしたい項目を作成し、グループ化しておきます。
グループ化したレイヤー階層は下の写真のとおりです。

02. 「スタック」機能を使う

グループを選択した状態でスタックにチェックを入れ、「垂直方向スタック」を選択します。

03. コンポーネント化する

右クリックして「コンポーネントにする」をクリックします。

04. ステートを設定

「ステート」は、要素に変化を持たせることができる機能です。
（ホバーアクションやトグルの動作などを表現できます）
ここでは、アコーディオンの開閉状態をステートに設定します。
 
まずは「初期設定のステート」にアコーディオンの初期状態（情報がすべて畳まれた状態）を設定します。
以下のグループのみ非表示にしてください。

非表示にするグループ
　項目１ - 情報１
　項目１ - 情報２
　項目２ - 情報１
　項目２ - 情報１

すると、スタック機能が作用して、自動的に項目タイトルだけが表示された状態になります。

次に、項目１だけが展開された状態を設定していきます。
「初期設定のステート」の右側にある「＋」をクリックし、「新規ステート」を選択。

追加した「新規ステート」に「項目１ - open」と名前をつけます。

非表示にしていた「項目１ – 情報１」と「項目１ – 情報２」を表示させます。

これで「項目１」だけが展開された「項目１ – open」ステートが設定できました。

「項目１」と同様に、「項目２」だけが展開された状態のステートも設定していきます。
「初期設定のステート」の右側の「＋」をクリックし、「新規ステート」を選択。

「項目２ - open」と名前をつけます。

先ほど表示にした「項目１ – 情報１」と「項目１ – 情報２」をまた非表示にし、「項目２ – 情報１」と「項目２ – 情報２」を表示します。

これで「項目２」だけが展開された「項目２ - open」ステートも設定が完了しました。

さらに、すべての項目が展開された状態の「all open」ステートを同様の手順で設定します。
※「all open」ステートの作成手順は画像を割愛します。
 
まずは「初期設定のステート」の右側の「＋」をクリックし、「新規ステート」を選択。
ステート名を「all open」にします。
非表示になっているグループをすべて表示にし、アコーディオンがすべて展開された状態にします。
これで「all open」ステートも設定完了です。

05. インタラクションを設定する

前項で設定したステートにそれぞれインタラクションを設定していきます。

まずは、画面上部の「プロトタイプ」をクリックし、プロトタイプモードに切り替えます。
そして、ステートから「初期設定のステート」を選択。

レイヤーから「項目１ – タイトル」を選択（当該オブジェクトをダブルクリックでもOK）し、インタラクションの右の「＋」をクリック（選択したオブジェクトの右にある青い丸のアローをクリックしてもOK）。
アクションを下記の通り設定します。

トリガー：タップ
種類：自動アニメーション
移動先：項目１ – open
イージング：イーズアウト
デュレーション：0.3秒

レイヤーから「項目２ – タイトル」を選択し、インタラクションの右の「＋」をクリック。
アクションの移動先を「項目２ - open」にして、それ以外は先ほどと同じです。
これで「初期設定のステート」のインタラクション設定は完了です。
以降の工程もこれを繰り返しますが、アクションは移動先以外すべて同じ設定です。

次に「項目１ - open」のステートにインタラクションを設定します。
レイヤーでコンポーネント「アコーディオン」を選択し、ステートから「項目１ - open」をクリック。

レイヤーから「項目１ – タイトル」を選択し、イランタラクションの右の「＋」をクリック。
アクションの移動先を「初期設定のステート」にします。

レイヤーから「項目２ – タイトル」を選択し、イランタラクションの右の「＋」をクリック。
アクションの移動先を「all open」にします。
これで「項目１ - open」のインタラクションの設定も完了です。

次は「項目２ - open」のインタラクションを設定します。
レイヤーでコンポーネント「アコーディオン」を選択し、ステートから「項目２ - open」をクリック。

レイヤーから「項目１ – タイトル」を選択し、イランタラクションの右の「＋」をクリック。
アクションの移動先は「all open」。

レイヤーから「項目２ – タイトル」を選択し、インタラクションの右の「＋」をクリック。
アクションの移動先は「初期設定のステート」。
これで「項目２ - open」もインタラクションの設定が完了しました。

最後に「all open」ステートのインタラクションを設定します。
レイヤーでコンポーネント「アコーディオン」を選択し、ステートから「all open」をクリック。

レイヤーから「項目１ – タイトル」を選択し、インタラクションの右の「＋」をクリック。
アクションの移動先は「項目２ - open」。

レイヤーから「項目２ – タイトル」を選択し、インタラクションの右の「＋」をクリック。
アクションの移動先は「項目１ - open」。

これで「all open」ステートのインタラション設定も完了です。

動作確認の前に、レイヤーでコンポーネント「アコーディオン」を選択し、ステートから「初期設定のステート」をクリックして、アコーディオンの初期状態に戻しておきます。

06. 動作を確認

では、実際に動作を確認してみましょう。
画面右上の「▶︎」をクリック。

すると、ウィンドウが立ち上がるので、作成したアコーディオンをクリックして正常に動作するか確認してみてください。

まとめ

以上です。
今回ご紹介した「スタック」機能は、プロトタイプ制作以外でも重宝する便利な機能なので、知っておくと役立つと思います。
また、実際に使ってみることで機能の理解も深まるので、ぜひ参考にしてみてください。