この記事は3分で読めます

【XD】アコーディオンメニューを作る方法

  • 投稿日
  • 更新日

あとで読む

【XD】アコーディオンメニューを作る方法

今回はAdobe XDを使ったアコーディオンメニューを作成する方法を解説します。
アコーディオンメニューを作れるようになることで、デザインカンプの質もぐっと上がるので試していきましょう!

イッパイアッテナ

はじめまして、イッパイアッテナです。

ITと教養で、優秀なネコの手となり、あなたのあらゆる問題を解決します。あなたの相談役だったり、デザイナーだったり、広報だったり、わたしたちは”イッパイ”の顔をあなたに見せることができます。

アコーディオンメニューとは?

アコーディオンメニューとは、項目をクリックすることで、隠れている項目を表示させ、詳細を見ることができるメニューの表示形式のことです。

実際にアコーディオンメニューを作ってみよう!

STEP
「企業情報」のアコーディオンメニューを作成する

「企業情報」「会社概要」「採用情報」「アクセス」のボタンを作成しましょう。


「企業情報」のボタン
長方形の大きさ:375px×60px フォント:Noto Sans JP フォントサイズ:18px
「会社概要」「採用情報」「アクセス」のボタン
長方形の大きさ:375px×50px フォント:Noto Sans JP フォントサイズ:16px

STEP
「事業内容」のアコーディオンメニューを作成する

「企業情報」のアコーディオンメニューを複製し、編集します。「事業内容」のアコーディオンメニューが完成したら「企業情報」のアコーディオンメニューと一緒にグループ化します。

STEP
「スタック」にチェックを入れる

グループ化したアコーディオンメニューを選択した状態で、右のパネルのスタックにチェックを入れます。

STEP
ボタンをコンポーネントにする

アコーディオンメニューを選択した状態で右クリックし、「コンポーネントにする」をクリックします。

STEP
新規ステートを追加する

右のパネルの「初期設定のステート」の横の「+」をクリックし、「新規ステート」を追加します。新規ステートに「アコーディオンメニュー【閉】」という名前をつけましょう。

STEP
閉じた状態のデザインを作る

「企業情報」と「事業内容」のボタン以外を非表示にしてアコーディオンメニューを閉じた状態のデザインを作成します。

STEP
「企業情報」のアコーディオンメニューを開いた状態のデザインを作る

さらに「新規ステート」を追加し、「企業情報【開】」と名前を付けます。そのうえで、「会社概要」「採用情報」「アクセス」の非表示を解除します。

STEP
「事業内容」のアコーディオンメニューを開いた状態のデザインを作る

STEP7と同様に、「新規ステート」を追加し、「事業内容【開】」と名前を付けます。「コンサルティング事業」「サイト制作事業」の非表示を解除し、「会社概要」「採用情報」「アクセス」を非表示にします。

STEP
「初期設定のステート」にアニメーションを設定する

まずは「初期設定のステート」を選択した状態で、「プロトタイプ」タブからアニメーションを設定します。「企業情報」のボタンをクリックして「インタラクション」を追加します。トリガーを「タップ」、種類を「自動アニメーション」、移動先を「事業内容【開】」、イージングを「イーズアウト」、デュレーションを「0.3秒」に設定しましょう。

「事業内容」のボタンに関しても、同様の設定を行います。移動先は「企業情報【開】」にしましょう。

STEP
「アコーディオンメニュー【閉】」にアニメーションを設定する

次に「アコーディオンメニュー【閉】」のアニメーションを設定します。「企業情報」のボタンの移動先を「企業情報【開】」に、「事業内容」のボタンの移動先を「事業内容【開】」に設定しましょう。

STEP
「企業情報【開】」にアニメーションを設定する

「企業情報【開】」のアニメーションを設定します。「企業情報」のボタンの移動先を「アコーディオンメニュー【閉】」に、「事業内容」のボタンの移動先を「初期設定のステート」に設定しましょう。

STEP
「事業内容【開】」にアニメーションを設定する

「事業内容【開】」のアニメーションを設定します。「企業情報」のボタンの移動先を「初期設定のステート」に、「事業内容」のボタンの移動先を「アコーディオンメニュー【閉】」に設定しましょう。

これですべての設定が完了です!プレビューから確認してみましょう!

まとめ

XDを使ったアコーディオンメニューを作成する方法を解説してきました。最初は難しく感じるかもしれませんが、慣れると簡単にアコーディオンメニューを作ることができます!ぜひ、活用してみてください!

この記事で使用したデータの
ダウンロードはこちら

利用規約 ※必ずお読みください

この記事を書いた人

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

Web制作について相談してみませんか?

必須は必須項目です。弊社へお問い合わせいただく方は、下記の「個人情報の取り扱いについて」を必ずお読みください。

会社名

任意

お名前

必須

メールアドレス

必須

電話番号

任意

お問い合わせ内容

必須