マニュアル キャンセル

繰り返しオブジェクトの作成

検索
  1. Adobe XD ユーザーガイド
  2. はじめに
    1. Adobe XD の新機能
    2. よくある質問
    3. Adobe XD でのデザイン、プロトタイプ、共有
    4. カラーマネジメント
    5. 必要システム構成
      1. ハードウェアとソフトウェアの要件
      2. Adobe XD、Big Sur、Apple Silicon | macOS 11
    6. ワークスペースの基本
    7. Adobe XD でのアプリ言語の変更
    8. UI デザインキットへのアクセス
    9. Adobe XD のアクセシビリティ
    10. ショートカットキー
    11. ヒントとテクニック
  3. デザイン
    1. アートボード、ガイド、レイヤー
      1. アートボードの基本を学ぶ
      2. グリッドとガイドを使う
      3. スクロール可能なアートボードの作成
      4. レイヤーの操作
      5. スクロールグループを作成する
    2. シェイプ、オブジェクト、パス
      1. オブジェクトの選択、サイズ変更および回転
      2. オブジェクトの移動、分散および整列
      3. オブジェクトのグループ化、ロック、複製、コピー、および反転
      4. オブジェクトのストローク、塗り、ドロップシャドウの設定
      5. 繰り返しオブジェクトの作成
      6. 3D 変形を使って透視図を作成
      7. ブール演算を使用したオブジェクトの編集
    3. テキストとフォント
      1. 描画ツールとテキストツールの操作
      2. Adobe XD のフォント
    4. コンポーネントとステート
      1. コンポーネントによる作業
      2. 入れ子になったコンポーネントの操作
      3. コンポーネントへの複数ステートの追加
    5. マスキングと効果
      1. シェイプでマスクを作成
      2. ぼかし効果の操作
      3. グラデーションの作成と修正
      4. ブレンド効果の適用
    6. レイアウト
      1. レスポンシブサイズ変更とレイアウトの制約
      2. コンポーネントとグループへの固定パディングの設定
      3. スタックを使用して動的なデザインを作成する
    7. ビデオと Lottie アニメーション
      1. ビデオを操作
      2. ビデオを使用したプロトタイプの作成
      3. Lottie アニメーションを操作
  4. プロトタイプ
    1. インタラクティブプロトタイプを作成
    2. プロトタイプのアニメーション化
    3. 自動アニメーションでサポートされているオブジェクトプロパティ
    4. キーボードとゲームパッドでプロトタイプを作成
    5. 音声コマンドや音声再生を使用したプロトタイプの作成
    6. タイマートランジションの作成
    7. オーバーレイの追加
    8. 音声機能付きプロトタイプのデザイン
    9. アンカーリンクを作成
    10. ハイパーリンクの作成
    11. デザインとプロトタイプのプレビュー
  5. 共有、書き出し、およびレビュー
    1. 選択したアートボードの共有
    2. デザインおよびプロトタイプの共有
    3. リンクのアクセス権限を設定
    4. プロトタイプを操作
    5. プロトタイプのレビュー
    6. デザインスペックの使用方法
    7. デザインスペックの共有
    8. デザインスペックを確認する
    9. デザインスペックのナビゲート
    10. デザインスペックのレビューとコメント
    11. アセットの書き出し
    12. デザインスペックからのデザイン素材の書き出しとダウンロード
    13. エンタープライズ版のグループ共有
    14. XD アセットのバックアップまたは移行
  6. デザインシステム
    1. Creative Cloud ライブラリと連携したデザインシステム
    2. Adobe XD でドキュメントアセットによる作業
    3. Adobe XD での Creative Cloud ライブラリの操作
    4. リンク化アセットから Creative Cloud ライブラリへ移行
    5. デザイントークンを使用する 
    6. Creative Cloud ライブラリアセットの利用
  7. クラウドドキュメント
    1. Adobe XD のクラウドドキュメント
    2. デザインの共同作業と共同編集
    3. 共有されたドキュメントの共同編集
  8. 統合とプラグイン
    1. 外部のデザイン素材
    2. Photoshop で作成したデザインアセットの操作
    3. Photoshop からのアセットのコピー＆ペースト
    4. Photoshop のデザインの読み込みまたは起動
    5. Adobe XD での Illustrator アセットの操作
    6. Illustrator のデザインの起動または読み込み
    7. Illustrator から XD へのベクターのコピー
    8. Adobe XD のプラグイン
    9. プラグインの作成と管理
    10. XD への Jira の統合
    11. XD 用 Slack プラグイン
    12. XD 用 Zoom プラグイン
    13. XD から Behance にデザインを公開
  9. XD iOS 版および Android 版
    1. モバイルデバイスでプレビュー
    2. Adobe XD モバイル版に関する FAQ
  10. トラブルシューティング
    1. 既知の問題と修正された問題
      1. 既知の問題
      2. 解決済みの問題
    2. インストールと更新
      1. XD が Windows 上で互換性がないように見える
      2. エラーコード：191
      3. エラーコード：183
      4. XD プラグインのインストールに関する問題
      5. Windows 10 で XD のアンインストールと再インストールを促すダイアログが表示される
      6. 環境設定の移行に関する問題
    3. 起動時のクラッシュ
      1. Windows 10 で起動すると XD がクラッシュする
      2. Creative Cloud からログアウトすると XD が終了する
      3. Windows でのサブスクリプションステータスの問題
      4. Windows で XD を起動すると、アプリがブロックされたという警告が表示される
      5. Windows でのクラッシュダンプの生成
      6. クラッシュログの収集と共有
    4. クラウドドキュメントおよび Creative Cloud ライブラリ
      1. XD クラウドドキュメントで発生する問題
      2. リンクされたコンポーネントに関する問題
      3. ライブラリとリンクに関する問題
    5. プロトタイプ作成、公開、レビュー
      1. macOS Catalina でプロトタイプのインタラクションを収録できない
      2. 公開ワークフローの問題
      3. 公開されたリンクがブラウザーに表示されない
      4. プロトタイプがブラウザーで正しくレンダリングされない
      5. コメントパネルが突然共有リンクに表示される
      6. ライブラリを公開できない
    6. 読み込み、書き出し、その他のアプリの操作
      1. XD での読み込みと書き出し
      2. XD での Photoshop ファイルの使用
      3. XD での Illustrator ファイルの使用
      4. XD から After Effects への書き出し
      5. XD での Sketch ファイルの使用
      6. 書き出しに表示されないサードパーティ製品

リピートグリッドを使って、Adobe XD で繰り返しオブジェクトを作成する方法を説明します。

多くの場合、web アプリまたはモバイルアプリのデザイン中に繰り返しオブジェクトまたはコンテンツリストを定義する必要があります。ただし、これらのオブジェクトの作成や、デザイン変更時の更新には、時間がかかることがあります。

リピートグリッド機能では、オブジェクトのグループが繰り返しオブジェクトに変更されます。オブジェクトをいずれかの方向に引っ張ると、グリッドが繰り返されます。オブジェクトのスタイルを変更すると、その変更はグリッドのすべてのオブジェクトに複製されます。例えば、いずれかのオブジェクトの画像サイズを変更すると、グリッド内のすべての画像が自動的にサイズ変更されます。

グリッドにテキストオブジェクトがある場合は、そのスタイルのみが複製され、コンテンツは複製されません。そのため、グリッドオブジェクトのコンテンツは異なったまま、テキストオブジェクトを素早くスタイル設定できます。

グリッドにテキストファイルをドラッグすれば、リピートグリッドのプレースホルダーテキストを置換できます。

リピートグリッドの作成

基本的に、リピートグリッドは特殊なグループです。オブジェクトまたはオブジェクトのグループを選択してリピートグリッドに変換することにより、リピートグリッドを作成できます。

  1. 繰り返す基本オブジェクトをデザインします。例えば、画像のサムネイルとテキストの組み合わせをデザインします。

  2. 繰り返すオブジェクトを選択します。

  3. プロパティインスペクターでボタンをクリックするか、ショートカットキーの Command+R キー（Mac）または Ctrl+R キー（Windows）を使用して、選択範囲をリピートグリッドに変換します。

    オブジェクトの境界線に大きなハンドルが表示されます。

    オブジェクトまたはオブジェクトのグループを繰り返すためのハンドル
    オブジェクトまたはオブジェクトのグループを繰り返すためのハンドル

  4. 垂直方向のグリッドでオブジェクトを繰り返すには、オブジェクトの下部にあるハンドルをドラッグします。水平方向のグリッドでオブジェクトを繰り返すには、オブジェクトの右側にあるハンドルをドラッグします。

    垂直方向のリピートグリッド

    水平方向のリピートグリッド

  5. 編集するグリッドのオブジェクトを選択するには、グリッドをダブルクリックします。

グリッドオブジェクトをグループ解除して個々に操作するには、グリッドを選択し、プロパティインスペクターで「グリッドをグループ解除」をクリックします。

グループ内をダブルクリックすると、リピートグリッドの構成要素にアクセスできます。

変更が完了したら、Esc キーを押して編集コンテキストの変更を終了します。

注意：

レイヤーパネルでオブジェクトにドリルダウンするか、オブジェクトを直接選択することでも構成要素にアクセスできます。

リピートグリッドの 2 つのオブジェクトの間隔を調整する

グリッドの 2 つのオブジェクトの間隔を調整するには、オブジェクト間の隙間にポインターを置きます。カーソルが二重矢印に変わったら、ドラッグして間隔を増減します。

繰り返しオブジェクトを含む垂直方向のグリッド
繰り返しオブジェクトを含む垂直方向のグリッド

リピートグリッド内のテキストを操作する

リピートグリッド内のテキストを複数の方法で使用できます。リピートグリッド内のテキストオブジェクトの個別のインスタンスを更新することも、リピートグリッドにあらかじめ入力されている .txt ドキュメントをドラッグし、テキストファイルの内容をリピートグリッド内のテキストオブジェクトに自動的に入力することもできます。 

リピートグリッド内の個々のテキストオブジェクトを更新する

  1. Command キー（Mac）または Ctrl キー（Windows）を押しながら、リピートグリッド内のテキストオブジェクトをクリックして選択します。 

  2. テキストオブジェクトを編集するには、テキストオブジェクトをダブルクリックしてテキストを変更します。

注意：

変更内容はリピートグリッド内の他のテキストオブジェクトには適用されませんが、テキストオブジェクトに適用されているスタイルはすべてのテキストオブジェクトに適用されます。

リピートグリッド内のテキストオブジェクトに改行区切りのテキストファイルをドラッグする

グリッドにテキストファイルをドラッグすれば、リピートグリッドのプレースホルダーテキストを置換できます。

  1. 拡張子が .txt のテキストファイルを作成します。テキストファイルの作成には、Mac の TextEdit や Windows のメモ帳（.txt 形式で保存）、または他の任意のテキストエディターを使用します。エンコード方式が UTF-8 に設定されていることを確認してください。データの行を改行で区切ります。 

  2. リピートグリッドにテキストファイルをドラッグします。

    リピートグリッド内のオブジェクトにテキストファイルをドラッグする
    リピートグリッド内のオブジェクトにテキストファイルをドラッグする - 更新予定

    リピートグリッドは、テキストファイルと同じテキストのシーケンスでデータが設定されます。ファイル内のテキストの行数よりグリッド数が多い場合は、シーケンスが繰り返されます。

リピートグリッド内の画像を操作する

画像を使って、定義したパターンでオブジェクトの画像の塗りを繰り返し、オブジェクトの繰り返しのパターンを作成できます。

画像の塗りのパターンを作成するには、画像を 1 つずつオブジェクトにドラッグすることも、複数の画像を選択してリピートグリッド上のオブジェクトにドラッグすることもできます。

リピートグリッド内のオブジェクトに画像ファイルをドラッグする
リピートグリッド内のオブジェクトに画像ファイルをドラッグする - 更新予定

リピートグリッド内の画像を置き換える

グリッドの画像を置き換えるには、Finder またはエクスプローラーを開き、プロジェクトの画像を保存した場所に移動します。グリッドに表示する画像をすべて選択して、リピートグリッド内のターゲットオブジェクトにドラッグ＆ドロップします。

古い画像が新しい画像に置き換えられます。サイズは自動調整されます。

リピートグリッドを使ったインタラクションの作成

プロトタイプモードでは、次のような様々な方法でリピートグリッドを他のアートボードと接続できます。

リピートグリッド全体を 1 つのインタラクションに接続する

  1. デザインモードで、アートボードツール（A）を使用してファイル内に 2 つ目のアートボードを作成します。

  2. 「プロトタイプ」タブをクリックするか、Ctrl + Tab ショートカットキーを使用して、プロトタイプモードに切り替えます。

  3. 最初のアートボードのリピートグリッドを選択します。オブジェクトの右側中央に矢印の付いたコネクタが表示されます。

  4. コネクタを次のアートボードにドラッグし、表示されるポップアップからトランジションのオプションを選択して、Esc キーを押すか、ポップアップの外側をクリックしてポップアップを閉じます。

  5. アプリケーションフレームの右上隅にある再生ボタン、あるいはショートカットキーの Command+Enter キー（Mac）または Ctrl+Enter キー（Windows）ショートカットキーを押してプレビューを実行します。リピートグリッドの任意の箇所をクリックしてインタラクションを再生します。

リピートグリッドの 1 つのオブジェクトをインタラクション用に接続する

  1. リピートグリッド内のオブジェクトを選択します。

  2. 四角形の右側のコネクタをドラッグし、リンクするアートボードにドラッグします。表示されるポップアップからトランジションのオプションを選択して、Esc キーを押すか、ポップアップの外側をクリックしてポップアップを閉じます。

  3. アプリケーションフレームの右上隅にある再生ボタン、あるいはショートカットキーの Command+Enter キー（Mac）または Ctrl+Enter キー（Windows）ショートカットキーを押してプレビューを実行します。インタラクションを検証するオブジェクトをクリックします。

リピートグリッド内にオブジェクトのグループを作成し、そのグループからインタラクションを作成する

リピートグリッド内にオブジェクトのグループを作成し、そのグループからインタラクションを作成することもできます。

  1. リピートグリッド内のオブジェクトを選択し、Shift キーを押しながら他のオブジェクトをクリックして選択範囲に追加します。

  2. オブジェクトを選択したら、右クリックしてコンテキストメニューから「グループ化」を選択します。ショートカットキーの Command+G（Mac）または Ctrl+G（Windows）を使用して、オブジェクトをグループ化することもできます。

  3. プロトタイプモードに切り替えます。グループから、リンクするアートボードにコネクタをドラッグします。

  4. アプリケーションフレームの右上隅にある再生ボタン、あるいはショートカットキーの Command+Enter キー（Mac）または Ctrl+Enter キー（Windows）ショートカットキーを押してプレビューを実行します。インタラクションを検証するグループをクリックします。

リピートグリッドを使ったコンテンツのインポート

リピートグリッドの使用方法については、以下のサンプルビデオをご覧ください。 

その他の関連ヘルプ

アドビのロゴ

アカウントにログイン

クイックリンク

すべてのプランを表示 プランを管理

法律上の注意    | プライバシーポリシー