このレッスンでは、Adobe XDを使って、ドロワーメニューのデザインをデザインする手順を学びます。
Adobe XDを起動し、「ファイル」→「開く」メニューから、ダウンロードしたサンプルファイルを選択して「開く」をクリックします。すると、動画と同じサンプル画面が表示されます。
ハンバーガーメニューを作成
長方形ツールを選び、Shiftキーを押しながらドラッグすると、正方形ができます。アセットパネルからカラーを適用し、プロパティインスペクターの「線」のチェックを外します。
左側の上下の角だけ丸くします。目的の角のみ丸くしたい場合は、Macではオプションキー、Windowsではaltキーを押しながらドラッグします。
アセットパネルから、ハンバーガーメニューのアイコンをドラッグし、位置を整えます。要素を二つとも選び、グループ化したら、ハンバーガーメニューの完成です。
新規アートボードを作成
ツールバーからアートボードツールを選択します。プロパティインスペクターから左側のページと同じサイズのアートボードを選択すると、アートボードが追加されます。アートボード名を区別しやすい名前に変更します。
ドロワーメニューの背景を作成
右からスライドするメニューにしたいので、縦幅をアートボードいっぱいに、左に余白がでるサイズの長方形をつくります。
ページデザインの背景と同じ色にするため、アセットのカラーを塗りに適用します。プロパティインスペクターから「線」のチェックを外し、シャドウにチェックを入れ、色や不透明度、シャドウの位置を調整します。
メニューアイテムを作成
「閉じるボタン」のコンポーネントをアセットからドラッグし、配置します。
次に、メニューの項目をつくります。アセットからメニュー用アイコンのコンポーネントをドラッグし、隣にテキストツールでメニュー名を入力したら、アセットから文字スタイルを適用します。
位置を調整したらリピートグリッドに変換し、下にハンドルをドラッグして要素を複製します。各要素間のマージンは、ドラッグで調整します。改行で区切ったメニュー名一覧のファイルを、テキストエリアにドラッグしてメニュー名を一度に更新します。
プロパティインスペクターの「グリッドをグループ解除」のボタンを選択します。グリッド内のオブジェクトは個々に扱えるようになります。
それぞれのメニューアイコンのコンポーネントを、アセットパネルからドラッグします。画面上のコンポーネントに、別のコンポーネントをアセットパネルからドラッグすると、内容を差し替えることができます。
ボタンを配置
最後に、ボタンを配置します。前回制作したボタンをコピーし、ドロワーメニューのアートボードにペーストします。横幅のサイズを整えると、ラベルを中央に揃えたまま縮めることができます。これは、ボタンをグループ化した際、「レスポンシブサイズ変更」が自動で設定されているためです。
テキスト部分を選択し、中央揃えに変更してからラベルを打ち替えると、ボタンのレイアウトは崩れません。