Adobe XD から公開されたデザインスペックを表示することで、フロー、計測値およびスタイルを調査できます。

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

注意:

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

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

作業を開始する前に

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

  • (デザイナーから受け取る)デザインスペックへのリンク
  • デスクトップブラウザーとインターネット接続。サポートされるブラウザーのバージョンの詳細については、必要システム構成を参照してください。

注意:モバイルブラウザーによるデザインスペックの表示はサポートされないか、非推奨です。

  • Adobe ID

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

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

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

ログイン後、開発者は「UX フロー」ビューでアートボードのシーケンスとフローを表示できます。

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

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

このビューで、次の操作を実行できます。

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

デザインスペックの使用中に、ガイドとしてアプリ内ヘルプが利用できます。通知が画面の下部に表示され、パンとズームおよびコピー&ペースト機能に関するヒントが提供されます。 

デザインスペックに 2x 画像が読み込まれない場合にも通知が表示されます。 

デザインの仕様を調べる

デフォルトのビューでは、画面で使用される色と文字スタイルが表示されます。アートボードをクリックして、アートボードのサイズを表示します。

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

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

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

色の形式を変更する

色の形式を変更できます。例えば、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 の規約内容は適用されません。

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