Adobe XD 2018 年 10 月リリース

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

xd-mnemonic

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

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


Overview

Adobe XD 14 の新機能

クラウドネイティブのドキュメントとリンクされたシンボルによる共同作業の改善

Cloud-Doc

Adobe XD には、新しいクラウドネイティブドキュメントタイプであるクラウドドキュメントが導入されています。これは、ドキュメントを管理、共有、および最新の状態に維持するための迅速で便利な方法をユーザーに提供します。クラウドドキュメントは自動的に保存されるため、最新の状態が保たれ、オフライン時でも様々なデバイスからアクセスできます。クラウドドキュメントでは、クロスドキュメントアセットもサポートされています。これにより、あるローカルファイルのシンボルをローカルファイルシステムにある別のソースファイルにリンクすることができます。

以下の方向にアセット(リンクされたシンボル)をリンクすることもできます。

  • クラウドドキュメントから別のクラウドドキュメントまたはローカルファイルに
  • ローカルドキュメントからクラウドドキュメントに

反転オブジェクトを使用したより高速で正確なデザイン

反転オブジェクト機能を使用すると、オブジェクトを縦方向または横方向に反転できます。反転は、アートボード、リピートグリッド、シンボルを除くすべての基本要素で機能し、適用されるとオブジェクトの現在の回転に追加で適用されます。

詳しくは、オブジェクトの反転を参照してください。

オブジェクトの反転
オブジェクトの反転

レイヤーパネルでの検索を使用した生産性の向上

レイヤーパネルで検索およびフィルター機能を使用し、レイヤー名で検索したり、テキスト、シェイプ、画像のカテゴリーでレイヤーをフィルターすることができます。検索エクスペリエンスは、レイヤー構造(展開したグループなど)なしで、キーワードを含む関連するレイヤーとアートボードのみを表示するように最適化されています。これは、アートボード間で自動アニメーションレイヤーを使用するときに非常に役立ちます。

詳しくは、レイヤーの操作を参照してください。

レイヤーパネルでの検索
レイヤーパネルでの検索

カンバスでのリンクされたシンボルのプレビュー

アセットパネルでリンクされたシンボルの更新アイコンをロールオーバーすることで、キャンバス上のリンクされたシンボルの更新をプレビューできるようになりました。

詳しくは、リンクされたシンボルの更新をプレビューするを参照してください。

リンクされたシンボルの更新をプレビューする
リンクされたシンボルの更新をプレビューする

ワークフローの共有に関する UI の変更

  • 新しいドキュメントの共有メニュー
  • プロトタイプを公開」は、「プレビューのための共有」になりました
  • デザインスペックを公開」は「開発のための共有」になりました
  • 公開済みリンクを管理」は「リンクを管理」になりました
share

Adobe Illustrator からのレイヤーの保持による視覚的な忠実度の向上

Ai からアセットをコピーして XD にペーストすると、レイヤーの視覚的な忠実度、構造、効果は Ai でデザインされていたとおりに保持されます。このワークフローは、Ai の読み込みと同様のものになりました。

Photoshop、Illustrator、After Effects との親和性の統合

Illustrator および Photoshop コンテンツを変換するときに、新しいオプション(ファイル/読み込み)を使用して Photoshop または Illustrator コンテンツを既存の XD ドキュメントに追加できます。さらに、スマートオブジェクトは変換時に完全に編集可能な状態(統合されるのではなく)のままになり、Photoshop 調整レイヤーが保持されるようになりました。

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

モバイルデバイスでのプロトタイプの表示

フルスクリーンのデフォルトモード、ナビゲーション矢印を表示するピンチ、ホームボタン、プロトタイプ情報、懸念事項の報告など、モバイル Web ブラウザーでプロトタイプを表示するときに、いくつかの改良が追加されました。

ズームインされた表示
ズームインされた表示
パンビュー
パンビュー

詳しくは、モバイルデバイスでプレビューを参照してください。

強化された SVG の書き出し

XD やデザインスペックから .svg 要素を書き出す際、「プレゼンテーション属性」スタイリングを使用した書き出しオプションが用意されたため、Android Studio で XD からエクスポートされた SVG を使用するなどの一般的な開発シナリオとの互換性が向上しました。

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

Wacom とタッチのサポートの強化

Adobe XD を使用する場合、タッチスクリーンの Windows デバイス、Mac トラックパッド、Wacom タブレット、タッチパッド、タッチリングで、選択したオブジェクトを 2 本指で回転できるようになりました。

Web コメント UI のアフォーダンスの強化

Web コメント UI のアフォーダンス
Web コメント UI のアフォーダンス

Web プロトタイプまたはデザインスペックのいずれかを開くと、右のレールに表示されたコメントアイコンの上に灰色のマーカーとカウントが表示さるようになりました。カウントは、アートボード上の解決されていないコメントスレッドの総数を表します。新しいコメントを追加するか、既存のコメントを解決済みとマークすると、それに応じてカウントが更新されます。

Adobe XD 13 の新機能

音声コマンドと音声再生を使用したデザインとプロトタイプの作成

音声コマンドと音声再生
音声コマンドと音声再生

Adobe XD は、使用が簡単なソリューションを提供し、音声コマンドを使用してアートボード間の対話をトリガーすることができます。クリックタップトリガーとして使用する場合と同様に、音声を使用してプロトタイプのインタラクションおよび音声再生をトリガーアクションとしてトリガーすることができます。音声再生を使用すると、強力なテキスト読み上げエンジンにアクセスして、音声アシスタントやスマートスピーカーなどの新しいプラットフォーム向けのデザインを作成することができます。詳しくは、音声デザインとプロトタイプ作成を参照してください。

音声コマンドと音声再生の使用について詳しくは、次のビデオをご覧ください。


自動アニメーションとジェスチャードラッグによるオーサリングと再生

Auto-aminamte--1(source)
動作時の自動アニメーション

自動アニメーションでは、臨場感あふれるアニメーション化されたトランジションでプロトタイプを簡単に作成できます。アートボードを複製し、サイズ、位置、回転などのオブジェクトプロパティを変更し、自動アニメーションアクションを適用して、アートボード間のアニメーションによるトランジションを作成するだけです。自動アニメーションを使用するには、アニメーション化するオブジェクトのレイヤー名が、2 つのアートボード間で同じであることを確認します。詳しくは、自動アニメーションを使用してプロトタイプを作成するを参照してください。

XD のドラッグジェスチャーでは、タッチ対応デバイスのドラッグ体験をシミュレートすることで、自動アニメーション機能をさらに一歩先に進めることができます。詳しくは、動作時のドラッグジェスチャーを参照してください。

自動アニメーションについて詳しくは、次のビデオをご覧ください。


リンクされたシンボルとのドキュメント間アセット共有

Linked-Symbol-Concept

組織内のデザインチームが増加するのに加えてデザインサーフェスがますます増加する中で、デザイナーは一貫したスケーラブルなデザインを共同で作成する必要があります。リンクされたシンボルを使用すると、デザイナーはドキュメント間でシンボルを共有してそれを最新の状態に保つことができます。

リンクされたシンボルにより、UI キット、ステッカーシート、またはスタイルガイドの信頼できる単一のソースを作成および保守し、他の Adobe XD ドキュメントでそれらを使用できます。ソースドキュメントでリンクされたシンボルを変更した場合、XD により、これらの更新のあるそのリンクされたシンボルのインスタンスを持つドキュメントに通知されます。そこから、変更を確認するか、その変更を受け入れるか拒否するかを選択できます。詳しくは、リンクされたシンボルの使用を参照してください。

リンクされたシンボルについて詳しくは、次のビデオをご覧ください。


プラグインによるデザインツールの革新

Plugin

Adobe XD はプラグインの最初の波を起こし、これにより、タスクの自動化、他のツールとの統合、デザイン内のデータの活用などが可能になります。また、これは、Slack、JIRA、Microsoft Teams など、市場で最高峰の共同作業および生産性アプリケーションの一部とも連携します。

プラグインを初めて使用する場合は、XD のプラグインを参照してください。

Illustrator と After Effects を使用したシームレスなアセット転送

Illustrator からのインポート
Illustrator からのインポート

Adobe XD 13.0 以降、Adobe XD 内から .ai ファイルを開くことで Illustrator からレイアウトデザインとアセットを転送できます。高速で便利な新しいワークフローを使用すると、レイヤー、アートボード、アートワーク、ベクターのネイティブマッピングにより、アセットをできる限り高い視覚的な忠実性でシームレスに転送し、UX プロセスの様々な段階で共同作業環境を合理化できます。詳しくは、XD で Illustrator ファイルを開くを参照してください。

特長:

  • プロトタイプでの Illustrator アセットのシームレスな使用:アイコン、ロゴ、他のベクターアセットを XD に転送し、Illustrator で作成された UI キットまたはフルライブラリを使用すると同時に、十分な編集性と視覚的な忠実性を備えたままレイヤーを保持します。
  • インタラクティブデザインを作成するための共同作業:XD で Illustrator ファイルを開き、XD の強力なプロトタイプと共同作業機能を使用します。

Illustrator との統合について詳しくは、次のビデオをご覧ください。


Animate と After Effects
Animate と After Effects

Adobe XD 13.0 リリースでは、XD デザイン(選択したレイヤーまたはアートボード全体)を After Effects に簡単にエクスポートして、カスタム UI アニメーションやミクロインタラクションを生成できます。レイヤー、アートボード、アートワーク、ベクターを視覚的に同等の忠実性でシームレスにエクスポートし、After Effects の強力なプラグインエコシステムを使用してデベロッパーとの共同作業を合理化することができます。詳しくは、アセットを After Effects にエクスポートするを参照してください。

特長:

  • アニメーションを十分にコントロールできる:After Effects を使用してデザイナーは、カスタムアニメーションやミクロインタラクションを生成したり、トランジションを微調整したり、デザインでビデオアセットを使用したりすることができます。
  • シームレスなアセット転送:この統合により、迅速なアセット転送と、レイヤー、ベクター、アートワークのネイティブマッピングを利用できるようになり、デザインからカスタムアニメーションまでの所要時間が短縮されます。
  • プラグインを活用する:After Effects の UX デザインプロセスに合わせたプラグインエコシステムを使用して、アニメーションやデベロッパーとの共同作業を拡張することができます。

iOS での Win10 ライブデバイスプレビュー

Mobile-Preview

XD 13.0 以降、Windows OS を使用するデザイナーは USB 接続を使用して iOS でデザインをプレビューできます。詳しくは、モバイルデバイスでプレビューを参照してください。

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

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