このレッスンでは、Adobe XDを使って、実際に操作可能なドロワーメニューのプロトタイプを作成する手順を学びます。
Adobe XDを起動し、「ファイル」→「開く」メニューから、ダウンロードしたサンプルファイルを選択して「開く」をクリックします。すると、動画と同じサンプル画面が表示されます。
ハンバーガーメニューとメニュー画面を接続
プロトタイプモードに切り替えて、ハンバーガーメニューを選択します。矢印付きの接続ハンドルが表示されたら、ハンドルをドラッグし、メニュー画面のアートボード上でドロップします。これで、ハンバーガーメニューとメニュー画面が接続されます。
オーバーレイのインタラクションを指定
プロパティインスペクターから、トリガーを「タップ」、アクションの種類を「オーバーレイ」にします。
左側のアートボードには、緑色のアウトラインが表示されます。これが、オーバレイ表示される位置です。ドラッグして位置を変更することもできます。また、オーバーレイ表示されるアートボードの背景は、自動的に透明に変更されます。
アニメーションに「左にスライド」を選び、イージングは「イーズイン」、デュレーション は「0.2秒」にします。
デスクトッププレビューで動作確認
画面右上の「デスクトッププレビュー」ボタンを選択し、プレビューウィンドウを開きます。
ハンバーガーメニューを押すと、メニュー画面が右から左にスライド表示されることを確認できます。メニュー画面をクリックすると遷移前の画面に戻ります。
ハンバーガーメニューの位置を固定
ハンバーガーメニューを選択します。プロパティインスペクターの「スクロール時に位置を固定」をチェックします。
もう一度、デスクトッププレビューを実行します。画面をスクロールすると、ハンバーガーメニューの位置が変わらないことを確認できます。
「閉じるボタン」にインタラクションを追加
ドロワーメニューのアートボードを選択すると、遷移先が「ひとつ前のアートボード」になっています。これをDELキーで削除します。
次に、「閉じる」ボタンを選択し、青い矢印をクリックして、接続ハンドルを表示させます。この状態で、プロパティのアクションを、「ひとつ前のアートボード」に設定します。
デスクトッププレビューで動作を確認します。メニューを閉じる時は、メニュー画面全体ではなく、「閉じる」ボタンのみに反応します。