Adobe XD 2019 年 7 月および 8 月リリース

以前のAdobe XD リリースで導入された機能の概要については、機能の概要 | 以前のリリースを参照してください。

xd-mnemonic

Adobe XDは、Webアプリやモバイルアプリ用のUXをデザインし、プロトタイプ化するためのベクターベースのツールです。ワイヤーフレーム、ビジュアルデザイン、インタラクションデザイン、プロトタイプ化、プレビュー、共有間の切り替えが簡単な、オールインワンの強力なツールです。

XDは、UX/UI デザイナー、インタラクションデザイナー、エクスペリエンスデザイナー、製品デザイナー、Webデザイナー、アプリデザイナー、ビジュアルデザイナー、起業家など、あらゆる種類のクリエイター向けのツールです。


Overview

Adobe XD 22 の新機能

Photoshop で編集

Photoshop で編集

XD では、Adobe Photoshop との統合が強化されました。これにより、Photoshop で直接 XD 画像を開いて編集し、リアルタイムでそれらを更新できます。Photoshop で画像を編集して保存すると、XD により統合されたファイルが保存され、(編集されたファイルではなく)ビットマップが XD に配置されます。 

詳しくは、外部アセットの操作を参照してください。

視聴時間:3.20 分


プラグインパネルの向上

プラグインパネル

XD の最新リリースでは、デザインキャンバスと共に、XD ユーザーエクスペリエンス内から直接 XD プラグインを起動して操作できます。レイヤーおよびアセットパネルと同様に、新しいプラグインパネルでは XD 内からプラグインを簡単に表示して変更できます。これにより、XD デザインの作業中にクリエイティブフローを維持できます。 

詳しくは、プラグインの表示とインストールを参照してください。

視聴時間:4.30 分


デザインスペックでの CSS スニペット

デザインの機能的な Web サイトへの変換を簡単にするために、デザインスペックから CSS コードスニペットをコピーして、コード内に貼り付けることができます。

CSS コードは、デザインスペックの公開時に開発用に共有ウィンドウで出力先として「Web」を選択した場合、自動的に生成されます。デザインスペックを公開すると、XD によって、選択したレイヤーの CSS コードスニペットが自動的に表示されます。

CSS スニペット
CSS スニペット

詳細については、XD でデザインスペックを確認するを参照してください。

視聴時間:2.58 分


コンポーネントの境界の改善

コンポーネントでは様々なオーバーライドがサポートされ、様々な画面サイズに合わせてシームレスにサイズ変更されますが、効果を適用したりオブジェクトを再編成したりする際に使用が困難になる場合があります。以前のバージョンの XD では、元のマスターコンポーネントの境界外にオブジェクトを追加すると、コンテンツが切り取られました。

コンポーネントの境界に関する問題の解決策として、マスターコンポーネントを選択し、右クリックして「境界をコンテンツに合わせる」を選択します。コンポーネントの境界は、インスタンスだけでなくマスターコンポーネント内のすべてのクリップされたオブジェクトを表示するように調整されます。

コンポーネントを新規作成する場合:

  • シャドウとぼかしは、コンポーネントバウンディングボックスの外でレンダリングされます。
  • 境界領域は、コンポーネント内のすべてのコンテンツに合わせられます。
境界をコンテンツに合わせる
境界をコンテンツに合わせる

視聴時間:4 分


フラクショナルピクセルの削減

HiDPI 画面用に設計する場合、フラクショナルピクセルによりコンテンツが歪みます。XD 22.0 以降では、デザインの摩擦や画像の歪みをなくすために、オブジェクト、コンポーネント、画像マスクのグループのサイズを変更するときにピクセル値が丸められます。ただし、XD 22.0 より前に作成したコンテンツの小数値は XD により保持されます。  

視聴時間:3.20 分


グリッドビューとフロービューの切り替え

すべてのアートボードのレイアウト情報を含むデザインフローの全体像を把握するには、画面の左上にあるプロトタイプ名またはデザインスペック名をクリックします。デフォルトのグリッドビューから、グリッドビューとフロービューの間を切り替えて、次を表示することもできます。

  • グリッドビューでは、すべてのアートボードがグリッド形式に配置して表示され、アートボードを確認したり、ナビゲートしたりすることができます。
  • フロービューには、デザインとレイアウトの階層を表すように、アートボードが配置されます。
グリッドビュー
グリッドビュー
フロービュー
フロービュー

詳細については、XDでのデザインスペックのナビゲートを参照してください。

Adobe XD 21の新機能

開発リンクの統合共有

XD 21.0以降では、共有される開発リンクに、インタラクティブプロトタイプ情報がデザインスペックとともに追加され、機能がさらに充実しました。共有リンク内で、スペックを表示トグルアイコンをクリックすると、デザインスペックとプロトタイプビューが切り替わります。

従来のバージョンのXDでは、デザイナーが、プロトタイプ用とデザインスペック用の2つの異なるリンクを別個に共有していました。開発者はデザイナーの意図を解釈するために、これら2つリンクを切り替えて表示せざるを得ず、コラボレーションが非効率的になっていました。

デザイナーは、デザイン意図を効率的に伝えることができ、開発者が構築に必要とするすべてのリソースを1つの共有リンクで提供できます。開発者は、インタラクションと意図された動作をより的確に理解できます。また、プロトタイプとデザインスペックを別個のリンクで共有する場合と異なり、リンクを頻繁に切り替える必要がないので、貴重な時間を節約できます。 

1つのリンクからのデザインスペックとプロトタイプの切り替え
1つのリンクからのデザインスペックとプロトタイプの切り替え

A. スペックを表示トグルアイコン 

視聴時間:2.55 分


詳細については、XDでのデザインスペックのナビゲートを参照してください。

共有リンク内のグリッドビュー

Adobe XD 21.0では、デザインスペックのUXフロービューの代わりに、効率的に移動できるまったく新しいグリッドビューが採用されました。関係者や開発者は、プロトタイプやデザインスペックのグリッドビューを使用して、最も適切なアートボードにすばやく簡単に移動できます。

XDの以前のバージョンでは、プロトタイプビューでアートボードを1つ1つクリックして最適なアートボードを見つける必要がありました。 

共有リンク内のグリッドビュー
デザインスペックリンクのUXフロートグリッドビューの比較

レビュー担当者は、グリッドビューで次の操作を実行できます。

  • すべての画面のサムネール表示
  • 特定のアートボードに対するコメント数の表示
  • アートボードを名前で検索
  • リンクされた画面アイコンをクリックして、特定のアートボードにリンクされたすべての画面を表示

これらの変更は、以下の点で開発者や利害関係者にとって有益です。

  • 開発者:UX フローの代わりに、シンプルかつ統一的なビューですべてのアートボードを表示できます。
  • 関係者:複数の画面でXDプロトタイプの間を移動し、最も適切なプロトタイプのパーツにジャンプできます
グリッドビュー
グリッドビュー

A. アートボードに対するコメント数 B. リンクされた画面のアイコンをクリックすると、リンクされた画面が表示されます C. アートボード「First Cards」にリンクされた画面 

視聴時間:2.13 分


詳細については、XDでのデザインスペックのナビゲートおよびXD でのプロトタイプの操作を参照してください。

ドキュメントプレゼンス

クラウドドキュメントに対する編集の競合と作業の重複を避けるために、XDでは、他のデザイナーが同じクラウドドキュメントを使用していることを示す視覚的インジケータが導入されました。デザイナーは、同じクラウドドキュメントで作業している他のデザイナーのプロフィールアバターを表示できます。

クラウドドキュメントプレゼンス
ドキュメントプレゼンス

ドキュメントプレゼンスについて詳しくは、XDのクラウドドキュメントを参照してください。

モバイルでのWebプロトタイプへのコメント

レビュー担当者の多くが、外出先からモバイルデバイスでプロトタイプにアクセスして、コメントを追加し、他のユーザーの意見を参照したいと考えています。 

この最新リリースのXDでは、デスクトップWebブラウザーからだけでなく、モバイルデバイスからもWebプロトタイプを表示してコメントできます。これにより、レビューサイクルが迅速化され、関係者がタイムリーかつ適切なタイミングで容易にフィードバックを提供できます。 

詳細については、Adobe XDでのプロトタイプの操作を参照してください。

モバイルでのWebプロトタイプへのコメント

視聴時間:3 分


部分テキストの表示と確認

XD 21.0以降では、テキスト要素に複数のスタイルが設定されている場合、テキスト要素内の一部分にカーソルを合わせると、テキスト要素内で、同じスタイルが設定された類似の部分がデザインスペックにより強調表示され、以前と同様、それらの個別のプロパティにアクセスできます。以前は、テキスト要素内で複数のテキストスタイルが使用されている場合、それらのスタイルを分離し、どの部分が同じスタイルを使用しているかを解明することはできませんでした。

詳細については、XDでデザインスペックを確認するを参照してください。

全体テキスト内の部分の属性
全体テキスト内の部分の属性

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

リーガルノーティス   |   プライバシーポリシー