Lesson

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

縦方向にタイムラインを作成(スクロールできるカレンダー 2/4)

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

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

時間軸の構成要素の作成

ペーストボード上に長方形を描きます。線のチェックを外して塗りだけにして、幅に 61px、高さに 46px を指定します。

もう一つ長方形を描きます。こちらは、幅に 12px、高さに 1px を指定し、線のチェックを外し、塗りの色に薄いグレーを適用します。そして、最初に作成した長方形の上に配置して、右揃え縦中央を適用します。

続けてテキストエリアを作成し、「1:00」と入力します。フォントに DIN 2014 、font-size に 14px、文字列の配置に右揃えを指定します。このテキストを、最初に作成した白い長方形の中央に配置します。

3 つのパーツを全て選択してグループ化します。これで、時間軸を構築する部品ができました。

時間軸の作成

作成したグループをリピートグリッドに変換します。下方向に引き伸ばしてから、グリッドの間隔を 1px に調整し、リピートグリッドの高さを 1127px にします。

このレッスンのパート 1 で作成したスケジュール表のコンポーネントを、リピートグリッドの右側に移動します。時間軸に引かれているボーダーと、スケジュールのセルのボーダーが揃うことを確認します。

時間軸の背景の作成

最後に、時間軸の背景を用意します。

まず長方形を作成します。長方形の幅は時間軸に揃え、高さはスケジュール表に揃えます。線のチェックを外して塗りだけにして、時間軸の背面に移動します。

続けて、作成した長方形を複製して最前面に配置し、塗りの色に薄いグレーを、幅に 1px を指定します。

時間軸をコンポーネントに変換

2 つの長方形とリピートグリッドを選択して右揃えに整列し、コンポーネントに変換します。コンポーネント名は time__list とします。 

時間軸内の時間を表すテキストを「1:00」から「24:00」まで書き換えたら完成です。