マニュアル キャンセル

スタックを使用して動的なデザインを作成する

  1. Adobe XD ユーザーガイド
  2. はじめに
    1. Adobe XD の新機能
    2. よくある質問
    3. Adobe XD でのデザイン、プロトタイプ、共有
    4. 必要システム構成
      1. ハードウェアとソフトウェアの要件
      2. Adobe XD、Big Sur、Apple Silicon | macOS 11
    5. ワークスペースの基本
    6. Adobe XD でのアプリ言語の変更
    7. UI デザインキットへのアクセス
    8. Adobe XD のアクセシビリティ
    9. ショートカットキー
    10. ヒントとテクニック
    11. Adobe XD サブスクリプションオプション
    12. XD スタータープランへの変更
  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. エンタープライズ版のグループ共有
  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 のスタックを使用して、コンテンツの変更に対応する動的なレイアウトを作成する方法について説明します。

Adobe XD のスタックを使用すると、グループ内のオブジェクト間に固定スペースを定義できます。スタック内のオブジェクトのサイズ変更、並べ替え、または修正を行うと、XD はオブジェクト間の定義済みスペースを自動的に保持します。  

スタックの動作結果

パディングおよびレスポンシブサイズ変更を組み合わせることで、スタックでデザインの制御と速度を向上させる強力な機能を組み合わせることができます。コンポーネントで適用すると、レイアウトを自動化してボタン、メニュー、ドロップダウン、カードベースのレイアウトの編集が簡単におこなえます。

XD の使用が初めての場合

XD をインストール

このアプリケーションの基本を学ぶ

XD を既に使用している場合

アプリケーションを更新

新機能のご紹介

始める前に

コンテンツに対応したレイアウトの基本に精通していることを確認してください。

制限事項

スタックを使用する前に、次の制限事項を把握してください。

  • サイズが大きくなるホバー状態で要素をホバーすると、背景のサイズが新しい状態に合わせて変更されず、スタック内の要素が押し出されません。
  • コンポーネントは、パディングやスタックの背景として機能できません。代わりに、コンテンツと背景の両方を含む 1 つのコンポーネントを作成します。
  • 次の操作はできません。
    • 特殊なグループをスタックのマスクまたはブール型のグループに変換する。
    • スタック方向にスタックのサイズを変更する。
    • スタック要素とスタックの外側の要素を選択する。

スタックを有効にする

レスポンシブサイズ変更が有効になっているグループまたはコンポーネントのスタックを有効にできます。プロパティインスペクターレスポンシブサイズ変更コントロール内にあるスタックを選択します。

XD は、グループまたはコンポーネントの構造に基づいてスタックの方向を自動的に決定します。ただし、スタックの方向を変更する場合、プロパティインスペクターの「スタック」オプションで「垂直」または「水平」を選択します。

コンポーネントを操作する場合、スタックの方向コントロールはマスターコンポーネントでのみ使用できます。

スタックを有効した場合の動作

スタックを有効にすると、XD は次の処理をおこないます。

  • 背景(レイヤーパネルのグループの下部に配置されたグループまたはシェイプと、グループ内のすべてのオブジェクトとのキャンバス上でのオーバーラップ)を自動的に識別する
  • パディング値を有効にして、計算する
  • 垂直方向または水平方向にスタック方向を指定する
  • 重なり合う要素をグループ化して、レイアウトを保持する
  • 要素間の間隔の値を定義し、固定する
スタックを適用

スタック要素を編集する

スタック要素を作成した後、次のオプションいずれかのいずれかを使用して編集します。

要素を移動するか、「整列」オプションを使用                                                     スタック内のオブジェクトとテキストのサイズ変更

スタックを整列

要素を自由に移動するか、スタック方向とは反対のスタック要素に対して整列ツールを使用します。

サイズ変更

サイズを変更するオブジェクトを選択すると、スタック内の他のオブジェクトが自動的に移動し、相対的な間隔が維持されます。「文字の高さの自動調整」を使用すると、スタック内で文字の幅を変更せずに文字の高さが動的に調整されます。

オブジェクト間のスペースを編集                                                                 スタック内のスペースを調整

オブジェクト間のスペースを編集

スタックグループまたはスタックコンポーネント内のオブジェクトを選択し、スペース上にカーソルを置きます。ピンクのハイライトは、スタック内のオブジェクト間のスペースを表します。ハイライトをクリックしてドラッグし、オブジェクト間のスペースを編集します。

スタック間の間隔を調整

スタック全体を選択し、キーボードの S キーを押したままにして、スタック内のスペースを調整します。S キーを使用して、パディングを編集することもできます。

スタック内のスペースを均一化                                                                       スタック内の要素を複製

ドラッグして、Shift キーまたは Shift+S キーを押します(選択対象がスタックの外側にある場合)。

Cmd + D キーを使用して、スタック内の要素を複製し、選択した要素の下に配置します。

スタック要素を並べ替える

スタック要素を作成して変更した後、次のオプションいずれかのいずれかを使用して再配列します。

  • スタック要素を選択し、キャンバス上のスタック方向に沿ってドラッグします。
  • スタック内で上下に移動するには Cmd + ] キーと Cmd + [ キーを使用し、スタック内の最初または最後の選択を移動するには Cmd + Shift + ] キーと Cmd + Shift + [ を使用します。これらのコマンドは、コンテキスト(右クリック)メニューでも使用できます。
  • スタック要素の新しい位置が、ピンクのボックスでハイライト表示されます。並べ替え時の整列を維持するには、Shift キーを押して、スタック要素がドラッグ方向に強制的にロックすることで、元の整列を維持します。
スタック要素を並べ替える

スタックの背景を作成または変更する

スタックを作成すると、XD は自動的に背景を決定します。ただし、グループまたはコンポーネント上のスタックを有効にすると、スタック内で最も低い位置に配置され、その内容と重なるレイヤーまたはグループが背景になります。

XD は、コンポーネントインスタンスを背景としてサポートしません。

スタックの背景を作成および変更するには、次の手順に従います。

create_modify_stack_baground

  1. スタックの背景として機能するシェイプまたはグループをスタック内に作成します。また、スタックの外側に背景を作成し、それをスタックグループにコピーすることもできます。
  2. スタックから、背景として使用する要素を選択します。
  3. 右クリックして、「背景を作成」または「背景を置き換える」を選択します。選択した要素は、スタックの最後に移動され、スタックのサイズとパディング値に合わせてサイズが変更されます。

スタック要素を使ってさらに多くの作業をおこなう

スタックを作成し、それらを操作する方法について説明しました。次は、スタックの使用方法を示します。

スタックのネストと再配置

スタックを互いにネストすると(例えば、水平方向スタックを垂直方向スタックにネストする)、レイアウトを明確にして簡単に編集できます。スタックの数は無制限にネストできます。アニメーション化されたイラストを見て、ネストされたスタックの動作を把握します。 

スタックとリピートグリッド

コンポーネントとステートのスタック

スタックとパディングをコンポーネントに適用して、デザインシステムのコンテキストで再利用可能な UI 要素を定義できます。ラベルや行の更新が必要なコンポーネントを操作する場合、スタックを使用すると、コンポーネントのレイアウトが変更に反応し、手動でのレイアウト作業が自動化されます。例えば、コンテンツの上書きを含む複数のインスタンスがある場合は、スタックを使用して、スペースをグローバルに編集して管理します。各カードの手動編集は不要です。

マスターコンポーネントに適用されたスタックは、そのすべてのインスタンスと状態に自動的に適用されます。スタックを含むリンクコンポーネントを作成し、編集することもできます。 

スタックでのオーバーライドの動作

  • スペースのオーバーライドは、インスタンスまたは状態でスタックの 2 つの要素間のスペースを手動で編集すると発生します。マスターコンポーネント内のスペースを変更した場合、変更はインスタンスや状態に適用されません。
  • インスタンスは、より大きいエリアテキストなどの要素に対してコンテンツまたはレイアウトのオーバーライドを適用できます。その場合も、これらのインスタンスは、パディング値またはパディングの間のスペースに合わせてマスターとの同期を維持できます。 
スタックでのオーバーライドの動作

詳細情報

「パディングとレスポンシブサイズ変更を組み合わせることで、デザインシステムで作業する際に強力な機能を組み合わせます。マスターコンポーネント上でスタックを使用する場合、そのコンポーネントのインスタンスはすべてスタック構造を考慮します。」 XD、プリンシパルプロダクトマネージャー、Dani Beaumont。

コンポーネントとグループのスタックの使い方について詳しくは、このビデオをご覧ください。

視聴時間:1 分.

次のステップ

要素間のスペースを定義するスタックの使用方法について説明しました。さらに一歩踏み込んで、アニメーションプロトタイプを作成する方法や、フィードバックを得るためにデザイナーや関係者と共有する方法についてご確認ください。

ご質問または共有するアイデアがある場合

コミュニティで質問

質問やアイデアを共有するには、Adobe XD コミュニティにご参加ください。皆様からのご意見や作品をお待ちしております。

アドビのロゴ

アカウントにログイン