【Adobe XD】ステート機能を使ってハンバーガーメニューを作ってみよう

Adobe XDのハンバーガーメニューの作り方

みなさんこんにちは。しゅん(@shun_webdesign)です。

今回はAdobe XDでハンバーガーメニューを作りながら、「ステート」について解説します。

ステートとは?

ステートとはWeb上のパーツにおける「状態」を指します。

通常のパーツ状態からホバー、クリックでアクティブになるイベントなどをXDでは追加することができます。

作成したパーツを「コンポーネントにする(⌘K)」に設定し、操作画面右の「コンポーネント」から初期設定のステート横にある「+」をクリックすると「ホバーステート」または「トグルステート」を選択します。

1つのコンポーネントに対してどちらも同時に追加ができます。

合わせて読みたい

AdobeXD Tipsまとめ 【Adobe XD】保存版これだけ見とけば大丈夫!今から使えるTipsまとめ

ハンバーガーメニューを作成する

プロジェクトや難易度に合わせて使い分けれるように、いくつかある作成方法から3つ紹介します。

デザインは基本どの方法でも同じです。

作成一覧
  • ボード同士を繋げて作成
  • トグルステートを使った作成
  • オーバーレイを使った作成

簡単!ボード同士を繋げて作成

今回作成するメニュー例

ボード上にデザインを作成し、プロトタイプでボード同士を繋げてメニューを作る方法です。

ステートを使わずに作成することもできるので紹介する方法の中で1番簡単です。

作成手順

STEP.1
メニューを展開するボタンの作成

クリックするとメニュー一覧が表示されるボタン(以下略:トグル)を作ります。

ペンツール(P)で線をひき、リピートグリッドで等間隔に並べます。

この横の三本線がハンバーガーに見えることからハンバーガーメニューと言われています。

STEP.2
メニューの作成

クリックしたら表示されるメニューの部分を作ります。

長方形ツールをボード全体に広げ、メニュー名を記入します。

こちらも記入したメニュー名をリピートグリッドで複製すると綺麗に並びます。

必ずメニューとトグルをグループ化しましょう。

STEP.3
メニュー展開前

ボードを複製してください。

複製したボードのうち、どちらかをトグルをクリックして展開する前の状態にします。

メニューをボード外に配置します。(グループ化できていないとボード外のオブジェクトの扱いになってしまいます。)

お好みで画像のように長方形を湾曲させてみてください。長方形をダブルクリックするとレイヤーがパスになります。

ペンツールを使って、アンカーポイントを追加。追加したアンカーポイントをダブルクリックすると曲線になります。

STEP.4
メニュー展開

メニュー展開後のボードを作成します。

トグルの箇所の角度を変え「×(バツ)」のようにします。

STEP.5
プロトタイプの設定

プロトタイプの画面からボード同士を繋ぎます。

展開前のトグルをタップでメニュー展開後のボードに移動するようにします。

次にバツ印の展開後のトグルをタップしたときに展開前のボードに移動するように設定すれば完成です。

プレビューボタンから確認してみてください。お疲れさまでした。

注意とデメリット

XD上では別ページ扱いになるため、管理や修正がしずらいです。

また、スクロールするデザインはメニュー展開後元ページに戻ると一番上に戻ってしまいます。

オーバーレイを使った作成

プロトタイプから「オーバーレイ」を選択することでスクロール中でも元の位置に戻る状態でメニューを展開できます。

この作り方では「ホバーステート」を使用します。※「トグルステート」はあえて使用せず作成しています。

ホバーステートの記事

【Adobe XD】まるっと解説!ホバーステートの使い方

作成手順

※STEP2までは、前述したボード同士を繋げて作成する方法と同じです。

STEP.1
トグルの作成

クリックするとメニュー一覧が表示されるボタンを作ります。

ペンツール(P)で線をひき、リピートグリッドで等間隔に並べます。

STEP.2
メニューの作成

クリックしたら表示されるメニューの部分を作ります。

長方形ツールをボード全体に広げ、メニュー名を記入します。

こちらも記入したメニュー名をリピートグリッドで複製すると綺麗に並びます。

必ずメニューとトグルをグループ化しましょう。

STEP.3
ホバーステートの設定

トグルにカーソルがあたったときのホバーを設定します。

画面右からトグルをコンポーネントにし、ホバーステートを追加。

初期ステートからホバーステートを選び、ホバーしたときの状態にします。

今回はホバーしたときに線幅が広がるようにしました。

STEP.4
メニュー展開後のボード作成

ボードを複製してください。

複製したボードのうち、どちらかをトグルをクリックして展開する前の状態にします。

メニューをボード外に配置します。

メニュー展開後のボードを作成します。

トグルの箇所の角度を変え「×(バツ)」のようにします。

STEP.5
プロトタイプの設定

プロトタイプの画面からトグルを選択し、コンポーネント「ホバーステート」を選択。

アクションの種類「オーバーレイ」を選び、アニメーション「左にスライド」をクリック。

「スクロール時に位置を固定」をチェックするとスクロールした状態でも位置を保持したままメニューが展開されます。

注意とデメリット

オーバーレイはアニメーションを「ディゾルブ」「なし」の2択しか選択できません。

自動アニメーションほどの自由度の高いアニメーションは作れません。

トグルステートを使った作成

コンポーネントをクリックすることで状態が変化するトグルステートを使って作成します。

パッと見た感じは今まで紹介したものと変わりませんが、トグルステートを追加することでボード1枚で完結しています。

作成手順

STEP.1
メニューを展開するボタンの作成

クリックするとメニュー一覧が表示されるボタン(以下略:トグル)を作ります。

ペンツール(P)で線をひき、リピートグリッドで等間隔に並べます。

STEP.2
メニューの作成

クリックしたら表示されるメニューの部分を作ります。

長方形ツールをボード全体に広げ、メニュー名を記入します。

こちらも記入したメニュー名をリピートグリッドで複製すると綺麗に並びます。

必ずメニューとトグルをグループ化しましょう。

STEP.3
メニュー展開前

ボードを複製してください。

複製したボードのうち、どちらかをトグルをクリックして展開する前の状態にします。

メニューをボード外に配置します。(グループ化できていないとボード外のオブジェクトの扱いになってしまいます。)

お好みで画像のように長方形を湾曲させてみてください。長方形をダブルクリックするとレイヤーがパスになります。

ペンツールを使って、アンカーポイントを追加。追加したアンカーポイントをダブルクリックすると曲線になります。

STEP.4
メニュー展開

メニュー展開後のボードを作成します。

トグルの箇所の角度を変え「×(バツ)」のようにします。

STEP.5
プロトタイプの設定

プロトタイプの画面からボード同士を繋ぎます。

展開前のトグルをタップでメニュー展開後のボードに移動するようにします。

次にバツ印の展開後のトグルをタップしたときに展開前のボードに移動するように設定すれば完成です。

プレビューボタンから確認してみてください。お疲れさまでした。

この方法で作成するとスクロール位置を保持したまま、ボード1枚で作れます。

注意とデメリット
  • コンポーネントで管理しているのでホード上ではわかりにくい。

まとめ:ステートを使って応用してみる

ホバーステート、トグルステートを追加したコンポーネント。

今回は以下について紹介しました。

  • ステートとはWeb上のパーツにおける「状態」を指す。
  • コンポーネントにする(⌘K)」に設定し、画面右の「コンポーネント」から初期設定のステート横にある「+」をクリックすると「ホバーステート」または「トグルステート」を選択。
  • ステートは「ホバーステート」または「トグルステート」どちらも同時追加できる。

今回はハンバーガーメニューに例えましたが、

ホバー、トグルステートどちらも使ったコンポーネントを作成できるので試して見てください。

今回の記事が参考にしていただけたら幸いです。

最後まで見ていただきありがとうございます!是非記事の共有をよろしくお願いします。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA