こんにちは。UI/UXデザインの最前線へようこそ。
デザインの現場で最も「時間を奪う」作業は何か知っていますか？それは、ピクセル単位の微調整でも複雑なインタラクション設計でもありません。「似たような要素を、何度も何度も繰り返して作る作業」です。
例えば、SNSのタイムラインやECサイトの商品一覧。これらはデザインの構造としては「最小単位（コンポーネント）」の繰り返しに過ぎません。これを一つずつ手作業でコピペしているようでは、一流のデザイナーとは言えません。
今回は、Adobe XDが誇る最強の時短兵器「リピートグリッド」を使いこなし、あなたの制作スピードを10倍に引き上げる極意を伝授します。
—
1. リピートグリッドとは？：デザインの「オートメーション」
リピートグリッドは、単なる「複製ツール」ではありません。「デザインの制約を維持したまま、データ構造を複製する」ための仕組みです。
一度作ったレイアウトを「グリッド」として定義すると、あとはドラッグするだけで無限に拡張でき、さらにテキストや画像を「流し込む」だけで、全てのカードが一瞬で更新されます。これを知っているか否かで、プロジェクトの納期は劇的に変わります。
—
2. セットアップ：最強のHelloWorldを作る
まずは、最も効率的なカードUIの「雛形」を作ってみましょう。
1. フレームの作成: まずは「アートボード」を作成し、その中に長方形ツールでカードのベースを描きます。
2. 要素の配置: 画像プレースホルダー、タイトル（テキスト）、説明文（テキスト）を配置します。
3. グループ化: これらをすべて選択し、`Ctrl + G` (Macは `Cmd + G`) でグループ化します。
- 重要ポイント: ここで綺麗にレイアウトを整えておくことが、後の「一括流し込み」の精度を決めます。
—
3. リピートグリッドの魔法：一瞬で大量作成
ここからが本題です。先ほど作ったグループを選択し、右パネルにある「リピートグリッド」ボタンをクリックしてください（ショートカット：`Ctrl + R` / `Cmd + R`）。
- 魔法のハンドル: グループの周囲に緑色のハンドルが現れます。これをドラッグしてみてください。あら不思議、一瞬で同じレイアウトがコピーされます。
- マージンの調整: 複製された要素同士の間にマウスを乗せると、ピンク色のバーが表示されます。これをドラッグするだけで、全ての要素の間隔を均一に調整できます。
—
4. 現場の裏技：画像とテキストの「一括流し込み」
ここが最も震えるポイントです。100個のカードを作ったとして、100個の画像を一個ずつドラッグ＆ドロップしていませんか？そんなことをしていては日が暮れてしまいます。
テキストの一括流し込み
1. テキストファイル（`.txt`）を用意し、1行ずつ流し込みたい言葉を記入して保存します。
2. そのファイルを、XD上の「テキスト要素」にドラッグ＆ドロップしてください。
3. 全カードのテキストが、自動的にファイルの内容に書き換わります。
画像の一括流し込み
1. フォルダ内に画像ファイルを複数用意します。
2. それらをすべて選択し、XD上の「画像プレースホルダー（四角形など）」にドラッグ＆ドロップします。
3. 一瞬で全てのカードに異なる画像が割り当てられます。
これぞ、デザインにおける「データの流し込み」です。エンジニアがJSONをAPIから受け取ってフロントにレンダリングするのと全く同じ思想を、XD上で実現しているのです。
—
5. プロの視点：なぜこれを使うのか？
初心者のうちは「手で動かした方が早い」と感じるかもしれません。しかし、リピートグリッドには「変更の追従性」という圧倒的なメリットがあります。
- 1箇所の修正が全体に波及する: リピートグリッド内の1つの要素（例えばタイトルのフォントサイズ）を変更すれば、自動的に他のすべてのカードに反映されます。
- デザインシステムの基礎: これは後にコンポーネント化し、デザインシステムとして運用するための「前段階」になります。
まとめ
リピートグリッドは、単に作業を楽にするためのツールではありません。「デザインの構造を論理的に整理する」ための訓練ツールです。
「このUIの最小単位は何か？」「データはどのように流れるべきか？」を意識してリピートグリッドを触れば、あなたの作るインターフェースは驚くほど洗練されたものになるはずです。
さあ、退屈なコピペ作業から自分を解放して、もっとクリエイティブな「本質的なUX設計」に時間を使っていきましょう。応援しています！