私の好きなXDのTips［主観多め］

こんにちは！マイロプスのデザイナーの石動です。

今回は、最近愛用しているアプリケーションAdobe Experience Design CC（以下 XD）について書いてみようと思います。

XDとはWEBサイトのレイアウトやプロトタイプが組めるアプリケーションです。
WEBサイトのレイアウトが出来るアプリケーションはAdobe Creative Cloudの中ですとPhotoshopやIllustratorもありますが、この3つのアプリケーションを試したところ、私は断然XDで組むのが好きだなと思いました。
（紙媒体のデザインをやっていたためIllustratorは比較的使い慣れていましたがPhotoshopのどんどんレイヤーを増やしていくレイアウト手法は重たく感じて特に苦手でした、、）

XDを活用している方はほとんどご存知かと思いますが、
私個人的にXDのこれは便利！好き！！と思ったTipsを4つご紹介いたします〜

動作の速度が早くて軽い

まずは、なんといってもXDはアプリの起動が早くサクサク動いてくれるところが好きです。

例えば、PhotoshopやIllustratorは起動に数十秒かかりますが、XDは私のマシーンだと10秒程度で操作を始めることが出来ます！ さらにアートボードを何枚作っても動作が全然重くならないのでストレスフリーで作業できるのが魅力です。

プロトタイプが作れる

これが一番XDの魅力ではないかと思います。
モックアップの段階でページ同士を行き来することができるので、お客様に早い段階で動作や遷移などを確認するできます。
WEBサイトやアプリケーションはやはり"眺める"のではなくクリックしたり移動したり"体感"するものなので、使用感を確かめながらどんどんブラッシュアップできるプロトタイプは今や欠かせない要素です。

繰り返しのパターンが得意

紙媒体のデザイナー出身の私ですが、WEBのデザインは特にパーツやパターンの繰り返しが多いです！

そこで活躍してくれるのがリピートグリッドという機能です。
一つのエレメントを作成後、リピートグリッドのボタンを選択してからエレメントを引っ張るだけで複製してくれます。
予めアセットにフォントやカラーのスタイルを登録しておけば、アセットからスタイルを一箇所編集するだけでリピートしたエレメントにも全て反映がされるのでとっても効率的です。

参考
https://helpx.adobe.com/jp/xd/help/create-repeating-elements.html

ライブラリーでPhotoshopやIllustratorと連携ができる

Creative Cloudから登場したライブラリのおかげでPhotoshopやIllustratorと連携することができます。

XDは最初、モックアップ専用のソフトの認識があり、モックアップを組んだあとにデザインの細かい調整をするためにPhotoshopやIllustratorに落とし込んでからコーディングへ移る流れで作業しておりましたが、XDでコーディングまでいければ楽なのにな〜と思っていました。

先日伺ったMTDDCのイベントで登壇された黒野明子さんによると、adobeのライブラリを使えばIllustratorとPhotoshopを連携することが出来るとのことで、下記の役割分担が効率的とのことでした。

• XD　→　レイアウトデータ
• Illustrator　→　ベクターデータ
• Photoshop　→　bitmapデータ

つまり、XDで受け口（レイアウト）を作成し、bitmapデータ（画像関係）はPhotoshopで作成したものを配置し、ベクターデータはIllustratorで配置するやり方ですね。
これなら、XDでモックアップを作成したデータを利用してコーディングまで行けることに気づき感動しました！

XDが日本で2016年3月にロンチされたそうですが、私が本格的にWEB業界へ入ったのが2017年なので大げさでなく、その頃に存在してくれていて本当に良かったです。

以上、XDについての記事でした。最後まで読んでいただきありがとうございました！
まだまだ勉強中のXDですが参考、もしくは共感いただけたら（笑）幸いです！