Lesson

XDで縦横スクロールできるカレンダーをデザイン - 全4回

縦と横にドラッグできるインタラクションの設定(スクロールできるカレンダー 4/4)

このレッスンでは、縦や横にスクロールできる、カレンダーアプリ UI のつくり方を解説します。

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

カレンダーアプリの外観を作成

このレッスンのパート 1 ~ 3 で作成したスケジュール表、時間軸、日付軸を、アードボード calendar01 の上に移動します。その際、ヘッダー用のスペースを確保するため、Y座標 80px より上は空白になるように配置します。

次に、アセットのコンポーネント内にある navigation と system-bar を、アートボード上部の空白の領域に重ねて配置します。

そのまま、アートボードの高さを 1308px に変更します。以上で、カレンダーアプリの外観は完成です。

ヘッダーの位置を固定する

ワークスペース右上の「デスクトッププレビュー」ボタンをクリックし、プレビューウィンドウを開きます。すると、縦にスクロールしたときに、ヘッダーも一緒に移動することがわかります。

これを解消するために、アートボード上の navigation、system-bar、date__list を選択し、「スクロール時に位置を固定」をチェックします。再度デスクトッププレビューで確認すると、スクロール時に、日付軸から上の要素が固定されることがわかります。

横にドラッグした時の動きを作成

カレンダーを横にもドラッグできるようにします。まず、アートボード calendar01 を複製します。複製したアートボードの名前を calendar02 にします。

calendar02 の date__list 内にある日付のグループを選択し、Shiftキーを押しながら、左方向へ一週間分移動します。schedule__body も同じだけ左方向へ移動します。これがドラッグした後の見た目になります。

プロトタイプモードに切り替えて、calendar01 の日付のグループを選択します。青い矢印を calendar02 のアートボードまで引き伸ばし、その上で離してワイヤーを接続します。トリガーに「ドラッグ」を設定します。

次に、calendar02 の日付のグループを選択し、青い矢印を calendar01 のアートボードに接続します。トリガーに「ドラッグ」を設定します。

これで、日付軸を横にドラッグするインタラクションの設定は完了です。

スケジュール欄も横にドラックできるようにするために、 calendar01 と calendar02 の schedule__body にも同様の設定をします。

プレビューして動きを確認

最後に、デスクトッププレビューを使って、横にドラッグした時の挙動を確認します。

日付や、スケジュールの登録部分を左にドラッグすると、表記を一週間分切り替えられます。また、右にドラッグすると、元の表示に戻せます。

以上で、スクロールできるカレンダーアプリの UI デザインの完成です。