繰り返す基本オブジェクトをデザインします。例えば、画像のサムネイルとテキストの組み合わせをデザインします。
- Adobe XD ユーザーガイド
- はじめに
- デザイン
- アートボード、ガイド、レイヤー
- シェイプ、オブジェクト、パス
- テキストとフォント
- コンポーネントとステート
- マスキングと効果
- レイアウト
- ビデオと Lottie アニメーション
- プロトタイプ
- 共有、書き出し、およびレビュー
- デザインシステム
- クラウドドキュメント
- 統合とプラグイン
- XD iOS 版および Android 版
- トラブルシューティング
- 既知の問題と修正された問題
- インストールと更新
- 起動時のクラッシュ
- クラウドドキュメントおよび Creative Cloud ライブラリ
- プロトタイプ作成、公開、レビュー
- 読み込み、書き出し、その他のアプリの操作
リピートグリッドを使って、Adobe XD で繰り返しオブジェクトを作成する方法を説明します。
多くの場合、web アプリまたはモバイルアプリのデザイン中に繰り返しオブジェクトまたはコンテンツリストを定義する必要があります。ただし、これらのオブジェクトの作成や、デザイン変更時の更新には、時間がかかることがあります。
リピートグリッド機能では、オブジェクトのグループが繰り返しオブジェクトに変更されます。オブジェクトをいずれかの方向に引っ張ると、グリッドが繰り返されます。オブジェクトのスタイルを変更すると、その変更はグリッドのすべてのオブジェクトに複製されます。例えば、いずれかのオブジェクトの画像サイズを変更すると、グリッド内のすべての画像が自動的にサイズ変更されます。
グリッドにテキストオブジェクトがある場合は、そのスタイルのみが複製され、コンテンツは複製されません。そのため、グリッドオブジェクトのコンテンツは異なったまま、テキストオブジェクトを素早くスタイル設定できます。
グリッドにテキストファイルをドラッグすれば、リピートグリッドのプレースホルダーテキストを置換できます。
リピートグリッドの作成
基本的に、リピートグリッドは特殊なグループです。オブジェクトまたはオブジェクトのグループを選択してリピートグリッドに変換することにより、リピートグリッドを作成できます。
-
-
繰り返すオブジェクトを選択します。
-
プロパティインスペクターでボタンをクリックするか、ショートカットキーの Command+R キー(Mac)または Ctrl+R キー(Windows)を使用して、選択範囲をリピートグリッドに変換します。
オブジェクトの境界線に大きなハンドルが表示されます。
-
垂直方向のグリッドでオブジェクトを繰り返すには、オブジェクトの下部にあるハンドルをドラッグします。水平方向のグリッドでオブジェクトを繰り返すには、オブジェクトの右側にあるハンドルをドラッグします。
-
編集するグリッドのオブジェクトを選択するには、グリッドをダブルクリックします。
グリッドオブジェクトをグループ解除して個々に操作するには、グリッドを選択し、プロパティインスペクターで「グリッドをグループ解除」をクリックします。
グループ内をダブルクリックすると、リピートグリッドの構成要素にアクセスできます。
変更が完了したら、Esc キーを押して編集コンテキストの変更を終了します。
レイヤーパネルでオブジェクトにドリルダウンするか、オブジェクトを直接選択することでも構成要素にアクセスできます。
リピートグリッドの 2 つのオブジェクトの間隔を調整する
グリッドの 2 つのオブジェクトの間隔を調整するには、オブジェクト間の隙間にポインターを置きます。カーソルが二重矢印に変わったら、ドラッグして間隔を増減します。
リピートグリッド内のテキストを操作する
リピートグリッド内のテキストを複数の方法で使用できます。リピートグリッド内のテキストオブジェクトの個別のインスタンスを更新することも、リピートグリッドにあらかじめ入力されている .txt ドキュメントをドラッグし、テキストファイルの内容をリピートグリッド内のテキストオブジェクトに自動的に入力することもできます。
リピートグリッド内の個々のテキストオブジェクトを更新する
-
Command キー(Mac)または Ctrl キー(Windows)を押しながら、リピートグリッド内のテキストオブジェクトをクリックして選択します。
-
テキストオブジェクトを編集するには、テキストオブジェクトをダブルクリックしてテキストを変更します。
変更内容はリピートグリッド内の他のテキストオブジェクトには適用されませんが、テキストオブジェクトに適用されているスタイルはすべてのテキストオブジェクトに適用されます。
リピートグリッド内のテキストオブジェクトに改行区切りのテキストファイルをドラッグする
グリッドにテキストファイルをドラッグすれば、リピートグリッドのプレースホルダーテキストを置換できます。
-
拡張子が .txt のテキストファイルを作成します。テキストファイルの作成には、Mac の TextEdit や Windows のメモ帳(.txt 形式で保存)、または他の任意のテキストエディターを使用します。エンコード方式が UTF-8 に設定されていることを確認してください。データの行を改行で区切ります。
-
リピートグリッドにテキストファイルをドラッグします。
リピートグリッドは、テキストファイルと同じテキストのシーケンスでデータが設定されます。ファイル内のテキストの行数よりグリッド数が多い場合は、シーケンスが繰り返されます。
リピートグリッド内の画像を操作する
画像を使って、定義したパターンでオブジェクトの画像の塗りを繰り返し、オブジェクトの繰り返しのパターンを作成できます。
画像の塗りのパターンを作成するには、画像を 1 つずつオブジェクトにドラッグすることも、複数の画像を選択してリピートグリッド上のオブジェクトにドラッグすることもできます。
リピートグリッド内の画像を置き換える
グリッドの画像を置き換えるには、Finder またはエクスプローラーを開き、プロジェクトの画像を保存した場所に移動します。グリッドに表示する画像をすべて選択して、リピートグリッド内のターゲットオブジェクトにドラッグ&ドロップします。
古い画像が新しい画像に置き換えられます。サイズは自動調整されます。
リピートグリッドを使ったインタラクションの作成
プロトタイプモードでは、次のような様々な方法でリピートグリッドを他のアートボードと接続できます。
リピートグリッド全体を 1 つのインタラクションに接続する
-
デザインモードで、アートボードツール(A)を使用してファイル内に 2 つ目のアートボードを作成します。
-
「プロトタイプ」タブをクリックするか、Ctrl + Tab ショートカットキーを使用して、プロトタイプモードに切り替えます。
-
最初のアートボードのリピートグリッドを選択します。オブジェクトの右側中央に矢印の付いたコネクタが表示されます。
-
コネクタを次のアートボードにドラッグし、表示されるポップアップからトランジションのオプションを選択して、Esc キーを押すか、ポップアップの外側をクリックしてポップアップを閉じます。
-
アプリケーションフレームの右上隅にある再生ボタン、あるいはショートカットキーの Command+Enter キー(Mac)または Ctrl+Enter キー(Windows)ショートカットキーを押してプレビューを実行します。リピートグリッドの任意の箇所をクリックしてインタラクションを再生します。
リピートグリッドの 1 つのオブジェクトをインタラクション用に接続する
-
リピートグリッド内のオブジェクトを選択します。
-
四角形の右側のコネクタをドラッグし、リンクするアートボードにドラッグします。表示されるポップアップからトランジションのオプションを選択して、Esc キーを押すか、ポップアップの外側をクリックしてポップアップを閉じます。
-
アプリケーションフレームの右上隅にある再生ボタン、あるいはショートカットキーの Command+Enter キー(Mac)または Ctrl+Enter キー(Windows)ショートカットキーを押してプレビューを実行します。インタラクションを検証するオブジェクトをクリックします。
リピートグリッド内にオブジェクトのグループを作成し、そのグループからインタラクションを作成する
リピートグリッド内にオブジェクトのグループを作成し、そのグループからインタラクションを作成することもできます。
-
リピートグリッド内のオブジェクトを選択し、Shift キーを押しながら他のオブジェクトをクリックして選択範囲に追加します。
-
オブジェクトを選択したら、右クリックしてコンテキストメニューから「グループ化」を選択します。ショートカットキーの Command+G(Mac)または Ctrl+G(Windows)を使用して、オブジェクトをグループ化することもできます。
-
プロトタイプモードに切り替えます。グループから、リンクするアートボードにコネクタをドラッグします。
-
アプリケーションフレームの右上隅にある再生ボタン、あるいはショートカットキーの Command+Enter キー(Mac)または Ctrl+Enter キー(Windows)ショートカットキーを押してプレビューを実行します。インタラクションを検証するグループをクリックします。
リピートグリッドを使ったコンテンツのインポート
リピートグリッドの使用方法については、以下のサンプルビデオをご覧ください。