XDで複雑なアコーディオンを作る方法
2023年 9月13日 Posted 山中(デザイナー)
Adobe XD（Adobe Experience Design）は、アドビシステムズから提供されているUI/UXデザインに特化したソフトです。前回は基礎的なアコーディオンの制作方法について解説しましたが、今回はマウスオーバーの付与など、少し複雑なアコーディオンを作る方法を解説していきたいと思います。
UIの必要パーツを全て制作する
ボタンを制作し、マウスオーバーのアクションを設定する
長方形ツール（R）とテキストツール（T）を使用して、アコーディオンの大タイトル用のボタンを「A-タイトル」という名前で作ります。今回も背景の色と境界線を設定していますが、境界線に関しては外側に付けるようにしましょう。理由としては、アニメーションを付与する前にスタックの機能を付けますが、長方形が重なってしまいますと、うまくスタックの機能を付けられないことがあるためです。また、この際、マウスオーバーで色を変更するアクションを設定したいので、背景の長方形をコンポーネントにします。コンポーネントにしたいレイヤーを選択して右クリックし、「コンポーネントにする」を選択することで、レイヤーをコンポーネントにすることができます。また、「Ctrl or cmd + K」でもコンポーネントにすることができます。
コンポーネントにした長方形のステートを追加します。「初期設定のステート」の右側にある「+」アイコンを押下し、「ホバーステート」を選択します。名前の変更は任意で良いですが、今回は「マウスオーバー」としています。
設定したホバーステートの「マウスオーバー」を選択した状態で、長方形の色を変更します。今回は境界線と同じ「#05584B」にしています。この段階でプレビュー（Ctrl or cmd + Enter）し、マウスポイントを長方形の上においた際、色が変わればホバーステート、つまりマウスオーバーのアクションを設定できたことになります。最後に作ったアイテムをグループ化しておきますと、今後の作業がしやすくなりますのでグループ化します。「Ctrl or cmd + G」で選択したレイヤーをグループにすることができます。
次にアコーディオンが開いたときに出現させたい小ボタンを制作します。「A-タイトル」のグループをコピーして新たに小ボタンを作ります。長方形の色と文字の色を変更します。また、コンポーネントに設定しているホバーステートも同じ設定になっていますので、ホバーステート（マウスオーバー）を選択し、こちらも色を変更します。
今回「A」については三つボタンを出現させるように作りたいので、さらに二つのボタンを複製して作ります。「alt or option + カーソル移動」でも複製することができます。
Aのエリアと同様にBのエリアを用意し色を変更する
同じように「B」のアコーディオンパーツも制作します。「B」については、開いた後に四つボタンを出現させたいので、大ボタンを一つ、小ボタンを四つ制作します。ボタンの色の設定と「ホバーステート（マウスオーバー）」の色の設定も忘れずに変更しましょう。また、AとBの間に少し大き目の余白も用意しておきます。この後に閉じられるように別途パーツを用意するためです。
AとBそれぞれに閉じるアイコンとテキストを用意する
閉じるアクションなので「×閉じる」という形でそれぞれ一番下側（がわ）にあるボタンの下に「×閉じる」を用意します。長方形ツールとテキストツールで閉じることのできるアイコンとテキストを制作します。長方形ツールで「w4 x h20」を一つ作り、複製して角度を90度ずらし、十字の状態にして長方形と長方形をくっつけましょう。長方形二つを選択して、リピートグリッドのボタンの下にある一番左のアイコンを押すことで、一つのアイコンとなります。アイコン制作後は「閉じる」テキストを設置します。
この際、アイコンと「閉じる」のテキストを選択した状態でコンポーネント化します。長方形と同様にホバーステートを設定します。ここでも名称はマウスオーバーとし、選択した状態でテキストにアンダーラインを付けるようにします。マウスオーバーまでの設定を行いましたら、「閉じる」のコンポーネントをグループ化しておきます。後ほど、インタラクションの設定を行う際に重要になってきます。
Bのエリアに「閉じる」を複製して配置するようにしましょう。これでアコーディオンにおいて使用するパーツを全て作り終えたことになります。レイヤーの順序などは適宜そろえると今後の作業が効率的にできると思います。
開閉用のイメージを三つ用意する
「Aが開いている」「Bが開いている」「全て閉じている」の三つ
まずはAのパーツグループとBのパーツグループをそれぞれグループ化します。その際、スタッツを上下で設定するようにしてください。
次にA、Bのグループを一つのコンポーネントに設定します。ここでもスタッツは上下で付けるようにしてください。AとBの中間にある余白を維持できるようになります。また、レイヤーパネル上でコンポーネントの名称を「アコーディオン」にしています。
コンポーネントにしたアコーディオンを選択し、ステートで必要な画面イメージ三つを作ります。「Aが開いている」「Bが開いている」「全て閉じている」の三つです。
「Aが開いている」イメージを用意する
「Aが開いている」状態のものを作ります。初期のステートの右側にある「+」を押下し、「新規ステート」を選択、名称を「Aが開いている」にします。そのまま選択した状態でB-パーツ01～04、およびBの下側にある「閉じる」のグループを非表示にします。
「Bが開いている」イメージを用意する
先ほどの工程と同じように新規ステートで「Bが開いている」状態のイメージを作るため、同じように初期設定のステートの右側にある「+」を押下し「新規ステート」を選択、名称は「Bが開いている」にします。作ったステートを選択した状態で、アコーディオンのコンポーネント内にある「A」グループのパーツおよび「閉じる」を非表示にします。
「全て閉じている」イメージを用意する
最後に「全て閉じている」状態のイメージを作ります。これまでと同様に初期のステート右側にある「+」アイコンを押下し「新規ステート」を選択、名称を「全て閉じている」にしてステートを制作します。制作したステートを選択したまま、今回は「A」「B」それぞれのパーツと閉じるを非表示にします。スタッツの設定を「90」で行っていますので、その余白が空いたまま自動的に「B-タイトル」が上がってくることを確認してください。以上でアニメーションに必要なイメージの制作は完了です。
用意したイメージにそれぞれのボタンアクションをひもづけていく
ステート「全て閉じている」状態から、それぞれの開いた際のステートに移動する設定を行う
今までの工程は「デザイン」で行っていましたが、これからは「プロトタイプ」画面での設定となります。プロトタイプに移動した後、右側にあるコンポーネントのアコーディオン下にあるステートを「全て閉じている」を選択しましょう。この際、全てを開いた状態をデフォルトとする場合は「初期のステート」を選択します。今回は「全て閉じている」状態をデフォルトにするため、「全て閉じている」を選択することにします。
レイヤーパネルのアコーディオンを開き、グループ「A」の中にある「A-タイトル」を選択します。画面右上にあるインタラクションの「+」を押下し設定します。トリガーは「タップ」、アクションの種類は「自動アニメーション」、移動先「Aが開いている」、イージング「イーズアウト」、デュレーション「0.3秒」で設定します。
同じようにグループ「B」にある「B-タイトル」を選択し同じように設定します。画面右上にあるインタラクションの「+」を押下し設定、トリガー「タップ」、アクションの種類は「自動アニメーション」、移動先「Bが開いている」、イージング「イーズアウト」、デュレーション「0.3秒」で設定します。今後の設定内容も同様になりますので省略します。
ステート「Aが開いている」状態から開閉のアニメーションを付与する
レイヤーパネルでアコーディオンのコンポーネントを選択し、画面右上にあるステートは「Aが開いている」を選択します。
Aのグループにある「A-タイトル」を選択し、インタラクションの設定を行います。ここでの移動先は「全て閉じている」にします。また、「閉じる」のグループを選択し、こちらも同じく移動先は「全て閉じている」にします。
Bのグループにある「B-タイトル」を選択します。こちらを押した際は「B」のグループが開くインタラクションになりますので、移動先は全てが開いている状態の「初期のステート」で設定を行います。
ステート「Bが開いている」状態から開閉のアニメーションを付与する
先ほどの「Aが開いている」状態の設定の「A」グループ、「B」グループそれぞれの逆の設定を行っていきます。左側のレイヤーパネルから「アコーディオン」を選択し、右側のステートは「Bが開いている状態」にします。「A」のグループの中にある「A-タイトル」を選択し、インタラクションを設定します。移動先は全て開いている状態にしたいので「初期のステート」を選択します。
次の「B」グループ内にある「B-タイトル」を選択し、移動先を「全て閉じている」。「閉じる」のグループでも移動先を「全て閉じている」にしてインタラクションの設定を行います。
最後に「初期のステート」から閉じるアニメーションを付与する
最後の設定です。レイヤーパネルからアコーディオンを選択し、ステートは「初期のステート」を選択します。
「A」グループ内にある「A-タイトル」と「閉じる」に移動先を「Bが開いている」でインタラクションを設定します。同じく「Bグループ」の「B-タイトル」と「閉じる」で移動先を「A-が開いている」にして、インタラクションを設定します。以上でインタラクションの設定は全て終わりです。
まとめ
今回はマウスオーバーの設定を行ったり、余白を間に付けたり、閉じるテキストを掲載したりと基本編からの応用編についての作り方を解説しました。うまく動作するようにできたでしょうか。また、この他にもさまざまな用途でXDを使うことができますので、また何か紹介できる記事を書いていこうと思います。最後までお読みいただき、ありがとうございました。