このレッスンでは、マルチカラムグリッドを設定して、その上にいくつかの少し凝った Web サイトのレイアウトを作成する手順を解説します。
Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプルが表示されます。
ページヘッダの配置
事前準備として、アードボードの左側に用意されている「Search」というテキストを含むグループを、page_index アートボードの右上に配置します。
画像の比率が異なるステートを作成
ペーストボード上にある card_item をコンポーネント化します。プロパティインスペクタの初期設定のステートの右側にある＋ボタンをクリックして、新規ステートを 2 つ追加します。「ステート2」は「1:1」に、「ステート3」は「3:2」に、それぞれ名前を変更します。
「1:1」のステートを選択し、画像の幅の値と同じ数値を高さに指定します。続けて「3:2」のステートを選択し、高さに「幅の値/3*2」を入力します。以上で、16:9、1:1、3:2 の 3 種類の画像比率のステートが用意できました。
カード UI の配置
card_itemを複製してインスタンスを作成し、左端のグリッドに沿うように配置します。
インスタンスを単独でグループ化し、スタックをオンにして、並び方を垂直方向に設定します。グループをダブルクリックしてインスタンスを選択し、3 回複製します。スタックの間隔に 24 を指定し、アートボードを適度に伸ばして全てのカードが見えるようにします。
次に、カードのグループをさらにグループ化し、スタックをオンにして、並び方を水平方向に設定します。グループをダブルクリックして内側のグループを選択し、3 回複製します。こちらも、スタックの間隔に 24 を指定します。
メイスンリーレイアウトの作成
card_item のインスタンスのステートを、1 つずつランダムに変更します。その際、横に並ぶカードのステートが同じ種類にならないようにすると、互い違いに積み重なったメイスンリーレイアウトらしさをより強調できます。
ページレイアウトの調整
最初にアートボードの右上にコピーしたグループを選択し、スタックをオンにします。続けて、カード UI のグループをカット & ペーストして、そのグループ内のタイトルの下に貼り付けます。
このようにスタックを有効にした状態で並べておくと、後からカードのサイズや数を変更したときに、調整が便利です。