Adobe XD インタラクティブプロトタイプからデザインスペックを表示して、フロー、計測値およびスタイルをリアルタイムで検証しましょう。

デザインスペック [ベータ版] 機能はごく初期段階のものであり、デザイナーと開発者間の通信を改善します。デザイナーは開発者と共有する目的で、XD に公開 URL を生成できます。リンクにアクセスするときに、開発者はデザインのフロー、計測値およびスタイルの調査をリアルタイムで実施できます。

注意:

現在、デザインスぺックはベータ機能です。ベータ版とマークされている機能は、次のようなものです。

  • この機能は、より規模の大きなワークフロー(デザイナーが開発者にデザインを受け渡すこと)内のユースケースのサブセットに対応します
  • ベータ版のラベルを外す前に、要求に応えて機能のさらなる拡大に対処する予定です。
  • この機能のご利用と提供は予告なく変更される場合があります。
  • アドビが提供する他の機能と同じ品質およびパフォーマンスを期待できます。

作業を開始する前に

注意:

この機能は英語でのみ使用できます。

デザインスペックを表示するには、次のものが必要です。

  • (デザイナーから受け取る)デザインスペックへのリンク
  • デスクトップブラウザーとインターネット接続(携帯電話やタブレットなどのモバイルデバイスでは表示できません)
  • Adobe ID

Adobe ID をお持ちでない場合は、「新規登録」をクリックしてお使いの電子メールアドレスとパスワードを入力します。アカウントをお持ちの場合は、お使いの Adobe ID、または Facebook や Google の資格情報を使用してログインします。

ログインしてデザインスペックを表示する
ログインしてデザインスペックを表示する

エンドユーザーの操作性を表示するワークフロー

ログインすると、開発者はデザインスペックのすべての画面を一度に確認できます。開発者は「UX フロー」ビューを使用して、デザインスペックを操作したり、各画面に関連付けられているフローやトランジションを分析したりできます。

デザインスペックのすべての画面が表示されるこのビューは非常に便利です。これにより、開発者は次のことを把握できます。

  • 開発する必要がある画面の数(開発作業のプランニングに便利)
  • デザインスペックのシーケンスとフロー(エンドユーザーのワークフローの把握に便利)
  • デザインスペックの最終更新日
プロジェクトの概要を提供する「UX フロー」ビュー
プロジェクトの概要を提供する「UX フロー」ビュー

このビューでは、次のことも実行できます。

  • 特定の画面を名前で検索してそれを表示する。
  • 個々の画面にマウスカーソルを合わせてお互いの接続方法を確認する。 
  • ズームインおよびズームアウトして詳細を表示する。

デザインの仕様を調べる

個々の画面をクリックして詳細を表示します。画面の右に、その画面で使用されている固有の色や文字スタイルをすべて確認できます。右の色や文字スタイルにマウスカーソルを合わせると、画面でそれらが使用されている場所のインスタンスを確認できます。

色または文字スタイルをクリックしてコピーします。

個々の画面の詳細を表示する
個々の画面の詳細を表示する
テキストのプロパティを調べる、文字スタイルとコンテンツをコピーする、計測値を表示する
テキストのプロパティを調べる、文字スタイルとコンテンツをコピーする、計測値を表示する

色の形式を変更できます。例えば、HSLA で作業する場合は、ドロップダウンリストを使用して色の形式を HSLA に変換します。この変更はセッションを通して有効で、別の画面を表示するときに同じ色の形式が使用されます。

色の形式を変換する
色の形式を変換する

画面上のオブジェクトの計測値を調べることができます。画面上のエレメントを選択し、その高さと幅の座標を表示します。

オブジェクト間の間隔を調べるには、一方のオブジェクトを選択し、画面上のもう一方のオブジェクトにマウスカーソルを合わせて相対的な距離を確認します。

オブジェクトの計測値を調べる
オブジェクトの計測値を調べる

画面上のテキストのプロパティを調べることもできます。テキスト行を選択し、その文字スタイルを確認します。デザインスペックから文字スタイルやコンテンツをコピーすることもできます。

Adobe XD はユニットがなく、エレメント間の関係性に焦点を当てます。例えば、375x667 ユニットで iPhone 6/7 のアートボードをデザインし、10 ユニットのフォントサイズを使用している場合、デザインを物理的に拡大縮小しても関係性は変わりません。

ただし、デザインスペックでは、高さと幅の計測値、および X 軸 と Y 軸は px、dp または dt 単位で表示されます。デザインスペックで測定単位を変更することもできます。この機能では、必要な数値と測定単位(px、dp、pt)をコピー&ペーストできます。

測定単位を変更する
測定単位を変更する

画面間を移動する

ログインしてデザインスペックを表示すると、スペック内のすべての画面の概要を確認できます。そこから個々の画面をクリックして画面間を移動できます。

画面間を移動する
画面間を移動する

画面下部で、ホームアイコンをクリックしてホーム画面に移動します。左右の矢印を使用して画面間を移動することもできます。 

画面のリンクオブジェクトをクリックすると、ターゲット画面が右に表示されます。ターゲット画面をクリックしてその画面に移動します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

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