Lesson

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

スライド式ドロワーメニュー④ インタラクションを設定

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

adobe-xdtrail-lesson-navigation-drawer-4-prototype-overlay.zip (13 MB)

このレッスンでは、Adobe XDを使って、実際に操作可能なドロワーメニューのプロトタイプを作成する手順を学びます。

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

ハンバーガーメニューとメニュー画面を接続

プロトタイプモードに切り替えて、ハンバーガーメニューを選択します。矢印付きの接続ハンドルが表示されたら、ハンドルをドラッグし、メニュー画面のアートボード上でドロップします。これで、ハンバーガーメニューとメニュー画面が接続されます。

オーバーレイのインタラクションを指定

プロパティインスペクターから、トリガーを「タップ」、アクションの種類を「オーバーレイ」にします。

左側のアートボードには、緑色のアウトラインが表示されます。これが、オーバレイ表示される位置です。ドラッグして位置を変更することもできます。また、オーバーレイ表示されるアートボードの背景は、自動的に透明に変更されます。

アニメーションに「左にスライド」を選び、イージングは「イーズイン」、デュレーション は「0.2秒」にします。

デスクトッププレビューで動作確認

画面右上の「デスクトッププレビュー」ボタンを選択し、プレビューウィンドウを開きます。

ハンバーガーメニューを押すと、メニュー画面が右から左にスライド表示されることを確認できます。メニュー画面をクリックすると遷移前の画面に戻ります。

ハンバーガーメニューの位置を固定

ハンバーガーメニューを選択します。プロパティインスペクターの「スクロール時に位置を固定」をチェックします。

もう一度、デスクトッププレビューを実行します。画面をスクロールすると、ハンバーガーメニューの位置が変わらないことを確認できます。

「閉じるボタン」にインタラクションを追加

ドロワーメニューのアートボードを選択すると、遷移先が「ひとつ前のアートボード」になっています。これをDELキーで削除します。

次に、「閉じる」ボタンを選択し、青い矢印をクリックして、接続ハンドルを表示させます。この状態で、プロパティのアクションを、「ひとつ前のアートボード」に設定します。

デスクトッププレビューで動作を確認します。メニューを閉じる時は、メニュー画面全体ではなく、「閉じる」ボタンのみに反応します。