【Adobe XD】リピートグリッド機能を分かりやすく解説【初学者向け】

コーディング

こんにちはTERUです。
フリーランスでホームページやECサイト制作を仕事にしています。

読者の悩み

  • Adobe XDのリピートグリッド機能について知りたい

リピートグリッド機能は、デザインレイアウトを素早く複製&配置する機能です。
使いこなせるとデザイン作業を効率化することができます。

本記事では、リピートグリッドの特徴や使い方から、WEB制作をする上でのオススメの利用方法まで具体的に説明します。

この記事を読んで分かること

  • Adobe XDのリピートグリッド機能の特徴と使い方について理解できる

目次

本記事の信頼性

  • フリーランスとしてWordPress案件を中心としたWeb制作をメインに仕事をしている
  • Web制作会社にてディレクターの経験もあり
  • Web制作のフリーランスチーム(GrabAir)でも活動中

Adobe XDをまだ持っていいないという方はまず自分のPCにインストールしてください。

illustratorやPhotoshopも使われる方は、コンプリートプランがオススメです。
とりあえずAdobe XDだけ使えればいいという方は赤枠の単体プランで十分です。
adobeプラン

スポンサードサーチ

リピートグリッドとは?【Adobe XD】

リピートグリッドとは?【Adobe XD】
結論、同じ構成のオブジェクトグループ(デザインレイアウト)を素早く複製して配置する機能です。

ブログ一覧のカード型レイアウトや、グローバルナビのメニュー箇所などで使います!

リピートグリッドには、下記のような特徴があります。

  • 上下左右にドラッグするだけで簡単にデザインレイアウトの複製を作成できる。
  • パーツ間の幅やテキスト・画像の変更も一括で行うことができる。
  • レイヤー管理を簡素化できる。

リピートグリッドの操作イメージ動画

リピートグリッドの操作イメージ動画

スポンサードサーチ

リピートグリッドの作成方法【Adobe XD】

リピートグリッドの作成方法【Adobe XD】
Adobe XDでリピートグリッドの作成方法は下記の2つあります。

  • スタイルパネル上から作成する方法
  • ショートカットキーで作成する方法
どちらの方法も簡単です!

スタイルパネル上から作成する方法

手順①:アートボード上でリピートグリッドしたいオブジェクトを選択します。
スタイルパネル上から作成する方法
※今回は、よくリピートグリッドに利用するカード型デザインで行います。

手順②:画面右にあるスタイルパネルから「リピートグリッド」を選択します。
スタイルパネル上から作成する方法2

手順③:オブジェクトを選択している枠線が緑色になり、右側と下側にドラッグするためのハンドルが表示されればリピートグリッドの完了です。
スタイルパネル上から作成する方法3

解除する場合

オブジェクトを選択しているで、スタイルパネルから「グリッドをグループ解除」を選択すれば解除できます。
解除する場合

ショートカットキーで作成する方法

手順①:アートボード上でリピートグリッドしたいオブジェクトを選択します。
ショートカットキーで作成する方法

手順②:下記のショートカットキーを入力します。

  • Macの場合:command + R
  • Windowsの場合:Ctrl + R

手順③:オブジェクトを選択している枠線が緑色になり、右側と下側にドラッグするためのハンドルが表示されればリピートグリッドの完了です。
ショートカットキーで作成する方法2

解除する場合

オブジェクトを選択しているで、下記のショートカットキーを入力します。

  • Macの場合:Shift + command + G
  • Windowsの場合:Shift + Ctrl + G

以上がAdobe XDでのリピートグリッド作成方法になります。

スポンサードサーチ

リピートグリッドの使い方【Adobe XD】

リピートグリッドの使い方【Adobe XD】
リピートグリッドの使い方について下記の2つを説明します。

  • リピートグリットで配置する方法
  • リピートグリットの編集する方法

リピートグリッドで配置する方法

リピートグリッドを配置するには、縦方向と横方向の2パターンがあります。

縦方向にリピートする場合

手順①:アートボード上でリピートグリッドを設定したオブジェクトを選択し、下側にあるハンドルをドラッグします。
縦方向にリピートする場合

手順②:下に向かってオブジェクトが複製されます。
縦方向にリピートする場合2

横方向にリピートする場合

手順①:アートボード上でリピートグリッドを設定したオブジェクトを選択し、右側にあるハンドルをドラッグします。
横方向にリピートする場合

手順②:右に向かってオブジェクトが複製されます。
横方向にリピートする場合2

リピートグリッドの編集する方法

リピートグリッドの編集は、下記の2パターンがあります。

  • 要素間の余白を調整
  • 画像の変更
  • テキストの変更

要素間の余白を調整

複製したオブジェクトの間隔を一括で調整することができます。

手順①:リピートグリッドの間隔を調整したい箇所にカーソルを合わせます。
要素間の余白を調整

手順②:カーソルを合わせた箇所でドラッグして間隔を調整します。
要素間の余白を調整2

ここでの変更は、全ての間隔に反映されます!

画像の変更

画像の変更は、オブジェクト上にドラッグするだけで可能です。
ここでは、「同じ画像に一括で変更する場合」と「別々の画像に一括で変更する場合」を説明します。

同じ画像に一括で変更する場合

手順①:対象の画像(1枚)をリピートグリッドの変更したい画像箇所にドラッグします。
同じ画像に一括で変更する場合

手順②:画像箇所が一括で同じ画像に変更されます。
同じ画像に一括で変更する場合2

別々の画像に一括で変更する場合

手順①:複数画像をリピートグリッドの変更したい画像箇所にドラッグします。
別々の画像に一括で変更する場合

手順②:画像箇所が一括で別々の画像に変更されます。
別々の画像に一括で変更する場合2

流し込まれる画像の順番はファイル名(昇順)になります。ここではsample01.jpg→sample02.jpg→sample03.jpg

テキストの変更

個別にテキストを変更する場合

手順①:変更したい箇所をダブルクリックで選択状態にします。
個別にテキストを変更する場合
リピートグリッドの場合、何度かダブルクリックすると、対象の要素に近づいていきます。

手順②:テキストを変更して完了です。
個別にテキストを変更する場合2

一括でテキストを変更する場合

手順①:変更したいテキストを改行で区切ったtxtファイルを準備します。
一括でテキストを変更する場合

手順②:txtファイルを変更したい箇所にドラッグ&ドロップします。
一括でテキストを変更する場合2

手順③:一括でテキストが変更されます。
一括でテキストを変更する場合3

スポンサードサーチ

リピートグリッドのオススメ利用方法【WEB制作向け】

リピートグリッドのオススメ利用方法【WEB制作向け】
WEB制作向けに、リピートグリッドのオススメ利用方法を2つご紹介します。

  • リピートグリッド内で個別変更する方法(コンポーネント活用)
  • リピートグリッド内で入れ替えする方法(スタック活用)

リピートグリッド内で個別変更する方法(コンポーネント活用)

リピートグリット内で特定の箇所だけ色やアイコンを変えたい場合があります。
普通に操作した場合、リピートグリット内の全てのオブジェクトに適用されてしまいます。
コンポーネント活用
コンポーネント活用2
個別変更するためには、リピートグリッドの中身をコンポーネント化します。

コンポーネントに関しては、下記の記事で詳しく説明しています。

 

手順①:リピートグリッド対象のオブジェクトを1つ選択した状態で、右クリックー「コンポーネントにする」を選択します。
コンポーネント活用3

手順②:リピートグリッドの中身が全てインスタンスに変更されます。

メインコンポーネントではなく全てインスタンスに変わります。

コンポーネント活用4
※左上に、白に塗り潰した緑枠の◆が表示されます。

手順③:これで色や形の変更など、インスタンス毎に個別で変更できるようになります。
※ここでは、カテゴリー表示の色とカード枠の丸みを変更
コンポーネント活用5

注意点

コンポーネント化すると画像やテキストの一括編集はできなくなります。

リピートグリッド内で入れ替えする方法(スタック活用)

スタック機能を活用することで、リピートグリッドを使って複製したレイアウトを簡単に入れ替えたりすることができます。

手順①:「グリッドをグループ解除」を選択し、リピートグリッドを一度解除します。
スタック活用

手順②:対象のオブジェクトを全て選択し、右クリックー「グループ化」を選択します。
スタック活用2

手順③:グループ化すると画面右のメニューにスタックが表示されるのでチェックをつけます。
スタック活用3

グループ内でオブジェクトの入れ替えが簡単に移動できるようになります。
スタック活用イメージ

補足

スタック機能の縦並びをチェックすることでグループ内のレイアウトを縦並びに変更できます。
※もちろん縦並びの中で、オブジェクトの入れ替えができます。
スタック活用4

スポンサードサーチ

Adobe XDの関連記事

コンポーネント機能

スタック機能

スポンサードサーチ

まとめ

まとめ
今回は、Adobe XDの「リピートグリッド」機能について、特徴と使い方を説明しました。

Adobe XDは、WEB制作をする上で利用頻度が高いツールなので、この機会に使えるようになりましょう!

▼Adobe XD公式ページ

コーディング作業でAdobe XDを使う場合は、下記のサイトが参考になります。

 

 

サイト制作のご依頼について

フリーランスチームにて、ホームページ・ECサイトの制作も行っております。
計画立案から制作、納品、運用までトータルでサポートいたしますのでお気軽にご相談ください。
※初回相談無料
>>サイト制作お問い合わせ(無料相談)

スポンサードサーチ