Adobe XDを使い始めた際に戸惑ったのは「書き出し」でした。
同じAdobeのIllustratorやPhotoshopのソフトは使い慣れていたので、同じ考え方で書き出してみると、あれ？おかしいな？というような結果になってしまいました。
最初は戸惑いましたが、使い慣れてしまえばとても便利な仕様だと思います。
そこで今回は、XDを使い始めの方やこれから導入するという方に向けて、書き出し方法など簡単に解説します。
私が作業している環境は、Windowsですので、Macとは多少画面のデザインや表示が異なる場合がございますので、ご了承ください。
この記事の内容
オブジェクトの書き出し方法
IllustratorやPhotoshopだと書き出したいオブジェクトをアセットに登録したり、スライスを引いて書き出したりしますが、XDでは特にそういった設定をしなくても、オブジェクトごとに簡単に書き出すことができます。
1.選択したオブジェクトを書き出す
1つのオブジェクトを書き出したりするときにとても便利な機能です。
アセットに登録しなくても、オブジェクトを手間なく書き出す事が出来るので、1箇所のみ修正して書き出す時もすぐに対応できます。
書き出し方法ですが、まず書き出すオブジェクトを選択します。複数選択する場合は、Shiftキーを押しながら、書き出すオブジェクトをクリックしてください。
メニューの書き出しまたは Ctrl+E で「選択したオブジェクト」の項目から設定して書き出しできます。
2.一括でオブジェクトを書き出す
書き出したいオブジェクトをあらかじめ登録しておくことで、一括でオブジェクトを書き出すことができます。
書き出しの作業を始めるときに、まずこちらを設定しておく事で時間の短縮にも繋がります。
書き出し方法ですが、書き出すオブジェクトを選択すると、右のパネルの一番下に「書き出し対象にする」という項目があるので、そこにチェックマークを入れます。
すると左パネルのレイヤー項目の、選択したオブジェクトのレイヤー名の横にアイコンが表示されます。こちらをクリックしても書き出しの登録と解除を切り替えられます。
書き出すオブジェクトの登録が完了したら、メニューの書き出しまたはまたはShift+ Ctrl+Eで 「全書き出し対象」の項目から設定して書き出しできます。
アートボードの書き出し方法
デザインの確認などで必要なアートボードの書き出しも可能です。
1.選択したアートボードを書き出す
1つのアートボードのみからでも書き出すことが可能です。1箇所修正した時や、見せたいアートボードが限られてる場合に便利です。
書き出し方法
アートボード自体を選択します。メニューの書き出しまたは Ctrl+Eで「選択したオブジェクト」の項目から設定して書き出し出来ます。
2.すべてのアートボードを一括で書き出す
XD上で制作したアートボードを一括で書き出す事が出来ます。クライアントに確認するときなど、一括で書き出す事が出来るのでスムーズにデータをまとめられます。
書き出し方法
メニューの書き出しから「すべてのアートボード」の項目を設定して書き出しできます。
書き出したファイル名について
オブジェクトとアートボード共に、書き出したファイルの名前はXDのレイヤーの項目で表示されているものが割り当てられます。
書き出した後に変更するのもいいとは思いますが、書き出す前にレイヤーの項目内で名前を変更しておくと後から変更しなくて済みます。
こちらはやりやすい方で進めていけばいいと思います。
書き出しのファイル形式
先程説明したオブジェクトとアートボードを書き出す際に、選択できるファイル形式は以下のものです。
- PNG
- SVG
- JPG
各形式を選ぶとそれぞれの項目に適した書き出しの設定を選択する事が出来ます。Webサイトの制作に特化したソフトなので、iOSやAndroid用に書き出ししやすいようあらかじめ設定の選択肢が決められています。こちらは今度詳しく書かせて頂きます。
戸惑ったデザイン倍率1x、2xの謎
冒頭でも言った、おかしいな？と戸惑った点は、デザイン倍率の1xや2xという表記です。pngとjpgで書き出すときにWeb、iOS、Androidを選択すると、デザイン倍率の項目に1x、2xの選択肢が表示がされます。
この表記を私は勘違いしてしまい、1xはオブジェクトの原寸サイズ、2xはオブジェクトの2倍のサイズが書き出されると最初思い込んでいました。
実際にIllustratorのスクリーン用に書き出しする際は、その考え方で書き出しが出来ます。Illustratorは書き出すオブジェクト基準で1倍、2倍という考え方です。
一方XDの考え方は、アートボード基準です。
例えば、iPhone7のサイズでデザインをするときに、「375px × 667px」の原寸大でアートボードを制作した方は1xを選択すると、原寸大サイズ（アートボード上のサイズ）と2倍サイズ（アートボード上のサイズの2倍）の2種類が書き出しされます。
また、2倍の「750px × 1334px」でアートボードを制作した方は2xを選択すると、2倍サイズ（アートボード上のサイズ）と原寸大サイズ（アートボード上の1/2のサイズ）の2種類が書き出しされます。
自分の制作したデザインに沿った書き出しが簡単に行えて、web制作に特化したXDならではの機能です。
まとめ
今回は簡単に書き出し方とファイル形式、勘違いしてしまう倍率に関して説明させていいただきました。IllustratorやPhotoshopと比べると、デザインから書き出しの流れがスムーズに進められるので、使いやすくていいと思います。
XDはユーザーの声を元に度々アップデートを行っているので、今後さらに使いやすくなることを期待しています。
