マニュアル キャンセル

デザインスペックの表示および確認方法

  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. 書き出しに表示されないサードパーティ製品

デザインスペックのカラー、テキスト、数値、コンポーネントのステート、インタラクションのハイライトなどの属性を表示および確認する方法について説明します。

共有デザインスペックリンクでは、プロトタイプを表示して体験したり、状況に応じてコメントとフィードバックを追加したり、デザインの測定値とスペック情報を取得したりすることができます。

デザインスペックリンクのタブ
デザインスペックリンクのタブ

デザインスペックリンクを開くと、デフォルトでプロトタイプモードに設定されています。プロパティと仕様の情報を取得するには、右レールの アイコンをクリックしてデザインスペックのタブに切り替えます。

デザインスペックタブに切り替えると、カンバス上で要素を選択して検査し、プロパティインスペクターに表示されるカラー、テキスト、測定値、ステート、その他のプロパティなどの属性を取得できます。

{} アイコンをクリックして、変数タブに切り替えます。このタブは、デザイナーが web のデザインスペックリンクを公開すると使用できるようになります。デザイナーがデザインのカラーと文字スタイルの変数名を定義すると、デザイントークン情報を変数タブに表示できます。

以下では、デザインスペックの属性を表示し、照合する方法について説明します。

画面の詳細ビュー

アートボードの外側をクリックすると、画面の詳細ビューが表示されます。このビューでは、画面とインタラクションのハイライトなどの詳細を調べることができます。

画面の詳細とプロパティ

A. 画面の詳細:画面の寸法を表示します。

B. カラー:書き出し用にマークされた色を表示します。

C. レイアウトグリッドのプロパティ:グリッドを表示するには、オンにします。

不透明度スライダーを使用して、カラーの透明度を制御できます。

注意:

XD アプリでエクスポートするレイヤーをマークすると、そのレイヤーで使用されているカラーは画面の詳細ビューに表示されません。

オーバーレイ

「インタラクション」をクリックすると、適用したオーバーレイのアートボードの詳細、スタイル、デザインとビューポートのサイズ、オーバーレイの位置、カラー、文字スタイル、ターゲット情報が表示されます。 

インタラクションハイライト

Shift キーを押したままにすると、インタラクションのハイライトが表示されます。それらのハイライトを確認するには、「インタラクション」セクションに表示されているアーティファクトをクリックするか、Shift キーを押しながらそのインタラクションのハイライトをクリックします。 

レイヤーの詳細ビュー

アートボードでレイヤーを選択すると、レイヤーの詳細ビューに切り替わります。プロパティインスペクターでは、レイヤー名に加え、寸法や外観などのプロパティを表示できます。

テキストとアピアランス

A. テキストのプロパティ:テキストの行を選択し、px、pt、dp など、デフォルトの単位が付いたテキストプロパティを表示します。

B. アピアランス:オブジェクトまたはテキストで使用されるカラーが「アピアランス」セクションに表示されます。

シェイプ

シェイプを確認する

シェイプを選択して、次の属性を確認します。

  • 幅、高さ、回転。
  • カラー、境界線のサイズ、ダッシュ、ギャップ、ストローク、不透明度などの外観属性。

画像

画像を確認する

画像を選択して、次の属性を確認します。

  • 幅、高さ、回転。
  • 不透明度。

ビデオ

ビデオを確認する

ビデオを選択して、次の属性を確認します。

  • 幅、高さ、回転。
  • ポスター画像名。
  • 自動再生、ループ再生、およびオーディオ設定。
  • ビデオをトリミングする場合は、ビデオクリップの開始時刻と終了時刻が表示されます。 
  • 不透明度。

Lottie アニメーション

ビデオを確認する

Lottie アニメーションを選択して、次の属性を確認します。

  • 幅、高さ、回転
  • 自動再生およびループ再生設定
  • 不透明度
  • CSS プロパティ
  • インタラクション

部分テキスト

部分テキスト

テキスト要素内のサブ範囲にポインターを合わせると、テキスト要素内の類似したサブ範囲がハイライトされます。

ハイパーリンク

オブジェクトハイパーリンク

オブジェクトハイパーリンクの確認

  • アートボード上のオブジェクトを選択すると、そのすべてのハイパーリンクがプロパティインスペクターの「インタラクション」セクションに表示されます。
  • 「インタラクション」セクションのハイパーリンクにポインターを合わせると、アートボード上の関連するオブジェクトが示されます。
  • ハイパーリンクの URL をクリップボードにコピーするには、オブジェクトの詳細セクションで、ハイパーリンクをクリックします。
  • 「インタラクション」セクションでハイパーリンクをクリックすると、リンクが開きます。「インタラクション」セクションからハイパーリンクの URL をコピーするには、ハイパーリンクの URL を右クリックします。
  • 「インタラクション」セクションで、https または mailto 以外のプロトコルを持つハイパーリンク、プロトコルを持たないハイパーリンク、無効なドメインを持つハイパーリンクをクリックした場合、URL は開かず、画面の下にエラーメッセージが表示されます。
  • オブジェクトに複数のハイパーリンクインタラクションが定義されている場合、オブジェクトの詳細セクションからそれらをコピーすることはできません。「インタラクション」セクションのハイパーリンクをコピーするには、ハイパーリンクを右クリックします。

テキストハイパーリンク

テキストハイパーリンクの確認

  • アートボード上でテキストオブジェクトを選択すると、プロパティインスペクター(「インタラクション」セクションとオブジェクトの詳細セクションの両方)に、そのオブジェクトに定義されているすべてのハイパーリンクインタラクションが表示されます。 
  • テキストオブジェクトに対して定義されたハイパーリンクのインタラクションは、他のオブジェクトのハイパーリンクを確認するのと同様の方法で確認できます。
  • オブジェクト内のテキスト(部分テキスト)を選択したときに、そのテキストに個別のハイパーリンクがある場合は、オブジェクトの詳細セクションに個別のハイパーリンクの URL が表示されます。ただし、「インタラクション」セクションには、オブジェクトに対して定義されたハイパーリンクやその他のインタラクションが引き続き表示されます。
  • 部分テキストのハイパーリンクの URL をクリップボードにコピーするには、オブジェクトの詳細セクションで、ハイパーリンクをクリックします。

XD のハイパーリンクについては、「ハイパーリンクの作成」を参照してください。

コードスニペット

CSS コード

CSS コードの確認

  • CSS コードを生成するには、XD アプリで共有開発を選択し、「Web 用に書き出し」を選択してデザインスペックを公開します。
  • CSS スニペットセクションからデザインの CSS コードを表示してコピーできます。
  • コードスニペットをコピー&ペーストするには、スニペットをクリックしたままドラッグし、コードエディターに切り替えて貼り付けます。

HTML コード

Lottie とビデオの HTML コードを確認

  • Lottie ファイルとビデオファイルの HTML コードを生成するには、XD アプリで共有開発を選択し、「Web 用に書き出し」を選択してデザインスペックを公開します。
  • HTML コードは、プロパティインスペクターの HTML セクションからコピーできます。
  • コードスニペットをコピー&ペーストするには、スニペットをクリックしたままドラッグし、コードエディターに切り替えて貼り付けます。

コンポーネントのステート

デザインスペック内のコンポーネントのステート
デザインスペック内のコンポーネントのステート

  • アートボードでオブジェクトを選択したとき、選択したオブジェクトがコンポーネントであれば、それに設定された複数のステートを確認できます。 
  • アートボードでコンポーネントを選択し、その様々なステートを表示するには、プロパティインスペクターの「コンポーネント」リストで各オプションをクリックします。  
  • 選択したコンポーネントのアクティブなステートに関連付けられたインタラクションはすべて、「インタラクション」セクションに表示されます。 

  • このリストでコンポーネントの非アクティブステートをクリックすると、アートボード上のステートとそのインタラクションが表示されます。
  • コンポーネント名が長く、その一部しか表示されていない場合は、プロパティインスペクターで名前を選択してコピーします。
注意:

ダウンロード可能なコンポーネントのすべてのステートをダウンロードすることができます。XD アプリで、デザイナーがコンポーネントの複数のインスタンスを書き出し対象としてマークした場合、レイヤーパネルの最後にあるインスタンスのみが書き出されます。

非表示のレイヤー

非表示のレイヤー

  • 特定の領域にポインター合わせて右クリックすると、そのピクセルポイントにあるレイヤーとそのコンテキストの詳細のリストが表示されます。 
  • グループ名が長く、その一部しか表示されていない場合は、プロパティインスペクターで名前を選択してコピーします。

詳細情報

XD のデザインスペックについて詳しくは、以下のビデオをご覧ください。
視聴時間:8 分


次のステップ

ここでは、デザインスペックの表示と確認の方法について説明しました。さらに一歩踏み込んで、デザインスペックの確認方法とデザインスペックからアセットを抽出する方法を確認してください。

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

コミュニティで質問

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

アドビのロゴ

アカウントにログイン