このレッスンでは、マルチカラムグリッドを設定して、その上にいくつかの少し凝った Web サイトのレイアウトを作成する手順を解説します。
Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプルが表示されます。
左サイドカラムの作成
まず、2 枚のアートボードの塗りの色を backgroun-base に変更します。次に、page_post アートボード上に長方形を描き、幅 240、高さ 810、X と Y を 0 に設定し、線のチェックを外します。
アートボードの左端からドラッグしてガイドを引き出し、幅を 24 に合わせます。もう一つ、一時的に長方形の幅から 24 をマイナスしてから、長方形の右端に合わせてガイドを引きます。ガイドを引き終わったら、長方形の幅を元に戻します。
メインコンテナを 10 分割するグリッドの作成
page_post アートボードを選択した状態で、グリッドのチェックをオンにします。列に 10 を、段間隔に 0 を指定します。
続けて、各辺に異なるマージンを設定するアイコンに切り替えて、右マージンに 0、左マージンに 240 を指定します。最後に、列の不透明度を 0 にします。
グリッドとガイドのコピー
グリッドを再利用するため、プロパティインスペクタのグリッド欄の「初期設定にする」をクリックします。また「表示」メニューから「ガイド」を選び、「ガイドをコピー」をクリックします。
左右のマージンが固定値になるグリッドの作成
page_index アートボードを選択した状態で、グリッド欄の「初期設定に戻す」をクリックします。また、「表示」メニューから「ガイド」を選び、「ガイドをペースト」をクリックします。さらに、サイドカラムの長方形を複製します。
グリッドの列を 12、段間隔を 24 に変更します。続けて、右マージンに 48 を、左マージンには48 をプラスして 288 にします。