プログラミングで人生を豊かに楽しく

超便利!XDのリピートグリッドの使い方を解説します【初心者向き】

みやしも WEB制作

今回は、人気のデザインツールAdobe XD『リピートグリッド』機能について解説してゆきます。

リピートグリッドを使えば、デザイン作業の効率をぐっと上げることができますよ!

▼この記事を書いた人

Twitter|miyashimo_eng

フリーランスエンジニアのみやしもです。システム開発・WEB制作などの経験を活かして、初心者に役立つIT知識を発信してゆきます。

XDのリピートグリッド機能とは?

XDのリピートグリッド機能とは?

Adobe XDにおける『リピートグリッド』とは、同じデザインの繰り返しを自動的に作成することができる機能です。

リピートグリッドの作業イメージ

例えば次のような「記事一覧」のデザイン。



作成するには1記事を表すデザイン部分を作ってから、繰り返しコピペで並べてゆく必要があると思いますが、XDのリピートグリッドを使えばこの様なデザインも一瞬で作成できる様になります。

XDのリピートグリッドのイメージ
XDのリピートグリッドのイメージ

▼リピートグリッド機能

  • 同じデザインの繰り返しを自動的に作成できる
  • 一括編集にも対応しているためデザイン変更にも強い
  • 手間をなくして効率的にデザイン作成ができる
まさに神機能!リピートグリッドを使えば作業時の「めんどくさい」がいっきに無くなりますよ!
今回はそんな『リピートグリッド』機能の使い方について、画像付きでくわしく解説してゆきます。

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

それではリピートグリッドの使い方について解説してゆきます。

リピートグリッドを作る方法

あるオブジェクト選択した状態で、右側のパネルにある『リピートグリッド』のボタンを押すと、そのオブジェクトをリピートグリッドにできます。

1.リピートグリッドの作り方
リピートグリッドの作り方
リピートグリッドは次のショートカットキーでも作成することが出来ます。
【Windows】Ctrl+R
【Mac】Command+R

リピートグリッドになった状態

リピートグリッドになったオブジェクトには、緑色の枠とともに、それぞれ右方向と下方向にドラッグするためのハンドルが追加されます。

2.リピートグリッドの使い方
リピートグリッドになった状態

リピートグリッドの使い方

リピートグリッドはそれぞれ、右方向と下方向のハンドルをドラッグすれば同じデザインが複製できます。

3.リピートグリッドの使い方
下方向に向けてデザインを複製した場合
簡単にデザインを複製できるのが、リピートグリッドの大きな魅力です!

リピートグリッドの解除方法

リピートグリッドを解除するには、次のいずれかの方法で操作すればOKです。



▼リピートグリッドを解除する方法

  • 右側のパネルにある『リピートグリッド』のボタンを押す
  • 右クリックして『グリッドをグループ解除』を選択する
  • 次のショートカットキーでも解除できます
    【Mac】Shift+Command+G 【Windows】Shift+Ctrl+G

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

ここからは、リピートグリッドの内容を編集する方法について解説をしてゆきます。

デザインに変更が入っても効率を損なうことなく作業することが出来ますよ!

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

リピートグリッドでは、複製したデザインの間隔を一括して調整することが出来る様になっています。



リピートグリッドのデザインの間にカーソルを合わせるとピンク色の領域が表示されるため、これらをドラッグすることで間隔の調整ができます。



また、間隔の調整は右方向・下方向それぞれに対応しており、変更内容はリピートグリッド全体に反映される様になっています。

4.リピートグリッドの間隔を調整する
リピートグリッドの間隔を調整する方法

テキストや画像を入れ替える

リピートグリッドでは、複製したデザインのテキストや画像をまとめて入れ替えることもできます。



テキストや画像の入れ替えは、外部ファイルをドラッグ&ドロップ操作でリピートグリッド上に落とすことで行われます。また、テキスト・画像ファイルの用意の仕方、使い方はそれぞれ次のようになります。



▼テキストファイル

  • 拡張子「.txt」、文字コード「UTF-8」で用意する
  • 複数のデータを扱う場合は改行で区切る
  • リピートグリッド上にファイルをドラッグ&ドロップすれば反映できる



▼画像ファイル

  • jpeやpngなどの一般的な画像ファイルが使用できる
  • 画像を1つずつオブジェクト上にドラッグ&ドロップすれば反映できる
  • 複数の画像をまとめてドラッグ&ドロップすることも出来る
複製したデザインごとにテキストや画像を変えてゆけば、よりリアリティを持たせたデザインにできますね!

Adobe XDの使い方まとめ

【XDの使い方】Adobe XD使い方まとめ

人気のデザインツール「Adobe XD」の使い方をまとめて紹介してゆきます。

XDの基本的な使い方

Adobe XDの基本的な使い方について、つぎの記事で確認する事ができます。

アートボードの使い方

WEBサイトやアプリの画面を扱う『アートボード』の解説記事はこちら。

リピートグリッドの使い方

同じデザインのくり返しを自動的に作成することができる『リピートグリッド』の解説記事はこちら。

コンポーネントの使い方

デザインを部品化して管理できる『コンポーネント』の解説記事はこちら。

レイアウトグリッドの使い方

グリッドシステムを使用したデザインに役立つ『レイアウトグリッド』の解説記事はこちら。

プロトタイプ機能の使い方

デザインを実際のWEBサイト・アプリの様に動かす事ができる『プロトタイプ』の解説記事はこちら。

プラグインの使い方【おススメもあり】

Adobe XDの標準機能を拡張することが出来る『プラグイン』の利用方法や、おススメが気になる方は次の記事をご確認ください。

この記事のまとめ

今回は、Adobe XDの『リピートグリッド』機能の使い方を画像付きで詳しく解説してゆきました。



▼XDのリピートグリッド機能

  • 同じデザインの繰り返しを自動的に作成できる
  • 一括編集にも対応しているためデザイン変更にも強い
  • 手間をなくして効率的にデザイン作成ができる
XDを使ってデザイン作業をするなら、ぜひとも覚えておきたい機能ですね!

Adobe XDを使ってみよう

Adobe XDは無料から使えて、かつ初心者にも扱いやすい人気のデザインツールです。多くのWEBデザイナー・UI/UXデザイナーから支持を集めており、今やWEBサイト・アプリ開発の現場では欠かせないツールになります。



▼Adobe公式サイトはこちら

AdobeXDを今すぐ使う

※クリックすると別ウィンドウで開きます

デザインやUI/UXなどを学習するなら、ぜひ優先的に習得しておきたいツールです!

基礎から学びたい方に向けて

Adobe XDの使い方を基礎から学びたい方に向けて、画像付きで分かりやすく解説する記事を書きました。



▼XDの使い方が知りたい方はこちら


WEB初心者の方や、これからクリエイターになりたい方は必見の内容です!

関連記事

最新記事