マニュアル キャンセル

コンポーネントとグループへの固定パディングの設定

  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 を使用すると、状態を持つグループまたはコンポーネントに固定パディング値を設定し、コンテンツが変更されたときに、自動で背景をスケーリングできるようになります。

これにより、ボタン、ドロップダウン、ツールチップ、またはモーダルダイアログを作成するときに、デザインの摩擦と認知的過負荷が軽減されます。

1
コンテンツに応じたレイアウトを作成するためのパディングの使用

グループ全体のサイズ変更で機能するレスポンシブなサイズ変更と異なり、パディングはグループ内に含まれるコンテンツを変更したときに機能します。

これにより、手動でサイズを変更をする必要がなくなり、柔軟で高速なワークフローが実現します。

パディング操作

パディングとは、目に見える背景からコンテンツの各辺の端までの距離であり、伸縮性のある背景が表示されます。 

XD は、次の場合に背景を自動識別します。

  • シェイプ、グループ、またはブールグループが、グループまたはコンポーネントレイヤーの最下位に配置されている場合
  • 他の要素が最下位のレイヤーに重なっている場合 
パディング
すべての方向に同じパディング値

 パディングによってオブジェクトの背景サイズを正確に制御するには、これらの手順に従います。

  1. プロパティインスペクターからパディングボタンを有効にするために切り替えを行います。
  2. デザインの必要に応じてすべての方向に同じパディングまたは方向ごとに異なるパディングの値を設定します。
1
方向ごとの異なるパディング値

パディングオプションは、レイヤー構造の背景要素がグループの最後に配置され、他のオブジェクトと重なる場合のみ表示できるようになります。

グループまたはコンポーネント内でコンテンツを移動またはサイズ変更すると、XD が背景を識別し、パディング値を計算して、プロパティインスペクターでパディング値を更新します。

更新された値はグループまたはコンポーネントで維持され、背景が自動的にサイズ変更されます。グループまたはコンポーネントに目に見える背景がない場合、パディング値は 0 に設定されます。

パディング値を変更する場合

次のいずれかのオプションを使用します。

  • プロパティインスペクターで既存のパディング値を変更します。
  • カンバス上のパディングのサイズを変更するには、` キーを押してパディング領域にカーソルを合わせ、ドラッグします。
  • グループまたはコンポーネントの余白値を更新するには、キャンバスの背景を手動でサイズ変更または移動します。
  • すべての余白値を編集するには、Shift+` を選択します。
  • 反対の余白値を編集するには、`+Alt を選択します。

パディング値を増やすと、XD は、プロトタイプ時にロゴの周囲やボタンの大きなタップ領域内に、セーフスペースとして機能する不可視のパディングを作成します。

  • ボタンのラベルを変更する場合、次のテキストを入力すると、ボタンのサイズが変更されます。
  • ドロップダウンに行を追加する場合、繰り返しグリッドを使用してグループ内に追加の行を作成すると、背景が繰り返しグリッドに合わせてサイズ変更されます。
グリッドとパディングの繰り返し
パディング付きの繰り返しグリッドの使用

ステートを持つコンポーネントのパディング

コンポーネントは、マスターコンポーネントからパディング動作を継承します。そのため、マスターコンポーネントで設定したパディング値は、インスタンス間またはステート間で同期されます。

パディングが上書きされるのは次の場合です。

  • コンポーネントインスタンスとマスターコンポーネントでパディング値を変更した場合、または
  • インスタンスがパディング値を更新しない場合

注意事項

  • パディングを有効にすると、以下の処理が行われます。
    • マスターコンポーネントまたはデフォルトのステートに設定されたプロパティが、コンポーネントまたはステートのすべてのインスタンスに自動的に継承されます。このプロパティをローカルに上書きするオプションは提供されません。
    • カンバスで「最背面へ」オプションを使用すると、グループまたはコンポーネント内のアイテムが、グループ背景のすぐ上に配置されます。
  • 背景がブールグループ、マスク、コンポーネントのいずれかである場合、レスポンシブサイズ変更ルールが適用されてオブジェクトのサイズが変更されます。
  • 背景を削除すると、XD はグループをチェックし、次の潜在的なレイヤーを自動的に背景に設定して、パディング値を更新します。背景レイヤーがない場合、パディング値は 0 にリセットされます。

制限事項

  • コンポーネントとポイントテキストは、グループまたはコンポーネントの背景として機能できません。
  • デザインコンテンツ内で、ホバーまたはタップステートを使用している場合、パディングは、プロトタイプモードでアニメション表示されません。

例題とサンプルファイル

ボタンの外側にラベルがはみ出ることなく、ボタンのラベルを変更する場合は、以下の操作を実行します。

1
サンプルファイル

  1. ダウンロードして、XD でサンプルボタンのファイルを開きます。
  2. オブジェクトとその背景を選択します。
  3. プロパティインスペクター内の「パディング
    」を有効化して、ボタン内の背景とコンテンツを制御します。
  4. デザインの必要性に基づいてパディングオプションのいずれかを選択して適用します。

詳細情報

視聴時間:7 分

次のステップ

ここではパディングについて説明しました。次のステップでは、インタラクティブデザインまたはプロトタイプを作成する方法や、開発者や仲間のデザイナーなどの関係者と共有する方法について学習してください。

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

コミュニティで質問

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

アドビのロゴ

アカウントにログイン