マニュアル キャンセル

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

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

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

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

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

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

{} アイコンをクリックして、変数タブに切り替えます。このタブは、デザイナーが 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 コミュニティにぜひご参加ください。皆様からのご意見や作品をお待ちしております。

ヘルプをすばやく簡単に入手

新規ユーザーの場合