グリッドレイアウトを⾼速化

本チュートリアル内で使用する主な機能

リピートグリッド、スタック

以下が大まかな流れです。

1. リピートグリッドを作成する
2. リピートグリッドの間隔を調整する
3. リピートグリッド内に画像とテキストを配置する
4. スタックを使⽤してレイアウトを調整する

リピートグリッドを作成する

リピートグリッドは、タイトルや画像、ボタンなどのオブジェクトを含む、同じレイアウトとスタイルの繰り返しを⾃動的に作成できる機能です。オブジェクトのサイズや位置、スタイルを変更すると、すべてのオブジェクトに変更が反映されます。

ダウンロードしたサンプルファイル「repeat_grid.xd」をダブルクリックし、Adobe XDで開きます。

ページ上に配置された記事のタイトル、グレーの⻑⽅形、ボタンなどのオブジェクトをすべて選択し、右側のパネルにある「リピードグリッド」をクリックするか、ショートカットキーの

「Command+R」（Mac）または「Ctrl+R」（Windows）を押します。

オブジェクトのグループがリピートグリッドに変換され、緑⾊の境界線で囲まれます。

境界線の右側にあるハンドルを右⽅向にドラッグすると、グリッドが⽔平⽅向に繰り返し複製されます。下部のハンドルを下⽅向にドラッグすると、グリッドが垂直⽅向に繰り返し複製されます。

リピートグリッドの間隔を調整する

リピートグリッド内のグリッドの間隔を調整するには、グリッド間のスペースにカーソルを置きます。カーソルが⼆重⽮印に変わったら、ドラッグして間隔を増減します。

ここでは垂直⽅向の間隔を「40」、⽔平⽅向の間隔も同じく「40」に設定します。

リピートグリッド内に画像とテキストを配置する

リピートグリッド内に画像を配置するには、配置する画像ファイルをすべて選択し、左上のグレーの⻑⽅形までドラッグします。⻑⽅形にブルーのオーバーレイが表⽰されたらドロップします。

左上から順番に、すべてのグリッドに画像が配置されます。画像はファイル名の順番で配置されます。

リピートグリッド内にテキストを配置するには、あらかじめテキスト⼊⼒された.txtファイルを左上のタイトル部分までドラッグします。タイトル部分にブルーのオーバーレイが表⽰されたらドロップします。

左上から順番に、すべてのタイトルテキストが配置されます。

ヒント

テキストファイルは、MacのTextEditやWindowsメモ帳（.txt 形式で保存）などで作成します。エンコード⽅式が UTF-  に設定されていることを確認してください。データの⾏を改⾏で区切ります。

スタックを使⽤してレイアウトを調整する

スタックを使⽤すると、グループ内のオブジェクト間に⼀定のスペースを定義できます。スタック内のオブジェクトのサイズや位置を変更した場合、オブジェクト間の定義済みスペースが⾃動的に保持されます。

左上のグリッド内のタイトル部分をcommandキー（Mac）またはcontrolキーを押しながらクリックして選択します。さらにshiftキーを押しながらその他のオブジェクトをすべて選択し、右クリックメニューから「グループ化」を選択します。

右側のパネルの「レスポンシブサイズ変更」内にある「スタック」をクリックして有効にします。

グリッド内のオブジェクトの1つをcommandキー（Mac）またはcontrolキーを押しながらクリックして選択します。ドラッグして他のオブジェクトと位置を⼊れ替えても、オブジェクト間のスペース（16pt）は保持されます。

また、スタックはリピートグリッドに適⽤されているため、1つのグリッド内の変更がすべてのグリッドにも反映されます。

これまでページ内に同じ要素を繰り返し作成するには、その要素を1つずつ複製し、内容をカスタマイズしなければなりませんでした。また、レイアウトなどの変更があると、1つずつ⼿作業で調整する必要がありました。Adobe XDのリピートグリッドおよびスタックを使⽤することで、そうした⼿間のかかる作業を⼤幅に効率化することができます。ぜひ試してみてください。