本記事ではAdobe XDを使って、ハンバーガーメニューを実装する方法を解説していきます。
XDで実際のWebサイトに近い見た目を作ることができれば制作もスムーズに進むのでぜひ実践していきましょう。
目次
XDでハンバーガーメニューを実装する手順
- ハンバーガーアイコンを作る
- オープン時のメニューを作る
- ステートを設定する
- アニメーションを設定する
上記の手順で進めていきます。ではやっていこー！
手順1：ハンバーガーアイコンを作る
まずはハンバーガーアイコンを作っていきます。
完成イメージはこんな感じ。
アイコンサイトから取ってきた素材があるなら、この手順は無視してください。
- 線ツールで、横幅30px・線の太さ3を作る
- 作った線を2本複製
- 10pxほど間隔をあけて、配置。全て選択しグループ化しておく
アイコンを作ったらグループ化し、コンポーネントにしておきます。（次の手順で必要なので忘れずに！）
手順2：メニューを作る
完成イメージはこんな感じ。
メニューは適宜作成してください。
最後にメニューもグループ化しておきましょう。
手順3：ステートの設定
ここからが本記事の本題。ハンバーガーアイコンをクリックしたらメニューが開くようにする設定です。
1つのコンポーネントに対して、複数の状態をもたせることができる機能です。
では早速やっていきましょう。
ステートの新規作成
まずは新規でステートを作成します。ハンバーガーアイコンを選択すると右サイドバーにコンポーネントというメニューがあるので右の＋ボタンを押してステートを作成できます。
ステートを編集状態にし、メニューを追加
openステートを選択しておいて、編集状態にします（ハンバーガーボタンをダブルクリック）
この状態でさきほどつくったメニューをコピペして貼り付けましょう。これでメニューも含めたコンポーネントになりました。
あとはハンバーガーアイコンをXボタンになるように調整します。手順は下記の通り
- 真ん中の線を削除
- 上の線を−45℃、下の線を45℃変形させ、中央寄せにする
ためしに初期状態のステートとopenステートを切り替えてみたら下記のようになります。
こうなっていればOK！
手順4：プロトタイプの設定
ここまでできたらあとはプロトタイプの設定です。まずは左上のプロトタイプをクリックして移動します。
ハンバーガーアイコンをクリックすると青い矢印が出てくるのでクリック。そうするとクリック時の飛び先を選択できます。
飛び先は、さっき作ったopenステートを選択。これで押したときにメニューが開くようになります。
次にメニューを閉じる処理です。
openステートを選択状態にし、Xアイコンをクリックして飛び先を設定します。飛び先は「初期設定のステート」。
これで完成です。
実際に動かしてみるとこんな感じです。
というわけでこんな感じのハンバーガーメニューになります。
【まとめ】ハンバーガーメニューをXDで実装してよりリアルなデザインを
というわけで記事は以上です。
アニメーション処理を変更したり、メニューの位置を変更すればスライド式のメニューオープンも実装できます。それについてはまた別の記事で解説します。
参考になったら嬉しいです〜
【2分で実践】XDで画面下固定フッターを作成する方法
XDで固定ヘッダーを作成する方法【応用方法もセットで解説】
