Adobe XDをもっと使いこなすヒント！ 第26回 リピートグリッドを使って簡単レイアウト
Adobe XDをもっと使いこなすヒント！
この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、リピートグリッドを使ってレイアウトを作成する手順に関連する8つのツイートを取り上げます。
Tip 1. オブジェクト（のグループ）からリピートグリッドを作成する
#adobexd #protip Convert any object (or sets of objects) to a repeat grid, and drag out copies of the object either vertically or horizontally. @adobexd pic.twitter.com/9fFK02oWMs
— Elaine Chao (@elainecchao) December 11, 2018
リピートグリッドを作成するには、オブジェクト（またはオブジェクトのグループ）を選択し、プロパティインスペクタ内のリピートグリッドボタンをクリックします。するとオブジェクト周囲の線が緑色に変化して、右と下にハンドルが表示されます。
この状態では、ハンドルを縦方向や横方向にドラッグするとセルが展開され、オブジェクトのコピーをオリジナルの周囲に配置することができます。
Tip 2. オブジェクト間のパディングを調整する
#adobexd #protip Adjust the padding between objects by selecting the repeat grid object, hovering over a gap, and then dragging. @adobexd pic.twitter.com/TdFPGeDZmI
— Elaine Chao (@elainecchao) December 12, 2018
リピートグリッドを展開した時、各セルの周囲にはデフォルトで空白の領域がつくられます。このすきまの幅を調整したいときは、カーソルを空白領域の上に移動して、下の領域がピンク色に変わったらドラッグします。縦方向のパディングと横方向のパディングは、それぞれ個別に調整します。
パディングの値はマイナスにすることもできます。
#adobexd #protip Combine repeat grid, transparency, and negative padding for a retro gingham pattern. @adobexd pic.twitter.com/6KzdjwE0fc
— Elaine Chao (@elainecchao) July 14, 2016
Tip 3. リピートグリッド内のオブジェクトの大きさを調整する
#adobexd #protip Want to edit one of the objects inside a repeat grid? Either double click to enter the repeat grid element’s edit context, or Cmd+Click (Mac) / Ctrl+Click (Win) to direct select. Press Esc to pop out of edit context once you’re done. @adobexd pic.twitter.com/CAX55WCMfQ
— Elaine Chao (@elainecchao) December 13, 2018
すきまを調整するのではなく、オブジェクトの大きさを変えて全体のバランスを調整することもできます。
まず、グリッド内の要素をどれかダブルクリックします（もしくは Cmd+クリック (Mac) / Ctrl+クリック (Win) のようにキー操作と組み合わせる）。すると、要素を編集可能な状態になり、ドラッグして大きさを変更することができます。
編集が終わったら、他の場所をクリックするかEscキーを押下します。
Tip 4. オブジェクト内に別のオブジェクトを配置する
#adobexd #protip Forgot something in your repeat grid? Add it after the fact by pasting it in. Cut or copy your object, double click into the repeat grid’s edit context, and then paste to apply to all cells. @adobexd pic.twitter.com/ublQhFfRO3
— Elaine Chao (@elainecchao) December 14, 2018
リピートグリッドで配置したオブジェクトの中に、別のオブジェクトを追加したい場合は、追加したいオブジェクトをコピーしておいて、上のTipsの要領でリピートグリッドを編集モードにしてから、ペーストします。どれかひとつのセルのオブジェクトにペーストすると、すべてのセルのオブジェクトに反映されます。
Tip 5. レスポンシブリサイズと組み合わせて使う
#adobexd #protip Switching screen sizes is a cinch with a combination of repeat grid and responsive resize. Simply double click to enter the edit context, Cmd+A (Mac) or Ctrl+A (Win) to select all, and resize! @adobexd pic.twitter.com/5ZVA2kQrCl
— Elaine Chao (@elainecchao) January 8, 2019
異なる画面サイズに合わせてデザインを調整する必要がある場合は、リピートグリッドとレスポンシブリサイズの組み合わせが便利です。リピートグリッド内のセルをダブルクリックして編集モードに移行したら、Cmd+A (Mac) またはCtrl+A (Win) ですべてを選択してから、ドラッグしてリサイズします。プロパティインスペクタのレスポンシブリサイズがチェックされているか確認することを忘れずに。
#adobexd #protip Start with repeat grid, then ungroup it to quickly get started on a cascading card layout. @AdobeXD pic.twitter.com/od9gLqJCTP
— Elaine Chao (@elainecchao) September 11, 2018
横幅が狭いモバイル画面などで、縦方向の配置は要素ごと個別に調整したい場合には、リピートグリッドを選択してグループ解除すると、要素ごとに編集できるようになります。
Tip 6. シェイプを配置して模様を作る
#adobexd #protip Try playing with multiple shapes, multiple angles, multiple sizes for some repeat grid fun! #friday @adobexd pic.twitter.com/inD7COh5hw
— Elaine Chao (@elainecchao) January 20, 2017
リピートグリッドを使ってシェイプを配置すると、繰り返しパターンを簡単に作成できます。上のビデオのように、模様をつくりたいときにもリピートグリッドは便利です。
#adobexd #protip Love that negative spacing and repeat grid. Hate the selvage? Check out mask with shape! @adobexd pic.twitter.com/VyTxwdwn5n
— Elaine Chao (@elainecchao) January 19, 2017
リピートグリッドをマスクすることができるため、矩形以外の形が欲しい時でも利用できます。上のビデオは、円形のマスクを使った例です。
いかがでしたか？
これは便利そうだ！という使い方はあったでしょうか？
次回をお楽しみに！