アドビXDを使用してのハンバーガーメニュー実装法を解説します。
XDでデザイン制作をすると実際のwebページに近い見た目を確認しながら作業や打ち合わせができるのでスムーズな進行が行えます。
今回はエステートを使ったハンバーメニューの実装です。
それではやっていきましょう。
目次
- 1.ハンバーガーメニューの実装手順
手順1：ハンバーガーアイコン作成
手順2：メニュー表作成
手順3：ステートの設定
手順4：プ：プロトタイプの設定
動かしてみる - 2.まとめ
■ハンバーガーメニューの実装手順
手順1：ハンバーガーアイコン作成
1.XDの線ツールもしくはペンツールを選択し
幅30px、サイズ（太さ）2に設定し線を作る
2.1で作った線を2本複製する。
3.各線の間隔を10pxづつあけて並べる。
4.作ったオブジェクトはグループ化する。
5.グループ化したアイコンを、XD左のコンポーネントに追加する。
手順2：メニュー表の作成
1.アートボードを新しく作りメニュー表を作る
メニュー表は適宜作成する。
2.作ったメニュー表はグループ化する。
手順3：ステートの設定
ステートとは1つのコンポーネントに、複数状態を作ることができる機能
1.ステートの新規作成
手順1で作ったハンバーガーアイコンを選択すると、XD右サイドバーのコンポーネント（メイン）の初期設定エステート横の「＋」ボタンをクリック。「新規エステート」を選択し名前を変更。今回はMenuとします。
2.ステートの編集
1で作ったMenuステートを選択、ハンバーガーメニューをダブルクリックしてステートの編集状態にする。
編集状態で手順2で作ったメニュー表をコピー&ペーストします。これでMenuステートはメニュー表も含むコンポーネントになりました。
3.ハンバーガーアイコンの変形
コンポーネント化したハンバーガーアイコンを「☓」に変形させます。
アイコンの「☓」への変更方法
1.上段の線を45度回転
2.下段の線を-45度回転
3.中段の線の幅を1pxに変更する
全ての線を選択して中央寄せにする
これでステートの設定は設定は完了しましたので
「初期設定のステート」と「Menu」を交互にクリックして切り替えて確認をする
手順4：プロトライプの設定
1.XDの左上のプロトタイプをクリックします。
2.メニュー表を開く処理
ハンバーガーアイコン（コンポーネント）を選択した状態で「初期設定のステート」をクリック。
ハンバーガーアイコンから出ているインタラクション（青い矢印線）が出ている状態でプロパティインスペクタバーの「移動先」から先程作った「MEnu」ステートを選択。
3.メニューを閉じる処理
ハンバーガーアイコン（コンポーネント）を選択した状態で「Menu」ステートをクリック。
開く処理と同様にインタラクションを表紙している状態でプロパティインスペクタバーの「移動先」から「初期設定のエステート」を選択。
作業はこれで完了です。
XDの右上にあるプレビューボタンをしプレビュー画面のハンバーガーアイコンをクリックして
インタラクションを確認します。
クリックする度に切り替わるようにできました。
まとめ
ステート設定を利用するだけでハンバーガーメニューを実装することができました。
上記ではプロパディインスペクションで移動先だけを設定しましたが、
アニメーションの設定変更をしてスライド式のメニューオープンにしたり、移動先のステートの位置やサイズ、透明度などを変更してよりおしゃれな表現も実装できます。XDを知れば知るほど面白い表現のデザインを作ることができます。
それについてもまた別の記事で解説をしたいとおもいます。
コメント