Lesson

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

スケジュール表とデータ用パーツの作成(スクロールできるカレンダー 1/4)

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

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

スケジュール表の作成

まず、スケジュールを配置する表を作成します。

ペーストボード上に長方形を描き、幅44px、高さ46pxに変更し、線のチェックを外して塗りだけにします。次に、長方形をリピートグリッドに変換し、右と下に適度に引き伸ばしてから、グリッドの縦方向と横方向の間隔がそれぞれ 1px になるように調整します。その後、リピートグリッド全体の幅に 629px、高さに 1174px を指定します。

これでスケジュールを配置する場所ができました。

スケジュール表の背景の作成

次は、表の背景を作成します。

リピートグリッドを覆い隠すように長方形を描きます。線のチェックを外して、塗りの色を薄いグレーにします。そして、長方形をリピートグリッドの背面に移動して、長方形とリピートグリッドをグループ化します。

作成したグループのパディングを有効にして、上下左右の値を 0 にすると、背景の長方形が前面のオブジェクトと同じ大きさになります。これで、セル間に薄いグレーの線が引かれたスケジュール表ができました。

データ用パーツの作成

ここからはスケジュール表に配置するデータ用のパーツを作成します。

まずアートボード上に任意の大きさの長方形を描き、2px の角丸を設定します。線のチェックを外し、塗りの色に水色を適用します。

続けてテキストを作成し、「MTG」と入力します。フォントに源ノ角ゴシック、font-size に 10px、種類に固定サイズテキスト、カラーに白を指定します。

テキストを長方形の上に移動して、テキストと長方形をグループ化します。グループのパディングを有効にして、上下左右に 2,4,2,4 を指定し、グループの幅に 40px、高さに 48px を指定します。

最後に、グループをコンポーネント化します。コンポーネント名は schedule__data とします。

これでスケジュールデータを書き込むパーツができました。

スケジュールデータの配置

スケジュールデータ用のパーツは、固定サイズテキストとパディングを組み合せて使用したことで、任意の高さに変更できます。インスタンスを複数作成して、スケジュール欄の上に自由に配置します。テキストも好みに応じて書き換えます。

最後に、今回作成した全てのオブジェクトを選択してコンポーネント化します。コンポーネント名は schedule__body とします。