Lesson

モバイル画面のスライド式ドロワーメニュー - 全4回

スライド式ドロワーメニュー③ メニュー画面の作成

この動画のサンプルファイル

adobe-xdtrail-lesson-navigation-drawer-3-menu-panel.zip (13 MB)

このレッスンでは、Adobe XDを使って、ドロワーメニューのデザインをデザインする手順を学びます。

Adobe XDを起動し、「ファイル」→「開く」メニューから、ダウンロードしたサンプルファイルを選択して「開く」をクリックします。すると、動画と同じサンプル画面が表示されます。

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

長方形ツールを選び、Shiftキーを押しながらドラッグすると、正方形ができます。アセットパネルからカラーを適用し、プロパティインスペクターの「線」のチェックを外します。

左側の上下の角だけ丸くします。目的の角のみ丸くしたい場合は、Macではオプションキー、Windowsではaltキーを押しながらドラッグします。

アセットパネルから、ハンバーガーメニューのアイコンをドラッグし、位置を整えます。要素を二つとも選び、グループ化したら、ハンバーガーメニューの完成です。

新規アートボードを作成

ツールバーからアートボードツールを選択します。プロパティインスペクターから左側のページと同じサイズのアートボードを選択すると、アートボードが追加されます。アートボード名を区別しやすい名前に変更します。

ドロワーメニューの背景を作成

右からスライドするメニューにしたいので、縦幅をアートボードいっぱいに、左に余白がでるサイズの長方形をつくります。

ページデザインの背景と同じ色にするため、アセットのカラーを塗りに適用します。プロパティインスペクターから「線」のチェックを外し、シャドウにチェックを入れ、色や不透明度、シャドウの位置を調整します。

メニューアイテムを作成

「閉じるボタン」のコンポーネントをアセットからドラッグし、配置します。

次に、メニューの項目をつくります。アセットからメニュー用アイコンのコンポーネントをドラッグし、隣にテキストツールでメニュー名を入力したら、アセットから文字スタイルを適用します。

位置を調整したらリピートグリッドに変換し、下にハンドルをドラッグして要素を複製します。各要素間のマージンは、ドラッグで調整します。改行で区切ったメニュー名一覧のファイルを、テキストエリアにドラッグしてメニュー名を一度に更新します。

プロパティインスペクターの「グリッドをグループ解除」のボタンを選択します。グリッド内のオブジェクトは個々に扱えるようになります。

それぞれのメニューアイコンのコンポーネントを、アセットパネルからドラッグします。画面上のコンポーネントに、別のコンポーネントをアセットパネルからドラッグすると、内容を差し替えることができます。

ボタンを配置

最後に、ボタンを配置します。前回制作したボタンをコピーし、ドロワーメニューのアートボードにペーストします。横幅のサイズを整えると、ラベルを中央に揃えたまま縮めることができます。これは、ボタンをグループ化した際、「レスポンシブサイズ変更」が自動で設定されているためです。

テキスト部分を選択し、中央揃えに変更してからラベルを打ち替えると、ボタンのレイアウトは崩れません。