この記事ではAdobe XDでWEBサイトで良く使われているグローバルナビゲーションのUIデザインの作成の仕方を紹介します。
またより理解しやすくするために、今回紹介するサンプルのXDデータも配布しています。
実際のデータを確認して実際にいじってみるのが一番理解できるかと思います。
早速紹介していきます。
XDで良くあるグロナビを表現
①まずは下記の様なデザインをとりあえず作成して下さい。（感覚で大丈夫です。下書きの様なイメージです。）
②次に「Menu1」の上にホバー後に表示される項目が入る箱を重ねます。ここに「Menu1-1」〜「Menu1-6」などの下階層のメニューを入れていきます。
③その流れでホバー後のイメージも作成していきます。
今回はホバーすると該当部分の背景色が変更され下に下階層の小カテゴリーが表示される良くあるグロナビをイメージしています。
これを全てのMenuに施します。（Menu1だけ先に作って後から複製する方法でも大丈夫です。）
④「Menu1」とその下階層メニューの「Menu1-1」〜「Menu1-6」のグループを全てコンポーネントグループにまとめます。
すると右側にコンポーネントの設定欄があるので、そこの＋マークを押して新規のステートを追加します。
コンポーネントでグループ化した要素は、ステート事にそれぞれの表示をしてくれます。
初期ステートから新規ステートへ移り変わる際にアニメーションの設定をする事でリアルタイムで動作するデザインができる様になります。
⑤初期ステートの状態では白背景に戻して、小カテゴリーは透明にします。（消さない様に！！）
そして透明になった小カテゴリーの箱は最小サイズまで小さくします。
一方、新規ステートではグレー背景にして小カテゴリーが表示されてる状態にします。（④の状態）
初期ステートと新規ステートを切り替えてみて下記の様に表示が変わっていればOKです。
⑥最後にプロトタイプモードに切り替えてアクションの設定をして完成です。
アクション設定はなんでもいいがトリガーは必ず「ホバー」です。
良くあるグロナビXDファイル（無料サンプル配布）
以下のダウンロードボタンは、今回紹介した「良くあるグロナビ」の簡易UIデザインが入ったXDファイルです。
今回説明した横タイプと縦タイプが入っています。
実際のデータを触ってみるとより理解出来ると思います。
以上が「XDで良くあるグロナビを表現（無料サンプル配布）」でした。
