このレッスンでは、マルチカラムグリッドを設定して、その上にいくつかの少し凝った Web サイトのレイアウトを作成する手順を解説します。
Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプルが表示されます。
事前準備と確認
ペーストボードに用意されている page_post グループを、page_post アートボードの右上に揃えて配置します。
変更を想定して構造化されていないことを確認します。例えば、テキストエリアの文字を増量すると、下のセクションに重なってしまうため、位置の調整が必要な状態であることがわかります。
まず、page_post グループを選択し、スタックをオンにします。すると、3 つのグループが自動的に作成されます。
最上段のグループの構造化
最上段のグループを編集状態にします。2 つのテキストエリアと背景の白い長方形をグループ化し、パディングをオンにします。これで文章の増量に応じて背景が縦に伸縮するようになります。
次に、本文のテキストエリアのレスポンシブサイズ変更を「手動」に切り替え、「幅を固定」をオフにして、「左を固定」をオンにします。これで、表示幅に応じて、本文の幅だけが変化するようになります。
中段のグループの構造化
中段のグループを編集状態にします。タイトル、本文、リピートグリッドをグループ化し、スタックをオンにします。また、英語の装飾タイトルと画像をグループ化します。最初のグループが前面にあることを確認してから、中段のグループを選択してパディングをオンにします。
この状態で文章量を増減すると、右側の画像が伸縮しません。そこで、画像のレスポンシブサイズ変更を「手動」に切り替え、「高さを固定」をオフにし、「上を固定」をオンにします。これで、文章量に応じて画像も伸縮します。
最下段のグループの構造化
最下段のグループを編集状態にします。タイトルと本文をグループ化し、スタックをオンにします。次に、英語の装飾タイトルと 2 枚の画像をグループ化します。最初のグループが前面にあることを確認してから、最下段のグループを選択してパディングをオンにします。
この状態で文章量を増減すると、左側の画像が伸縮しません。そこで、画像のレスポンシブサイズ変更を「手動」に切り替え、「高さを固定」をオフにし、「下を固定」をオンにします。これで、文章量に応じて画像が伸縮します。