Adobe XD の 2018 年 8 月、2018 年 9 月、および 2018 年 10 月リリース
xd-mnemonic

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

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


Adobe XD 14 の新機能

クラウドネイティブのドキュメントによる共同作業の改善

Cloud-Doc

Adobe XD には、新しいクラウドネイティブドキュメントタイプであるクラウドドキュメントが導入されています。これは、ドキュメントを様々なデバイス間で管理、共有、および最新の状態に維持するための迅速で便利な方法をユーザーに提供します。 

XD デザインをクラウドドキュメントとして保存して最新の状態を保ち、オフライン時でもアクセスできるようにすることができます。その後、他の Creative Cloud ユーザーと共有し、共同作業に招待することができます。オンラインに戻ると、作業内容は自動的にクラウドに保存されます。

クラウドドキュメントでは、クロスドキュメントアセットもサポートされており、クラウドドキュメントからシンボルをリンクすることができます。

クラウドドキュメントの操作については、このビデオをご覧ください。


クラウドドキュメントの導入は、XD モバイル版でのドキュメントの保存方法とアクセス方法にも影響を与えます。詳しくは、モバイルでのクラウドドキュメントの使用XD クラウドドキュメントクラウドドキュメントの管理を参照してください。

クラウドドキュメントを操作するときのモバイルエクスペリエンスについては、このビデオをご覧ください。


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

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

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

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

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

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

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

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

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

アセットパネルでリンクされたシンボルの更新アイコンをロールオーバーし、コミットする前にカンバス上のリンクされたシンボルの更新をプレビューします。

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

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

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

14_0-release-share
旧用語 新用語 ワークフロー
該当しません ドキュメントを共有 レビュー用にクラウドドキュメントを共有します。
プロトタイプを公開 プレビューのための共有 レビュー用にプロトタイプを公開して共有します。
デザインスペックを公開する 開発用に共有 レビュー用にデザインスペックを公開して開発者と共有します。
公開済みリンクを管理 リンクを管理 assets.adobe.com からリンクを管理します。
ビデオを録画 ビデオを録画 自動アニメーションで作業するとき、アートボード間のインタラクションのビデオを録画します。インタラクティブプロトタイプがある場合は、すべてのインタラクションが .mp4 ファイルとして記録されます。

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

Adobe Illustrator から XD へのコピー&ペーストが改善され、レイヤーの視覚的な忠実度、その構造、効果が Adobe Illustrator で設計されたとおりに保持されます。このワークフローは、Illustrator からの読み込みと同様のものになりました。

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 プロトタイプまたはデザインスペックのいずれかを開くと、右のレールにあるコメントアイコンの上に灰色のマーカーとコメントカウントを表示できます。カウントは、アートボード上の解決されていないコメントスレッドの総数を表します。新しいコメントを追加するか、既存のコメントを解決済みとマークした場合、カウントが自動的に更新されます。

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

Adobe XD 13 の新機能

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

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

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

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


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

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

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

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

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


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

Linked-Symbol-Concept

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

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

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


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

Plugins-updated

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 でデザインをプレビューできます。詳しくは、モバイルデバイスでプレビューを参照してください。

Adobe XD 12 の新機能

 XD の 2018 年 9 月リリースには、次のような魅力的な新機能が用意されています。

機能強化には、次のようなものがあります。

詳細な説明は以下のとおりです。

レスポンシブサイズ変更とコンストレイント

近年では数々なデバイス向けのデザインを作成する必要があるため、モバイル、タブレット、デスクトップの解像度で使用される様々な画面サイズを考慮することが重要です。すべてのデザイナーが同じデバイスを使用しているとは限らないため、様々な画面サイズでのコンテンツの動作を考慮する必要があります。 

ユーザーのこの問題を解決するため、Adobe XD はレスポンシブサイズ変更と呼ばれる機能を開発しました。これにより、オブジェクトのサイズを変更する際、空間関係を維持しながら様々な画面サイズに最適なサイズで適応させることができます。レスポンシブサイズ変更とコンストレイントの詳細については、レスポンシブサイズ変更を参照してください。

レスポンシブサイズ変更についてさらに詳しく知るには、こちらのビデオをご覧ください。


レスポンシブサイズ変更
レスポンシブサイズ変更 出力
オブジェクトグループにコンストレイントを設定する
オブジェクトグループにコンストレイントを設定する

時限式トランジション

時限式トランジションは「遅延と間隔」の組み合わせを、新しいタイプの「時間トリガー」としてアートボード間のトランジションに適用し、 オンボーディングのフローとループを迅速化します。

時間を追加することで、アートボード間で特定の時間遅延に基づいたトランジションを設定できるようになりました。オンボーディングのプロトタイプ化やフローを決定する際に利用すると便利です。

プロトタイプモードで 2 つのアートボード間のトランジションを作成する場合、「時間」を「タップ」の代わりに選択して、遅延間隔と実行するトランジションを定義できるようになりました。すると、XD が同一の画面から属性を保存し、他の画面のデフォルトとして提供します。 時限式トランジションの詳細については、時限式トランジションを使用するを参照してください。

時限式トランジションについてさらに詳しく知るには、こちらのビデオをご覧ください。


時限式トランジションを設定する
時限式トランジションを設定する

A. 時間にトリガーを設定する B. 遅延を秒単位で設定する C. トランジションにアクションを設定する D. 間隔を秒単位に設定する 

組み込みスペルチェック

Adobe XD では、デザインカンバスでリアルタイムにスぺルチェックを行う組み込みスペルチェックを採用しています。この機能は OS の言語に基づいて修正を行います。 また、辞書に新しい単語を追加することも可能です。

これまでは、コンテンツを別のアプリケーションにコピーまたはペーストしてスペルや入力ミスをチェックする必要がありました。 

これからは、選択したテキスト上でスペルチェックを実行、確認し、ミスがあればその場で修正することができます。

注意:

スペルチェックを開始する前に、「編集」メニューのスペルチェック機能が有効になっているか確認してください。

スペルチェック
スペルチェック

スペルチェックについて詳しくは、スペルチェックを使用するを参照してください。

Web プロトタイプのフルスクリーン表示の改善

Adobe XD でフルスクリーンモードの動作が改善され、ブラウザーでデザインを表示する際のユーザーエクスペリエンスが向上します。

黒いリボンのない状態で Web とカスタムアートボードをブラウザー上部に表示できるようになりました。フルスクリーンモードの場合、モバイルアートボードは引き続き画面中央に表示されます。

これらの拡張機能は、ブラウザーで Web サイズのアートボードを表示する際に、より現実的なエクスペリエンスを提供します。

Web プロトタイプのフルスクリーンモードの改善機能についてさらに詳しく知りたい場合は、こちらのビデオをご覧ください。


Full-screen-(Before)
これまでの動作
Web プロトタイプのフルスクリーンモードのスケーリングの改善
改善された動作

ブラウザーの背景色は常に白く、初期設定では黒い背景色を追加しないため、本来のブラウザーの動作を模倣します。

標準およびフルスクリーン表示での改善

  • アートボードの幅が有効な水平方向のスペースよりも大きい場合、水平方向にスクロールしなくても、幅に合わせてプロトタイプを縮小します。
  • ビューポートの高さ(プロパティインスペクターで設定)を定義している場合、まずプロトタイプの高さが調整され、次に縦横比を維持しながら幅が縮小/拡大されます。縦方向にスクロールしてビューポイントの高さ以下のコンテンツを表示することもできます。
  • 設計されたプロトタイプが Web またはカスタムアートボードの場合、フルスクリーンモードの Web ブラウザーに公開されているリンクのコンテンツはブラウザーウィンドウの上部に表示されます。 モバイルやタブレットのデザインでは、引き続き画面中央に整列されます。
  • フルスクリーンモードの背景色は黒ではなく白になります。初期設定では黒い背景色を追加しない、本来のブラウザーの動作を模倣します。

モバイルアートボード表示での改善

  • コンテンツの高さに合わせて、縦横比を維持するように幅を調整します。
  • Web ブラウザーのフルスクリーンモードで公開されたリンクを表示すると、コンテンツがブラウザーウィンドウの中央に表示されます。 

Adobe XD 11 の新機能

XD の 2018 年 8 月リリースには、次のような魅力的な新機能が用意されています。

機能強化には、次のようなものがあります。

以下にこれらの詳細を説明します。

デザインスペック用のアセットの抽出

XD 11.0 以降、バッチ書き出し用にマークされたレイヤーをデザインスペックにアセットとして含めることで、開発者はこれらのマークされたレイヤーすべてをデザインスペックリンクからダウンロードできます。

次に、開発者はベクターアセットを SVG、PNG、PDF として、ビットマップアセットを PNG、PDF としてダウンロードできます。

アセットの書き出し
バッチ書き出し
バッチ書き出し

詳しくは、デザインスペック用のアセットの抽出を参照してください。

アセットパネルでのアセットの並べ替え

Adobe XD のこのリリースでは、アセットを「アセット」パネルにドラッグして、整理したり、並べ替えたりすることができます。

アセットの並べ替え
アセットの並べ替え

詳しくは、アセットパネルでのエレメントの並べ替えを参照してください。

Web での非公開招待状

Adobe XD を使用すると、Web インターフェイス内からデザインスペックやプロトタイプの安全な名前付き招待状(公開および非公開リンク)を共有できます。デザイナーが安全な名前付き招待状を公開すると、デザイナーは「招待」オプションを使用して、内部および外部のレビュー担当者を招待できます。

ブラウザーから非公開の招待状をユーザーに送信
ブラウザーから非公開の招待状をユーザーに送信

注意:

招待」オプションはドキュメントを所有するデザイナーにのみ表示され、招待された関係者は、デザイナーが許可しない限り、他のユーザーを招待することはできません。

詳しくは、Web での非公開招待状の使用を参照してください。

コメントの @ mention サポート

@ メンションにより、非公開デザインへの招待状にアクセスできるよう招待されたユーザー名を表示することができます。公開プロトタイプおよびデザインスペックの場合、少なくとも 1 回コメントしたユーザーのみがレビュー担当者一覧に表示されます。名前で @ メンションされたレビュー担当者は、Creative Cloud デスクトップアプリケーションからメールまたは通知を受け取ります。通知をクリックすると、参照先のアートボードに移動します。

@ mention
@ mention

詳しくは、レビュー担当者ワークフローを参照してください。

線の種類のデザインスペックサポート

XD 11.0 以降では、共有デザインスペックのオブジェクトを選択して、その枠線をクリックして、画面で使用される線を表示できます。 

線の種類
A. 線の種類 

詳しくは、デザインの仕様を調べるを参照してください。

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

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