業務のさらなるスピードアップを：Adobe XDでIllustratorファイルを開く #AdobeMAX #AdobeXD #Illustrator

細かく作り込まれたアイコンのような複雑なベクター画像を扱うデザイナーの方なら、最も精密で正確な表現を行うためにさまざまなツールや手法を試してこられたと思います。そういう方は、現在入手可能なツールの中で、ベクター画像を最も複雑かつ精確に描画できるAdobe Illustratorをお選びいただいているでしょう。

IllustratorはMacとWindowsで動作し、最初のバージョンをアドビが開発したのは30年以上も前のことになります。この記事を読んでいる方よりも年上かもしれません。Illustratorは今も年々進化し続けています。Illustratorの歴史を追ったドキュメンタリー動画がありますので、ぜひご覧ください。

米国ジョージア州アセンズ在住の著名なUI/UXデザイナーで、Illustratorを使ってフローチャートやワイヤーフレームを含む大規模なファイルを制作するマット スミス（Matt Smith）氏は次のように語っています。「私がIllustratorでUXデザインを始めたのは2007年ごろのことです。その頃には既にアドビ製品を使っていたのですが、代理店からの情報アーキテクトの仕事を受け、ざっくりしたワイヤーフレームを簡単に作れるツールを探していたところ、Illustratorがぴったりだったのです。」

https://blog.adobe.com/media_d36ea8c32c75c889f120d0a497fa2ee3df0bd065.gif

マット スミス氏がIllustratorで作成したワイヤーフレームの例

現在、世界中のデザイナーがUI/UXデザインにIllustratorを使っています（ただしワイヤーフレームについては、よりスピーディに作成できるAdobe XDが好まれるようです）し、その大半は、アプリやWebサイトで使えるクリーンなSVGコードに変換できるアイコンなどの精細なベクター画像をIllustratorで作成しています。

https://blog.adobe.com/media_75e46e8069d1c2ad46a96fd530b1548916fcc2ec.gif

Illustratorで作成されたアイコンの世界最大のライブラリ、Streamline Icons

Illustratorで作成したベクター画像をAdobe XDで活用する方法

オプション1：コピー＆ペースト

IllustratorのコンテンツをAdobe XDなどの別のツールで使いたいと思った時に、最初に思いつくのはコピー＆ペーストでしょう。Illustrator上でエレメントをコピーすると、SVGがメモリされ、これをXDのワイヤーフレームにペーストすることになります。このやり方にはいくつかの制限があります。SVGではサポートされていない異なる設定のストロークを使っていた場合、それはコピー＆ペーストされません。また、クリップボードが保持できるファイル容量には上限があります。

アドビでは将来的に、XD上でコピーしたエレメントをIllustratorにSVGとしてペーストすることができるようにする計画です。現在は、XDのベクター画像をIllustratorにペーストする際はビットマップに変換されます。

XDのベクター画像をそのままIllustratorに持って行きたい場合、XDからそのエレメントをSVGとして書き出して、Illustratorに持って行くという手順になります。

オプション2：Creative Cloudライブラリ

Illustratorの中からベクター画像をCCライブラリに追加し、XDで取り出して使うというやり方です。この手法のメリットは、CCライブラリからエレメントをXDにドラッグすると、ライブラリへのリンクを保ったままドキュメントに追加されることです。CCライブラリの該当するアセットを右クリックして［編集］を選択するとIllustratorが起動し、変更を加えたうえで［保存］すると、リンクが生きているため、XD上に配置されたエレメントにもすぐにその編集内容が反映されます。なお、リンクを外したい場合は、XD上に表示される緑色のリンクアイコンをクリックします。

https://blog.adobe.com/media_5dbcf155e4b51f1778a0d056e4a289af699fb7ae.gif

CCライブラリを使ってIllustratorで作成されたベクター画像を、リンクを保ったままXDで活用する

オプション3：XDでAiファイルを開く（これを推奨します）

3番目の手法は、XDで直接Illustratorファイルを開く方法で、忠実度が高いためこれをお勧めします。**そうです、XDで.aiのファイルを開くことができるのです。**XDはPhotoshopファイル、Sketchファイルを開くことができましたが、今回これにIllustratorファイルが加わりました。

既にご理解いただいていると思いますが、XDの開発にあたってはユーザーの皆様からのフィードバックを最重要視しています。Illustratorファイルの読み込みは、UserVoiceで1,000以上の賛成票を集めた、最も望まれていたリクエストのひとつで、ついに皆様に提供できるようになりました。この機会を利用して、数々の建設的なフィードバックでXDの改良に貢献いただいた素晴らしいXDコミュニティに改めて謝意を表したいと思います。

1つまたは複数の.aiファイルをXDで開くには、以下の4つの方法があります。

**シンプルなものであれ複雑なものであれ、あらゆるシンボルとアートワークは、1対1の視覚的忠実度を保った編集可能なファイルとして読み込まれます。**コピー＆ペーストした場合とは異なり、アートボードが保持され、レイヤー構造全体がレイヤー名や順序を含め正確に保たれるため、XDに取り込んでから内容を再整理するという煩雑な作業がなくなります。

注：IllustratorファイルをXDで開いた場合、完全に元のままとはならない要素があることにご注意ください。対応非対応の一覧はこちらのSupported elements when you open Illustrator files in XDをご参照ください。

マット スミス氏は次のようにも語っています。「もし既にIllustratorでデザインしている人なら、基本操作の多くが共通しているXDへの移行は極めて簡単でしょう。XDのよりシンプルでUIにフォーカスしたツールセットはインタラクティブデザイン向きだと言えます。加えて、プロトタイピング機能、リピートグリッド、CCライブラリのアセット活用など、XDはアドビの製品群の価値を大きく高めるツールです。」

もし「ベクター画像がXDで作れるのだったらIllustratorはもういらなくね？」とお考えでしたら、まずIllustratorは極めて複雑なベクター画像の制作に適していると答えます。同様に、Photoshopは極めて複雑なビットマップの制作に適しています。XDは優れたツールですが、IllustratorやPhotoshopの代わりが務められるわけではありません。XDは、UXデザイナーがエクスペリエンスをデザインし、プロトタイプを作成し、共有し、そのプロセスを反復して習得していくためのハブとなるものです。

XDとIllustratorのリンクされたシンボル

XDがリンクされたシンボルに対応し、他のファイルにコピーされた場合にも単一の元ファイルを持つことができるようになったことで、スタイルガイド（カラー、テキストなど）やデザインシステム（ボタン、カードなど）を含むIllustratorファイルからアセットを持って来られるようになりました。これを行うためには、対象のIllustratorファイルをXDで開き、XDの新規ドキュメントに追加してシンボルを作成し、そのドキュメントの場所をチーム内でシェアします。誰かがそこからシンボルをコピーした場合、マスターのドキュメントに追加された変更は、そのリンクされたシンボルがペーストされたすべてのファイルに反映されます。他のドキュメントと同様、これらのドキュメントを使用したXDプロトタイプを作ってステークホルダーにリンクを送ってレビューを依頼できます。あるいは書き出し指定されたアセットを必要とする開発者にリンクを送ることもできます。

これからも引き続き、より多くのIllustratorファイルの機能をそのままXDに読み込めるよう開発を続けていきます。さらなる発表にご期待ください。

ソーシャルメディア

日本語でのアップデート情報やUI/UXデザインの情報は、本ブログ以外にもFacebookページ「Adobe XD Japan」で配信しています。ページを「いいね！」しておけば、自分のタイムラインに情報が流れてきますのでぜひご活用ください。また、Twitterでの配信は@AdobeXD（英語）が積極的に行っており、ハッシュタグ #AdobeXD を付けて投稿すればXDチームにも届きます。

日本のユーザーコミュニティ

日本のユーザーコミュニティが各地で立ち上がり、ほぼ毎月XDの勉強会を開催したり、使い方やTipsなどの情報共有など、積極的な活動をおこなっています。
東京 Adobe XD Meeting
福岡 Adobe XD Meeting
大阪 Adobe XD Meeting
仙台 Adobe XD Meeting
ご興味のある方はぜひご覧ください。

#MadeWithAdobeXD

Behanceでプロトタイプをシェアする際は、タグに#MadeWithAdobeXDを付け、使用ツールにAdobe XDを設定してください。AdobeXD ニュースレターで紹介させていただく場合があります。

__
Adobe XD をダウンロード

この記事は、2018/10/15（米国時間）にポストされたFaster Together: Opening Illustrator Files in Adobe XDを抄訳したものです。